Hexo 折腾:音乐播放

Author Avatar
发表:1月 25, 2018 更新:11月 07, 2018
字数统计:1.1k 字 阅读时长:4 分

最近想要在博客中插入音乐(网易云音乐),目前找到了三种解决方案:

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

使用音乐平台官方插件

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

<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
     <!-- 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 中加入:
     <!-- Import APlayer.js -->
     <% if (page.aplayer === true) { %>
         <%- partial('_widget/aplayer') %>
     <% } %>
    
  3. 使用,需要内嵌 APlayer 的页面中:
    Front-matter 中加入:
     aplayer: true
    
    嵌入 APlayer
     <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-autoplayfalse是否自动播放,移动端浏览器不支持该选项
data-mutextrue播放时是否暂停其他APlayer对象
data-listmaxheight340px播放列表最高高度
data-preloadauto音乐预加载模式:none, metadata, auto
data-theme#2980b9主题色
data-minifalse是否开启迷你模式
data-loopall循环方式:all, one, none
data-orderlist播放顺序:list, random
data-lrcfalse
data-list-foldedfalse歌单列表初始时是否折叠
data-volume0.7用户未自定义前的默认初始化音量

更多参数参考:
MetingJS Options   APlayer Options

效果展示:

  1. 单曲:
     <div 
         class="aplayer" 
         data-id="33911781" 
         data-server="netease" 
         data-type="song"
         data-mutex="false"
         data-loop="none">
     </div>
    

  2. 歌单:
     <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. 安装
     npm install --save hexo-tag-aplayer
    
  2. 使用
     {% 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 模式:
     aplayer:
       meting: true
    
  2. 使用 meting 标签插入在线音乐,例如:

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

    效果如下:

    需要注意:

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

最后

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