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

更新時間：2022年08月04日 10:54:09 作者：☆*往事隨風*☆

這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂插件,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1、Aplayer和Metingjs 的文檔

Aplayer官網(wǎng)文檔

Metingjs官網(wǎng)文檔

2、使用方式

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

<link rel="stylesheet"  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 下，這樣不管怎樣切換頁面都能夠播放音樂
如果需要局部生效，則將該組件放置在需要生效的組件中即可

使用效果如下：

在這里插入圖片描述

部分參數(shù)說明：

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

將得到的參數(shù)賦值給我們之前引入的 <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 (循環(huán)播放)	`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/搜索關(guān)鍵字
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`	播放器循環(huán)播放，值：‘all’、‘one’、‘none’
order	`list`	播放器播放順序，值：‘list’，‘random’
preload	`auto`	值：“無”、“元數(shù)據(jù)”、“自動”
volume	`0.7`	默認音量，注意播放器會記住用戶設(shè)置，用戶自己設(shè)置音量后默認音量將失效
mutex	`true`	防止同時播放多個播放器，當該播放器開始播放時暫停其他播放器
lrc-type	`0`	抒情類型
list-folded	`false`	指示列表是否應(yīng)首先折疊
list-max-height	`340px`	音樂列表最大高度
storage-name	`metingjs`	存儲播放器設(shè)置的 localStorage 鍵

4、總結(jié)

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

到此這篇關(guān)于Vue中使用 Aplayer 和 Metingjs 添加音樂插件的文章就介紹到這了,更多相關(guān)Vue使用 Aplayer 和 Metingjs 添加音樂插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: