【H5 音樂播放實例】第四節 音樂詳情頁製作 -音樂的播放和暫停

音樂的播放和暫停

在播放按鈕的點擊事件裏，不能手動去設置src，這樣會導致音樂的暫停無法控制。而應該直接在audio標籤內把src寫好。

改寫playMusic方法：

當暫停音樂的時候，同時也要把xuanzhuan樣式類去掉。

進度條

效果：

方法就是在mbox最後面加上一個div，作爲進度條：

通過控制div的width 來顯示歌曲的播放進度。

代碼：

window.onload = function(){

    //給音樂播放器（audio）添加一個timeupdate時間
    document.getElementById("music").ontimeupdate = function(){

        var currentTime = Math.floor(this.currentTime); //獲取當前時間

       
        var m = parseInt(currentTime / 60);//分鐘
        var s = parseInt(currentTime % 60);//秒鐘
        var time = (m<10?("0"+m):m)+":"+(s<10?("0"+s):s); //格式化

        //console.log(time); //打印出來看看

        // 百分比 = 當前時長 ÷ 總時長 × 100%
        var total = this.duration;//總時長
        //console.log(currentTime + '=======' + total);
        //console.log( Math.floor(currentTime / total * 100) + "%" );


        document.getElementsByClassName("progress")[0].style.width = Math.floor(currentTime / total * 100) + "%" ;

    }

}

完成！