HTML5+JavaScript+CSS實現音樂播放器——難點二:本身設計一個控制音樂播放的控制器

 

咱們都知道HTML5給咱們提供了"controls"這個插件，但是這個插件卻比較醜，還不能實現上一首下一首的播放，以及進度條的手動改變等功能，那麼如何本身設計一個控制音樂播放的控制器呢？下圖是我設計的控制器。

1.獲取總時間以及當前播放時間的實現：

var oTotal=document.getElementsByClassName("total_time")[0];
window.onload=function () {
    oAudio.addEventListener("canplay", function() {
        oTotal.innerHTML=format(oAudio.duration);       //獲取總時間
    });
}

這裏添加監聽器的目的是解決獲取到的總時間顯示爲NaN：NaN,其中還用到一個format函數，由於經過oAudio.duration得到的是以秒爲單位的數據，因此要將其轉化成分：秒的格式須要一個格式轉換函數：

//時間的格式化
function format(t) {
    var m=Math.floor(t/60);
    var s=Math.floor(t%60);
    if(m<=9)     //小於10時，在前面填0
        m="0"+m;
    if(s<=9)
        s="0"+s;
    return m+":"+s;
}

2.播放、暫停上一首下一首的設置:

此功能的實現比較簡單，在JS中只需經過onClick點擊事件給audio的src賦值。

HTML代碼：

<audio src="" id="audio"></audio>
<div class="foot">
    <i class="iconfont icon-kuaitui" title="上一首"></i>
    <span class="play"><i class="iconfont icon-zanting" title="播放"></i></span>
    <i class="iconfont icon-kuaijin" title="下一首"></i>
    <div class="progress">
        <span class="current_time">00:00</span>
        <div class="progress_range"><div class="range"></div><div class="circle"></div></div>
        <span class="total_time">00:00</span>
    </div>
    <div class="model">
        <div class="volume"><span class="iconfont icon-shengyin" title="靜音"></span></div>
        <div class="volume_range"><div class="range"></div><div class="circle"></div></div>
        <div class="bofangModel"><span class="iconfont icon-suiji"  title="隨機播放"></span></div>
    </div>
</div>

這樣在JS中須要經過onClick點擊事件給audio的src賦值,下面以播放暫停按鈕爲例。

var oAudio=document.getElementById("audio");
var oPlay=document.getElementByClassName("play")[0];
var clickNum=0;       //用於判斷是要播放仍是暫停

oAudio.setAttribute("src","/audioFile/1.mp3");    //給audio對象設置src屬性

oPlay.onclick()=function(){
   if(clickNum==0){
            oAudio.play();    //播放
            oPlay.innerHTML="<i class='iconfont icon-bofang' title='暫停'></i>";  //改變圖標
            clickNum=1;
    }else{
            oAudio.pause();    //暫停
            oPlay.innerHTML="<i class='iconfont icon-zanting' title='播放'></i>";
            clickNum=0;
    }
}

3.手動改變進度的實現:整體思路即經過windows的ev對象獲取鼠標的移動位置，判斷其距本模塊最左端的位置，從而設置顏色、小圓的位置以及currentTime

 

var oProgress=document.getElementsByClassName("range")[0];
var oMaxProgress=document.getElementsByClassName("progress")[0];
var oProgress_circle=document.getElementsByClassName("circle")[0];
var oCurrent=document.getElementsByClassName("current_time")[0];

oAudio.play();
setInterval(setProgress,1000);   //經過定時器設置進度的自動改變
//設置進度的自動移動
function setProgress() {
    oCurrent.innerHTML=format(oAudio.currentTime);  //設置當前時間的顯示
    oProgress.style.width=(oAudio.currentTime)/(oAudio.duration)*780+"px";  //780px是總寬度
    oProgress_circle.style.left=oProgress.style.width;
}

//能夠點擊軌道改變進度
oMaxProgress.onmousedown=function (ev) {
    changeProgress(ev);
}
//鼠標拖動小圓改變進度
oProgress_circle.onmousedown=function (ev) {
    document.onmousemove=function (ev) {
        changeProgress(ev);
    }
    document.onmouseup = function () {      //當鼠標鬆開後關閉移動事件和自身事件
        document.onmousemove = null;
        document.onmouseup = null;
    }
    return false;
}
function changeProgress(ev){
    var ev=ev||event;
    var l = ev.clientX - 270;          //獲取圓距左端的距離
    if(l<0){
        l=0;
    }
    else if (l > 780) {
        l = 780;
    }
    oProgress_circle.style.left=l+"px";
    oProgress.style.width=l+"px";
    oAudio.currentTime=(l/780)*oAudio.duration;    //設置當前時間，以改變真正的播放進度
    oCurrent.innerHTML=format(oAudio.currentTime);  //當前時間
}

4.播放模式的切換：

播放模式有三種：隨機播放、單曲循環、列表循環。

（1）隨機播放的實現須要用到隨機數生成函數，將生成的隨機數做爲歌曲的一個下標，獲取響應的歌曲信息，從而播放。

（2）單曲循環的實現比較簡單，只須要將audio對象的loop屬性設置成true便可。

（3）列表循環的實現只須要觸發下一首的點擊事件便可。

在作時發現歌曲播放完畢並不會自動切換到下一首，須要對audio的"ended"屬性添加監聽事件。

var oBofangModel=document.getElementsByClassName("bofangModel")[0];
var clickNum3=0;
//剛加載，clickNum3=0，不觸發點擊事件,默認初始爲隨機播放
if(clickNum3==0){
    oAudio.loop=false;
    oAudio.addEventListener("ended", suiji, false);     //監聽函數不能加括號
}
//播放模式的切換
oBofangModel.onclick=function () {
    if(clickNum3==0){
        oBofangModel.innerHTML="<span class='iconfont icon-liebiaoxunhuan' title='列表循環'></span>";
        clickNum3=1;
        oAudio.loop=false;
        // oAudio.removeEventListener("ended",function () {..},false);       //匿名取消事件無效
        oAudio.removeEventListener("ended",suiji,false);
        oAudio.addEventListener("ended", liebiao, false);
    }
    else if(clickNum3==1){
        oBofangModel.innerHTML="<span class='iconfont icon-danquxunhuan1' title='單曲循環'></span>";
        clickNum3=2;
        oAudio.loop=true;
    }
    else if(clickNum3==2){
        oBofangModel.innerHTML="<span class='iconfont icon-suiji' title='隨機播放'></span>";
        clickNum3=0;
        if(oAudio!=null){
            oAudio.loop=false;
            oAudio.removeEventListener("ended",liebiao,false);
            oAudio.addEventListener("ended", suiji, false);
        }
    }
}
//列表循環，觸發下一首的點擊事件
function liebiao(){
    oNext.onclick();
}
//產生隨機數，自動播放
function suiji() {
    var m=Math.floor(Math.random()*oMusic.length);//產生隨機數，範圍爲0到oMusic.length-1,
    playSong(m);
}
//播放當前歌曲
function playSong(index) {
    localStorage.setItem("index",index);     //存儲到本地，方便存取
    setInfo();
    oAudio.play();
    setInterval(setProgress,1000);
}
//設置列表信息
function setInfo() {
    var m=parseInt(localStorage.getItem("index"));
    oAudio.setAttribute("src",oMusic[m].src);
}