知識點：html/css布局思維，音頻標簽api運用，css3自定義動畫，Js音樂播放控制，歌詞同步等。

html代碼：

    <textarea id="txt" style="display:none">
        [00:00.64]小幸運 - 譚嘉儀
        [00:02.15]詞：徐世珍&吳輝福
        [00:03.70]曲：JerryC
        [00:04.14]編曲：JerryC
        [00:13.77]我聽見雨滴落在青青草地
        [00:19.89]我聽見遠方下課鐘聲響起
        [00:25.74]可是我沒有聽見你的聲音
        [00:30.74]認真 呼喚我姓名
        [00:37.92]愛上你的時候還不懂感情
        [00:44.12]離別了才覺得刻骨 銘心
        [00:50.09]為什麽沒有發現遇見了你
        [00:54.70]是生命最好的事情
        [01:00.30]也許當時忙著微笑和哭泣
        [01:06.36]忙著追逐天空中的流星
        [01:12.12]人理所當然的忘記
        [01:16.55]是誰風裏雨裏一直默默守護在原地
        [01:24.44]原來你是我最想留住的幸運
        [01:29.69]原來我們和愛情曾經靠得那麽近
        [01:35.67]那為我對抗世界的決定
        [01:40.29]那陪我淋的雨
        [01:43.28]一幕幕都是你 一塵不染的真心
        [01:50.60]與你相遇 好幸運
        [01:53.96]可我已失去為你淚流滿面的權利
        [01:59.98]但願在我看不到的天際
        [02:04.63]你張開了雙翼
        [02:07.68]遇見你的註定 她會有多幸運
        [02:27.28]青春是段跌跌撞撞的旅行
        [02:33.44]擁有著後知後覺的美麗
        [02:39.55]來不及感謝是你給我勇氣
        [02:44.22]讓我能做回我自己
        [02:49.72]也許當時忙著微笑和哭泣
        [02:55.55]忙著追逐天空中的流星
        [03:01.61]人理所當然的忘記
        [03:06.03]是誰風裏雨裏一直默默守護在原地
        [03:13.79]原來你是我最想留住的幸運
        [03:19.05]原來我們和愛情曾經靠得那麽近
        [03:25.17]那為我對抗世界的決定
        [03:29.68]那陪我淋的雨
        [03:32.56]一幕幕都是你 一塵不染的真心
        [03:39.89]與你相遇 好幸運
        [03:43.40]可我已失去為你淚流滿面的權利
        [03:49.32]但願在我看不到的天際
        [03:53.97]你張開了雙翼
        [03:56.98]遇見你的註定
        [04:00.47]Oh 她會有多幸運
        </textarea>
        <div class="photo">
            <div class="top"></div>
            <div class="title">小幸運</div>
            <div class="singer">譚嘉儀</div>
            <div class="play"></div>
            <div class="lrc">
                <div class="content"></div>
            </div>
        </div>
        <audio src="mp3/譚嘉儀-小幸運.mp3" id="myMusic"></audio>
 

css代碼：

    <style type="text/css">
                *{
        margin:0;
        padding:0;
        }
        body{
            background: rgb(55, 76, 86);
        }
        .photo{
            width:320px;
            height:600px;
            margin:100px auto;
            background:#000;
            font-family:"微軟雅黑";
            padding: 5px;
            background-color:#222;
            border-radius: 20px;
            box-shadow: 0 0 7px #fff;
            overflow: hidden;
        }
        .top{
            width:320px;
            height:23px;
            background:url("images/1.png") no-repeat;
        }
        .title{
            width:320px;
            height:30px;
            background:url("images/2.png") no-repeat;
            font-size:20px;
            color:#ccc;
            font-weight:bold;
            text-align:center;
            line-height:30px;
        }
        .play{
            width:190px;
            height:190px;
            background:url("images/3.png") no-repeat;
            margin:auto;
            border-radius:50%;
        }
        .singer{
            width:320px;
            font-size:14px;
            color:#ccc;
            text-align:center;
            line-height:40px;
        }
        .lrc{
            width:300px;
            height:285px;
            margin:20px auto;
            text-align:center;
            overflow:hidden;
            color:#ccc;
        }
        .lrc p{
            line-height:20px;
            font-size:12px;
        }
        .content{
            position:relative;
            left:0;
            top:0;
        }
        .play.rotate{
            -webkit-animation:rot 5s linear infinite;
            -moz-animation:rot 5s linear infinite;
            -ms-animation:rot 5s linear infinite;
            -o-animation:rot 5s linear infinite;
            animation:rot 5s linear infinite;
        }

        @keyframes rot{
            from{transform:rotate(0deg);}
            to{transform:rotate(360deg);}
        }

    </style>
 

javascript代碼：

    <script type="text/javascript">
    //window.onload=function(){}頁面加載後執行
    var btn = document.getElementsByClassName("play")[0];//通過class類名去獲取元素 數組的形式儲存  []
    var myMusic = document.getElementById("myMusic");//通過ID
    var txt = document.getElementById("txt");
    var con = document.getElementsByClassName("content")[0]

    var mark = true;//布爾值   true真  false假
    btn.onclick = function(){
        if (mark)//隱式轉換  i > 1
        {
            this.className += " rotate";
            myMusic.play();//播放音樂
            mark = false;
        }else{
            this.className = "play";
            myMusic.pause();//音樂暫停
            mark = true;
        }
    }
    var lrc = txt.value;
    var lrcArr = lrc.split("[");//從哪個字符開始，分隔成數組
    var html = "";
    for (var i = 0;i<lrcArr.length ;i++ )
    {
        var arr = lrcArr[i].split("]");//分隔歌詞與時間
        var time = arr[0].split(".");//分隔毫秒與其他時間
        var timer = time[0].split(":");//分隔分鐘與秒
        var ms = timer[0]*60 + timer[1]*1;//轉化為秒鐘
        //字符串類型乘以數字類型就會轉化成為數字類型
        var text = arr[1];//獲取歌詞部分
        if (text){
        html +="<p id="+ms+">"+text+"</p>";
        }
        con.innerHTML = html;
    }
    var num = 0;
    var oP = con.getElementsByTagName("p");//通過標簽名獲取所有p元素
    myMusic.addEventListener("timeupdate",function(){
        var curTime = parseInt(this.currentTime);//獲取歌曲播放的時間 以秒為單位
        if (document.getElementById(curTime))
        {
            for (var i = 0;i<oP.length ;i++)
            {
                oP[i].style.cssText = "color:#ccc;font-size:12px;"//在播放下一句之前把所有的歌詞樣式還原
            }
            document.getElementById(curTime).style.cssText = "color:red;font-size:18px;"
            if (oP[7+num].id == curTime)
            {
                con.style.top = -20*num + "px";
                num ++;//依次加一
            }
        }

    });//監聽

    </script>
 

有興趣想學習web前端的可以來web前端qun“189394454”可以免費獲取2018最新web前端學習資料。
關註公眾號→‘學習web前端’開啟你的web前端學習之路

javascript開發迷你音樂播放器