Vue中使用 Aplayer 和 Metingjs 添加音樂插件的方式

Posted on by

1、Aplayer和Metingjs 的文檔

Aplayer官網文檔

Metingjs官網文檔

2、使用方式

在 public 目錄下的 index.html 中引入核心依賴

<link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" rel="external nofollow" >
  <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>

在需要使用的地方直接引入核心組件

這裡以 app.vue 為例，放在這裡可以全局生效

<template>
  <div id="app">
    <meting-js server="tencent" type="playlist" id="8574171521" fixed="true" autoplay="true" loop="all" order="list"
      preload="auto" list-folded="true" list-max-height="500px" lrc-type="1">
    </meting-js>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
    // HeadNav
  }
}
</script>
<style>
</style>

使用技巧

  • 如果需要該音樂插件全局都能生效，可以將這個組件放置在 app.vue 下，這樣不管怎樣切換頁面都能夠播放音樂
  • 如果需要局部生效，則將該組件放置在需要生效的組件中即可

使用效果如下：

在這裡插入圖片描述

部分參數說明：

  • server：指的是音樂播放平臺，我這裡選擇的是 tencent (QQ音樂)
  • type：音樂播放的形式(單曲，歌單列表等等)，我這裡選擇的是 playlist ，即歌單類型
  • id：歌單的id
  • fixed：底部固定模式
  • theme：修改主題顏色

獲取音樂外鏈，這裡以QQ音樂為例：

  • 找到自己喜歡的歌單選擇分享，然後復制鏈接

備註：在 我喜歡 中的音樂也可以一鍵導出歌單

復制的音樂鏈接如下：

https://c.y.qq.com/base/fcgi-bin/u?__=sgoH6AlUf9VF

可以看到，這個鏈接好像沒有我們想要的歌單id，不要著急，隻需要將復制的鏈接用瀏覽器打開就能夠的得到我們想要的播放類型和歌單id瞭

通過瀏覽器打開鏈接，我們在瀏覽器地址欄得到以下地址：

https://y.qq.com/n/ryqq/playlist/8574171521

這次我們就能夠得到想要的播放類型和歌單id瞭，我們可以看到播放類型為 playlist,歌單id為 8574171521

將得到的參數賦值給我們之前引入的 <meting-js></meting-js> 組件

至此我們就完成瞭一個基本的音樂播放插件的使用瞭

3、完整API

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
選項 默認 描述
id 要求 歌曲ID/播放列表ID/專輯ID/搜索關鍵字
server 要求 音樂平臺：netease, tencent, kugou, xiami,baidu
type 要求 song, playlist, album, search, artist
auto 選項 音樂鏈接，支持：netease,tencent``xiami
fixed false 啟用固定模式
mini false 開啟迷你模式
autoplay false 音頻自動播放
theme #2980b9 主色
loop all 播放器循環播放，值：‘all’、‘one’、‘none’
order list 播放器播放順序，值：‘list’，‘random’
preload auto 值：“無”、“元數據”、“自動”
volume 0.7 默認音量，註意播放器會記住用戶設置，用戶自己設置音量後默認音量將失效
mutex true 防止同時播放多個播放器，當該播放器開始播放時暫停其他播放器
lrc-type 0 抒情類型
list-folded false 指示列表是否應首先折疊
list-max-height 340px 音樂列表最大高度
storage-name metingjs 存儲播放器設置的 localStorage 鍵

4、總結

首先在 index.html 引入核心依賴
然後在 app.vue 中引入核心組件(此處位置依據個人需求引入)
選擇自己喜歡的音樂平臺復制歌單鏈接獲得歌單id
將得到的歌單id或歌曲id還有播放類型賦值給核心組件
如果想要實現高度定制化，則可以通過 Vue 中的 v-bind 指令來動態修改組件中參數的值，這裡隻是介紹一下基本實現思路和效果

到此這篇關於Vue中使用 Aplayer 和 Metingjs 添加音樂插件的文章就介紹到這瞭,更多相關Vue使用 Aplayer 和 Metingjs 添加音樂插件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：