小辣椒 发表于 2022-2-21 22:28

歌词高亮同步 （学习黑黑教程做一次）

<style tpye="text/css">
        #lrcUl { width: 500px; list-style-type: none; column-count: 3; column-gap: 4px; }
        #lrcUl li { font-size:14px; color: black;list-style-type: none; }
        #myplayer { outline: none; }
</style>

<audio id="myplayer" src="https://wj.zp68.com/lxx/yunhua/2022/02/19/02.mp3" controls="controls"></audio>
<ul id="lrcUl">

</ul>

<script language="javascript">

var lrcAr=[
["00:00.000"," 遇上你是我的缘"],
["00:03.74","轻轻回首间"],
["00:07.09","白云已走远"],
["00:10.66","带走我的思念"],
["00:14.20","岁岁又年年"],
["00:17.68","青山立两旁"],
["00:21.42","白云为伴"],
["00:24.84","拨动我的心弦"],
["00:28.88","一遍又一遍"],
["00:33.67","遇上你是我的缘"],
["00:36.78","芙蓉出水我也难遮面"],
["00:40.20","跟着你是我的缘"],
["00:43.31","邀来日月星辰为我辩"],
["00:47.22","爱上你是我的恋"],
["00:50.40","风风雨雨"],
["00:52.01","我们手相牵"],
["00:53.94","跟着你是我的缘"],
["00:56.87","天涯海角相伴到永远"],
["01:02.35","学习黑黑教程做一次"],
["01:09.82","遇上你是我的缘《游龙惊凤》片尾曲"],
["01:29.23","轻轻回首间"],
["01:32.71","白云已走远"],
["01:36.27","带走我的思念"],
["01:39.83","岁岁又年年"],
["01:43.37","青山立两旁"],
["01:46.87","白云为伴"],
["01:50.49","拨动我的心弦"],
["01:54.41","一遍又一遍"],
["01:59.41","遇上你是我的缘"],
["02:02.48","芙蓉出水我也难遮面"],
["02:05.90","跟着你是我的缘"],
["02:08.89","邀来日月星辰为我辩"],
["02:12.94","爱上你是我的恋"],
["02:16.07","风风雨雨"],
["02:17.63","我们手相牵"],
["02:19.56","跟着你是我的缘"],
["02:22.55","天涯海角相伴到永远"],
["02:26.67","遇上你是我的缘"],
["02:29.72","芙蓉出水我也难遮面"],
["02:33.13","跟着你是我的缘"],
["02:36.12","邀来日月星辰为我辩"],
["02:40.23","爱上你是我的恋"],
["02:43.41","风风雨雨"],
["02:44.90","我们手相牵"],
["02:46.88","跟着你是我的缘"],
["02:49.74","天涯海角相伴到永远"],
["02:53.91","遇上你是我的缘"],
["02:56.95","芙蓉出水我也难遮面"],
["03:00.39","跟着你是我的缘"],
["03:03.43","邀来日月星辰为我辩"],
["03:07.48","爱上你是我的恋"],
["03:10.60","风风雨雨"],
["03:12.21","我们手相牵"],
["03:14.07","跟着你是我的缘"],
["03:17.01","天涯海角相伴到永远"],
["03:21.24","遇上你是我的缘"],
["03:24.22","芙蓉出水我也难遮面"],
["03:27.78","跟着你是我的缘"],
["03:30.76","邀来日月星辰为我辩"]
];
var offset = 0; //偏移量
var myaud = document.getElementById('myplayer'); //播放器标识
var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
        lrcAr = toSec(lrcAr);
        lrcUl.innerHTML += "<li id='li" + lrcAr + "'>" + lrcAr + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
        let tmpAr = lrcTime.split(':');
        lrcTime = tmpAr * 60 + parseInt(tmpAr);
        return lrcTime;
}
//同步高亮歌词
myaud.ontimeupdate = function() {
        let tt = this.currentTime + offset;
        for(j=0; j<lrcAr.length; j++){
                if(tt > lrcAr){
                        if(j > 0){
                                let idxLast = lrcAr;
                                document.getElementById("li" + idxLast).style.color = "black";
                        }
                        let idx = lrcAr;
                        document.getElementById("li" + idx).style.color = "red";
                }
        }
}
// 播放结束取消最后一行红色、重新播放
myaud.onended = function() {
        document.getElementById("li" + lrcAr).style.color = "black";
        this.play();
}

</script>

小辣椒 发表于 2022-2-21 22:30

我的歌词同步没有做的很好，有时间差@马黑黑

杨柳青 发表于 2022-2-21 22:35

这个播放器简单哈~~{:4_189:}

小辣椒 发表于 2022-2-21 22:44

杨柳青 发表于 2022-2-21 22:35
这个播放器简单哈~~
小杨柳来了啊。刚看见黑黑分享的，歌词高亮的歌词同步。练习做一次

加林森 发表于 2022-2-21 22:55

小辣椒 发表于 2022-2-21 22:44
小杨柳来了啊。刚看见黑黑分享的，歌词高亮的歌词同步。练习做一次

挺好的。继续学习！{:4_187:}

杨柳青 发表于 2022-2-21 23:35

小辣椒 发表于 2022-2-21 22:44
小杨柳来了啊。刚看见黑黑分享的，歌词高亮的歌词同步。练习做一次

小辣椒夜里相好~~{:4_187:}

加林森 发表于 2022-2-22 09:18

{:4_178:}

红影 发表于 2022-2-22 10:14

亲爱的这么快就做出来了，好棒。亲爱的真聪明{:4_199:}

加林森 发表于 2022-2-22 17:05

好听好看

马黑黑 发表于 2022-2-22 19:59

小辣椒 发表于 2022-2-21 22:30
我的歌词同步没有做的很好，有时间差@马黑黑

如果lrc的时间没有问题的话，请把 offset = 0.5 改为等于 0

小辣椒 发表于 2022-2-22 22:35

马黑黑 发表于 2022-2-22 19:59
如果lrc的时间没有问题的话，请把 offset = 0.5 改为等于 0

黑黑我改了后，现在同步好一点了{:4_173:}

马黑黑 发表于 2022-2-23 09:49

小辣椒 发表于 2022-2-22 22:35
黑黑我改了后，现在同步好一点了

我的帖子里其实有这个说明的
页: [1]
查看完整版本: 歌词高亮同步 （学习黑黑教程做一次）