HTML+CSS+JS做一个简易音乐播放器

先给大家看下效果：

实现功能：音乐播放，歌词跟随进度滚动，中间随着音乐播放图片360度旋转

文件目录：

做一个播放器，音乐和歌词事先要下载好，搜一些自己喜欢的封面，让图片360度旋转的样式，通过按钮增删样式达到跟音乐同步进行：

.img{
            animation: img 18s linear infinite;
            -moz-animation: img 18s linear infinite;
            -webkit-animation: img 18s linear infinite;
            -o-animation: img 18s linear infinite;
            animation-play-state:paused;
        }

        .running{
            animation-play-state:running;
        }

        .stop{
            animation-play-state:paused;
        }

// 播放
    play.onclick = function(){
        if(audio.paused){
            audio.play();
            document.getElementById("musicImg").classList.remove("stop");
            document.getElementById("musicImg").classList.add("running");
        }

    }
    // 暂停
    pause.onclick = function(){
        if(audio.played){
            audio.pause();
            document.getElementById("musicImg").classList.remove("running");
            document.getElementById("musicImg").classList.add("stop");
        }
    }

其中歌词匹配才是让我头疼的，所有JS代码部分：

<script type="text/javascript">


    var play = document.getElementById('play'),
        pause = document.getElementById('pause'),
        prev = document.getElementById('prev'),
        next = document.getElementById('next'),
        musicName = document.getElementById('musicName'),
        musicImg = document.getElementById('musicImg'),
        bgImage = document.getElementById('music');
    /*var lrc = document.getElementById("lrc_content").innerHTML;*/
    //添加歌词
    var lrc="";
    var lrcName = new Array();
    var lrcName1;
    lrcName = ['你听得到','爱在西元前'];
    var music = new Array();
    music = ['周杰伦-你听得到','周杰伦-爱在西元前'];
    var len = music.length;
    var num = 0;
    lrcName1 = lrcName[num];
    var oLRC = {
        ti: "", //歌曲名
        ar: "", //演唱者
        al: "", //专辑名
        by: "", //歌词制作人
        offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
        ms: [] //歌词数组{t:时间,c:歌词}
    };

    var lineNo=0//当前行
    var C_pos= 6//C位
    var offset= -20//滚动距离（应等于行高）
    var audio = document.getElementById("audio");//播放器
    var ul = document.getElementById("lyric"); //歌词容器列表

    getLRC(lrcName1);

    //高亮显示歌词当前行及文字滚动控制，行号为lineNo
    function lineHigh() {
        var lis = ul.getElementsByTagName("li");//歌词数组
        if(lineNo>0){
            lis[lineNo-1].removeAttribute("class");//去掉上一行的高亮样式
        }
        lis[lineNo].className = "lineHigh";//高亮显示当前行

        //文字滚动
        if(lineNo>C_pos){
            ul.style.transform = "translateY("+(lineNo-C_pos)*offset+"px)"; //整体向上滚动一行高度
        }
    }

    //滚回到开头，用于播放结束时
    function goback() {
        document.querySelector("#lyric .lineHigh").removeAttribute("class");
        ul.style.transform = "translateY(0)";
        lineNo = 0;

    }

    //监听播放器的timeupdate事件，实现文字与音频播放同步
    audio.ontimeupdate = function () {
        if(lineNo==oLRC.ms.length)
            return;
        var curTime = audio.currentTime; //播放器时间
        if(parseFloat(oLRC.ms[lineNo].t)<=curTime){
            lineHigh();//高亮当前行
            lineNo++;
        }
    };

    //监听播放器的ended事件，播放结束时回滚歌词
    /*audio.onended = function () {
        goback();
    };*/

    function getLRC(lrcName) {

        lrc = "";
        var ajax = new XMLHttpRequest();
        ajax.open("get", "lrc/"+lrcName +".lrc",true);
        ajax.send(null);
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {

                lrc = ajax.responseText;
                createLrcObj(lrc);
                //console.log(lrc);
            }
        };

    }

    function createLrcObj(lrc) {

        if(lrc.length==0) return;
        var lrcs = lrc.split('\n');//用回车拆分成数组

        for(var i in lrcs) {//遍历歌词数组
            lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
            var t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容
            var s = t.split(":");//分离:前后文字
            if(isNaN(parseInt(s[0]))) { //不是数值
                for (var i in oLRC) {
                    if (i != "ms" && i == s[0].toLowerCase()) {
                        oLRC[i] = s[1];
                    }
                }
            }else { //是数值
                var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个
                var start = 0;
                for(var k in arr){
                    start += arr[k].length; //计算歌词位置
                }
                var content = lrcs[i].substring(start);//获取歌词内容

                for (var k in arr){
                    var t = arr[k].substring(1, arr[k].length-1);//取[]间的内容
                    var s = t.split(":");//分离:前后文字
                    oLRC.ms.push({//对象{t:时间,c:歌词}加入ms数组
                        t: (parseFloat(s[0])*60+parseFloat(s[1])).toFixed(3),
                        c: content
                    });
                }
            }
        }

        oLRC.ms.sort(function (a, b) {//按时间顺序排序
            return a.t-b.t;
        });
        showLRC();
    }

    function showLRC() {
        var s="";
        for(var i in oLRC.ms){//遍历ms数组，把歌词加入列表
            s+='<li>'+oLRC.ms[i].c+'</li>';
        }
        document.getElementById("lyric").innerHTML = s;

    }



    // 播放
    play.onclick = function(){
        if(audio.paused){
            audio.play();
            document.getElementById("musicImg").classList.remove("stop");
            document.getElementById("musicImg").classList.add("running");
        }

    }

    function hasClass(element,className){
        var aSameClassEle  = document.getElementsByClassName(className);
        for (var i = 0;i < aSameClassEle .length;i++){
            if(aSameClassEle[i] === element){
                return true;
            }
        }
    }

    // 暂停
    pause.onclick = function(){
        if(audio.played){
            audio.pause();
            document.getElementById("musicImg").classList.remove("running");
            document.getElementById("musicImg").classList.add("stop");
        }
    }

    // 上一首
    prev.onclick = function(){
        num = (num + len - 1) % len;
        audio.src = './music/' + music[num] + '.mp3';
        lrcName1 = lrcName[num];
        lineNo = 0;
        oLRC.ms = [];
        getLRC(lrcName1);
        musicName.innerHTML = music[num];
        bgImage.style.backgroundImage = 'url(./image/' + music[num] + '.jpg)';
        musicImg.src = './image/' + music[num] + '.jpg';
        play.onclick();
    }

    // 下一首
    next.onclick = function(){
        num = (num + 1) % len;
        audio.src = './music/' + music[num] + '.mp3';
        lrcName1 = lrcName[num];
        lineNo = 0;
        oLRC.ms = [];
        getLRC(lrcName1);
        musicName.innerHTML = music[num];
        bgImage.style.backgroundImage = 'url(./image/' + music[num] + '.jpg)';
        musicImg.src = './image/' + music[num] + '.jpg';
        play.onclick();
    }

    // 自动切换下一首
    audio.addEventListener('ended',function(){
        goback();
        next.onclick();
    },false);
</script>

需要所有源码，可以去github上自行下载：
https://github.com/lzs1996/MusicPlayer.git