植 樹 節簡易MP3播放插件（Aplayer）[3/12]
效果如圖所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<title>Aplayer mp3播放器</title>
</head>
<body>
<div id="player1" class="aplayer"></div>
</body>
</html> script載入Aplayer插件
<div id="player1" class="aplayer"></div>
<script src="http://www.wuhairui.cn/aplayer/dist/APlayer.min.js"></script> 在之後進行初始化插件，并展示出來即可
<script>
var ap1=new APlayer({
element:document.getElementById("player1"),//植入的divid
narrow: false,//寬窄
autoplay: false,//是否自動播放
showlrc: false,//是否展示歌詞
mutex: true,//是否互斥
theme: '#f00',//進度條顔色
mode: 'circulation',//渲染方式
music: {//mp3資訊 （标題 演唱 音頻位址 音頻封面）
title: '限界突破×サバイバー',
author: '冰川清志',
url: '//note.youdao.com/yws/api/personal/file/4E5475A244DB4A84A8DD3C7A7AD8EC63?method=download&inline=true&shareKey=174234ed101e2697114bde87be19ed14',
pic: '//img001.photo.21cn.com/photos/album/20080306/o/4F07E017A6D82D0BA864FC2054BFD8C5.jpg'
}
});
</script> 以及這裡還有一些播放器的回調接口，讓你更好地控制播放器。
ap1.on('play', function () {//播放開始時執行
console.log('play');
});
ap1.on('pause', function () {//播放暫停時執行
console.log('pause');
});
ap1.on('canplay', function () {//加載完畢時執行
console.log('canplay');
});
ap1.on('playing', function () {//播放中時多次執行
console.log('playing');
});
ap1.on('ended', function () {//播放完時執行
console.log('ended');
});
ap1.on('error', function () {//播放錯誤時執行
console.log('error');
}); 部落格園作者：herry菌，原文連結：
https://www.cnblogs.com/wuhairui/p/6592117.html
朋友，看到這裡，關注作者的公衆号吧，不漏掉更新哦
![MetingJS 是如何配合 Aplayer 加載歌單的[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)