前言：

????????vue2的時候，分享了一個很好用的插件是vue-aplayer,但是他是不支持vue3的，這里分享vue3使用APlayer來實現一個播放器的方法。

實現效果：

官方：

????????git地址：點我

????????api地址：點我

實現步驟：

1、安裝

npm:

npm install aplayer --save

Yarn:

yarn add aplayer

2、頁面中引入

import APlayer from 'APlayer'; import 'APlayer/dist/APlayer.min.css';

3、具體使用，源代碼

（1）封裝 aPlayer.vue

<template><div class="mainPage" ref="playerRef"></div> </template><script setup>import APlayer from 'APlayer';import 'APlayer/dist/APlayer.min.css';import {reactive,nextTick, onBeforeUnmount,getCurrentInstance, onMounted, ref} from 'vue'const playerRef = ref()const { proxy } = getCurrentInstance()const state = reactive({instance:null})// APlayer歌曲信息class Audio {// 音頻藝術家// artist: String;// 音頻名稱// name: String;// 音頻鏈接// url: String;// 音頻封面// cover: String;// 歌詞// lrc: String;constructor(artist, name, url, cover, lrc) {this.artist = artist;this.name = name;this.url = url;this.cover = cover;this.lrc = lrc;}}const props = defineProps({// 開啟吸底模式fixed: {type: Boolean,default: false},// 開啟迷你模式mini: {type: Boolean,default: false},// 音頻自動播放autoplay: {type: Boolean,default: false},// 主題色theme: {type: String,default: 'rgba(255,255,255,0.2)'},// 音頻循環播放loop: {type: String,default: 'all' //'all' | 'one' | 'none'},// 音頻循環順序order: {type: String,default: 'random' //'list' | 'random'},// 預加載preload: {type: String,default: 'auto' //'auto' | 'metadata' | 'none'},// 默認音量volume: {type: Number,default: 0.7,validator: (value) => {return value >= 0 && value <= 1;}},// 歌曲服務器(netease-網易云, tencent-qq音樂, kugou-酷狗, xiami-小米音樂, baidu-百度音樂)songServer: {type: String,default: 'netease' //'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'},// 播放類型(song-歌曲, playlist-播放列表, album-專輯, search-搜索, artist-藝術家)songType: {type: String,default: 'playlist'},// 歌的idsongId: {type: String,default: '19723756'},// 互斥，阻止多個播放器同時播放，當前播放器播放時暫停其他播放器mutex: {type: Boolean,default: true},// 傳遞歌詞方式lrcType: {type: Number,default: 3},// 列表是否默認折疊listFolded: {type: Boolean,default: true},// 列表最大高度listMaxHeight: {type: String,default: '100px'},// 存儲播放器設置的 localStorage keystorageName: {type: String,default: 'aplayer-setting'}})onMounted(() => {let str = {server:props.songServer,type:props.songType,id:props.songId}proxy.$api.common.getSongSheet(str).then(res=>{let audioList = res.data.map(value => new Audio(value.author, value.title, value.url, value.pic, value.lrc));state.instance = new APlayer({container: playerRef.value,fixed: props.fixed,mini: props.mini,autoplay: props.autoplay,theme: props.theme,loop: props.loop,order: props.order,preload: props.preload,volume: props.volume,mutex: props.mutex,lrcType: props.lrcType,listFolded: props.listFolded,listMaxHeight: props.listMaxHeight,storageName: props.storageName,audio: audioList})})// 銷毀onBeforeUnmount(() => {state.instance.destroy()})})</script><style lang='scss' scoped>.mainPage{@include wh(100%,auto);background: #FCFCFC;border: 1px solid #E0E0E0;border-radius: 4px;}</style>

（2）父組件調用

<a-player></a-player>

其他：

????????vue3+ts+aplayer版本：點我

總結

以上是生活随笔為你收集整理的vue3中实现音频播放器APlayer的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。