音乐播放器歌词同步显示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>LRC</title> <script src="js/jquery-3.4.1.min.js"></script> <style> div { width: 340px; height: 500px; margin: 0 auto; overflow: hidden; } ul { transition-duration: 600ms; } ul, li { list-style: none; padding: 0; margin: 0; } li.on { color: red; } audio { margin-top: 10px; } </style> </head> <body> <div> <audio id="audio" src="js/1.mp3" controls="controls" autoplay="true"></audio> <ul id="lrclist" style="transform: translateY(250px);"><!-- 保证歌词在正中间 --> </ul> </div> <script> let lrcJSON = [ "[00:03.00]洋葱", "[00:06.00]演唱:平安", "[00:09.00]", "[00:11.38]如果你眼神能够为我片刻的降临"]; let lrcTime = [];//歌词对应的时间数组 let ul = $("#lrclist")[0];//获取ul let i = 0; $.each(lrcJSON, function (key, value) {//遍历lrc ul.innerHTML += "<li><p>" + value.substring(10) + "</p></li>";//ul里填充歌词 lrcTime[i++] = parseFloat(value.substring(1, 3)) * 60 + parseFloat(value.substring(4, 10));//00:00.000转化为00.000格式 }); lrcTime[lrcTime.length] = lrcTime[lrcTime.length - 1] + 3;//如不另加一个结束时间,到最后歌词滚动不到最后一句 let $li = $("#lrclist>li");//获取所有li let currentLine = 0;//当前播放到哪一句了 let currentTime;//当前播放的时间 let audio = document.getElementById("audio"); let ppxx;//保存ul的translateY值 audio.ontimeupdate = function () {//audio时间改变事件 currentTime = audio.currentTime; for (j = currentLine, len = lrcTime.length; j < len; j++) { if (currentTime < lrcTime[j + 1] && currentTime > lrcTime[j]) { currentLine = j; ppxx = 250 - (currentLine * 32); ul.style.transform = "translateY(" + ppxx + "px)"; $li.get(currentLine - 1).className = ""; console.log("on" + currentLine); $li.get(currentLine).className = "on"; break; } } }; audio.onseeked = function () {//audio进度更改后事件 currentTime = audio.currentTime; console.log(" off" + currentLine); $li.get(currentLine).className = ""; for (k = 0, len = lrcTime.length; k < len; k++) { if (currentTime < lrcTime[k + 1] && currentTime < lrcTime[k]) { currentLine = k; break; } } }; </script> </body> </html>