介绍
一句话说明白：
- APlayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器
- MetingJS 是为 APlayer 添加网易云、QQ音乐等支持的插件
他们的 GitHub 项目地址分别为：
安装
安装很简单，一共需要调用三个文件： APlayer.min.js APlayer.min.css Meting.min.js
你可以使用 CDN 调用，只需要在 <head> 里面插入：
<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
在 footer 里面插入：
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
当然，你可以将这些文件托管在自己的服务器，把上面的调用链接改成自己的就行了
使用
APlayer 原生用法
先看一个最简单的例子：
代码如下：
<div id="aplayer01"></div>
<script type="text/javascript">
const ap = new APlayer({
container: document.getElementById('aplayer01'),
audio: [{
name: '碧い瞳のエリス',
artist: '安全地帯',
url: 'https://doge.ottoli.cn/安全地帯 - 碧い瞳のエリス.mp3',
cover: 'https://doge.ottoli.cn/aqdd.jpg'
}]
});
</script>
在js 代码中：
- 参数
container值为document.getElementById('aplayer01')意思是定义当前播放器容器 id 为aplayer01 - 参数
audio中有 4 个子参数，定义关于音频的相关参数：- 参数
name定义音频名称 - 参数
artist定义艺术家名 - 参数
url指向音频文件的地址 - 参数
url指向音频封面的地址
- 参数
然后，在需要使用播放器的地方，将容器 <div> 的 id 设置为参数 container 中设定的值即可
至于如何添加多个音频组成播放别表、显示歌词等更多功能，请参考 APlayer 官方文档
MetingJS 的用法
前面已经看到，APlayer 原生用法设置参数十分繁琐，而且只能调用音频文件直链，增加服务器开销。而使用 MetingJS 就很好地解决了这个问题
先看一个最简单的例子：
对应的代码为：
<meting-js server="tencent" type="song" id="000akynZ2Rbro5"> </meting-js>
一个 MetingJS 播放器至少需要三个参数：
server指定调用的 API ，可选netease,tencent,kugou,xiami,baidu，分别对应网易云音乐、QQ音乐、酷狗音乐、虾米音乐、百度音乐type指定调用类型，可选song,playlist,album,search,artist，分别对应单曲、歌单、专辑、搜索结果、艺术家id指定调用的id，一般可以在地址栏中找到
当 type 选择的是个播放列表时，生成的播放器是这样的：
播放列表默认是打开的，你可以使用参数 listFolded="true" 使其默认折叠
当你设定 fixed="true" ，会生成一个吸附在页面左下角的播放器，就像我的博客左下角那个
当你设定 mini="true" ，会生成一个 mini 播放器：
值得注意的是：除了 mini 模式，MetingJS 生成的播放器默认是带有歌词的（而且关不掉）
全部参数说明请查阅 MetingJS 官方文档 （其实除了三个必要参数其余都和 APlayer 原生参数一样）
好啦又水完了一篇
文章评论
能不能更改为默认不显示歌词呢？在中间感觉很乱
@jaocky MetingJS 生成的播放器默认是带有歌词的，我没有找到默认不显示歌词的方法
如果想彻底去掉歌词，可以加上参数 lrc-type="0"
这样就完全没有歌词了
@OttoLi 已经找到方法了，就是默认歌词是灰的，点击才会显示，谢谢博主～
@jaocky 可以分享一下方法吗？