基于APlayer的作品展示页面
最终的效果见 音乐作品
我的设计是，在对应的歌下面放一个按钮（botton），点击之后向在左下角的APlayer播放器添加音乐并播放。对于已经在播放列表中的歌，不再重复添加，而是直接转跳。播放列表和实际动作以及歌词进行分离。
HTML 部分
调用格式如下
<button onclick="playFromId(1)" class="cbtn"><span>立即播放 </span></button>CSS 部分
由html的调用，知按钮的class为cbtn（这个可以自己随便设置，不与页面的其他class重合即可）。
我希望这个按钮，在鼠标指过去的时候，会改变颜色，并且有一些小动画，显得更有生机。
可以先写一个botton，然后自己在F12里面改变css，调整到自己需要的样式
有标注!important的地方，是在F12调试的时候，发现被后面的css覆盖了，所以加上了。
css里面主要是改变.cbtn的背景颜色、字体颜色、圆角、高度宽度、字体大小，.cbtn:hover的背景颜色（鼠标指上去显示的颜色）
文件命名为mWork.css
.cbtn {
display: inline-block;
border-radius: 4px !important;
background-color: #888;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 20px;
width: 175px;
height: 50px;
transition: all 0.5s;
cursor: pointer;
margin: 5px !important;
}
.cbtn:hover {
background-color: #fc6423;
}
.cbtn span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.cbtn span:after {
content: '«';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.cbtn:hover span {
padding-right: 25px;
}
.cbtn:hover span:after {
opacity: 1;
right: 0;
}js 部分
引入APlayer
自行到APlayer的GitHub下载好js和css、map文件，并放在可以访问到的路径里面。或者可以使用APlayer官方提供的CDN链接。
<link href="APlayer.min.css" rel="stylesheet" type="text/css">
<script src="APlayer.min.js" type="text/javascript" id="APlayer.min-js"></script>APlayer控制部分js
这部分是APlayer的控制逻辑。
具体的API请参照APlayer官方的API文档
为了使每个环节看起来比较清晰，我分成了几个函数来写，自己写的话，可以把几个函数整合起来。
关于前面定义ap的问题。这是一个坑。APlayer创建一个实例，需要使用一个id为aplayer（也可以自己定义）的Element，但是在html里面本身并没有。当然，可以自己在html里面写一句<div id="aplayer"></div>，这也是一种解决方案。我采用的解决方法，是在js脚本里面创建一个Element并添加到html的body。
APlayer的定义参数见API文档。简单说一下就是，我设置了preload为none，只有在播放的时候才加载mp3资源，这样可以节约一些流量。lrcType为3，是使用本地lrc文件歌词。
文件命名为mWork.js
var elm = document.createElement("div");
elm.setAttribute("id", "aplayer");
document.body.appendChild(elm);
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: false,
theme: '#5895be',
loop: 'all',
order: 'list',
preload: 'none',
volume: 1,
mutex: true,
listFolded: true,
listMaxHeight: 349,
lrcType: 3,
audio: []
});
function inList(name, artist) {
for (inx in ap.list.audios) {
if (ap.list.audios[inx].name === name && ap.list.audios[inx].artist === artist) {
return true;
}
}
return false;
}
function addToList(song) {
ap.list.add([{
name: song.name,
artist: song.artist,
url: song.url,
cover: song.cover,
lrc: song.lrc
}])
}
function playFromList(name, artist) {
if (ap.list.audios.length <= 1) {
return;
}
var id = 0;
for (inx in ap.list.audios) {
if (ap.list.audios[inx].name === name && ap.list.audios[inx].artist === artist) {
id = inx;
break;
}
}
ap.list.switch(id);
}
function playFromId(id) {
if (id >= songList.length || id < 0) {
console.log("Invalid song id: " + id);
return;
}
var song = songList[id];
if (!inList(song.name, song.artist)) {
addToList(song);
}
playFromList(song.name, song.artist);
if (ap.paused) {
ap.play();
}
}歌单部分
在另一个js里面，定义一个叫songList的常量
简要说明一下：这是一个数组，数组里面是一个个对象。这些对象的属性是：id, name, artist, url, cover, lrc，分别是id，歌名，作者，音频文件路径，封面图片路径，歌词文件路径。（这里我省略了绝对路径）
第一个元素我选择了置空，一来是为了让歌的id从1开始，二来是保留一个“模板”，方便后面添加的时候复制。
其中，name和artist、url是必填项，封面没有的话会使用纯色背景显示，歌词文件没有的话就不显示歌词。id填写对象索引，简单来说就是数组的下标。
在前面HTML部分onclick="playFromId(1)"函数里面的数字就是这个列表里面的id值。比如我想要播放My Cookie Can，这个数字我就填28。
* 注意：这里面我省略了歌单里面的其他歌，只给出了一首歌作为示例，因此定义里面多出了两个...，如果你要自己实现的话，请不要带上这个省略号。
文件命名为mList.js
const songList = [
{
id: 0,
name: "",
artist: "",
url: "",
cover: "",
lrc: ""
}, ...
{
id: 28,
name: "My Cookie Can",
artist: "若可",
url: "My-Cookie-Can-Eleanor-Forte.mp3",
cover: "cover.jpg",
lrc: "My Cookie Can.lrc"
}, ...
]LRC部分
参考APlayer的API手册里面的支持类型，以下给出一个示例
[00:00.50]卫兰 - My Cookie Can
[00:01.77]作词：林夕
[00:02.84]作曲：雷颂德
[00:23.72]You and I
[00:26.78]All right
[00:29.64]You and I
[00:32.28]All right
[00:35.79]讲一声冻冻
[00:37.11]你会和我抱拥
[00:38.74]话一声痛痛
[00:39.94]你会张开我的笑容
[00:44.06]You give me security
[00:48.08]手信要永远藏铁罐中
[00:50.46]天天都碰碰
[00:51.96]就似古董那么贵重
[00:55.68]You give me security
[00:59.80]你叫一切变美
[01:01.59]有关你每秒也要收起
[01:04.74]糖分满爆也不理
[01:07.89]挤挤逼逼我更欢喜
[01:11.10]收获但愿会变定期
[01:13.85]手里心里都要怀着你
[01:18.62]我要
[01:20.60]储起你
[01:22.33]My cookie can
[01:23.88]Hey you say love me till the end
[01:27.89]My cookie can
[01:29.86]Hey you're the only one
[01:31.95]I called my man
[01:33.89]My cookie can
[01:35.58]Hey you say love me till the end
[01:39.61]My cookie can
[01:42.57]You are my man
[01:45.88]讲一声冻冻
[01:47.35]你会和我抱拥
[01:49.03]话一声痛痛
[01:50.40]你会张开我的笑容
[01:54.62]You give me security
[01:58.34]这铁罐我已无法放松
[02:00.73]天天都碰碰
[02:02.06]我比千亿富翁更红
[02:06.12]You give me security
[02:10.15]你叫一切变美
[02:11.78]有关你每秒也要收起
[02:14.94]糖分满爆也不理
[02:18.09]挤挤逼逼我更欢喜
[02:21.35]收获但愿会变定期
[02:24.05]手里心里都要怀着你
[02:29.18]我要
[02:30.56]储起你
[02:32.55]My cookie can
[02:34.02]Hey you say love me till the end
[02:38.04]My cookie can
[02:40.26]Hey you're the only one
[02:42.56]I called my man
[02:44.08]My cookie can
[02:45.70]Hey you say love me till the end
[02:49.76]My cookie can
[02:52.56]You are my man
[03:07.58]My cookie can
[03:09.20]Hey you say love me till the end
[03:13.16]My cookie can
[03:15.24]Hey you're the only one
[03:17.28]I called my man
[03:19.11]My cookie can
[03:20.93]Hey you say love me till the end
[03:24.94]My cookie can
[03:27.73]You are my man实际部署
做好以上的准备工作之后，可以在想要展示的页面上面部署APlayer啦。
不过脚本的加载顺序需要注意一下。
<link href="APlayer.min.css" rel="stylesheet" type="text/css">
<link href="mWork.css" rel="stylesheet" type="text/css">
<script src="APlayer.min.js" type="text/javascript" id="APlayer.min-js"></script>
<script src="mList.js" type="text/javascript"></script>
<script src="mWork.js" type="text/javascript"></script>
<button onclick="playFromId(28)" class="cbtn"><span>立即播放 </span></button>
