[网站]Aplayer搭配MetingJS音乐插件的使用

本文最后更新于 1148 天前，其中的信息可能已经有所发展或是发生改变。

1、Aplayer和MetingJS音乐插件的介绍

Aplayer是一个功能强大的HTML5音乐播放器，Metingjs基于Aplayer插件封装好的插件，可以在网站上显示独立的音乐播放模块。

Aplayer官网文档：https://aplayer.js.org/
Metingjs官网文档：https://github.com/metowolf/MetingJS/

1.1、先看个例子

对应的代码：

<meting-js
    server="tencent"
    type="song"
    id="000akynZ2Rbro5">
</meting-js>

1.2、如果是歌单的话则是这样的：

2、引入方法

从外部(CDN)引入Aplayer.JS、Aplayer.CSS和Meting.JS文件，如：

<!--引入Aplayer.CSS文件-->
<link rel="stylesheet" href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css">
<!--引入Aplayer.JS文件-->
<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
<!--引入Meting.js文件-->
<script src="https://unpkg.com/meting@2.0.1/dist/Meting.min.js"></script>

注意：XXX.JS是完整版的未压缩的库，文件比较大，一般用于阅读学习源码或修改源码，一般不用于线上项目。
XXX.min.JS是由完整版的库经过压缩得来，压缩后功能与未压缩的完全一样，只是将其中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。这个版本一般用于网站引用使用，减小文件体积，降低网站流量，提升访问速度等。

3、实际操作

3.1.1、部分代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
    <!-- Aplayer文件 -->
    <!--引入Aplayer.CSS文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css">
    <!--引入Aplayer.JS文件-->
    <script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
    <!-- Meting文件 -->
    <!--引入Meting.js文件-->
    <script src="https://unpkg.com/meting@2.0.1/dist/Meting.min.js"></script>
</head>
<body>

    <meting-js
        fixed="true"
        server="tencent"
        type="playlist"
        id="8474232245"
        order="random"
        preload="none">
    </meting-js>
</body>
</html>

解析：开启吸底模式、QQ音乐、歌单、歌单ID、随机播放、不预加载。
可以根据需要添加你想要的功能。

3.2、详细配置文件

选项	默认值	描述
id(编号)	必要	歌曲ID /播放列表ID /专辑ID /搜索关键字
server(平台)	必要	音乐平台：netease，tencent，kugou，xiami，baidu
type（类型）	必要	song，playlist，album，search，artist
auto（支持）	options	音乐链接，支持：netease，tencent，xiami
fixed（固定模式）	FALSE	启用固定模式，默认false
mini（迷你模式）	FALSE	启用迷你模式，默认false
autoplay（自动播放）	FALSE	音频自动播放，默认false
theme (主题颜色)	#2980b9	默认#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	列出最大高度
storage-name（储存名称）	metingjs	存储播放器设置的localStorage键

3.3、支持的浏览器

Chrome
Firefox
Safari
Internet Explorer 11
Microsoft Edge
其他浏览器请自行测试

4、获取歌单外链

如QQ音乐，其他音乐平台也类似。

打开浏览器，前往官网，登录or前往你所要播放的歌单列表。你会看到歌单的网址。

例如：https://y.qq.com/n/ryqq/playlist/7261817420

后面的7261817420就是歌单的ID，将该ID代码填入id=“(这里)”。

WYY的歌单ID获取是网址里面？前面的数字部分，不是？userid=xxx哦。

1、Aplayer和MetingJS音乐插件的介绍

2、引入方法

3、实际操作

4、获取歌单外链

推荐文章