APlayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器，支持音乐信息、歌词、进度条、音量、顺序模式、循环模式，可以使用三方音乐外链，也可以使用自己的音乐链接。
开源地址：https://github.com/DIYgod/APlayer
MetingJS 扩展了 APlayer.js 的功能，能够使 APlayer.js 加载网易云音乐、QQ 音乐、虾米音乐中的歌单。
开源地址：https://github.com/metowolf/MetingJS
一、常规安装
安装很简单，一共需要调用三个文件： APlayer.min.css、APlayer.min.js、Meting.min.js：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>下面是调用的歌曲信息及其他参数：
Meting 主要参数说明：
| 参数 | 默认值 | 描述 |
| id | require | 歌曲 ID/歌单 ID/专辑 ID/搜索关键字 |
| server | require | 音乐平台: netease, tencent, kugou, xiami, baidu |
| type | require | 类型：song, playlist, album, search, artist |
| auto | options | 音乐链接，支持: netease, tencent, xiami |
| fixed | false | 开启吸底模式 |
| mini | false | 开启迷你模式 |
| autoplay | false | 自动播放，一般浏览器默认会阻止音频自动播放 |
| theme | #2980b9 | 主题色 |
| loop | all | 音频循环播放，值：’all’、’one’、’none’ |
| order | list | 音频循环顺序，值：’list’，’random’ |
| preload | auto | 音频预加载，值: ‘none’, ‘metadata’, ‘auto’ |
| volume | 0.7 | 默认音量，播放器会记住用户设置，用户自己设置音量后默认音量将失效 |
| mutex | true | 防止同时播放多个播放器，当该播放器开始播放时暂停其他播放器 |
| lrc-type | 0 | 歌词类型 |
| list-folded | false | 列表是否先折叠 |
| list-max-height | 340px | 音频列表最大高度 |
歌单 id 怎么找？浏览器里打开歌单，后面那串数字就是啦！比如：
https://music.163.com/#/discover/toplist?id=3778678
3778678 就是 id。
二、iframe 引入
由于 APlayer 与子比主题存在兼容性问题，直接调用会导致出现【切换登录方式的时候页面会刷新】的 bug，所以我们这里用 iframe 方式引入来避免这个问题。
首先我们创建一个名为 aplayer 的 html 文件并上传到网站上，代码如下：
然后，使用 WordPress 小工具中的自定义 HTML 把上面的 html 文件引入到想要的位置，比如首页侧边栏，代码如下：
<div class="mb20">
<div class="wp-block-embed is-type-video relative-h radius8">
<div style="padding-bottom:100%">
<iframe class="lazyload" framespacing="0" border="0" frameborder="no" data-src="https://你的网址/aplayer.html"></iframe>
</div>
</div>
</div>
© 版权声明
THE END
