九妹（致小九）

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

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

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

x

本帖最后由马黑黑于 2022-8-27 10:51 编辑

lrc歌词

00:00 | 00:00

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

本帖最后由马黑黑于 2022-8-27 10:52 编辑

本帖实现与昨天用画布做的音频播放器，歌词同步+进度可控，实现载体为非画布元素。二者的区别是，画布要使用更多的JS代码，HTML非画布元素+CSS+JS的方式JS部分代码少得多，但CSS代码增多一点、HTML的DOM结构复杂一点。

在消耗内存方面，测试结果表明，画布播放器消耗更低的内存。

本帖源码分享：

<style>
#papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center; background: gray url('https://638183.freep.cn/638183/t22/51/9mbg.webp') no-repeat center/cover; 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; }
#lrctext { font: bold 1.5em 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 { width: 26px; height: 26px; background: url('/data/attachment/forum/202208/27/103714x7jnns4sll7hwxxl.png') -31px -24.5px no-repeat; border-radius: 50%; cursor: pointer; }
#btnplay:hover { border: 1px solid transparent; }
#prgline { width: 200px; height: 2px; background: #ccc linear-gradient(red,red) no-repeat ; background-size: 1px 2px; display: block; cursor: pointer; }
#tmsg { width: auto; color: snow; }
</style>
<div id="papa">
<div id="player">
<div id="lrctext">lrc歌词</div>
<div id="btnwrap">
<span id="btnplay"></span>
<span id="prgline"></span>
<span id="tmsg">00:00 | 00:00</span>
</div>
</div>
</div>
<script>
let lrcAr = [
['0.00','九妹-黄鹤翔'],
['5.02','词：王云好'],
['10.03','曲：王云好'],
['32.02','你好像春天的一副画'],
['35.01','画中是遍山的红桃花'],
['38.02','蓝蓝的天和那青青泥巴'],
['41.04','花瓣飘落你身下'],
['44.06','画中呀是不是你的家'],
['47.07','朵朵白云染红霞'],
['50.01','哥哥心中的九妹你知道吗'],
['53.08','是我心中那一副画'],
['57.02','九妹九妹漂亮的妹妹'],
['60.03','漂亮的妹妹'],
['61.10','九妹九妹透红的花蕾'],
['65.01','透红的花蕾'],
['66.07','九妹九妹可爱的妹妹'],
['69.08','可爱的妹妹'],
['71.04','九妹九妹心中的九妹'],
['76.01','九妹九妹漂亮的妹妹'],
['79.03','漂亮的妹妹'],
['80.09','九妹九妹透红的花蕾'],
['84.00','透红的花蕾'],
['85.06','九妹九妹可爱的妹妹'],
['88.08','可爱的妹妹'],
['90.04','九妹九妹我的九妹'],
['101.03','九妹九妹'],
['104.06','九妹妹九妹'],
['121.06','九妹'],
['127.04','00000春天的桃花依旧放'],
['132.10','你却已不在种桃花'],
['136.01','悠悠的流水和空空牵挂'],
['139.03','伴着那淡淡云霞'],
['140.09','不知你远去在何方'],
['145.06','思念是我对你的表达'],
['148.07','红红的脸颊带着点点的笑'],
['151.08','在梦里萦萦缠绕'],
['155.00','九妹九妹漂亮的妹妹'],
['158.02','漂亮的妹妹'],
['159.08','九妹九妹透红的花蕾'],
['162.09','透红的花蕾'],
['164.06','九妹九妹可爱的妹妹'],
['167.07','可爱的妹妹'],
['169.03','九妹九妹心中的九妹'],
['174.00','九妹九妹漂亮的妹妹'],
['177.01','漂亮的妹妹'],
['178.07','九妹九妹透红的花蕾'],
['181.09','透红的花蕾'],
['183.04','九妹九妹可爱的妹妹'],
['186.06','可爱的妹妹'],
['188.02','九妹九妹我的九妹'],
['192.09','九妹九妹漂亮的妹妹'],
['196.01','漂亮的妹妹'],
['197.07','九妹九妹透红的花蕾'],
['200.08','透红的花蕾'],
['202.03','九妹九妹可爱的妹妹'],
['205.05','可爱的妹妹'],
['207.01','九妹九妹我的九妹'],
['212.00','九妹九妹我的九妹']
];
let aud = new Audio(), lw = prgline.offsetWidth, bgpic = '/data/attachment/forum/202208/27/103714x7jnns4sll7hwxxl.png';
aud.src = 'https://music.163.com/song/media/outer/url?id=99181.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.style.background = 'url(' + bgpic +') -62px -24.5px no-repeat');
aud.addEventListener('pause', () => btnplay.style.background = 'url(' + bgpic + ') -31px -24.5px no-repeat');
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>