网站插入 Aplayer/网易云 音乐播放器

安装插件

插件需要在Hexo中使用

安装hexo-tag-aplayer插件：

代码语言：javascript复制

$ npm install --save hexo-tag-aplayer

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

代码语言：javascript复制

aplayer:
  meting: true

不安装插件

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

代码语言：javascript复制

<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 播放器了； 单曲：

代码语言：javascript复制

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

预览：

歌单：

代码语言：javascript复制

{% 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播放器； 以网易云为例，网页端点击生成外链播放器即可生成外链代码，如我的某个歌单生成外链。

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

代码语言：javascript复制

<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：

代码语言：javascript复制

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

hexo

0 人点赞