Html5添加APlayer音樂播放器插件教程

1、APlayer音樂播放器安裝
能夠經過npm來安裝APlayer音樂播放器插件。
$ npm install aplayer        
        
2、使用方法
使用APlayer音樂播放器插件須要引入APlayer.min.css和APlayer.min.js文件。
<link rel="stylesheet" href="APlayer.min.css">
<script src="APlayer.min.js"></script>  
             
3、HTML結構
能夠使用一個<div>元素做爲音樂播放器的容器。
<div id="player1" class="aplayer"></div>            

若是須要爲歌曲添加同步歌詞，能夠在容器中使用pre.aplayer-lrc-content來設置歌詞。
<div id="player1" class="aplayer">
<pre class="aplayer-lrc-content">
[ti:平凡之路]
[ar:朴樹]
[al:《後會無期》主題歌]
[by:周敏]
00:00.00]平凡之路 - 朴樹
[00:04.01]做詞：韓寒 朴樹
[00:08.02]做曲：朴樹 編曲：朴樹
[00:12.02]徘徊着的 在路上的
[00:17.37]你要走嗎
[00:23.20]易碎的 驕傲着
[00:28.75]那也曾是個人模樣
<!-- ... -->
</pre>
</div>   

4、初始化插件
能夠經過下面的方式來初始化APlayer音樂播放器插件。
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();   

5、配置參數
{
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'
    }
}

KeyMob是國內專業的手機廣告優化管理平臺 ,基於強大的技術支持、優質的合做夥伴,爲廣告主提供精準的無線營銷和品牌推廣服務,爲應用開發者提供大量優質的廣告展示並創造廣告收益。