html如何制作滚动歌词

时间2024-01-29 12:31:03发布访客分类JavaScript浏览826

导读：收集整理的这篇文章主要介绍了html如何制作滚动歌词，觉得挺不错的，现在分享给大家，也给大家做个参考。htML制作滚动歌词的方法：首先在标签里面写好编码格式，引入css样式和jquery；然后放置播放器，代码为【<audio auto...

收集整理的这篇文章主要介绍了html如何制作滚动歌词，觉得挺不错的，现在分享给大家，也给大家做个参考。

htML制作滚动歌词的方法：首先在标签里面写好编码格式，引入css样式和jquery；然后放置播放器，代码为【audio autoplay="autoplay src="爱在西元前.mP3" controls> 】。

本教程操作环境：windows7系统、html5版，DELL G3电脑。

html制作滚动歌词的方法：

首先我们创建一个html文件，名字随便取，比如：index.html,这个简单，不用多说。不着急开始写代码，我们在创建一个css文件，不妨就命名为musicplay.css，js的话我们直接写道html文件里面方便阅读和调整，就不创建新的js文件了，但是你要准备jQuery文件，如果没有也没关系，待会说解决方法。准备工作结束了，我们开始写了，首先在标签里面写好编码格式，顺便也把我们之前创建的css样式和jQuery引入，代码如下：

代码如下：head>

meta charset="UTF-8">
    tITle>
    爱在西元前-周杰伦/title>
    link tyPE="text/css" rel="stylesheet" href="css/musicplay.css" />
    script src="https://cdn.bootcss.COM/jquery/3.4.1/jquery.min.js">
    /script>
    !--注意：这种从网上直接引入的方法需要链接网络，如果你本地下载好了，就把这句话删除，采用下面的映入方式-->
    script src="js/jquery-1.9.1.min.js">
    /script>
    /head>

head内容写好后，我们开始写body里面的了，首先我们用放置播放器，就是标签，代码如下：

center>
     audio autoplay="autoplay src="爱在西元前.mp3" controls>
    /audio>
    /center>
    !--这里修改播放器里面播放的音乐，这里只有简单的控制，没做上一曲，下一曲的功能 ，autoplay="autoplay"属性为自动播放，不想让自动播放删去即可 -->

去即可 --> 接着写一个盒子，代码如下：

盒子的css代码如下（功能见备注）：

接下来就是js脚本事了，我们的设计思路是（分下面几个函数完成）：

函数1：parseLyric()分割歌词，这一步主要是为了分行显示歌词

函数2：highLight()当前放到的歌词高亮显示，为了表示当前唱到那一句了

函数3：audio.addEventListener（）实时渲染，因为是滚动的，所以要不停的渲染

函数4：getLineNo()获取此时的行数，如果我们快进或快退的时候，歌词也要跟着我们的调整而改变

函数5：audio.addEventListener(）播放完回到开始，这个可以不做，没有太意义，这是为了完善功能解释好这几个函数之后，我直接贴代码。

script type="text/javascript">
    $(function() {
        function parseLyric(text) {
      //按行分割歌词             let lyricArr = text.split('\n');
                //console.LOG(lyricArr)//0: "[ti:爱在西元前]" "[ar:周杰伦]"...   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 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>