開源項目：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
