html5音乐背景歌词滚动,html如何制作滚动歌词

html制作滚动歌词的方法：首先在标签里面写好编码格式，引入css样式和jQuery；然后放置播放器，代码为【】。

本教程操作环境：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()实时渲染&