博客加入音乐播放插件

一、什么是 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>

四、高级配置参数

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

参数名 说明 可选值
data-autoplay 是否自动播放 true / false(默认false
data-loop 循环模式 all(列表)/ one(单曲)/ none
data-order 播放顺序 list(顺序)/ random(随机)
data-volume 初始音量(0-1之间) 例如 0.7 表示70%
data-fixed 是否固定在页面底部 true / false
data-theme 播放器主题色(十六进制颜色) 例如 #ff7eaf

五、注意事项

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

六、参考链接