本教程操作环境：windows7系统、html5版，DELL G3电脑。
html制作滚动歌词的方法：
首先我们创建一个html文件，名字随便取，比如：index.html,这个简单，不用多说。不着急开始写代码，我们在创建一个css文件，不妨就命名为musicplay.css，js的话我们直接写道html文件里面方便阅读和调整，就不创建新的js文件了，但是你要准备jQuery文件，如果没有也没关系，待会说解决方法。准备工作结束了，我们开始写了，首先在标签里面写好编码格式，顺便也把我们之前创建的css样式和jQuery引入，代码如下：
代码如下：
立即学习“前端免费学习笔记（深入）”；
爱在西元前-周杰伦
head内容写好后，我们开始写body里面的了，首先我们用放置播放器，就是标签，代码如下：
去即可 –>接着写一个盒子，代码如下：
盒子的css代码如下（功能见备注）：
接下来就是js脚本事了，我们的设计思路是（分下面几个函数完成）：
函数1：parseLyric()分割歌词，这一步主要是为了分行显示歌词
函数2：highLight()当前放到的歌词高亮显示，为了表示当前唱到那一句了
函数3：audio.addEventListener（）实时渲染，因为是滚动的，所以要不停的渲染
函数4：getLineNo()获取此时的行数，如果我们快进或快退的时候，歌词也要跟着我们的调整而改变
函数5：audio.addEventListener(）播放完回到开始，这个可以不做，没有太意义，这是为了完善功能解释好这几个函数之后，我直接贴代码。
$(function() { function parseLyric(text) { //按行分割歌词 let lyricArr = text.split('n'); //console.log(lyricArr)//0: "[ti:爱在西元前]" "[ar:周杰伦]"... let result = []; //新建一个数组存放最后结果 //遍历分割后的歌词数组，将格式化后的时间节点，歌词填充到result数组 for (i = 0; i 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 = $("相关学习推荐：html视频教程
以上就是html如何制作滚动歌词的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1549192.html
微信扫一扫 
支付宝扫一扫 
