注册登录

非常漂亮的HTML5音乐播放器

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

查看演示 下载源码

HTML

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

<link rel="stylesheet" href="https://zhishitu.com">
<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

计算机