vue3中如何实现音频播放器APlayer-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

vue3中如何实现音频播放器APlayer

实现效果：

实现步骤：

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'    },    // 歌的id    songId: {      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 key    storageName: {      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）父组件调用