基於我們3組的網易Cloud APP製作，找的APlayer H5音樂播放器

標籤：style   UI   第三方   query   標題   封裝   http   ref   r.js   

APlayer是一個非常漂亮的HTML5音頻播放器，UI
參考自網易雲音樂外鏈播放器。它將audio標籤封裝，並結合CSS製作出漂亮的播放器UI，它支援設定歌名、歌手和歌詞，可以設定是否自動播放，支援縮圖，支援播放進度以及設定播放源。


HTML

首先是要載入播放器樣式檔案，這個播放器的樣式酷似網易雲音樂播放器。接著載入APlayer.js檔案。然後在body中加入播放器div#player1，用於顯示播放。
<link rel="stylesheet" href="APlayer.min.css"> <!-- body --> <div
id="player1" class="aplayer"></div> <!-- /body --> <script
src="APlayer.min.js"></script>
JS

現在我們來調用APlayer，首先new一個對象，綁定播放器元素，設定各種選項，最後使用ap.init();載入播放器。注意APlayer不依賴諸如jQuery或Zepto等第三方JS庫，它直接將html5中的audio標籤封裝起來，所以開發人員只需簡單幾句代碼就可在頁面上呈現漂亮的音樂播放器了。
var ap = new APlayer({ element: document.getElementById(‘player1‘),
narrow: false, autoplay: true, showlrc: false, music: { title:
‘Preparation‘, author: ‘Hans Zimmer/Richard Harvey‘, url:
‘http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3‘, pic:
‘http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg‘ } }); ap.init();
選項
{ element: document.getElementById(‘player1‘), // 可選, 綁定的播放器元素 narrow:
false, // 可選, 窄屏樣式，即只顯示縮圖和播放按鈕，請看示範demo中的樣式3 autoplay: true, // 可選,
自動播放，注意這個在移動端手機上不支援自動播放的 showlrc: false, // 可選, 展示歌詞，請看示範demo中的樣式1
music: { // 必需, 音樂相關資訊設定 title: ‘Preparation‘, // 必需, 音樂標題設定 author:
‘Hans Zimmer/Richard Harvey‘, // 必需, 音樂作者設定 url:
‘http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3‘, // 必需,
音樂實際引用地址設定 pic: ‘http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg‘
// 必需, 音樂封面引用地址設定 } }
API

APlayer還提供了播放器事件，如載入播放器：ap.init()；播放：ap.play()和暫停：ap.pause()。
ap.init() ap.play() ap.pause()




GitHub：APlayer – https://github.com/DIYgod/APlayer

基於我們3組的網易Cloud APP製作，找的APlayer H5音樂播放器