H5播放器介绍
APlayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器
MetingJS 是为 APlayer 添加网易云、QQ音乐、酷狗音乐等支持的插件
演示效果查看这里 七夏技术导航
安装教程
安装很简单，一共需要调用三个文件：APlayer.min.js APlayer.min.css Meting.min.js
你可以使用 CDN 调用，只需要在 <head> 里面插入：
<link href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>在 footer 里面插入：
<script src="https://cdn.bootcdn.net/ajax/libs/meting/2.0.1/Meting.min.js"></script>你可以将这些文件托管在自己的服务器，把上面的调用链接改成自己的就行了。
使用方法
- APlayer 原生用法
<div id="aplayer"></div>
<script type="text/javascript">
const ap = new APlayer({
container: document.getElementById('aplayer'),
audio: [{
name: '你从未离去',
artist: '白挺',
url: 'https://doge.ottoli.cn/你从未离去.mp3',
cover: 'https://doge.ottoli.cn/你从未离去.jpg'
}]
});
</script>在js 代码中：
参数 container 值为 document.getElementById('aplayer') 意思是定义当前播放器容器 id 为 aplayer
参数 audio 中有 4 个子参数，定义关于音频的相关参数：
- 参数 name 定义音频名称
- 参数 artist 定义艺术家名
- 参数 url 指向音频文件的地址
- 参数 cover 指向音频封面的地址
然后，在需要使用播放器的地方，将容器 <div> 的 id 设置为参数 container 中设定的值即可
- MetingJS 的用法
前面已经看到，APlayer 原生用法设置参数十分繁琐，而且只能调用音频文件直链，增加服务器开销，而使用 MetingJS 就很好地解决了这个问题。
