一段简单的html 5 音频,简洁的HTML音乐播放器

APlayer是一个非常漂亮的HTML5音频播放器，它将audio标签封装，并结合CSS制作出漂亮的播放器UI，它支持设置歌名、歌手和歌词，可以设置是否自动播放，支持缩略图，支持播放进度以及设置播放源。

演示地址：【点击查看】

HTML

首先是要加载播放器样式文件，这个播放器的样式酷似网易云音乐播放器。然后在body中加入播放器div#player1，待会要调用播放。接着载入APlayer.js文件。

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

赏

扫码打赏，您说多少就多少！

感谢您的打赏，我们会更加努力的更新站点！

转载声明：本站文章若无特别说明，皆为原创，转载请注明来源：刘荣焕，谢谢！

相关文章

发表评论

haha

4年前 (2017-02-07)

厉害了

单身的執著

5年前 (2016-02-05)

好牛逼的说~

便捷摄影工作室

5年前 (2016-02-05)

好好牛逼

巫医

6年前 (2015-12-23)

这个插件什么时候出来啊