Aplayer搭配Metingjs音樂插件的使用
- 2020 年 4 月 8 日
- 筆記
Aplayer搭配MetingJS音樂插件的使用
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
簡單使用
<!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/[email protected]/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指歌曲的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鍵 |
英文版選項
| option | default | description |
|---|---|---|
| id | require | song id / playlist id / album id / search keyword |
| server | require | music platform: netease, tencent, kugou, xiami, baidu |
| type | require | song, playlist, album, search, artist |
| auto | options | music link, support: netease, tencent, xiami |
| fixed | false | enable fixed mode |
| mini | false | enable mini mode |
| autoplay | false | audio autoplay |
| theme | #2980b9 | main color |
| loop | all | player loop play, values: 'all', 'one', 'none' |
| order | list | player play order, values: 'list', 'random' |
| preload | auto | values: 'none', 'metadata', 'auto' |
| volume | 0.7 | default volume, notice that player will remember user setting, default volume will not work after user set volume themselves |
| mutex | true | prevent to play multiple player at the same time, pause other players when this player start play |
| lrc-type | 0 | lyric type |
| list-folded | false | indicate whether list should folded at first |
| list-max-height | 340px | list max height |
| storage-name | metingjs | localStorage key that store player setting |
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/[email protected]/dist/Meting.min.js"></script> </head> <body> <meting-js server="netease" type="playlist" id="60198" fixed="true" autoplay="true" loop="all" order="random" preload="auto" list-folded="ture" list-max-height="500px" lrc-type="1"> </meting-js> </body> </html> 抽取出來
<!--css--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"> <!--js--> <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script> <!--使用--> <meting-js server="netease" type="playlist" id="60198" fixed="true" autoplay="true" loop="all" order="random" preload="auto" list-folded="ture" list-max-height="500px" lrc-type="1"> </meting-js> 4. 網易雲音樂外鏈獲取方法
1、打開網頁版網易雲音樂：https://music.163.com/#
2、選擇想要添加到音樂列表去的音樂，由於部分歌曲限制外鏈，只能另闢蹊徑
3、打開網頁控制台
4、選中外鏈元素
5、複製該行程式碼
<a data-action="outchain" data-rt="" data-href="/outchain/2/1400256289/" class="des s-fc7">生成外鏈播放器</a> 6、取data-href的鏈接，前面加上https://music.163.com/#進行拼接
https://music.163.com/#/outchain/2/1400256289/ 7、訪問：https://music.163.com/#/outchain/2/1400256289/，獲取id成功
5. 網易雲音樂個人歌單id獲取
登陸個人網易雲音樂，打開歌單，查看瀏覽器地址，id後面就是歌單
6. 部落格園引用背景音樂
頁腳區
<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/[email protected]/dist/Meting.min.js"></script> <div> <meting-js server="netease" type="playlist" id="60198" fixed="true" autoplay="true" loop="all" order="random" preload="auto" list-folded="ture" list-max-height="500px" lrc-type="1"> </meting-js> </div> 