给你的网站增加一款简洁而功能强大的音乐播放器

时间：2022-12-20加入收藏

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>
<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://***.cn/***.mp3',
           cover: 'https://***.cn/***.jpg'
       }]
   });
</script>

在js 代码中：
参数 container 值为 document.getElementById('aplayer') 意思是定义当前播放器容器 id 为 aplayer
参数 audio 中有 4 个子参数，定义关于音频的相关参数：

参数 name 定义音频名称
参数 artist 定义艺术家名
参数 url 指向音频文件的地址
参数 cover 指向音频封面的地址
然后，在需要使用播放器的地方，将容器 <div> 的 id 设置为参数 container 中设定的值即可

MetingJS 的用法
前面已经看到，APlayer 原生用法设置参数十分繁琐，而且只能调用音频文件直链，增加服务器开销。而使用 MetingJS 就很好地解决了这个问题
先看一个最简单的例子：
对应的代码为：

<meting-js
   server="netease"
   type="playlist"
   id="60198">
</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 生成的播放器默认是带有歌词的（而且关不掉）

打赏

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

上一篇
网站添加雪花飘落特效下一篇
网站设置点击任何地方弹出新页面广告只弹出一次

TGA： 音乐播放器

分享到：

给你的网站增加一款简洁而功能强大的音乐播放器

相关阅读

栏目分类

排行榜

专题推荐