用HTML5audio组件实现一个音乐播放器

心血来潮就用h5的新标签写了个简单的音乐播放器，实现的过程还是很简单的，对于前端来说最难的部分应该是让音乐盒歌词同步了吧。下面简单的说一下实现的步骤吧！

先看一下成品的图片吧：

这里写图片描述

一. 首先去网站下一些lrc歌词文件，一定要和歌曲的版本对应，不然是不会同步的。

二. 解析lrc文件

这一步是很重要的，由于js只能通过事件来上传文件（点击input[type=file]按钮），所以我们不能直接从客户端来获取文件，只能通过服务器来获取相应的lrc文件的内容，所以就要用ajax请求来获取lrc文件的信息。代码如下：

//从服务器获得歌词
function getLyrics(url){
    var req = getRequest();
    req.open("get", url, true);
    req.setRequestHeader("Content-Type",
        "application/x-www-form-urlencoded; charset=utf-8");
    req.onreadystatechange = function (){
        if (req.readyState == 4){
            var lyrics = req.responseText;
            if (lyrics != 'error') {
                parseLyrics(lyrics);  //请求成功后解析歌词
                create_lyrics();  //让歌词显示在页面上
            }
            else{
                create_noLyrics();  //歌词不存在时显示
            }
        }
    };
    req.send();
}

//歌词对象
var lyricsobj = {
        song: {
            name: '',
            lrcTimeArray: [],
            lrcArray_line: []
        }
    };

//对歌词进行解析
function parseLyrics(lyrics){
    var lyrics_self = lyrics;
    //获取歌词内容，后台用'\n'换行，所以用'\n'分隔字符串
    var lrcArray = lyrics_self.split("\n");
    //初始化让数组为空，分别存储歌词和时间点
    lyricsobj.song.lrcArray_line.length = 0;
    lyricsobj.song.lrcTimeArray.length = 0;

    for (var i = 0; i < lrcArray.length; i++){
        var lrcVal = lrcArray[i].replace(/[dd:dd.dd]/g,":");
        var str = lrcVal.substr(1, 8).split(':');
        var seconds = 0;
        seconds = parseInt(str[0])*60 + parseInt(str[1]);
        var lyrics_line = lrcVal.substring(10);
        if (i == 0) {
            lyricsobj.song.name = lyrics_line;
        }
        lyricsobj.song.lrcArray_line.push(lyrics_line);
        lyricsobj.song.lrcTimeArray.push(seconds);
    }
}

三. 接下来就是如何让歌词随着音乐滚动了

//让歌词滚动
function scroll_lyrics(){
    var audio = document.getElementById("audio");
    var timelist = lyricsobj.song.lrcTimeArray;
    var lyricslist = lyricsobj.song.lrcArray_line;
    var p = document.getElementsByTagName('p');
    for (var i = 0; i < timelist.length; i++){
        if (timelist[i] <= audio.currentTime + 0.5) {
            if (i > 0) {
                p[i - 1].style.color = 'white';
            }
            p[i].style.color = 'yellow';
            var ptop =p[i].offsetTop;  //获得当前歌词距离浏览器顶部的距离
            var parent =  p[i].parentNode.offsetTop;  //获得滚动窗口距离浏览器的距离
            var parentScroll = p[i].parentNode.scrollTop; //获得滚动窗口的滚动距离
            if (ptop - parent - parentScroll > 220){  //比较当前歌词距离滚动窗口顶部的距离，大于220，就让窗口滚动20，根据自己的布局设置
                p[i].parentNode.scrollTop = p[i].parentNode.scrollTop + 50;
            }
            else{
                //控制让当前歌词显示在中间，根据自己的布局设置
                p[i].parentNode.scrollTop = ptop - parent - 220;
            }
        }
    }
}

这里主要用到了组件距浏览器的距离，可以根据自己的布局进行调整，但是有一点是不变的。设歌词到浏览器的距离是x，歌词的容器到浏览器的距离为y，容器滚动的距离为z，所以歌词距离容器顶端的距离就为：d = x - y - z。

四. 选择要听的歌

//点击列表选择要播放的歌曲
function choice_song(e){
    var audio = document.getElementById("audio");
    var elem = e.target;
    audio.src = 'static\\Music\\'+ elem.id +'.mp3';
    var url = '/lyrics?name='+ elem.id;
    document.getElementById("currentSong").innerHTML = elem.innerHTML;
    getLyrics(url);
}

这里很简单，获得歌名发给服务器就ok了。

---

实现的步骤大概就是这样，后台的代码就不贴了，比较简单，如果感兴趣可以自己动手写个的，github地址：https://github.com/lwjcode/Music-player
觉得可以可以下下来参考哦，给个星也是很棒的！哈哈。