1. Aplayer和MetingJ的介紹
Aplayer官網文檔：https://aplayer.js.org/#/
Metingjs官網文檔：https://github.com/metowolf/MetingJS
Aplayer是一個功能強大的HTML5音樂播放器，Metingjs基於Aplayer插件封裝好的插件，開箱即用。
2. MetingJS的簡單使用
MetingJS支持Aplayer版本
| Version | API Status | APlayer |
|---|---|---|
| 1.2.x | Supported | 1.10.0 |
| 2.0.x | Latest | 1.10.0 |
支持的瀏覽器
- Chrome
- Firefox
- Safari
- Internet Explorer 11
- Microsoft Edge
3. 使用詳解
簡單使用實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- require APlayer -->
<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>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
</head>
<body>
<meting-js server="netease" type="playlist" id="60198"></meting-js>
</body>
</html>
解析：server="netease" type="playlist" id="60198" 解析：server="netease" type="playlist" id="60198"
server指音樂平台，netease指網易雲音樂， type類型，playlist列表，id指歌曲的i或者專輯或列表外鏈id
因此重點在於指定平台，指定外鏈id
配置項詳解
| 選項 | 默認值 | 描述 |
|---|---|---|
| id(編號) | require | 歌曲ID /播放列表ID /專輯ID /搜索關鍵字 |
| server(平台) | require | 音樂平台：netease，tencent，kugou，xiami，baidu |
| type（類型） | require | song，playlist，album，search，artist |
| auto（支持類種 類） | options | 音樂鏈接，支持：netease，tencent，xiami |
| fixed（固定模式） | false | 啟用固定模式，默認false |
| mini（迷你模式） | false | 啟用迷你模式,默認false |
| autoplay（自動播放） | false | 音頻自動播放，默認false |
| theme(主題顏色) | #2980b9 | 默認#2980b9 |
| loop（循環） | all | 播放器循環播放，值：“all”，one”，“none” |
| order(順序) | list | 播放器播放順序，值：“list”，“random” |
| preload(加載) | auto | 值：“none”，“metadata”，“‘auto” |
| volume（聲量） | 0.7 | 默認音量，請注意播放器會記住用戶設置，用戶自己設置音量后默認音量將不起作用 |
| mutex（限制） | true | 防止同時播放多個玩家，在該玩家開始播放時暫停其他玩家 |
| lrc-type（歌詞） | 0 | 歌詞顯示 |
| list-folded（列表折疊） | false | 指示列表是否應該首先折疊 |
| list-max-height（最大高度） | 340px | 列出最大高度 |
| storage-name（儲存名稱） | metingjs | 存儲播放器設置的localStorage鍵 |
3. 博客園引用背景音樂
根據以上參數，寫好了迷你版背景音樂demo，修改id直接復制進頁腳區即可:
<!-- require APlayer -->
<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>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js
server="netease"
type="playlist"
id="5393777464"
fixed="true"
autoplay="true"
loop="all"
order="random"
preload="auto"
list-folded="ture"
lrc-type="1"
mutex="true">
</meting-js>
4. 網易雲音樂外鏈獲取方法
1、打開網頁版網易雲音樂：https://music.163.com/#
2、選擇播放的的歌單，（由於部分歌曲限制外鏈，只能另辟蹊徑通過分享獲得歌單id），如圖分享：
3、打開分享的鏈接（如圖我是分享到微博中，打開該鏈接）
4、點擊鏈接，打開后，可以看到地址欄中該字段值就是歌單id，填寫到上述的id中即可；
