Hexo博客添加背景音乐

更好的阅读体验

Hexo添加音乐的方式有很多种，可供使用的插件也不少。NexT主题下内置音乐应该算比较简便的一种了

下面我将会提到数种方法，选择一种最合适的即可

1.直接插入到某一篇文章

$iframe\text{iframe}$ 标签

相当的简单

先到网易云音乐中中搜出你想要的音乐，然后点击生成外链播放器

所需要的所有代码都在这个框框内了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Gz2ZvWI-1599749872629)(https://s1.ax1x.com/2020/07/11/UQzKDs.png)]

然后把这个代码粘贴到你的文章的 $.md\text{.md}$ 文件中，就可以显示了

$JavaScript\text{JavaScript}$ 标签

<script type="text/javascript" src="http://www.xiami.com/widget/player-single?uid=32329501&sid=1776238762&mode=js"></script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R7iz315h-1599749872634)(https://ae01.alicdn.com/kf/U9977f35f4c25466ca7b7fc536dc5a0cca.jpg)]

2.使用 $Hexo-tag-Aplayer\text{Hexo-tag-Aplayer}$ 插件

$hexo-tag-aplayer\text{hexo-tag-aplayer}$ 是 $Aplayer\text{Aplayer}$ 在 $Hexo\text{Hexo}$ 上的插件，其配置可以参考官方文档

npm install --save hexo-tag-aplayer

在文章的markdown文档里添加

{% aplayer "她的睫毛" "周杰伦" "http://home.ustc.edu.cn/~mmmwhy/%d6%dc%bd%dc%c2%d7%20-%20%cb%fd%b5%c4%bd%de%c3%ab.mp3"  "http://home.ustc.edu.cn/~mmmwhy/jay.jpg" "autoplay=false" %}

以上两种都只能实现单篇文章内的播放，下面这一种是将播放器部署在所有界面

可以控制是否自动播放（自动播放移动端不支持）

修改 themes/next/layout/_macro/sidebar.swig文件

添加播放器内容

<!-- 音乐播放器 -->
<div>{% if theme.background_music %}<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="{{ theme.background_music }}"></iframe>{% endif %}
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LMWcgvSk-1599749872638)(https://s1.ax1x.com/2020/07/11/Ul97RK.png)]

在 themes/next/_config.yml主题配置文件中添加歌单地址配置

background_music: //music.163.com/outchain/player?type=0&id=2120628564&auto=1&height=66

background_music:

如图所示填入歌曲的部分HTML代码

添加歌单

创建歌单，复制代码

把 height=90改成 height=66

最后贴一张我的博客的效果图

也可以单独的做一个歌单页面

最新版的 $hexo-tag-aplayer\text{hexo-tag-aplayer}$ 已经支持了 $MetingJS\text{MetingJS}$ 的使用，可以直接解析网络平台的歌曲，首先要在站点配置文件中开启 $meting\text{meting}$ 模式，添加以下代码在配置文件的最后：

aplayer:meting: true

复制歌单的链接，然后复制歌单的 $id\text{id}$ ，例如 https://music.163.com/playlist?id=523845661&userid=46562117 ，这个歌单的id就是523845661，公司名可以是tencent、netease或是其他公司，下面给出一个例子，打开 /Hexo/source/playlist/index.md文件，输入：

{% meting "7634442256" "tencent" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

这就是一个 $QQ\text{QQ}$ 音乐的歌单

最终效果