0%

Hexo 折腾：音乐播放

发表于 更新于 分类于

最近想要在博客中插入音乐（网易云音乐），目前找到了三种解决方案：

  1. 使用音乐平台自己的插件
  2. 结合 MetingJS 使用 APlayer
  3. 使用 hexo-tag-aplayer

使用音乐平台官方插件

以网易云音乐为例，在Web网页上找到 歌单/单曲/专辑 页面，点击 生成外链播放器 即可跳转到官方提供的音乐播放插件使用引导页面，比如这个 外链插件。
可以在自己博客页面中嵌入插件:

1
2
3
4
5
6
<iframe 
    frameborder="no" border="0"
    marginwidth="0" marginheight="0" 
    width=330 height=330 
    src="//music.163.com/outchain/player?type=0&id=827122421&auto=0&height=430">
</iframe>

效果展示：

缺点：

  • 网易音乐有些音乐因为版权保护，没办法生成外链
  • 音乐平台众多，不同的平台可能插件规范不一样，插入不同平台来源的歌曲可能比较麻烦。

使用 APlayer + MetingJS

APlayer 是目前广泛使用的 HTML5 音乐播放器，MetingJS 用于解析歌曲链接。

以我目前的 hexo-theme-material 主题为例：

  1. 引入JS（最新的CDN请参考官网），创建 /layout/_widget/aplayer.ejs ：

    1
    2
    3
    4
    5
    <!-- Import APlayer -->
    <link href="https://cdn.jsdelivr.net/npm/aplayer@1.9.0/dist/APlayer.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.9.0/dist/APlayer.min.js"></script>
    <!-- Import meting.js -->
    <script src="https://cdn.jsdelivr.net/npm/meting@1.1.1/dist/Meting.min.js"></script>

  2. 考虑到不是所有的博客页面都需要嵌入 aplayer, 所以在 /_partial/head.ejs 中加入：

    1
    2
    3
    4
    <!-- Import APlayer.js -->
    <% if (page.aplayer === true) { %>
        <%- partial('_widget/aplayer') %>
    <% } %>

  3. 使用，需要内嵌 APlayer 的页面中：
    在Front-matter 中加入：

    1
    aplayer: true

    嵌入 APlayer：

    1
    2
    3
    4
    5
    <div class="aplayer"
        data-id="id"
        data-server="server"
        data-type="type">
    </div>

参数：

参数 是否必须 默认值 描述&可选值
data-id 是 单曲ID / 歌单ID / 专辑ID / 搜索关键词
data-server 是 音乐平台：netease,tencent,kugou,xiami,baidu
data-type 是 音乐类型：song,playlist,album,search,artist
data-mode 已弃用 circulation 播放模式：circulation,random,single,order
使用 data-loop data-order 字段代替
data-autoplay 否 false 是否自动播放，移动端浏览器不支持该选项
data-mutex 否 true 播放时是否暂停其他APlayer对象
data-listmaxheight 否 340px 播放列表最高高度
data-preload 否 auto 音乐预加载模式：none, metadata, auto
data-theme 否 #2980b9 主题色
data-mini 否 false 是否开启迷你模式
data-loop 否 all 循环方式：all, one, none
data-order 否 list 播放顺序：list, random
data-lrc 否 false
data-list-folded 否 false 歌单列表初始时是否折叠
data-volume 否 0.7 用户未自定义前的默认初始化音量

更多参数参考:
MetingJS Options   APlayer Options

效果展示：

  1. 单曲:

    1
    2
    3
    4
    5
    6
    7
    8
    <div 
        class="aplayer" 
        data-id="33911781" 
        data-server="netease" 
        data-type="song"
        data-mutex="false"
        data-loop="none">
    </div>

  2. 歌单：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div 
        class="aplayer" 
        data-id="775701065" 
        data-server="netease" 
        data-type="playlist"
        data-order="random" 
        data-listmaxheight="240px"
        data-theme="#FF4081">
    </div>

使用 hexo-tag-aplayer 插件

hexo-tag-aplayer 就是将 APlayer 内嵌入博客页面的 Hexo 插件。

  1. 安装

    1
    npm install --save hexo-tag-aplayer

  2. 使用

    1
    {% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

    还支持其他参数，同时支持歌词、歌曲列表等功能，详情参考该项目主页。

缺点：

  • 目前不支持在线播放（其他音乐网站歌曲），具体参考这个 issue 29

2018.03.31更新：
目前 3.0 版本的 hexo-tag-aplayer 已经支持了 MetingJS，因此可以解析网络平台的歌曲/歌单了。

  1. 在站点配置文件中开启 meting 模式：

    1
    2
    aplayer:
      meting: true

  2. 使用 meting 标签插入在线音乐，例如：

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

    效果如下：

    需要注意：

    • 到目前为止，meting 标签参数中必须包含 id, server, type 且有序，剩余的参数除了 autoplay 之外其他的都需要按照 参数名:xxx 的格式。
      更多细节具体请参考这个 issue 已经该插件的官方文档。
    • 同一个html中不能同时出现 melting 和 aplayer 标签。如果同时使用，aplayer 标签就会失效。参见 issue 52

最后

考虑到我最初的需求是 能播放在线歌单 ，再考虑到便利性，所以最终选择了 hexo-tag-aplayer 方案。