音樂盒元件Aplayer+Metingjs

李云蹊發表於2024-04-19
元件JS

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裡即可，效果如下：

音樂盒元件Aplayer+Metingjs

二、Vue專案中

在index.html中新增依賴

音樂盒元件Aplayer+Metingjs

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

<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獲取

音樂盒元件Aplayer+Metingjs

相關文章