简介

最近想在博客中加入音乐播放功能，找了一圈，最后锁定两个方案，一个html5自带的audio，另一个是APlayer播放器。audio的风格比较接近博客的主题，所以首页用的是audio标签。文章页用的是APlayer，因为APlayer支持Hexo，它有个支持Markdown的版本叫hexo-tag-aplayer，可以方便的在Markdown中插入音乐。hexo-tag-aplayer还支持MetingJS，所以可以播放网易云音乐，QQ音乐。

使用hexo-tag-aplayer

安装hexo-tag-aplayer

1
npm install --save hexo-tag-aplayer

在_config.yml中开启meting模式：

1
2
aplayer:
  meting: true

复制歌单的链接，然后复制歌单的id，例如 https://music.163.com/playlist?id=523845661&userid=46562117 ，这个歌单的id就是523845661，公司名可以是tencent、netease或是其他公司，下面给出一个例子，随便找个md文件，输入：

1
{% meting "523845661" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

刷新网页看看是不是有列表了，使用就这么简单。

使用audio标签

audio标签默认改了一些样式，首先默认audio播放器背景是圆角的，我改成了方角：

1
2
3
audio::-webkit-media-controls-enclosure {
  border-radius: 0px;
}

然后在css中调整了播放按钮位置：

1
2
3
audio::-webkit-media-controls-play-button {
    margin-left:-10px;
}

因为在手机上的体验问题，我隐藏掉了下载按钮，下载按钮的隐藏需要在标签中设置controlsList=”nodownload”属性

1
<audio controlsList="nodownload" controls="controls" />

另外如果你想隐藏播放器上面的一些显示内容，可以在css中，通过设置伪类的display:none属性来达到隐藏效果，audio和video标签提供了下面的一些伪类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button

比如现在我们要隐藏播放按钮，那么就在css中加入如下内容：

1
2
3
audio::-webkit-media-controls-play-button {
    display:none
}

目前的不足之处

还没解决首页多个音乐同时播放互斥的问题

因为首页用的是audio标签，所以音乐需要找个服务器存起来，我目前是托管在LeanCloud上，每次都要上传音乐，略显麻烦