• 音乐播放器歌词同步显示


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>LRC</title>
        <script src="js/jquery-3.4.1.min.js"></script>
        <style>
            div {
                 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>
  • 相关阅读:
    启动eclipse报错 Could not create the Java Virtual Machine
    网站优化-HTML关键词代码使用
    [转载]我们应该更依赖手机一点
    跨域问题
    我研制的操盘机器人今天继续大获全胜2017-03-01
    昨日买的股票今日大获全胜,今日买的毫发无损,操盘机器人年后至今仅一天失误,超强,雄起
    机器人战胜人类操盘手,我研制三年的成果
    年后连续5天开门红,机器人越战越勇
    在家附近散个步(新昌),调整一下情绪,明天就要上班了
    今天开门红,好兆头
  • 原文地址:https://www.cnblogs.com/david1216/p/11541071.html
Copyright © 2020-2023  润新知