音乐播放器歌词同步显示 

<!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>

 

posted @ 2019-09-18 12:11  东的IT备忘录  阅读(358)  评论(0)    收藏  举报