Loading... **简洁而功能强大的音乐播放器** 本文转自： [易航](http://blog.bri6.cn/) **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> ``` 当然，你可以将这些文件托管在自己的服务器，把上面的调用链接改成自己的就行了 二、使用方法 1、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 中设定的值即可 2、MetingJS 的用法 前面已经看到，APlayer 原生用法设置参数十分繁琐，而且只能调用音频文件直链，增加服务器开销。而使用 MetingJS 就很好地解决了这个问题 先看一个最简单的例子： ``` <meting-js server="netease" type="song" id="31365604" > </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 播放器： 全部参数说明请查阅 MetingJS 官方文档（其实除了三个必要参数其余都和 APlayer 原生参数一样） 最后修改：2024 年 11 月 25 日 © 允许规范转载 打赏 赞赏作者 赞 如果觉得我的文章对你有用，请随意赞赏