下载：npm i aplayer
父组件中调用：<a-player :data="record" />
封装一个aplayer.vue的组件
<template><div class="mainPage" ref="playerRef"></div></template><script setup>import APlayer from 'APlayer';import 'APlayer/dist/APlayer.min.css';import { reactive, onBeforeUnmount, 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({// 获取音频信息data: {type: Object},// 开启吸底模式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};/*getSongSheet 这是请求 拿到res */// proxy.$mon.getSongSheet(str).then((res) => {let audioList = new Audio('',props.data.musicName,props.data.musicUrl,'/yule/src=http%3A%2F%%2Fit%2Fu%3D1932452167%2C3498973127%26fm%3D3007%26app%3D3007%26f%3DJPEG%3Fw%3D500%26h%3D500&refer=http%3A%2F%&app=&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1690477200&t=32aed0a9082233bc6793d6ae82a9a25d','');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="less" scoped>.mainPage {@include wh(100%, auto);background: #fcfcfc;border: 1px solid #e0e0e0;border-radius: 4px;}</style>
