音樂盒元件Aplayer+Metingjs

Aplayer

🍭 Wow, such a beautiful HTML5 music player(哇，好漂亮的HTML5音樂播放器) Aplayer是一個功能強大的HTML5音樂播放器 Aplayer官網文件：https://aplayer.js.org/#/

Metingjs

Metingjs基於Aplayer外掛封裝好的外掛，開箱即用 Metingjs官網文件：https://github.com/metowolf/MetingJS

使用方法

一、html裡

<!-- 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>
<!-- MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

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

直接貼上到html裡即可，效果如下：

二、Vue專案中

在index.html中新增依賴

在自定義元件中直接使用即可：

<template>
    <div id="music">
        <meting-js :autoplay="true"
                   :fixed="true"
                   :id="6819158597"
                   :mini="true"
                   :volume="0.4"
                   server="netease"
                   type="playlist"/>
    </div>
</template>

<script>
    export default {
        name: "music",
    }
</script>

配置引數

一個 MetingJS 播放器至少需要三個引數：

server 指定呼叫的 API ，可選 netease, tencent, kugou, xiami, baidu ，分別對應網易雲音樂、QQ音樂、酷狗音樂、蝦米音樂、百度音樂 type 指定呼叫型別，可選 song, playlist, album, search, artist ，分別對應單曲、歌單、專輯、搜尋結果、藝術家 id 指定呼叫的 id ，一般可以在位址列中找到 當 type 選擇的是個播放列表時，生成的播放器是這樣的：

播放列表預設是開啟的，你可以使用引數 listFolded="true" 使其預設摺疊 當你設定 fixed="true" ，會生成一個吸附在頁面左下角的播放器，就像我的部落格左下角那個 當你設定 mini="true" ，會生成一個 mini 播放器：

值得注意的是：除了 mini 模式，MetingJS 生成的播放器預設是帶有歌詞的（而且關不掉）

選項	預設值	描述
id(編號)	require	歌曲ID /播放列表ID /專輯ID /搜尋關鍵字
server(平臺)	require	音樂平臺：netease（網易雲），tencent（QQ音樂），kugou（酷狗），xiami（蝦米），baidu（百度音樂）
type（型別）	require	song，playlist，album，search，artist
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鍵

網易雲的歌單ID獲取