首页 > 代码库 > HTML5实现歌词同步

HTML5实现歌词同步

开篇

HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就能够实现视频播放。相似地,在HTML5中也有相应的处理音频文件的标签,那就是audio标签

在线Demo

audio标签

实现一个audio标签非常easy,相应的html代码例如以下:

<audio id="player" 
    src="music/我在人民广场吃炸鸡.mp3" 
    autoplay controls>
</audio>

上述代码不须要一行js脚本就能实现音乐播放。当中有三个经常使用的属性,分别为:音频源文件,是否自己主动播放以及是否显示播放器控件。

因为没有不论什么ui的展现,audio标签在chrome的默认风格例如以下图:

技术分享

能够看出,一个主要的播放器还包含了显示当前时间。播放,暂停,快进快退等功能。这些功能都决定了怎样非常好的实现歌词同步(兴许介绍)。

既然这么easy就就能播放音乐,那作为一项前端的技术。audio标签在各个浏览器中的兼容性又是怎样的呢?
Browser Compatibility

技术分享

能够看出,各大浏览器对audio标签基本功能都支持。仅仅是在细微的特性上表现不一,可是这些主要的功能已经足已做出一个好的播放器。

歌词

一般标准的lyric文件是由[时间]内容的tag标签组成,例如以下图:

技术分享

为了更精确的展现每一个字在每句歌词中的时间,又出现了特殊的歌词形式,例如以下:

技术分享

这样的歌词的格式的最好样例就是QRC歌词文件(如QQ音乐播放器):

技术分享

为了描写叙述简单,本文仅以最简单的lyric格式作为说明。解说怎样分离歌词进行歌词同步。

例如以下,为一首歌曲的歌词文件:

技术分享

现对该歌词文件作一下处理:

  • 1.以行为单位拆分每一句歌词
  • 2.将没句歌词的时间tag和内容分离
  • 3.将时间转换为分钟

转换过程较为简单,仅仅需一个简单的正则匹配,步骤例如以下:

技术分享

分离出来的[时间,内容]能够与audio当前的播放时间进行对照,若须要显示相应的歌词则将该行高亮,同一时候每次更新相应DOM节点的top则可在视觉上达到滚动效果。

制作歌词ui。

  • 1.定义一个现实歌词的区域,加入audio控件

技术分享

  • 2.加入背景图片,制作标题边框

技术分享

  • 3.加入歌词

技术分享

到此。歌词同步以及ui绘制所有完成。

在线Demo

PS:CSDN的markdown样式太水了,能够看看以下其它的链接。

Blog同步

简书同步

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

HTML5实现歌词同步