可爱的星星
<style>#papa { left: -214px; width: 1024px; background: #333 url('/data/attachment/forum/202209/15/072036vgzc22ypyks7444l.jpg') no-repeat center/cover; height: 640px; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; position: relative; }
#mplayer { position: absolute; bottom: 10px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; }
#btnwrap { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #ccc linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); cursor: pointer; }
#btnwrap:hover { background: #000 linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); }
#btnplay { width: 20px; height: 20px; background: #ccc; clip-path: polygon(0 0, 0 100%, 100% 50%); transform: translateX(3px); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { width: 300px; height: 2px; background: #ccc linear-gradient(to right,red,orange,green,tomato) no-repeat; background-size: 1px 2px; cursor: pointer; position: relative;}
#prog::before { position: absolute; content: ''; top: -7px; width: inherit; height: 15px; }
#prog:hover::before { background: rgba(0,255,0,.25); }
#tmsg { font: normal 16px sans-serif; color: lightgreen;}
#lrc { position: absolute; top: 40px; font: bold 1.5em sans-serif; color: lightgreen; text-shadow: 1px 1px 2px #000; text-align: center; }
.lrcChar { margin: 1px; padding: 6px; width: 30px; height: 30px; text-align: center; border-radius: 40% 20%; font: bold 1.2em / 30px sans-serif; display: inline-block; text-shadow: 1px 1px 1px #000; opacity: .65; backdrop-filter: blur(3px); position: relative; }
</style>
<div id="papa">
<div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
<div id="lrc">lrc歌词</div>
</div>
<script>
let lrcAr = [['0.02','可爱的星星 - 张心柔'],['1.00','词：吕德安'],['1.02','曲：张心柔'],['1.03','编曲：张心柔'],['6.06','如果这些可爱的星星不是星星'],['16.04','那又是什么'],['20.07','该如何称呼'],['26.05','那么高的一种现实'],['30.08','那么冷漠'],['36.07','一生都与我们若即若离'],['46.02','如果这些可爱的星星不是星星'],['55.04','那又是什么'],['59.07','该如何称呼'],['65.04','那么高的一种现实'],['69.05','那么冷漠'],['75.03','一生都与我们若即若离'],['84.09','又让人去幻想和追求'],['88.10','有时我常常想'],['93.05','直到如今'],['98.08','星星不过是星星'],['103.02','你承认它'],['107.06','高高在上'],['112.03','冥冥之中'],['117.03','有种力量或寂静的知识'],['142.06','又让人去幻想和追求'],['146.05','有时我常常想'],['150.08','直到如今'],['155.10','星星不过是星星'],['160.00','你承认它'],['164.02','高高在上'],['168.07','冥冥之中'],['173.07','有种力量或寂静的知识'],['183.00','而这些都还是我们自己的事情'],['191.06','我们知道它非人间之物'],['200.07','或只是天堂里的一种爱'],['209.04','但它引导我们不得不穷尽一生'],['213.08','去爱一些不能爱的事物'],['218.03','去属于它们'],['220.06','然后才去属于自己'],['227.07','而这些都还是我们自己的事情'],['236.04','我们知道它非人间之物'],['245.06','或只是天堂里的一种爱'],['254.02','但它引导我们不得不穷尽一生'],['258.06','去爱一些不能爱的事物'],['263.03','去属于它们'],['265.06','然后才去属于自己']];
let aud = new Audio(), lrcKey = 0;
aud.src = 'https://music.163.com/song/media/outer/url?id=480719471.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.backgroundSize = prog.offsetWidth * 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) {
if(lrcKey == j) lrc.innerHTML = showLrc(lrcAr);
else continue;
}
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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;
}
let showLrc = (text) => {
let tstr = '';
Array.from({length: text.length}).forEach((ele,key) => {
if(text.substr(key,1).trim() != '') tstr += `<span class="lrcChar" style='top: ${ranNum(-10,10)}px; background: #${setColor()}; color: #${setColor()};'>${text.substr(key,1)}</span>`;
});
lrcKey += 1;
if(lrcKey >= lrcAr.length) lrcKey = 0;
return tstr;
}
let setColor = () => Math.random().toString(16).substr(-6);
let ranNum = (min,max) => Math.floor(Math.random() * (max - min + 1)) + min;
</script>
代码
<style>
#papa { left: -214px; width: 1024px; background: #333 url('/data/attachment/forum/202209/15/072036vgzc22ypyks7444l.jpg') no-repeat center/cover; height: 640px; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; position: relative; }
#mplayer { position: absolute; bottom: 10px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; }
#btnwrap { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #ccc linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); cursor: pointer; }
#btnwrap:hover { background: #000 linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); }
#btnplay { width: 20px; height: 20px; background: #ccc; clip-path: polygon(0 0, 0 100%, 100% 50%); transform: translateX(3px); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { width: 300px; height: 2px; background: #ccc linear-gradient(to right,red,orange,green,tomato) no-repeat; background-size: 1px 2px; cursor: pointer; position: relative;}
#prog::before { position: absolute; content: ''; top: -7px; width: inherit; height: 15px; }
#prog:hover::before { background: rgba(0,255,0,.25); }
#tmsg { font: normal 16px sans-serif; color: lightgreen;}
#lrc { position: absolute; top: 40px; font: bold 1.5em sans-serif; color: lightgreen; text-shadow: 1px 1px 2px #000; text-align: center; }
.lrcChar { margin: 1px; padding: 6px; width: 30px; height: 30px; text-align: center; border-radius: 40% 20%; font: bold 1.2em / 30px sans-serif; display: inline-block; text-shadow: 1px 1px 1px #000; opacity: .65; backdrop-filter: blur(3px); position: relative; }
</style>
<div id="papa">
<div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
<div id="lrc">lrc歌词</div>
</div>
<script>
let lrcAr = [['0.02','可爱的星星 - 张心柔'],['1.00','词：吕德安'],['1.02','曲：张心柔'],['1.03','编曲：张心柔'],['6.06','如果这些可爱的星星不是星星'],['16.04','那又是什么'],['20.07','该如何称呼'],['26.05','那么高的一种现实'],['30.08','那么冷漠'],['36.07','一生都与我们若即若离'],['46.02','如果这些可爱的星星不是星星'],['55.04','那又是什么'],['59.07','该如何称呼'],['65.04','那么高的一种现实'],['69.05','那么冷漠'],['75.03','一生都与我们若即若离'],['84.09','又让人去幻想和追求'],['88.10','有时我常常想'],['93.05','直到如今'],['98.08','星星不过是星星'],['103.02','你承认它'],['107.06','高高在上'],['112.03','冥冥之中'],['117.03','有种力量或寂静的知识'],['142.06','又让人去幻想和追求'],['146.05','有时我常常想'],['150.08','直到如今'],['155.10','星星不过是星星'],['160.00','你承认它'],['164.02','高高在上'],['168.07','冥冥之中'],['173.07','有种力量或寂静的知识'],['183.00','而这些都还是我们自己的事情'],['191.06','我们知道它非人间之物'],['200.07','或只是天堂里的一种爱'],['209.04','但它引导我们不得不穷尽一生'],['213.08','去爱一些不能爱的事物'],['218.03','去属于它们'],['220.06','然后才去属于自己'],['227.07','而这些都还是我们自己的事情'],['236.04','我们知道它非人间之物'],['245.06','或只是天堂里的一种爱'],['254.02','但它引导我们不得不穷尽一生'],['258.06','去爱一些不能爱的事物'],['263.03','去属于它们'],['265.06','然后才去属于自己']];
let aud = new Audio(), lrcKey = 0;
aud.src = 'https://music.163.com/song/media/outer/url?id=480719471.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.backgroundSize = prog.offsetWidth * 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) {
if(lrcKey == j) lrc.innerHTML = showLrc(lrcAr);
else continue;
}
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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;
}
let showLrc = (text) => {
let tstr = '';
Array.from({length: text.length}).forEach((ele,key) => {
if(text.substr(key,1).trim() != '') tstr += `<span class="lrcChar" style='top: ${ranNum(-10,10)}px; background: #${setColor()}; color: #${setColor()};'>${text.substr(key,1)}</span>`;
});
lrcKey += 1;
if(lrcKey >= lrcAr.length) lrcKey = 0;
return tstr;
}
let setColor = () => Math.random().toString(16).substr(-6);
let ranNum = (min,max) => Math.floor(Math.random() * (max - min + 1)) + min;
</script>
本模板会将歌词的每一句拆成单个字符再包装输出。适用于方块字，且每句歌词字数不宜过多。拼音类歌词需要重新封装 showLrc()函数，以单词为单位输出；方块字和拼音文字混合的歌词需要更多的处理。 相比之前一致使用的歌词同步模板，本帖和昨晚发布的 阿瓦尔古丽 优化了核心实现歌词同步机制的功能，对 audio 控件的 timeupdate 事件的监听不再不停地比对当下进度与歌词时间记录且不停输出歌词，而是保持时间比对、适时输出。若将过去的 timeupdate 代码用于此帖，会看到歌词不停变色、变换上下位置。
此次优化歌词同步实现机制，目的在可以对歌词显示做更多的修饰，也多少能优化监听歌词进度的工作效率。
歌词跳跃时，表明是最后一句 虽然现在还看不到效果，估计会很惊艳。黑黑太厉害了{:4_199:} 找了个能播放的歌曲，本地看了一下，这个歌词被着了底色和形状，太惊艳了{:4_199:} 好可爱的星星，欣赏问好！{:4_185:} 醉美水芙蓉 发表于 2022-9-15 11:35
欣赏黑黑老师又一个歌词创新制作！老师辛苦了！
{:5_106:} 每天都在想上来看看黑黑的新产品{:4_170:}
今天这个歌词效果没有想到的不得不再夸一下这个播放器，特别完美， 就等看跳舞，哈哈歌曲结束果然歌词舞起来了{:4_199:} 黑黑辛苦，每天有精彩，可惜现在的学生不完成作业了，其实当初只是说纯套用的不能加精华，看起来学生们自己独立完成还是有难度 小辣椒 发表于 2022-9-15 14:26
黑黑辛苦，每天有精彩，可惜现在的学生不完成作业了，其实当初只是说纯套用的不能加精华，看起来学生们自己 ...
慢慢来不急 红影 发表于 2022-9-15 10:02
找了个能播放的歌曲，本地看了一下，这个歌词被着了底色和形状，太惊艳了
还行 梦缘 发表于 2022-9-15 10:57
好可爱的星星，欣赏问好！
星星基本看不见，俺高度近视{:4_170:} 小辣椒 发表于 2022-9-15 14:24
就等看跳舞，哈哈歌曲结束果然歌词舞起来了
挺好的吧 醉美水芙蓉 发表于 2022-9-15 11:35
欣赏黑黑老师又一个歌词创新制作！老师辛苦了！
谢谢支持 这个效果很可爱的啊 马黑黑 发表于 2022-9-15 18:17
还行
黑黑总能带来精彩{:4_187:}