​使用APlayer前端封装音频播放

一个免费下载音乐的软件

1 下载

npm install aplayer --save

2 封装组件

<template><div class="music"><divref="playerRef"class="music-player"></div></div>
</template>
<script setup>
import APlayer from "APlayer";
import "APlayer/dist/APlayer.min.css";
import {ref,reactive,getCurrentInstance,nextTick,onMounted,onUnmounted,
} from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({url: {type: String,},fileName: {type: String,},
});
const playerRef = ref();
const player = ref();
onMounted(() => {player.value = new APlayer({container: playerRef.value,audio: {url: `/api${props.url}`,name: `${props.fileName}`,cover: new URL(`@/assets/login_img.png`, import.meta.url).href,artist: "",},});
});
onUnmounted(() => {player.value.destroy();
});
</script>

​