MetingJS 接入网易云、QQ 音乐等平台

什么是 MetingJS

MetingJS 是为 APlayer 设计的配套库。它通过调用公开的 Meting API 来获取国内主流音乐平台的音频地址、歌词和封面，然后把结果传给 APlayer 渲染。

简单说：有了 MetingJS，你不需要自己去找音频 URL——只需要告诉我歌曲 ID，MetingJS 帮你搞定一切。

支持的音乐平台

平台	server 参数值	说明
网易云音乐	`netease`	国内最大的音乐社区
QQ 音乐	`tencent`	腾讯音乐
酷狗	`kugou`	酷狗音乐
虾米	`xiami`	阿里音乐（已停止服务，不推荐）
百度音乐	`baidu`	百度音乐

CDN 方式引入 MetingJS

MetingJS 需在 APlayer 之后引入：

<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script src="Meting.min.js"></script>

最简用法：一个 HTML 标签

<meting-js
    server="netease"
    type="song"
    id="198239"
    theme="#FADFA3">
</meting-js>

这一行代码就会自动：

创建 APlayer 实例
调用 Meting API 获取网易云 ID 为 198239 的歌曲信息
拿到音频 URL、封面、歌词
渲染出带歌词同步的完整播放器

播放列表（歌单 / 专辑 / 艺人）

通过 type 参数可以获取不同类型的音乐集合：

播放歌单

<meting-js
    server="netease"
    type="playlist"
    id="60198">
</meting-js>

播放专辑

<meting-js
    server="netease"
    type="album"
    id="78098775">
</meting-js>

播放艺人热门歌曲

<meting-js
    server="netease"
    type="artist"
    id="1049574">
</meting-js>

搜索关键字

<meting-js
    server="netease"
    type="search"
    id="周杰伦">
</meting-js>

API 方式使用

如果你需要更精细的控制，可以使用 Meting 的 api 方法获取数据，然后手动传给 APlayer：

Meting.api('/server.php?server=netease&type=song&id=198239').then(function(result) {
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        audio: result
    });
});

常用配置属性

<meting-js> 标签支持以下属性来定制播放器：

属性	对应 APlayer 参数	说明
`theme`	`theme`	主题色
`autoplay`	`autoplay`	是否自动播放
`loop`	`loop`	循环模式：all / one / none
`order`	`order`	播放顺序：list / random
`preload`	`preload`	预加载策略
`volume`	`volume`	初始音量
`mutex`	`mutex`	多播放器互斥
`lrc-type`	`lrcType`	歌词显示方式
`list-folded`	`listFolded`	列表是否折叠
`list-max-height`	`listMaxHeight`	列表最大高度
`storage-name`	`storageName`	localStorage 键名
`mini`	`mini`	是否迷你模式
`fixed`	`fixed`	是否吸底模式

注意事项

关于音频版权

Meting API 是一个第三方公开的音频解析接口，音频版权归各音乐平台和创作者所有。请仅用于个人学习和研究，不要用于商业用途或大规模分发。

解析稳定性

各音乐平台的音频接口偶尔会调整，导致 Meting API 的解析失败或返回空数据。这不是 APlayer 的问题，而是 Meting API 或平台侧的变化。如果某个平台解析失败，可以换一个平台试试。

自动播放限制

移动端浏览器几乎都禁止自动播放。即使设置了 autoplay: true，播放器也不会自动开始播放，需要用户手动点击。详见自动播放策略。