How to use APlayer in vue3+ts

Installation dependencies

yarn add aplayer

Code

APlayer.Vue

<!--
 <!--
 * @Author: MK
 * @Date: 2021-12-16 15:41:47
 * @LastEditTime: 2021-12-24 11:17:45
 * @LastEditors: MK
 * @Description: APlayer组件化
 * @FilePath: \vue-mk-blog\src\components\APlayer.vue
-->
<template>
  <div ref="playerRef"></div>
</template>

<script lang="ts" setup>
import http from &#39;@/api/http&#39;
import APlayer from &#39;APlayer&#39;;
import &#39;APlayer/dist/APlayer.min.css&#39;;
import type {PropType} from &#39;@vue/runtime-core&#39;;
import {nextTick, onBeforeUnmount, onMounted, ref} from &#39;vue&#39;

const playerRef = ref()
let instance: APlayer;

// APlayer歌曲信息
class Audio {
  // 音频艺术家
  artist: String;
  // 音频名称
  name: String;
  // 音频链接
  url: String;
  // 音频封面
  cover: String;
  // 歌词
  lrc: String;

  constructor(artist: String, name: String, url: String, cover: String, lrc: String) {
    this.artist = artist;
    this.name = name;
    this.url = url;
    this.cover = cover;
    this.lrc = lrc;
  }
}

const props = defineProps({
  // 开启吸底模式
  fixed: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 开启迷你模式
  mini: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 音频自动播放
  autoplay: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  // 主题色
  theme: {
    type: String as PropType<string>,
    default: &#39;rgba(255,255,255,0.2)&#39;
  },
  // 音频循环播放
  loop: {
    type: String as PropType<&#39;all&#39; | &#39;one&#39; | &#39;none&#39;>,
    default: &#39;all&#39;
  },
  // 音频循环顺序
  order: {
    type: String as PropType<&#39;list&#39; | &#39;random&#39;>,
    default: &#39;random&#39;
  },
  // 预加载
  preload: {
    type: String as PropType<&#39;auto&#39; | &#39;metadata&#39; | &#39;none&#39;>,
    default: &#39;auto&#39;
  },
  // 默认音量
  volume: {
    type: Number as PropType<number>,
    default: 0.7,
    validator: (value: Number) => {
      return value >= 0 && value <= 1;
    }
  },
  // 歌曲服务器(netease-网易云, tencent-qq音乐, kugou-酷狗, xiami-小米音乐, baidu-百度音乐)
  songServer: {
    type: String as PropType<&#39;netease&#39; | &#39;tencent&#39; | &#39;kugou&#39; | &#39;xiami&#39; | &#39;baidu&#39;>,
    default: &#39;netease&#39;
  },
  // 播放类型(song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家)
  songType: {
    type: String as PropType<string>,
    default: &#39;playlist&#39;
  },
  // 歌的id
  songId: {
    type: String as PropType<string>,
    default: &#39;19723756&#39;
  },
  // 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
  mutex: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 传递歌词方式
  lrcType: {
    type: Number as PropType<number>,
    default: 3
  },
  // 列表是否默认折叠
  listFolded: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  // 列表最大高度
  listMaxHeight: {
    type: String as PropType<string>,
    default: &#39;100px&#39;
  },
  // 存储播放器设置的 localStorage key
  storageName: {
    type: String as PropType<string>,
    default: &#39;aplayer-setting&#39;
  }
})

// 初始化
onMounted(() => {
  nextTick(() => {
    http.player.getSongSheet(props.songServer, props.songType, props.songId)
      .then(res => {
        let audioList = res.data.map(value => new Audio(value.author, value.title, value.url, value.pic, value.lrc));
        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(() => {
  instance.destroy()
})
</script>

player.ts

import axios from '@/utils/axios'
export class player {
   static getSongSheet(server: string, type:String, id: String) {
     return axios.get(`https://api.i-meto.com/meting/api?server=${server}&type=${type}&id=${id}&r=${Math.random()}`);
  }
}

Rendering

The above is the detailed content of How to use APlayer in vue3+ts. For more information, please follow other related articles on the PHP Chinese website!