⾮常漂亮的HTML5⾳乐播放器
APlayer是⼀个⾮常漂亮的HTML5⾳频播放器，它将audio标签封装，并结合CSS制作出漂亮的播放器UI，它⽀持设置歌名、歌⼿和歌词，可以设置是否⾃动播放，⽀持缩略图，⽀持播放进度以及设置播放源。
⾸先是要加载播放器样式⽂件，这个播放器的样式酷似⽹易云⾳乐播放器。然后在body中加⼊播放器div#player1，待会要调⽤播放。接着载⼊APlayer.js⽂件（⾃⼰⽹上下载）。
<linkrel="stylesheet"href="APlayer.min.css">
<divid="player1"class="aplayer"></div>
<src="APlayer.min.js"></>
现在我们来调⽤APlayer，⾸先new⼀个对象，绑定播放器元素，设置各种选项，最后使⽤ap.init()；载⼊播放器。注意APlayer不依赖诸如jQuery或Zepto等第三⽅JS库，它直接将html5中的audio标签封装起来，所以开发者只需简单⼏句代码就可在页⾯上呈现漂亮的⾳乐播放器了。
varap = newAPlayer({
element: ElementById('player1'),
narrow: false,
autoplay: true,
showlrc: false,
music: {
title: 'Preparation',
author: 'Hans Zimmer/Richard Harvey',
html播放音乐代码url: '7xifn91.z0.glb.clouddn/Preparation.mp3',
pic: ''
}
});
ap.init();
选项说明
element：绑定的播放器元素。
narrow：是否使⽤窄屏模式，即只显⽰缩略图和播放按钮，请看演⽰demo中的样式3。
autoplay：是否⾃动播放，注意这个在移动端⼿机上不⽀持⾃动播放的。
showlrc：是否展⽰歌词，请看演⽰demo中的样式1。
showlrc：是否展⽰歌词，请看演⽰demo中的样式1。
music：⽤来设置播放⾳乐相关信息的集合，其中title表⽰⾳乐标题，author表⽰⾳乐的作者，url表⽰播放⽂件地址，pic当然就是播放的⾳乐缩略图。
APlayer还提供了播放器事件，如载⼊播放器：ap.init()；播放：ap.play()和暂停：ap.pause()。
有关APlayer项⽬的最新进展，⼤家可以关注APlayer项⽬地址：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。