Hexo添加音乐播放器

在之前的博客中,添加了音乐播放器,感觉还是挺方便的,看文章的时候可以欣赏一下音乐。无奈HTTPS的全面普及,之前添加的网易云音乐播放器已失效。于是乎,转到了另一款播放器上,也就是很火的APlayer,当然,作者还有另一款很火的DPlayer。音乐链接引入了YUX-IO 的 163music-APlayer-you-get-docker。不过,最近发现好像处于低维护状态,链接基本全挂。当然不能就这样放弃啦,然后就发现了让 Ghost 吃上 APlayer这篇文章,解决了这个痛点,感谢@萨摩公园

2018.8.1 更新方法

无意间发现播放器解析全部 undefined,赶紧打开让 Ghost 吃上 APlayer压压惊,发现作者对"player.js"进行了重构,解析错误是由于参数变更导致的,于是乎,果断跟进更新。
食用方法:
第一步引入 APlayer,相较之前多了一个 css 文件。

1
2
3
4
5
<link
rel="stylesheet"
href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css"
/>
<script src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>

第二步引入 Metting.js,重构之后的名字。

1
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

最后一步在需要使用的地方

1
2
3
4
5
6
7
8
<div
class="aplayer"
data-id="714421782"
data-server="tencent"
data-type="playlist"
data-order="random"
data-listmaxheight="232px"
></div>

重构之后,之前使用的参数 “data-mode” 已弃用,由新方法 “data-loop” 和 “data-order” 组成。

以下为重构之后的部分参数:
data-id : 歌曲/专辑/歌单 ID 。此参数必填。
data-server : 音乐平台,此参数必填。
data-type : 请求类型,此参数必填。
data-autoplay : 自动播放。默认 false 。
data-loop : 循环播放。默认 all 。
data-order : 播放模式,也就是 “列表循环”,“单曲循环”,“随机播放”。默认 list 。
data-volume : 音量。默认 0.7 。
data-listmaxheight : 列表最大高度。默认 340px 。

以上为常用的参数,更多细节和参数说明请访问metowolf/MetingJS

注意:如果发送到 “https://api.i-meto.com” 的所有请求失败或者播放器加载失败,请更换本机网络。具体参考issues#4.
再次感谢 🙏 @萨摩公园

以下为旧方法

开始正题,方法很简单啦,也可以点击上面给出的链接直接访问作者的网站。

第一步是引入两个 JS 文件:

  • APlayer.min.js

    1
    <script src="https://cdn.bootcss.com/aplayer/1.6.0/APlayer.min.js"></script>
  • player.js

    1
    <script src="https://api.i-meto.com/music/player.js"></script>

    这个文件建议大家缓存下来,毕竟不是在 CDN 上,加载可能不如本地快,所以可以缓存下来放在 themes/next/source/js/src 中,这是我的文件目录,我使用的是 Next 主题,其他主题大同小异。缓存下来还有最大的好处是可以自定义,啦啦啦!

    这样简单两步,播放器就已经引入完成了。

第二步是使用:

  • 在需要使用的地方:

    1
    2
    3
    4
    5
    6
    7
    <div
    class="aplayer"
    data-id="60198"
    data-server="netease"
    data-type="playlist"
    data-mode="random"
    ></div>

    上面这段代码来自@萨摩公园

  • 当然,也可以像我一样放在侧边栏。方法如下:

    修改themes/next/layout/_custom下的sidebar.swig。打开应该是空文件,自从 next 更新后就发现,作者貌似专门给了这个文件让我们来自定义的,在themes/next/layout/_macro下的sidebar.swig文件中发现了如下字段:

    1
    {% include '../_custom/sidebar.swig' %}

    这段代码把我们修改的文件引入到了主文件。也就是说,我们的自定义完全可以写在 themes/next/layout/_custom 下的 sidebar.swig 文件中,其他就不管了,那么还等什么?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!--已失效的播放器 无用可删除
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=300 height=500 src="https://music.daoapp.io/iframe?album=16953&qssl=1&autoplay=0&narrow=0 "></iframe>
    -->
    <!-- 这是第一个文件 必须-->
    <script src="https://cdn.bootcss.com/aplayer/1.6.0/APlayer.min.js"></script>
    <!-- 下面是第二个文件的原文件 可以直接使用
    <script src="https://api.i-meto.com/music/player.js"></script>
    -->
    <!-- 下面是我修改后的文件 可删除-->
    <script type="text/javascript" src="/js/src/player.js"></script>
    <!-- 使用 必须-->
    <div
    class="aplayer"
    data-id="714421782"
    data-server="tencent"
    data-type="playlist"
    data-mode="random"
    dataset="height:265px"
    ></div>

    给出我的这个文件的内容以供参考,注释的内容可以删除。当然,我修改的 player.js 就不放出来了,也没改啥,大家应该都可以的。

    播放器的设置:

    • data-id : 歌曲/专辑/歌单 ID 。此参数必填。
    • data-server : 音乐平台,此参数必填。支持如下参数:
      • netease
      • tencent
      • xiami
      • kugou
      • baidu
    • data-type : 请求类型,此参数必填。支持如下参数:
      • song (单曲)
      • album (专辑)
      • playlist (歌单)
      • search (搜索)
    • data-mode : 播放模式,支持如下参数:
      • random (随机)
      • single (单曲)
      • circulation (列表循环)
      • order (列表)
    • data-autoplay : 自动播放,支持如下参数:
      • false
      • true

    播放器的详细设置参数请参考让 Ghost 吃上 APlayer
    我添加的是我的 QQ 音乐歌单,如果觉得好听的话,可以收藏。当然也可以添加至你的歌单。

0%