欢迎访问我的博客，点击蓝色字体即可进入！
第一种方式：使用网易云音乐插件
特点：
- 简单快捷
- 有版权保护的音乐无法播放（易造成歌单失效）
我们可以将此插件添加到博客界面，或者博客文章之中（直接粘贴网易云插件代码即可）。
在此我们举例将音乐插件添加到侧边栏。
打开我们主题文件：themes\next\layout\_macro\sidebar.swig找到sidebar-inner，将网易云插件代码代码粘贴到此<div>标签后即可。
演示：
<aside class="sidebar">
<div class="sidebar-inner"> //从下面开始复制，粘贴到这里
<!--网易云插件-->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
src="//music.163.com/outchain/player?type=2&id=463352828&auto=0&height=66"></iframe>
在博客文件夹打开GitBash执行hexo clean、hexo g、hexo s，即可看到效果。
效果图：
第二种方式：使用Aplayer + MetingJS插件
特点：
- 可以播放大部分音乐。
- 还可以添加其他音乐平台的歌单，如：
QQ音乐...
在此我们举例将音乐插件添加到侧边栏。
点击绿色框线处就会打开播放列表
有两种实现方式
打开我们主题文件：themes\next\layout\_macro\sidebar.swig找到sidebar-inner，复制下面代码粘贴到此<div>标签后即可。
简单方式
经测试：此方式，有时会失效，留作研究。【不推荐】【要求MetingJS版本：@2.0.1】
<aside class="sidebar">
<div class="sidebar-inner"> //从下面开始复制，粘贴到这里
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<!-- require MetingJS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
<!--网易云-->
<meting-js
server="netease"
id="4916164702"
type="playlist"
mini="false"
fixed="false"
list-folded="true"
autoplay="false"
volume="0.4"
theme="#FADFA3"
order="random"
loop="all"
preload="auto"
mutex="true">
</meting-js>
属性
- sever：绑定服务器，填写网易云
- type：类型，播放列表
- mini：启用吸底模式
- fixed：启用固定模式
- list-folded：播放别表是否折叠
- autoplay：启用自动播放
- volume：音量
- theme：主题颜色
- order：播放顺序
random：随机list：顺序- loop：循环
all、one、none- preload：预加载
- mutex：避免多个插件同时播放
- id：网易云歌单id，打开我们的歌单，网址最后一串数字就是。
例如：https://music.163.com/#/my/m/music/playlist?id=4916164702- 其他属性请参照文末链接：`MetingJS
添加QQ音乐歌单
将meting-js换成下面即可。 auto后为歌单网址。
<meting-js
auto="https://y.qq.com/n/yqq/playlist/1790504159.html#stat=y_new.playlist.pic_click">
</meting-js>
复杂方式
在data-后添加属性及属性值即可实现相同功能
【要求
MetingJS版本：@1.2】
<aside class="sidebar">
<div class="sidebar-inner"> //从下面开始复制，粘贴到这里
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<!-- require MetingJS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
<!--网易云-->
<div class="aplayer"
data-id="4916164702"
data-server="netease"
data-type="playlist"
data-fixed="false"
data-autoplay="false"
data-list-folded="true"
data-mutex="true"
data-order="random"
data-loop="all"
data-volume="0.4"
data-theme="#FADFA3"
date-preload="auto" >
</div>
其他属性请参照文末链接：
APlayer
使用 Pajx 实现背景音乐全局播放
即实现页面跳转刷新后音乐不间断播放
经测试，在博客文章中的网易云插件无法实现全局播放。（留作研究）
-
打开
themes\next\layout文件夹找到_layout.swig -
在
<\head>标签前添加下面代码，并保存。
<head> //粘贴到这里
<!--pjax：防止跳转页面音乐暂停-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/pjax.js"></script>
</head>
- 在主题的配置文件中找到
pajx，将它设置为true，并保存。
# Easily enable fast Ajax navigation on your website.
# Dependencies: https://github.com/theme-next/theme-next-pjax
pjax: true
在博客文件夹打开GitBash执行hexo clean、hexo g、hexo s，跳转页面时即可看到效果。
参考文章（鸣谢）
- Aplay操作手册(中文版)：https://aplayer.js.org/#/zh-Hans/
- Pjax：https://github.com/theme-next/theme-next-pjax
- MetingJS：https://github.com/metowolf/MetingJS
- Sourc0d：https://blog.csdn.net/yjwan521/article/details/80899992
