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

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

lrc歌词

00:00 | 00:00

马黑黑 · 发表于 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[j][0]) lrctext.innerText = lrcAr[j][1];
}
});
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>