html5使用Audio标签打造音乐播放器的例子

这个是我们今天的重头戏，也是一切的根源，使用HTML5的audio标签去打造播放器，在用这个之前我们需要了解些audio标签的基本用法。

你可以这样：

也可以这样:

我们可以从上面的实例看出HTML5的audio标签用起来还是很简单的。而且audio标签还有诸多的属性可以使用例如loop,preload等。在后面的开发中我们主要使用的是HTML5的事件属性。

开始打造

首先我们来构造一个播放按钮

var audio = document.getElementById('audio'); //重要
$(function() {
    $("#play").on('click',function(){
        if(audio.paused) {
            audio.play();
        } else {
            audio.pause();
        }
    }) 
}
这样我们就实现了简单的播放暂停功能，我就不加样式了。

然后我们再来加一个播放进度。

创建一个div

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标签事件属性

歌词同步

创建歌词容器

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]);
        };
    };
};