APlayer是一個非常漂亮的HTML5音頻播放器，它將audio標簽封裝，並結合CSS制作出漂亮的播放器UI，它支持設置歌名、歌手和歌詞，可以設置是否自動播放，支持縮略圖，支持播放進度以及設置播放源。

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

非常漂亮的HTML5音樂播放器