开源项目：https://github.com/swzaaaaaaa/NBlog
1、开源项目中音乐播放插件的使用流程
步骤1：下载meting-js相关文件
在MetingJS官方仓库或其他可靠的CDN获取meting-js的JavaScript文件以及相关依赖（如APlayer的文件）。将它们下载到项目的public文件夹下，并放在public/js文件夹中。
步骤2：在index.html中引入文件
在public/index.html文件中，通过<script>标签引入meting-js及其依赖。在<head>标签内添加以下内容：
<!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"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title>NBlog</title><link rel="stylesheet" href="<%= BASE_URL %>lib/css/prism.css"><link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css">
</head>
<body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="<%= BASE_URL %>lib/js/prism.js" data-manual></script><script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js"></script><!-- <script> 这个是自己搭建的api，为了防止官方api有问题导致，这里是原作者搭建的，但是有时也有问题，所以我就注释了。（如果需要，后续自己再尝试搭建）var meting_api='https://api.naccl.top/meting/api?server=:server&type=:type&id=:id&auth=:auth&r=:r';</script> --><script src="<%= BASE_URL %>lib/js/Meting.min.js"></script><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/tocbot/4.6.0/tocbot.min.js"></script>
</body>
</html>
步骤3：在index.vue组件中使用
在需要使用音乐播放器的Vue组件中，可以直接在模板中使用<meting-js>标签，就像之前全局引入的方式一样。
通过这种方式，meting-js被引入到整个项目中，并且可以在多个Vue组件中使用。不过需要注意的是，这种方式下meting-js及其依赖的文件会在页面加载时就被全部加载，可能会影响页面的初始加载性能。如果项目对性能要求较高，可以考虑对这些文件进行优化，如压缩、按需加载等。
2、meting-js插件的使用
在使用 <meting-js> 标签时，可以通过设置一系列参数来定制音乐播放器的功能和外观。以下是一些常用参数及其说明：
音乐源相关参数
| 参数名 | 描述 | 示例值 |
|---|---|---|
server | 指定音乐平台。 | netease（网易云音乐）、tencent（腾讯音乐）、kugou（酷狗音乐）、xiami（虾米音乐）、baidu（百度音乐） |
type | 指定音乐类型。 | song（单曲）、album（专辑）、playlist（歌单）、artist（歌手）、search（搜索结果） |
id | 音乐资源的唯一标识符，根据 server 和 type 不同而不同。 | 例如网易云音乐某个歌单的 ID：60198 |
播放器样式与布局参数
| 参数名 | 描述 | 示例值 |
|---|---|---|
fixed | 是否开启固定模式，播放器固定在页面底部。 | true 或 false |
mini | 是否开启迷你模式。 | true 或 false |
list-folded | 列表是否折叠。 | true 或 false |
list-max-height | 列表的最大高度。 | 如 340px |
播放控制参数
| 参数名 | 描述 | 示例值 |
|---|---|---|
autoplay | 是否自动播放。 | true 或 false |
loop | 循环模式。 | all（全部循环）、one（单曲循环）、none（不循环） |
order | 播放顺序。 | list（列表顺序）、random（随机播放） |
preload | 预加载策略。 | auto（自动）、metadata（仅元数据）、none（不预加载） |
volume | 初始音量，范围为 0 到 1。 | 如 0.7 |
mutex | 是否互斥播放，即同一时间只允许一个播放器播放。 | true 或 false |
歌词相关参数
| 参数名 | 描述 | 示例值 |
|---|---|---|
lrc-type | 歌词显示类型。 | 0（不显示歌词）、1（使用 lrc 属性提供的歌词）、2（从音乐源获取歌词）、3（优先从 lrc 属性获取，若没有则从音乐源获取） |
lrc | 自定义歌词内容，当 lrc-type 为 1 或 3 时有效。 | 如 [00:00.00] 这是歌词 |
示例代码
以下是一个使用多个参数的 <meting-js> 标签示例，展示了如何在 HTML 中配置一个网易云音乐歌单的播放器：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script><title>音乐播放器示例</title>
</head><body><meting-jsserver="netease"type="playlist"id="60198"fixed="true"autoplay="false"loop="all"order="list"preload="auto"volume="0.7"mutex="true"list-folded="false"list-max-height="340px"lrc-type="3"></meting-js>
</body></html>
在这个示例中，播放器将播放网易云音乐的指定歌单，采用固定模式，初始音量为 0.7，循环模式为全部循环等。你可以根据自己的需求调整这些参数。
3、api无法访问导致的错误（Naccl自己搭建的）
https://github.com/Naccl/NBlog/issues/97
