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


    <!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>
  • 相关阅读:
    log4j(二)——如何控制日志信息的输出?
    Java生成指定范围内的工具类
    JavaBean和Map转换封装类
    cron表达式详解
    数据库主键按照固定前缀生成工具类
    邮件发送工具类
    NFC
    牛逼辩论
    快速排序
    希尔排序
  • 原文地址:https://www.cnblogs.com/david1216/p/11541071.html
Copyright © 2020-2023  润新知