html5使用Audio标签打造音乐播放器的例子
这个是我们今天的重头戏，也是一切的根源，使用HTML5的audio标签去打造播放器，在用这个之前我们需要了解些audio标签的基本用法。
你可以这样：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
也可以这样:
<audio src="xxx.mp3" controls></audio>
我们可以从上面的实例看出HTML5的audio标签用起来还是很简单的。而且audio标签还有诸多的属性可以使用例如loop,preload等。在后面的开发中我们主要使用的是HTML5的事件属性。
开始打造
首先我们来构造一个播放按钮
<audio id="audio" src="xxx.mp3"></audio>
<div id="play"></div>
然后我们利用audio标签的play和pause属性实现暂停和播放（本文基于jQuery）。
var audio = document.getElementById('audio'); //重要
$(function() {
$("#play").on('click',function(){
if(audio.paused) {
audio.play();
} else {
audio.pause();
}
})
}
这样我们就实现了简单的播放暂停功能，我就不加样式了。
然后我们再来加一个播放进度。
创建一个div
<div id="progress"><span id="current">00</span><span id="duration">00</span></div>
然后编写JS改变内容
var progress = function() {
var currentTime = audio.currentTime; //获取播放时间（秒为单位），如何转换为分钟我就不多说了，自己百度，或者去我演示地址拔。
$("#current").html(currentTime);
}
var time = function() {
var song = audio.duration; //获取歌曲时间
$("#duration").html(song);
}
//添加监听
audio.addEventListener("loadedmetadata",time);
audio.addEventListener("timeupdate",progress);
然后改变音量进度啥的自己直接把值赋给对应的就可以了。
例如:
var volume = function(value) {
audio.volume = value; //volume 属性设置或返回音频的音量，从 0.0 (静音) 到 1.0 (最大声)。
}
进度类似，可以百度一下，我就不写了。
AUDIO标签事件属性
歌词同步
创建歌词容器
<div id="lrc"></div>
Js代码
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();
}
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.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 lrc = $("#lrc");
//监听ontimeupdate事件
audio.addEventListener("timeupdate",function() {
//遍历所有歌词，看哪句歌词的时间与当然时间吻合
for (var i = 0, l = lyric.length; i < l; i++) {
if (audio.currentTime /*当前播放的时间*/ > lyric[i][0]) {
lrc.html(lyric[i][3]);
};
};
};
