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

引入相关依赖

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

<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 "1405349492" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:321px" "preload:auto" %}

歌单：

{% meting "5068325488" "netease" "playlist" "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