网站插入 Aplayer/网易云 音乐播放器
网站插入 Aplayer/网易云 音乐播放器
安装插件
插件需要在Hexo中使用
安装hexo-tag-aplayer插件：
$ npm install --save hexo-tag-aplayer为了方便操作，直接使用Aplayer插件中的MetingJS （基于Meting API 的 APlayer 衍生播放器）
在 Hexo 配置文件 _config.yml 中设置：
aplayer:
meting: true不安装插件
同样也是使用的Aplayer中的MetingJS
直接在界面中引入alplayer和meting需要的css文件和js文件
<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 播放器了；
单曲：
{% meting "1405349492" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:321px" "preload:auto" %}预览：
歌单：
{% 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播放器； 以网易云为例，网页端点击生成外链播放器即可生成外链代码，如我的某个歌单生成外链。
可以在自己博客页面中嵌入插件:
<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：
https://cdn.jsdelivr.net/gh/ooahz/source@latest/Aplayer/APlayer.min.js腾讯云开发者
