本人挺喜歡音樂，一直有個想法實現一個音樂播放器，之前一直都在積累知識，學習了原生JS和jQuery庫。現在覺得是時候了，因此這次利用jQuery庫來實現。

這個音樂播放器現在實現的主要有以下功能：

• 在主頁面點選播放歌曲；
• 頁面底部點選可以跳到播放頁面，頁面底部的播放按鈕也能控制音樂播放/暫停；
• 播放頁面自制進度條；
• 主頁面輪播圖特效；
• 上一曲，下一曲功能，迴圈播放模式的實現，以及點選列表按鈕顯示播放列表；
• 線上搜尋音樂，得到搜尋結果，並播放。

介面實現

• 主頁面

主頁面是仿其他網頁音樂播放器的，效果如圖：

上面有一個導航條可以切換到其他功能頁面，下方是一個Footer，點選之後切換到播放介面。

• 播放頁面
  
  實現了播放模式（單曲迴圈、隨機播放、迴圈播放），上一曲、下一曲、播放/暫停以及音樂播放列表的呈現。
• 搜尋頁面

搜尋歌曲可以得到對應的歌曲列表，點選之後開始播放。

實現

音樂播放的功能主要依賴的是H5標籤。其有以下幾個屬性是比較重要的：
src : 播放的音訊源；
autoplay: ‘autoplay’ 定義自動播放；
loop : ‘loop’ 定義迴圈播放；
controls: ‘controls’ 顯示播放控制元件

另外，audio也有很多事件屬性，利用這些事件屬性可以實現該音樂播放器音訊的播放互動效果。比如：
Media事件中的 oncanplay事件，onended事件，onpause和onplay事件等等，詳細可參考

1. 主介面的實現
   主要用了一個隱藏的audio標籤；
   在window下監聽mousemove事件，通過滑鼠的移動來設定導航欄的顯示，並在導航欄監聽mouseleave事件，設定導航欄的隱藏；
   封裝了一個圖片輪播的外掛；
   播放列表的實現（陣列中初始存了一些音樂）；
   Footer佈局實現。

主要需要詳細說的有兩個：輪播外掛和播放列表的實現。
jQuery外掛的編寫大都是下面這個模板：
如果是全域性外掛的話

;(function($){
    $.extend({
        函式名: function(){
            //一些處理操作
        }//這是一個全域性外掛，即通過jQeury.函式名 可以直接呼叫的
 

    });
})(jQuery)

如果是物件外掛：

;(function($){
    $.fn.extend({
        函式名: function(){
            //函式實現體
        }
    });  //物件外掛顧名思義，是某個特定物件呼叫的方法
})(jQuery)

因此，首先實現了在頁面中展示輪播的效果：
主要思路:每隔一段時間，改變圖片的透明度，並改變圖片上一層的黑點與白點效果；

var Url = "MusicPlayerImg/";
var LunboArr = ["Music.jpg", "music3.PNG","music2.PNG", "music4.PNG","music5.PNG", "music6.PNG"];
var i = 0;
$("#trueImg").fadeTo(1000, 0.2);

setInterval(function(){

    $("#trueImg").fadeTo(1000, 1);

    $("#circles img").each(function(index, el) {
        $(this).attr('src', 'MusicPlayerImg/黑點.png');                  
    });

    $("#trueImg").attr('src', Url + LunboArr[(i + 1) % 6]);

    var selector = "#circles img:eq(" + ((i + 1) % 6) + ")";
    $(selector).attr('src', 'MusicPlayerImg/白點.png');              
    i++;

    $("#trueImg").fadeTo(1000, 0.2);
}, 2000);

隨後將其封裝成一個div物件外掛：

;(function($){
    $.fn.extend({
        lunbo: function(){
            var Url = "MusicPlayerImg/";
            var LunboArr = ["Music.jpg", "music3.PNG","music2.PNG", "music4.PNG","music5.PNG", "music6.PNG"];
            var i = 0;
            $("#trueImg").fadeTo(1000, 0.2);

            setInterval(function(){

                $("#trueImg").fadeTo(1000, 1);

                $("#circles img").each(function(index, el) {
                    $(this).attr('src', 'MusicPlayerImg/黑點.png');                  
                });

                $("#trueImg").attr('src', Url + LunboArr[(i + 1) % 6]);

                var selector = "#circles img:eq(" + ((i + 1) % 6) + ")";
                $(selector).attr('src', 'MusicPlayerImg/白點.png');              
                i++;

                $("#trueImg").fadeTo(1000, 0.2);
            }, 2000);
        }
    });  
})(jQuery)

將上面檔案命名成jQuery.lunboValidate.js，並在script標籤中引入，即可呼叫對應方法。

播放列表主要是通過一個數組來儲存歌曲的資訊，然後將其以DOM節點加入到HTML文件中。陣列的形式如下：

arrMusic = [
    {
        MusicUrl: '',
        MusicImg:'',
        Singer: '',
        MusicName: ''
    }
];

數組裡面每一個元素都是一個物件，這些物件都有著相同的屬性，包括音樂源，專輯圖片，歌曲名稱以及歌手。播放列表的渲染直接讀取陣列中各個元素的屬性就可以得到。

