论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc)。
用法如下(代码来自W3School):
<video width="320" height="240" controls><source src="forrest_gump.mp4" type="video/mp4"><source src="forrest_gump.ogg" type="video/ogg"><track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"><track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> </video>
但遗憾的是,使用起来还有不便之处。一是浏览器支持情况不太理想,连强大的FireFox(目前28.0)都还没支持,这你敢信!?。二是格式不兼容现有字幕或歌词文件,至少得需要个转换工具吧。
所以在它流行起来之前,考虑另外的实现还是有必要的。
效果预览
效果预览页面:http://wayou.github.io/selected/
如果你网速流畅的话,尽情欣赏我精选的这些歌曲吧(不时更新),只是别忘了star,也可以fork后添加自己喜欢的歌曲。
项目GitHub地址:https://github.com/wayou/selected
具体实现可以前往项目的GitHub页面下载代码进行查看,下面介绍思路和简单的实现。
歌词文件的格式
实现之前,当然得了解一下歌词文件的格式了。常规歌词文件的格式基本是一句一行,每行由两部分组成,前面是中括号括起来的时间轴,后面紧跟歌词,像下面这样:
[ar:文筱芮] [by:airplay] [00:00.00]那个 [00:03.00]作词:文筱芮 作曲:文筱芮 [00:06.00]编曲:于韵非 [00:09.00]制作人:胡海泉 秦天 [00:12.00]演唱:文筱芮
这样挺有规律的,用正则可以很方便地将时间与歌词提取分离。
但凡事得多个心眼啊。事后发生的事情证明这句话有多正确。我在整理歌词时还发现了另外一种形式,像下面这样:
[ar:庭竹] [al:爱的九宫格] [by:airplay] [00:00.17]庭竹 - 公主的天堂 [00:05.40]作曲:陈嘉唯、Skot Suyama 陶山、庭竹 [00:07.33]作词:庭竹 [00:15.59]风铃的音谱 在耳边打转 [00:18.62]城堡里 公主也摆脱了黑暗的囚禁 [00:22.82]她一点点地 无声悄悄地慢慢长大 [00:26.36]期待着 深锁木门后的世界 [01:38.72][00:29.76] [01:51.48][00:30.32]树上 小鸟的轻响 在身边打转 [01:55.35][00:34.09]公主已 忘记木制衣橱背后的惆怅 [01:59.65][00:38.35]她跳舞唱歌天真无邪地寻找属于自己的光亮和快乐 [02:06.98][00:45.76] [02:07.41][00:46.06]树叶一层层拨开了伪装 [02:11.29][00:50.25]彩虹一步步露出美丽脸庞 无限的光亮
这种形式的歌词把歌词内容相同但时间不同的部分合并,节省了篇幅。
所以,现在知道的歌词其实有两种写法了,不过都还算规律,用正则可以搞定,只是对于第二种,处理时得将时间再次分割。
具体思路
- 首先将LRC文件读取为文本
- 用String.prototype.split('\n');将整个文本以换行符为单位分隔成一行一行的文本,保存到一个数组中
- 然后将开头部分不属于歌词的文本去掉,得到只有时间与歌词的干净文件
- 对于每一行,匹配出时间与文字,分别存入数组[time,text],然后将每行得到的这样的数组存入一个大的数组[[time,text],[time,text]…]
- 利用Audio标签的ontimeupdate事件,不断比较当然播放时间audio.currentTime与数组中每个元素中时间,如果当前时间大于某个歌词中的时间,则显示该歌词
文件读取
在具体处理歌词前,需要解决一个问题就是如何把歌词文件读取到代码中。对于文件读取,JavaScript中可以用FileReader,但它需要手动选择文件,也就是你得在页面放一个file类型的input或者实现文件拖拽操作,显示不可能让用户听歌的时候自己去找歌词然后上传,多麻烦。但JavaScript是没有办法操作本地文件的能力的,那就只能通过XMLHttpRequest(Ajax)发起一个到服务器的请求来获得文件了,这样一来,我们的程序就必需得运程在服务器上面。所以当你从GitHub下载了本文的源码后是无法直接运行的,请挂到本地服务器上观看效果。
下面展示了如何发起一个Ajax请求来获得歌词文件。
function getLyric(url) {//建立一个XMLHttpRequest请求var request = new XMLHttpRequest();//配置, url为歌词地址,比如:'./content/songs/foo.lrc'request.open('GET', url, true);//因为我们需要的歌词是纯文本形式的,所以设置返回类型为文本request.responseType = 'text';//一旦请求成功,但得到了想要的歌词了request.onload = function() {//这里获得歌词文件var lyric = request.response;};//向服务器发送请求request.send(); }
通过上面的代码就可以LRC文件读取成文本,然后就可以进行下一步处理了。
提取分离
因为时间我歌词的分隔是很有规律的,先通过\n将所有文字分隔成一行行存入数组,然后根据文章开始分析的思路一步一步提取分离。为此写一个解析歌词的函数。
function parseLyric(text) {//将文本分隔成一行一行,存入数组var lines = text.split('\n'),//用于匹配时间的正则表达式,匹配的结果类似[xx:xx.xx]pattern = /\[\d{2}:\d{2}.\d{2}\]/g,//保存最终结果的数组result = [];//去掉不含时间的行while (!pattern.test(lines[0])) {lines = lines.slice(1);};//上面用'\n'生成生成数组时,结果中最后一个为空元素,这里将去掉lines[lines.length - 1].length === 0 && lines.pop();lines.forEach(function(v /*数组元素值*/ , i /*元素索引*/ , a /*数组本身*/ ) {//提取出时间[xx:xx.xx]var time = v.match(pattern),//提取歌词value = v.replace(pattern, '');//因为一行里面可能有多个时间,所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式,需要进一步分隔time.forEach(function(v1, i1, a1) {//去掉时间里的中括号得到xx:xx.xxvar t = v1.slice(1, -1).split(':');//将结果压入最终数组result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);});});//最后将结果数组中的元素按时间大小排序,以便保存之后正常显示歌词result.sort(function(a, b) {return a[0] - b[0];});return result; }
这一步,我们便得到 了一个总的数组,它的元素是一些小的数组,这些小数组包含两个元素,一个是时间,并且这个时间已经由分:秒的形式转化为了秒,一个是时间对应的歌词[['秒数','歌词'], ['秒数','歌词']…]。
歌词同步
接下来就是先把全部歌词显示到页面,进行滚动式显示,或者也可以不全部显示,像电影字幕一样,唱一句显示一句。
下面看如何同步。当歌曲播放时,监听audio标签的ontimeupdate事件,即时更新显示歌词到页面即可。
//获取页面上的audio标签 var audio = document.getElementsByTagName('audio'),//显示歌词的元素lyricContainer = document.getElementById('lyricContainer'); //监听ontimeupdate事件 audio.ontimeupdate = function(e) {//遍历所有歌词,看哪句歌词的时间与当然时间吻合for (var i = 0, l = lyric.length; i < l; i++) {if (this.currentTime /*当前播放的时间*/ > lyric[i][0]) {//显示到页面lyricContainer.textContent = that.lyric[i][1];};}; };
我在selected项目中使用的是滚动显示的形式,但显示形式是可以变的,关键是同步的方法,可以多理解一下。
总结
上面的做法处理了多时间共处一行的情况,所以对于大多数歌词文件来说都是可行的,目前还没有发现另外形式的歌词文件。上面介绍的方法同样适用于video标签在播放视频时同步字幕,只是用于匹配的正则表达式需要更改,因为字幕文件的格式较歌词又不同了。同时字幕文件也分很多种后缀,但实现起来同样是利用media tag的ontimeupdate事件。
REFERENCE
http://www.html5rocks.com/en/tutorials/track/basics/
http://www.w3schools.com/tags/ref_av_dom.asp
http://www.w3schools.com/tags/tag_track.asp
论HTML5 Audio 标签歌词同步的实现相关推荐
- html5 audio实现歌词同步
audio标签用于播放音频文件,很不幸,歌词文件并没有相应接口 addTextTrack() 向音频添加新的文本轨道.//各大浏览器都没有支持 有两种方法可以实现歌词同步: 1. 使用setInter ...
- HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函 ...
- HTML5 audio 标签-在html中定义声音的标签
2019独角兽企业重金招聘Python工程师标准>>> 本文来源 169it HTML 5 <audio> 标签定义和用法 <audio> 标签定义声音,比如 ...
- HTML5 Audio标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- HTML5 Audio/标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style>#volumeSlider .slider-selection {background:#bababa;} </style&g ...
- HTML5 audio 标签 播放事件流程
此代码包括了html5 audio 标签 整个播放流程. 你可以暂停,调整音量,拖动进度条 观察一下 var audio = new Audio(); document.body.appendChi ...
- Javascript控制html5 Audio标签
Javascript控制html5 Audio标签 9 Replies 在上一篇文章:Html5 audio标签(属性)的使用详解中已经把关于audio标签的如何使用以及支持属性说清楚了.这里写篇文章 ...
- html5比html4的音频使用方法,HTML5 audio标签的用法示例
您的位置:首页 - 教程 - HTML5 - 正文 HTML5 audio标签的用法示例 标签定义声音,比如音乐或其他音频流.html5 audio可以不用Flash插件就可以听音乐看视频,并不是全部 ...
- html5音乐和歌词同步,HTML5实现歌词同步
开篇 HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签. audio标签 实现一 ...
最新文章
- GPB|农业生产活动对水体微生态的重要影响(一作解读)
- 记录一下HALCON检测螺钉是否存在
- Spring定时器表达式
- Review on Optical Flow Research
- 利用python对excel文件进行操作_数据处理-对Excel文件读取和操作和存储(python版)...
- 【转】gem install libv8 错误
- CAD 卸载工具,完美彻底卸载清除干净cad各种残留注册表和文件
- HashMap,LinkedHashMap,TreeMap应用
- 计算机实验室建设论证报告,计算机实验室实习报告-报告.doc
- matlab解常微分方程——符号解法
- 对数学建模有帮助的app—1checker
- java 判断星期几_Java中如何判断某天是星期几
- 微信支付可能改变的六大行业
- 如何在MacBook Pro上使用原彩显示功能?
- BZOJ3387栅栏(另一种解法:spfa)
- 百度网盘 http://pandownload.com/index.html
- MTK如何配置长按关机
- dns劫持 tplink_路由器dns被劫持有什么后果【图】
- image adaptive 3dlut based on deep learning
- 使用m文件调用simulink