码迷,mamicode.com
首页 > 其他好文 > 详细

我最亲爱的

时间:2020-04-22 11:43:52      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:indexof   cto   font   http   pad   ++   current   absolute   浪漫   

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

技术图片

<!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: 100%;/* 歌词显示盒子宽 */
                height: 100px;/* 歌词显示盒子高度,需要多显示几行歌词相应调大即可 */
                /*  */ /* 歌词背景颜色 */
                background-color: #74BC68;
                margin: 15px auto;
                color: deeppink;/* 歌词默认颜色,灰色 */
                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>

技术图片

我最亲爱的

标签:indexof   cto   font   http   pad   ++   current   absolute   浪漫   

原文地址:https://blog.51cto.com/13479739/2489271

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!