基于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文档。简单说一下就是,我设置了preloadnone,只有在播放的时候才加载mp3资源,这样可以节约一些流量。lrcType3,是使用本地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>

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注