《当你老了》帖子代码分析

马黑黑 · 发表于 2022-6-5 08:27

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

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

x

本帖最后由马黑黑于 2022-6-5 08:28 编辑

这个帖子，使用的歌词同步机制是我半年前回北方老家时做的，当时一天一醉，代码质量估计不高，但基本能正常工作。不多说，先上帖子代码，后面以回复方式做一些简单分析：

<style>
/* 界面及音乐控制 */
.mama { left: -339.5px; width: 1275px; height: 717px; background: #eee url('https://638183.freep.cn/638183/t22/51/sea.jpg') no-repeat; position: relative; }
.goose { position: absolute; bottom: 30px; width: 200px; cursor: pointer; }
.meter { position: absolute; left: 50%; bottom: 140px; transform: rotate(-15deg); cursor: pointer; }
/* 歌词同步 */
#lrcDiv { left: 50%; top: 50%; width: 340px; height: 60px; overflow: hidden; position: absolute; padding: 8px; }
#lrcDiv ul, lrcli { margin: 0; padding: 0; }
#lrcUl { position: absolute; top: 0; }
#lrcUl li { height: 24px; font: normal 20px / 24px sans-serif; color: #64b4d5; text-shadow: 1px 1px 1px #333; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
</style>
<div class="mama">
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<img class="goose" src="https://638183.freep.cn/638183/t22/51/goose.gif" alt="" />
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1894114925.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
//元素句柄
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
goose = document.querySelector('.goose'),
lrcUl = document.getElementById('lrcUl');
//lrc歌词
let lrcAr=[
['0:01','词 : William Butler Yeats'],
['0: 10','曲 : 趙照'],
['0: 20','石栋颖 & 韩甜甜'],
['0:28','lrc记录 : 韩苦'],
['0:31','当你老了'],
['0:34','头发白了'],
['0:39','睡意昏沉'],
['0:45','当你老了'],
['0:49','走不动了'],
['0:52','炉火旁打盹'],
['0:56','回忆青春'],
['1:00','多少人曾爱你青春欢唱的时辰'],
['1:07','爱慕你的美丽'],
['1:10','假意或真心'],
['1:14','只有一个人还爱你虔诚的灵魂'],
['1:21','爱你苍老的脸上的皱纹'],
['1:58','当你老了'],
['2:01','头发白了'],
['2:05','睡意昏沉'],
['2:12','当你老了'],
['2:15','走不动了'],
['2:18','炉火旁打盹'],
['2:23','回忆青春'],
['2:27','多少人曾爱你青春欢唱的时辰'],
['2:33','爱慕你的美丽'],
['2:37','假意或真心'],
['2:40','只有一个人还爱你虔诚的灵魂'],
['2:47','爱你苍老的脸上的皱纹'],
['2:54','当我老了'],
['2:56','当你老了',''],
['2:58','我真希望'],
['3:00','这首歌是唱给你的']
];
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
lrcAr[j][0] = toSec(lrcAr[j][0]);
lrcUl.innerHTML += "<li id='li" + lrcAr[j][0] + "'>" + lrcAr[j][1] + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr[0] * 60 + parseInt(tmpAr[1]);
return lrcTime;
}
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
goose.style.transform = 'translate(' + prog * 11 + 'px)';
meter.value = prog;
//歌词同步
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr[j][0]){
if(j > 0){
let idxLast = lrcAr[j-1][0];
document.getElementById("li" + idxLast).style.color = "#64b4d5";
lrcUl.style.top ="-" + (j * 24 - 24) + "px"; //乘减依据: 行高设定
}
let idx = lrcAr[j][0];
document.getElementById("li" + idx).style.color = "#fff";
}
}
});
// 播放结束重置歌词样式
aud.onended = function() {
document.getElementById("li" + lrcAr[lrcAr.length-1][0]).style.color = "#64b4d5";
lrcUl.style.top = 0;
this.play();
}
//音乐控制
meter.onclick = goose.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

复制代码

马黑黑 · 发表于 2022-6-5 08:27

本帖最后由马黑黑于 2022-6-5 08:38 编辑

先说说lrc歌词结构。它以数组方式存放，代码写成酱紫：
//lrc歌词
let lrcAr=[
['0:01','词 : William Butler Yeats'],
['0: 10','曲 : 趙照'],
['0: 20','石栋颖 & 韩甜甜'],
['0:28','lrc记录 : 韩苦'],
//......
['0:31','当你老了']

];

这是二维数组，每一句歌词一条记录。每条记录包含时间和歌词，其中，时间有分加秒组成，结构为分:秒，例如零分零五秒，记为 0:05。每一条记录的结构要正确，不能有误，具体为 [‘时间','歌词'] ，且每一条记录结束是中括号后面要跟着小角逗号，但最后一句又不能有逗号！

顺带说一下，如果时间记为以下这个样纸，也是可以的：

['0:01:363','词 : William Butler Yeats'],

不过后面那个时间数，:363 部分，是被程序忽略的。

马黑黑 · 发表于 2022-6-5 08:27

本帖最后由马黑黑于 2022-6-5 08:45 编辑

下面说说歌词显示字体大小相关的问题。
在CSS代码内，选择器 #lrcUl li 规定了字体，其中，注意这句，

font: normal 20px / 24px sans-serif;

24px 表示行高，它将影响JS移动歌词的决策。试看JS代码中，监听播放时间变化的函数里的歌词同步代码：

//歌词同步
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr[j][0]){
if(j > 0){
let idxLast = lrcAr[j-1][0];
document.getElementById("li" + idxLast).style.color = "#64b4d5";
lrcUl.style.top ="-" + (j * 24 - 24) + "px"; //乘减依据: 行高设定
}
let idx = lrcAr[j][0];
document.getElementById("li" + idx).style.color = "#fff";
}
}

注意有红色文本的那句，红色数字要与前面的行高一致。

此外，#lrcDiv 选择器的高度可以调整，不同的高度显示的行数将不一样，但请确保所设置的高度不割裂文本。