html5 audio支持语音流播放器,html5 audio之分享版音乐播放器

关于项目

该项目基于HTML5 audio api 完成的一个分享版简易音乐播放器。

关于歌词

Lrc歌词文件：大部分MP3显示歌词的方法使用的是lrc格式的歌词文件，也是当前网络上最流行的一种歌词格式。LRC通常有合并和展开两种形式：合并LRC歌词是将歌词内容相同的合并起来，多个时间标签对应一句歌词；展开LRC是一个时间标签对应一句歌词。合并LRC可以节省磁盘空间。

lrc_1.png

lrc_2.png

解析歌词

parseLyric: function(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.xx

var 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;

}

解析歌词

var lyric = []; //歌词结果数组

this.audio.addEventListener('timeupdate', function(){

var curTime = this.currentTime;

lyric.forEach(function(v, i){

if (curTime > v[0]) { // 当前时间大于歌词对应的时间，高亮显示歌词

$('#line-'+ (i>0 ? i-1 : i)).classList.remove('current');

$('#line-'+ i).classList.add('current'); // 设置当前歌词样式

$lyric.style.transform = 'translate3d(0,-'+ 42*i +'px,0)'; // 每行歌词行高是42px

}

});

});

audio api

属性

currentTime 设置或返回音频/视频中的当前播放位置(以秒计)

duration 返回当前音频/视频的长度(以秒计)

事件

canplay 当浏览器可以播放音频/视频时

play 当音频/视频已开始或不再暂停时

ended 当目前的播放列表已结束时

timeupdate 当目前的播放位置已更改时

项目预览

1. npm install

2. npm run dev