安装插件

插件需要在Hexo中使用

安装hexo-tag-aplayer插件:

1
$ npm install --save hexo-tag-aplayer

为了方便操作,直接使用Aplayer插件中的MetingJS (基于Meting API 的 APlayer 衍生播放器)
在 Hexo 配置文件 _config.yml 中设置:

1
2
aplayer:
meting: true

不安装插件

同样也是使用的Aplayer中的MetingJS
直接在界面中引入alplayer和meting需要的css文件和js文件

1
2
3
<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>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>

配置使用

引入完Aplayer中和MetingJS后,就可以在界面中中使用 MetingJS 播放器了;
单曲:

1
{% meting "1405349492" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:321px" "preload:auto" %}

预览:

歌单:

1
{% meting "5068325488" "netease" "playlist" "theme:#555" "mutex:true" "listmaxheight:321px" "preload:auto" %}

预览:

相关配置:

列1 列2 列3
选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式:all, one,none
order list 列表播放模式: list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放,移动端浏览器暂时不支持此功能
mutex true 该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式,可选项: none, metadata, auto
theme #ad7a86 播放器风格色彩设置

使用音乐平台提供插件

不使用Aplayer播放器;
以网易云为例,网页端点击生成外链播放器即可生成外链代码,如我的某个歌单生成外链。

可以在自己博客页面中嵌入插件:

1
2
3
4
5
6
<iframe 
frameborder="no" border="0"
marginwidth="0" marginheight="0"
width=100% height=321
src="//music.163.com/outchain/player?type=0&id=5068325488&auto=0&height=430">
</iframe>

效果:

后记

toc点击后点击后无法跳转问题,原因是aplayer播放器与toc不兼容;
解决方法:
引入此js,替换掉aplayer原本的js:

1
https://cdn.jsdelivr.net/gh/ooahz/source@latest/Aplayer/APlayer.min.js