先给大家展示下效果图:

各种音乐播放器上都有一个自动滚动播放歌词的功能,当前滚动到的歌词会高亮居中显示,即使歌词被换行也能正常居中,那么这个功能基于JavaScript怎么实现让歌词滚动播放呢?请看下文详解。

图片 1

一般音乐播放器使用的歌词格式都是lrc,为了方便处理,我们这里使用XML格式的歌词。介绍一个网站:中文歌词库。它提供xml格式的歌词。

完整demo如下

我们先来看一下这个例子的最终效果:

每两秒随机向上或者向下滚动,如果要替换新内容,则通过html()更新内容即可(查看注释代码)

图片 2

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章