Hexo音乐播放完美支持https和多平台

本站的BGM终于满血复活啦,感谢 @新垣结衣 的广播和 @萨摩公园 的技术支持。

前科

为了让小站可以播放bgm我可算操碎了心,光是文章就写了好几篇

Hexo插入背景音乐的正确姿势

只是可惜这个项目GG了,目前访问都是502状态
于是之后很长一段时间,来到这里是听不到音乐的~~~

Aplayer

毫无疑问今天介绍的方法是目前最完美的,既支持https还支持多平台
我们需要引用两个JS文件和一个CSS文件:

1.APlayer.min.js和APlayer.min.css

1
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>

2.Meting.min.js

1
<script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>

Icarus主题为例,将APlayer.min.cssAPlayer.min.js代码插入到/layout/common/header.ejs里面
Meting.min.js代码插入到/layout/common/footer.ejs里面

需要注意的是,Meting.min.js必须在jquery.min.js后面,大家可以查看网页源代码进行调整。
当然js文件的地址也可以更改,如先将文件上传到七牛,再将地址替换为七牛外链地址即可。

上述准备工作做完后,只需在插入音乐的地方添加:

1
<div class="aplayer" data-id="373559" data-server="xiami" data-type="song"></div>

其中的参数如下,加粗表示必须填写

  • data-id: 歌曲/专辑/歌单 ID

  • data-server: 音乐平台,支持如下参数

    • netease (网易云音乐)
    • tencent (qq音乐)
    • xiami (虾米音乐)
    • kugou (酷狗音乐)
    • baidu (百度音乐)
  • data-type: 请求类型,支持如下参数

    • song (单曲)
    • album (专辑)
    • playlist (歌单)
    • search (搜索)
  • data-order: 播放模式

    • random (随机)
    • list (列表)
  • data-autoplay: 自动播放

    • false
    • true

示范

这里我稍微示范下,如果下面的音乐可以正常播放,则此方法未失效。

1
<div class="aplayer" data-id="31673404" data-server="netease" data-type="song"></div>
1
<div class="aplayer" data-id="2262234122" data-server="netease" data-type="playlist"></div>

另外也是支持外链文件播放的,如上传到七牛,再引用也可以…但是太耗流量了
现在赶紧给你的网站添加BGM吧!