下來點選列表中每個條目，都會觸發audio的源src改變，並播放。因為列表條目可能很多，不可能每一個都加一個click事件處理函式，所以採用事件委託的方式進行事件監聽，即在ul元素上進行事件監聽，當click事件發生時，通過e.target去判斷點選的是哪一個列表條目，從而改變成對應的src。audio的src的改變，會觸發oncanplay事件，並且還要改變後面播放頁面的圖片以及進度條進度。

主頁面底部的Footer，點選之後會進入播放介面，通過將該頁面隱藏，顯示播放頁面即可。
2. 播放介面
這個介面的構成很簡單，只有一個進度條，顯示進度的小圓點，上方一個Div顯示播放Img, 以及下一曲上一曲等這些圖片。但是這個頁面的邏輯很複雜，JS的操作很多。
我們可以跟著下面幾個問題處理這些邏輯：

• 播放歌曲時，小圓點如何顯示進度？
• 點選進度條某個位置，如何實現播放對應位置的音訊？
• 當歌曲播放完之後如何自動切換到下一曲？
• 設定不同的播放模式之後歌曲如何去切換？
• 點選上一曲、下一曲事件處理程式是如何處理？
• 點選播放列表顯示什麼？如何將正在播放的歌曲標註出來？
  按著這個思路一步步實現，其實就可以實現音樂播放器的基本功能了。
  下面我只寫一些自己在解決這些問題時的思路。
  第一個問題： 播放歌曲時，總會觸發oncanplay事件，因此在該事件處理程式中，起一個定時器，每隔一秒使小圓點向右一個步長即可。那麼這個步長又如何得到？當音樂播放時，可以得到audio的duration屬性，這個屬性表示整首歌的總時長，利用總時長和進度條的長度就可以得到步長。
  第二個問題：滑鼠點選事件的事件物件有一個屬性：pageX，pageY表示當前點選位置的離瀏覽器左邊界和上邊界的距離。利用這個距離和進度條的距離只差可以得到小圓點應該在的位置的left值。同時還要改變歌曲的播放進度。這要用到audio的currentTime屬性，單位為秒。同樣利用距離與步長的商來求時間。
  第三個問題：歌曲播放結束時會觸發事件onended，因此所有結束之後需要做的操作都可以寫到onended事件處理函式中。
  第四個問題： 切換包括上一曲，下一曲，播放結束時下一曲應該播放哪一首？所以需要在點選上一曲，下一曲按鈕時，判斷當前的播放模式然後再做操作，另外，在播放結束時的onended事件處理程式中也要判斷播放模式。
  第五個問題：歌曲切換上一曲下一曲時，要做這麼幾件事：一個是音訊的src需要變，另一個就是在視覺上看起來是重新播放一首歌。
  第六個問題：點選播放列表時，事件處理程式需要做的是，將陣列中的歌曲資訊讀取並渲染到頁面上，同時對正在播放的歌曲進行特殊顏色標註。

在實際實現的過程中，遇到一個問題：無論是點選進度條，還是切換下一曲，都會出現時間不是一秒一秒的變化。分析了原因之後，是每次觸發oncanplay事件時，都會起一個定時器，這樣就是造成計時出現錯亂的情況。因此解決方法就是點選進度條時先clearInterval()。

3.搜尋頁面
搜尋頁面的構成也非常簡單，主要是在文字框中輸入搜尋關鍵字，點選按鈕之後搜尋對應歌曲。
本次採用網易雲音樂的API來請求歌曲資訊。即傳送aJax請求到http://s.music.163.com/search/get/?type=1&limit=4&s=關鍵字，其中，type,limit和s引數是可以設定的.
type:
type = 1 單曲
type = 10 專輯
type = 100 歌手
type = 1000 歌單
type= 1002 使用者
limit: 限制搜尋得到的數量
s： 關鍵字

需要注意的是：網易雲音樂的API地址與頁面是不同源的，因此涉及到跨域，本次利用jQuery庫提供的JSONP跨域方法，將aJax請求中的dataType設為jsonp即可。

$.ajax({
    url: URI,
    type: 'get',
    dataType: 'jsonp',
    jsonp : 'callback',
    jsonCallback : 'jsonCallback',
    success: function(data){
        /*console.log(data.result.songs[0]);*/
        for(var i = 0; i < data.result.songs.length; i++)
        {
            var jsondata = data.result.songs[i];
            console.log(jsondata);
            $("#results").append($("<p>" + jsondata.name + "<span>" + jsondata.artists[0].name + "</span>" + "<b class='source' style='display:none'>" + jsondata.audio + "</b><b style='display:none'>" + jsondata.album.name + "</b><b style='display:none'>" + jsondata.album.picUrl + "</b></p>"));
        }
    }
})

當請求成功時，將返回的資料解析渲染到頁面中。當然，這裡需要了解返回的資料格式。

返回的資料渲染到頁面中之後，點選對應的條目又會觸發播放，即將audio src屬性設定，並對進度條上小圓點位置進行初始化設定等等。

到這，音樂播放器的基本功能都實現了，下來想說的一點是：
本次實現對一些公共的函式以及全域性變數都進行了封裝，將他們封裝成外掛來使用，一個好處是避免了程式碼的多次重複；另一個是增強了可維護性。

希望原始碼的可以留言，希望大家可以共同進步。