九妹（致小九）
本帖最后由 马黑黑 于 2022-8-27 10:51 编辑 <br /><br /><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) 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 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) 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>
黑黑一早就把妹妹整到上不着天下不着地的地方去啦？{:5_117:} 马黑黑 发表于 2022-8-27 07:37
本帖实现与昨天用画布做的音频播放器，歌词同步+进度可控，实现载体为非画布元素。二者的区别是，画布要使 ...
这道理说的真好！{:5_116:}一句听不懂，，，，{:5_103:} 东篱闲人 发表于 2022-8-27 07:45
黑黑一早就把妹妹整到上不着天下不着地的地方去啦？
这是顺着你约定的星空用天文望远镜看到的 马黑黑 发表于 2022-8-27 07:46
这是顺着你约定的星空用天文望远镜看到的
你这是硬隔离措施。。。。{:4_170:} 东篱闲人 发表于 2022-8-27 07:46
这道理说的真好！一句听不懂，，，，
没关系，喜欢那种用那种 马黑黑 发表于 2022-8-27 07:47
没关系，喜欢那种用那种
嗯嗯，也对。俺不懂冰箱原理也在用。不懂收音机原理也在听。。。。{:5_117:} 东篱闲人 发表于 2022-8-27 07:49
嗯嗯，也对。俺不懂冰箱原理也在用。不懂收音机原理也在听。。。。
就是的。人不可能啥都懂，除了星空下哪些等待。 东篱闲人 发表于 2022-8-27 07:47
你这是硬隔离措施。。。。
哎哎，为了安全。地面上疫情严峻呀 马黑黑 发表于 2022-8-27 07:51
哎哎，为了安全。地面上疫情严峻呀
{:4_172:} 东篱闲人 发表于 2022-8-27 07:52
不过下来了戴口罩也可以{:4_170:} 制作漂亮。赞！{:4_199:} 加林森 发表于 2022-8-27 09:13
制作漂亮。赞！
感谢队长支持 马黑黑 发表于 2022-8-27 09:14
感谢队长支持
不客气的。
黑黑你太万能了{:4_178:} 东篱闲人 发表于 2022-8-27 07:49
嗯嗯，也对。俺不懂冰箱原理也在用。不懂收音机原理也在听。。。。
老头你太可爱了{:4_170:} 小辣椒 发表于 2022-8-27 11:07
黑黑你太万能了
{:4_193:} 小辣椒 发表于 2022-8-27 11:07
老头你太可爱了
俺实在吧？{:5_117:}