styles html5音頻 min link app制作 自動 .com 網易雲 ans

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組的網易雲APP制作，找的APlayer H5音樂播放器