javascript開發迷你音樂播放器

標籤：javascript   前端   音樂   播放器   源碼   

知識點：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開發迷你音樂播放器