pk画布播放器：给小辣椒的HTML加CSS播放器

马黑黑 发表于 2022-8-27 07:43

马黑黑 发表于 2022-8-27 07:44

源码（使用时请自行去掉 #player 选择器的 border 属性）：
<style>
#papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center; background: snow; box-shadow: 3px 3px 20px #000; position: relative; }
#player { padding: 10px; position: absolute; bottom: 20px; width: fit-content; height: fit-content; display: flex; gap: 10px; flex-direction: column; border: 1px solid; }
#lrctext { font: normal 1.2em sans-serif; color: olive; text-shadow: 1px 1px 2px #000; text-align: center; }
#btnwrap { width: fit-content; height: fit-content; display: flex; gap: 8px; align-items: center; }
#btnplay { outline: none; cursor: pointer; }
#btnplay:hover { color: red; }
#prgline { width: 200px; height: 2px; background: #ccc linear-gradient(red,red) no-repeat ; background-size: 1px 2px; display: block; cursor: pointer;}
#tmsg { width: auto;}
</style>

<div id="papa">
<div id="player">
<div id="lrctext">lrc歌词</div>
<div id="btnwrap">
<input type="button"id="btnplay" value="播放" />
<span id="prgline"></span>
<span id="tmsg">00:00 | 00:00</span>
</div>
</div>
</div>

<script>
let lrcAr = [
['0.01','童安格耶利亚女郎'],
['34.10','很远的地方有个女郎名字叫做耶利亚'],
['42.33','有人在传说她的眼睛看了使人更年轻'],
['50.62','如果你得到她的拥抱你就永远不会老'],
['59.15','为了这个神奇的传说我要努力去寻找'],
['66.42','耶利亚神秘耶利亚耶利耶利亚'],
['74.77','耶利亚神秘耶利亚我一定要找到她'],
['101.12','很远的地方有个女郎名字叫做耶利亚'],
['109.32','有人在传说她的眼睛看了使人更年轻'],
['117.90','如果你得到她的拥抱你就永远不会老'],
['126.22','为了这个神奇的传说我要努力去寻找'],
['133.57','耶利亚神秘耶利亚耶利耶利亚'],
['141.90','耶利亚神秘耶利亚我一定要找到她'],
['150.29','耶利亚神秘耶利亚耶利耶利亚'],
['158.76','耶利亚神秘耶利亚我一定要找到她'],
['198.70','耶利亚神秘耶利亚耶利耶利亚'],
['207.11','耶利亚神秘耶利亚我一定要找到她'],
['215.28','耶利亚神秘耶利亚耶利耶利亚'],
['223.72','耶利亚神秘耶利亚我一定要找到她']
];
let aud = new Audio(), lw = prgline.offsetWidth;
aud.src = 'https://music.163.com/song/media/outer/url?id=150852.mp3';
aud.autoplay = true;
aud.loop = true;

prgline.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prgline.offsetWidth;

btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnplay.value = '暂停');
aud.addEventListener('pause', ()=> btnplay.value = '播放');

aud.addEventListener('timeupdate', () => {
prgline.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
}
});

let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>

马黑黑 发表于 2022-8-27 07:56

做这个是昨天下午下班前花20多分钟手写代码做的（歌词除外）。写代码时，一位工程师站在我后面，全程看“现场直播”——他不相信我可以不查阅资料写一个HTML+CSS+JS播放器。他输了一条软中华。

其实，这个之前做过的，这里仅是更简化的版本而已。

小辣椒 发表于 2022-8-27 10:45

马黑黑发表于 2022-8-27 07:56
做这个是昨天下午下班前花20多分钟手写代码做的（歌词除外）。写代码时，一位工程师站在我后面，全程看“现 ...

哇瑟，大神~~~我手机看见马上换电脑上来了{:4_170:}

小辣椒 发表于 2022-8-27 10:49

今天马上要出去购物，家里冰箱空了，晚上准备完成作业

谢谢黑黑{:4_187:}

小辣椒 发表于 2022-8-27 10:51

黑黑地址发我，我给你寄2条软中华{:4_189:}

马黑黑 发表于 2022-8-27 10:53

小辣椒发表于 2022-8-27 10:51
黑黑地址发我，我给你寄2条软中华

^&^^@$#^*)hk

马黑黑 发表于 2022-8-27 10:54

小辣椒发表于 2022-8-27 10:45
哇瑟，大神~~~我手机看见马上换电脑上来了

这个是文字按钮，可以考虑用图片。《九妹》那里，我刚改了图片按钮

小辣椒 发表于 2022-8-27 11:00

马黑黑发表于 2022-8-27 10:54
这个是文字按钮，可以考虑用图片。《九妹》那里，我刚改了图片按钮

哦，那我看一下再下

小辣椒 发表于 2022-8-27 11:01

马黑黑发表于 2022-8-27 10:53
^&^^@$#^*)hk

家里肯定是秘密的地方，有保镖吧{:4_170:}

马黑黑 发表于 2022-8-27 11:10

小辣椒发表于 2022-8-27 11:01
家里肯定是秘密的地方，有保镖吧

肿么会有

马黑黑 发表于 2022-8-27 11:10

小辣椒发表于 2022-8-27 11:00
哦，那我看一下再下

有好的按钮的话，可以用背景图片方式做做

小辣椒 发表于 2022-8-27 11:11

马黑黑发表于 2022-8-27 11:10
肿么会有

估计是的，

黑黑我下了

晚上见

马黑黑 发表于 2022-8-27 11:18

小辣椒发表于 2022-8-27 11:11
估计是的，

黑黑我下了

88

红影发表于 2022-8-27 11:55

马黑黑发表于 2022-8-27 07:56
做这个是昨天下午下班前花20多分钟手写代码做的（歌词除外）。写代码时，一位工程师站在我后面，全程看“现 ...

黑黑厉害，一条软中华，价值可不低呢。恭喜黑黑{:4_173:}

红影发表于 2022-8-27 11:56

马黑黑发表于 2022-8-27 10:54
这个是文字按钮，可以考虑用图片。《九妹》那里，我刚改了图片按钮

那个图片按钮好像鼠标上去位置会发生变化呢。

红影发表于 2022-8-27 11:58

“20多分钟手写代码”，这个真的太厉害了，换做我也不肯相信，还好没跟你睹{:4_189:}

马黑黑 发表于 2022-8-27 12:20

红影发表于 2022-8-27 11:58
“20多分钟手写代码”，这个真的太厉害了，换做我也不肯相信，还好没跟你睹

轻车熟路的

马黑黑 发表于 2022-8-27 12:20

红影发表于 2022-8-27 11:56
那个图片按钮好像鼠标上去位置会发生变化呢。

加一个透明边框的效果

马黑黑 发表于 2022-8-27 12:21

红影发表于 2022-8-27 11:55
黑黑厉害，一条软中华，价值可不低呢。恭喜黑黑

{:4_205:}

页: [1] 2

花潮论坛's Archiver

pk画布播放器：给小辣椒的HTML加CSS播放器