html如何制作滚动歌词


本文摘自PHP中文网,作者coldplay.xixi,侵删。

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>

1

2

3

4

5

<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里面的了,首先我们用放置播放器,就是标签,代码如下:

1

2

3

<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()播放完回到开始,这个可以不做,没有太意义,这是为了完善功能解释好这几个函数之后,我直接贴代码。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<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 换行符,然后删除多余空行.即可!

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

// 这里请按照格式放入相应歌词--结束       

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视频教程

以上就是html如何制作滚动歌词的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html中代码怎么进行注释

Html如何关闭当前页面

Html如何插入视频

Html下划线颜色怎么改

vue源码之目录结构的简单分析

Html怎么设置字体颜色?Html字体颜色设置的三种方法

Html块级标签行内标签的显示模式

Html怎么设置超链接颜色

Html如何创建电子邮件链接

Html里文字居中代码怎么写?

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...