一、什么是 MetingJS？

MetingJS 是一款基于 Meting API 的轻量级音乐播放器插件，支持网易云、QQ音乐、酷狗等多个平台的音乐播放，可通过简单配置嵌入网页或 Markdown 文档（需编辑器支持 HTML 解析）。

二、准备工作

1. 依赖资源引入

在文档中插入以下代码，引入 MetingJS 所需的依赖（需放在播放器代码之前）：

1
2
3
4
5

<!-- 引入 JQuery（MetingJS 依赖） -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<!-- 引入 MetingJS 核心文件 -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

三、基本使用步骤

1. 添加播放器容器

在需要显示播放器的位置，插入带有配置属性的 <div> 标签，格式如下：

1
2
3
4
5
6

<div class="aplayer"
     data-server="音乐平台"
     data-type="资源类型"
     data-id="资源ID"
     [其他可选参数]>
</div>

核心参数说明：

• data-server：音乐平台（必填）
  可选值：netease（网易云）、tencent（QQ音乐）、kugou（酷狗）、xiami（虾米）等
• data-type：资源类型（必填）
  可选值：song（单曲）、album（专辑）、playlist（歌单）、artist（歌手）
• data-id：资源ID（必填）
  从对应平台的URL中获取（见步骤2）

2. 获取资源ID

以网易云音乐为例：

1. 打开网易云音乐网页版，找到目标内容（如歌曲、歌单）
2. 复制 URL 中 id= 后面的数字，例如：
   • 单曲 URL：https://music.163.com/song?id=186016 → ID 为 186016
   • 歌单 URL：https://music.163.com/playlist?id=24381616 → ID 为 24381616

3. 示例代码

示例1：播放网易云单曲

1
2
3
4
5
6
7

<div class="aplayer"
     data-server="netease"
     data-type="song"
     data-id="186016"
     data-autoplay="false"  <!-- 不自动播放 -->
     data-volume="0.5">     <!-- 初始音量50% -->
</div>

示例2：播放QQ音乐歌单

1
2
3
4
5
6
7

<div class="aplayer"
     data-server="tencent"
     data-type="playlist"
     data-id="8227452774"
     data-loop="all"        <!-- 循环模式：all=列表循环 -->
     data-order="list">     <!-- 播放顺序：list=顺序播放 -->
</div>

四、高级配置参数

除核心参数外，可添加以下可选参数自定义播放器：

五、注意事项

1. 兼容性：部分 Markdown 编辑器（如 GitHub、GitLab）不支持解析 HTML 代码，需使用支持的编辑器（如 Typora、语雀）。
2. 自动播放限制：现代浏览器可能阻止自动播放，需用户手动点击播放按钮。
3. 版权问题：音乐资源依赖平台版权，若资源失效，播放器会显示错误。

六、参考链接

• MetingJS 官方文档
• Meting API 说明