基于我们3组的网易云APP制作，找的APlayer H5音乐播放器

Posted 2020-09-23 张晋铭

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