参考：

  1. Hexo-Butterfly音乐播放器的添加
  2. hexo-tag-aplayer的GitHub地址
  3. aplayer官方说明文档
  4. butterfly官方教程

无法在butterfly外挂标签中使用该插件，但是单独使用没有问题。

博客搭建教程导航

基础介绍

  Hexo 博客的音频插件名称为 hexo-tag-aplayer，它支持常用的播放器为 APlayer 和 其他衍生的播放器 MetingJS。APlayer 一般用于播放自定义的音频。MetingJS 用于各大主流的音乐平台。要使用音频插件，在配置文件中要打开相关开关，或在文章开头进行使能。而在markdown中使用该工具是，有两套语言都可以写，一套是Html标签，一套是 hexo-tag-aplayer 自带的。具体方法如下：

配置环境

安装插件

hexo-tag-aplayer：

1
npm install --save hexo-tag-aplayer

APlayer：

1
npm install aplayer --save

Hexo博客设置

  1. 修改_config.yml文件：
1
2
3
aplayer:
  meting: true
  asset_inject: false
  • 如果使用 APlayer 播放器，则 asset_inject 须设置为 true 。
  • 如果只使用 MetingJS 播放器，则 asset_inject 可以设置为 false 。
  • asset_inject 设置为 true，否会导致 butterfly 网页主页面渲染异常，如无法加载背景等问题。目前没有办法解决。此时会给相关文件自动加入和 aplayer相关的 css 和 js 依赖。但是也会在 js 文件中的头部引入多余的代码造成错误。此时想要在文章中使用 aplayer 需要通过其他途径，后面的内容会提到。
  1. 修改_config.butterfly.yml文件：
1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: false
  1. 文章开头添加：
1
aplayer: true

APlayer

方式一：标签法

1
{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}
  • title : 曲目标题
  • author: 曲目作者
  • url: 音乐文件 URL 地址
  • picture_url: (可选) 音乐对应的图片地址
  • narrow: （可选）播放器袖珍风格
  • autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
  • width:xxx: (可选) 播放器宽度 (默认: 100%)
  • lrc:xxx: （可选）歌词文件 URL 地址
1
2
3
4
以下在 `butterfly` 主题下无法渲染：
{% aplayer "title" "author" "/audio/Lumia1020.mp3" "/assets/avatar.webp" %}
演示文字，无意义。
{% aplayer "title" "author" "/audio/Lumia1020.mp3" "/assets/avatar.webp" %}

演示效果

  以下在 butterfly 主题下无法渲染：


        

        

演示文字，无意义。 
        

            

        

        


只有当把 asset_inject 设置为 true 时可以把音频渲染成功，但是要把
public 里的 js 和 css
文件头部增加的错误代码删除，所以这不是一个好办法，那么采用下面的办法。


方式二：Html


  此时已经默认会导入了 aplayer.min.css 和 aplayer.min.js 依赖。


  参照 aplayer 官网的说明，我们需要添加一个自定义的 js 文件放在
source/js/ 里，我取名为 aplayerExample.js。然后再 _config.butterfly.yml
文件中添加 js 脚本：


1
- <script defer src="/js/aplayerExample.js"></script> # aplayerAdunas


然后在其中写入官网提供的js内容，并修改为自己的 mp3 文件：


1
2
3
4
5
6
7
8
9
const ap = new APlayer({
    container: document.getElementById('aplayerExampleA'),
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg'
    }]
});


然后在博客中插入 Html 元素，id 名保持一致即可：


1
2
3
{% raw %}
<div id="aplayerExampleA"></div>
{% endraw %}


演示效果如下：








其中 aplayerExampleB 为列表。需要注意的是，只对第一个 id
有效，使用第一个 id 后，第二个 id 也可以正常使用了，直接使用第二个 id
会报错，原因未知。


全局吸底


方式一：Html


  这里直接在博客中引入依赖，复制粘贴过去就能使用：


1
2
3
4
5
6
{% raw %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3025663508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
{% endraw %}









MetingJS


1
{% meting id server type [fixed, mini, loop, order, volume, ……] %}









选项
默认值
描述






id
必须值
歌曲 id / 播放列表 id / 相册 id / 搜索关键字




server
必须值
音乐平台: netease, tencent,
kugou, xiami, baidu




type
必须值
song, playlist, album,
search, artist




fixed
false
开启固定模式




mini
false
开启迷你模式




loop
all
列表循环模式：all,
one,none




order
list
列表播放模式： list, random




volume
0.7
播放器音量




lrctype
0
歌词格式类型




listfolded
false
指定音乐播放列表是否折叠




storagename
metingjs
LocalStorage 中存储播放器设定的键名




autoplay
true
自动播放，移动端浏览器暂时不支持此功能




mutex
true
该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停




listmaxheight
340px
播放列表的最大长度




preload
auto
音乐文件预载入模式，可选项： none,
metadata, auto




theme
#ad7a86
播放器风格色彩设置






    

  1. 在网易云音乐中创建自己的歌单，会产生一个 "id" 。例如:

      

    1. https://music.163.com/#/playlist?id=2084546444
      2. 

    2. https://music.163.com/#/song?id=29009655
      3. 

    2. 

  2. VIP音乐只能听30s，无版权的音乐无法播放，会跳过。
    3. 

  3. 自动播放时加入 "autoplay"
参数；不自动播放不加该参数，如果写 "autoplay = false" 或者
"autoplay:false" 都是错误的，会使网页渲染失败。
    4. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
&emsp;&emsp;渲染效果中去除自动播放，以免影响网页阅读体验。

迷你模式：
{% meting "29009655" "netease" "song" "mini" "autoplay" %}
或者：
<div class="aplayer no-destroy" data-id="29009655" data-server="netease" data-type="song" data-mini="true" data-autoplay="true" data-lrcType="-1"> </div>
单曲播放：
{% meting "29009655" "netease" "song" "autoplay" %}
或者：
<div class="aplayer no-destroy" data-id="1441758494" data-server="netease" data-type="song"  data-autoplay="true" data-lrcType="-1"> </div>
列表模式：
{% meting "2084546444" "netease" "playlist" %}
演示文字，无意义。
{% meting "2084546444" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86" %}


演示效果


  渲染效果中去除自动播放，以免影响网页阅读体验。

迷你模式： 
    
 或者：





单曲播放： 
    
 或者：






列表模式： 
    
 演示文字，无意义。