非常漂亮的HTML5音樂播放器

HTML

首先是要加載播放器樣式文件，這個播放器的樣式酷似網易云音樂播放器。然后在body中加入播放器div#player1，待會要調用播放。接著載入APlayer.js文件。

<link rel="stylesheet" href="APlayer.min.css">
<div id="player1" class="aplayer"></div>
<script src="APlayer.min.js"></script>

JavaScript

現在我們來調用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：綁定的播放器元素。

narrow：是否使用窄屏模式，即只顯示縮略圖和播放按鈕，請看演示demo中的樣式3。

autoplay：是否自動播放，注意這個在移動端手機上不支持自動播放的。

showlrc：是否展示歌詞，請看演示demo中的樣式1。

music：用來設置播放音樂相關信息的集合，其中title表示音樂標題，author表示音樂的作者，url表示播放文件地址，pic當然就是播放的音樂縮略圖。

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

有關APlayer項目的最新進展，大家可以關注APlayer項目地址： https://github.com/DIYgod/APlayer