快捷導(dǎo)航

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

更新時(shí)間：2022年08月04日 10:54:09 作者：☆*往事隨風(fēng)*☆

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

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>

使用技巧

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

使用效果如下：

在這里插入圖片描述

部分參數(shù)說(shuō)明：

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

獲取音樂(lè)外鏈，這里以QQ音樂(lè)為例：

找到自己喜歡的歌單選擇分享，然后復(fù)制鏈接

備注：在 我喜歡 中的音樂(lè)也可以一鍵導(dǎo)出歌單

復(fù)制的音樂(lè)鏈接如下：

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

可以看到，這個(gè)鏈接好像沒(méi)有我們想要的歌單id，不要著急，只需要將復(fù)制的鏈接用瀏覽器打開(kāi)就能夠的得到我們想要的播放類型和歌單id了

通過(guò)瀏覽器打開(kāi)鏈接，我們?cè)跒g覽器地址欄得到以下地址：

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

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

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

至此我們就完成了一個(gè)基本的音樂(lè)播放插件的使用了

3、完整API

option	default	description
id (編號(hào))	require	song id / playlist id / album id / search keyword
server (平臺(tái))	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 (自動(dòng)播放)	`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 (存儲(chǔ)名稱)	`metingjs`	localStorage key that store player setting

選項(xiàng)	默認(rèn)	描述
id	要求	歌曲ID/播放列表ID/專輯ID/搜索關(guān)鍵字
server	要求	音樂(lè)平臺(tái)：`netease`, `tencent`, `kugou`, `xiami`,`baidu`
type	要求	`song`, `playlist`, `album`, `search`, `artist`
auto	選項(xiàng)	音樂(lè)鏈接，支持：`netease`,tencent``xiami
fixed	`false`	啟用固定模式
mini	`false`	開(kāi)啟迷你模式
autoplay	`false`	音頻自動(dòng)播放
theme	`#2980b9`	主色
loop	`all`	播放器循環(huán)播放，值：‘all’、‘one’、‘none’
order	`list`	播放器播放順序，值：‘list’，‘random’
preload	`auto`	值：“無(wú)”、“元數(shù)據(jù)”、“自動(dòng)”
volume	`0.7`	默認(rèn)音量，注意播放器會(huì)記住用戶設(shè)置，用戶自己設(shè)置音量后默認(rèn)音量將失效
mutex	`true`	防止同時(shí)播放多個(gè)播放器，當(dāng)該播放器開(kāi)始播放時(shí)暫停其他播放器
lrc-type	`0`	抒情類型
list-folded	`false`	指示列表是否應(yīng)首先折疊
list-max-height	`340px`	音樂(lè)列表最大高度
storage-name	`metingjs`	存儲(chǔ)播放器設(shè)置的 localStorage 鍵

4、總結(jié)

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

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

您可能感興趣的文章: