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

一个免费下载音乐的软件

1 下载

npm install aplayer --save

2 封装组件

<template>
  <div class="music">
    <div
     ref="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>

​