制作html网页播放器：《我最亲爱的》

悠悠 2023-02-17 05:15 10阅读 0赞

今天偶尔听到这首歌，心里泛起了涟漪。程序员嘛，就要用自己的方式实现出来。

![我最亲爱的][format_png]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>我最亲爱的</title>
            <script type="text/javascript" src="./jquery-1.12.4.min.js" ></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .bg {
                /* 歌词调整区 */
                width: 70%;/* 歌词显示盒子宽 */
                height: 400px;/* 歌词显示盒子高度，需要多显示几行歌词相应调大即可 */
                /*  */ /* 歌词背景颜色 */
                background-color: #6D6D6D;
                margin: 15px auto;
                color: #74A901;/* 歌词默认颜色,灰色 */
                font-size: 12px;/* 歌词字体默认大小 */
                overflow: hidden;
                position: relative;
                font-family: "微软雅黑";
            }
    
            .bg ul {
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                list-style: none;
            }
    
            .bg ul li {
                width: 100%;
                height: 30px;
                line-height: 30px;
                text-align: center;
            }
    
            .bg ul li.active {
                /* 歌词高亮滚动区 */
                color:#CD0A0A;/* 歌词滚动高亮颜色 */
                /* font-weight: bold; *//* 文本加粗，不要，太丑了！ */
                font-size: 15px; /* 歌词滚动行文字大小 */
            }
    
            audio {
                /* 播放器调整区 */
                width: 100%; /* 调整播放器宽度 */
                /* 其他要修改播放器在这里修改 */
    
            }
        </style>
        </head>
        <body>
            <center> 
                <audio autoplay="autoplay" src="./我最亲爱的.mp3" controls></audio>
            </center>
            <div class="bg"></div>
            <div id="frozen0422"></div>
        </body>
        <script type="text/javascript" charset="utf-8">
            $(function() {
                $("#frozen0422").load("我最亲爱的.lrc","gb2312");
                    function parseLyric(text) {
                            //按行分割歌词
                            let lyricArr = text.split('\n');
                            let result = []; //新建一个数组存放最后结果
                            //遍历分割后的歌词数组，将格式化后的时间节点，歌词填充到result数组
                            for (i = 0; i < lyricArr.length; i++) {
                                    let playTimeArr = lyricArr[i].match(/\[\d{2}:\d{2}((\.|\:)\d{2})\]/g); //正则匹配播放时间
                                    let lineLyric = "";
                                    if (lyricArr[i].split(playTimeArr).length > 0) {
                                            lineLyric = lyricArr[i].split(playTimeArr);
                                    }
    
                                    if (playTimeArr != null) {
                                            for (let j = 0; j < playTimeArr.length; j++) {
                                                    let time = playTimeArr[j].substring(1, playTimeArr[j].indexOf("]")).split(":");
                                                    //数组填充
                                                    result.push({
                                                            time: (parseInt(time[0]) * 60 + parseFloat(time[1])).toFixed(4),
                                                            content: String(lineLyric).substr(1)
                                                    });
                                            }
                                    }
                            }
                            return result;
                    }
    
    // 格式根据lrc歌词文件换句前加入\n 换行符,然后删除多余空行.即可!
                    let text = "[ti:我最亲爱的]\n[ar:张惠妹]\n[al:我的歌声里]\n[by:清风]\n[00:02.10]我最亲爱的\n[00:03.95]作词：林夕 作曲：Russell Harris\n[00:06.45]演唱：张惠妹\n[00:08.58]\n[00:09.94]就爱歌词网：www.22lrc.com\n[00:17.42]\n[00:19.46]很想知道你近况\n[00:22.59]我听人说 还不如你对我讲\n[00:32.48]经过那段遗憾\n[00:36.90]请你放心 我变得更加坚强\n[00:45.47]世界不管怎样荒凉\n[00:52.18]爱过你就不怕孤单\n[00:56.31]\n[00:57.50]我最亲爱的 你过的怎麼样\n[01:04.33]没我的日子 你别来无恙\n[01:11.14]依然亲爱的 我没让你失望\n[01:17.99]让我亲一亲 像过去一样\n[01:22.99]\n[01:28.27]我想你一定喜欢 现在的我\n[01:35.35]学会了你最爱的开朗\n[01:41.84]想起你的模样\n[01:45.69]有什麼错 还不能够被原谅\n[01:54.12]世界不管怎样荒凉\n[02:00.97]爱过你就不怕孤单\n[02:04.85]\n[02:06.12]我最亲爱的 你过的怎麼样\n[02:12.97]没我的日子 你别来无恙\n[02:19.85]依然亲爱的 我没让你失望\n[02:26.71]让我亲一亲 像朋友一样\n[02:32.28]\n[02:48.76]虽然离开了你的时间\n[02:54.26]比一起还漫长 我们总能补偿\n[03:02.51]因为中间空白的时光\n[03:07.85]如果还能分享 也是一种浪漫\n[03:16.55]关系虽然不再一样\n[03:23.17]关心却怎么能说断就断\n[03:30.28]\n[03:31.87]我最亲爱的 你过的怎麼样\n[03:38.73]没我的日子 你别来无恙\n[03:45.65]依然亲爱的 我没让你失望\n[03:52.38]让我亲一亲 像亲人一样\n[03:57.71]\n[03:59.27]我最亲爱的 你过的怎麼样\n[04:06.30]没我的日子 你别来无恙\n[04:12.97]依然亲爱的 我没让你失望\n[04:19.85]让我亲一亲 像过去一样\n[04:25.81]";
    // 这里请按照格式放入相应歌词--结束
                    let audio = document.querySelector('audio');
    
                    let result = parseLyric(text); //执行lyc解析
    
                    // 把生成的数据显示到界面上去
                    let $ul = $("<ul></ul>");
                    for (let i = 0; i < result.length; i++) {
                            let $li = $("<li></li>").text(result[i].content);
                            $ul.append($li);
                    }
                    $(".bg").append($ul);
    
                    let lineNo = 0; // 当前行歌词
                    let preLine =1; // 当播放6行后开始滚动歌词
                    let lineHeight = -30; // 每次滚动的距离
    
                    // 滚动播放 歌词高亮  增加类名active
                    function highLight() {
                            let $li = $("li");
                            $li.eq(lineNo).addClass("active").siblings().removeClass("active");
                            if (lineNo > preLine) {
                                    $ul.stop(true, true).animate({ top: (lineNo - preLine) * lineHeight });
                            }
                    }
    
                    highLight();
    
                    // 播放的时候不断渲染
                    audio.addEventListener("timeupdate", function() {
                            if (lineNo == result.length) return;
                            if ($("li").eq(0).hasClass("active")) {
                                    $("ul").css("top", "0");
                            }
                            lineNo =getLineNo(audio.currentTime);
                            highLight();
                            lineNo++;
                    });
    
                    // 当快进或者倒退的时候，找到最近的后面那个result[i].time
                    function getLineNo(currentTime) {
                            if (currentTime >= parseFloat(result[lineNo].time)) {
                                    // 快进
                                    for (let i = result.length - 1; i >= lineNo; i--) {
                                            if (currentTime >= parseFloat(result[i].time)) {
                                                    return i;
                                            }
                                    }
                            } else {
                                    // 后退
                                    for (let i = 0; i <= lineNo; i++) {
                                            if (currentTime <= parseFloat(result[i].time)) {
                                                    return i - 1;
                                            }
                                    }
                            }
                    }
    
                    //播放结束自动回到开头
                    audio.addEventListener("ended", function() {
                            lineNo = 0;
                            highLight();
                            audio.play();
                            $("ul").css("top", "0");
                    });
            });
            </script>
    </html>

![我最亲爱的][format_png 1]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zNC41MWN0by5jb20vaW1hZ2VzL2Jsb2cvMjAyMDA0LzIyLzZmMTE2MmEyMWFkZjFkNjhjZWM2NDk3Y2ExNjAxNzRkLmpwZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zNC41MWN0by5jb20vaW1hZ2VzL2Jsb2cvMjAyMDA0LzIyLzAzYTMzZWQ4ZWQ1ZGJkN2I1ZjRhZGNiYzczOGNiMzNjLmpwZw?x-oss-process=image/format,png