非常漂亮的HTML5音乐播放器
nyyb
9年前
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