這篇文章主要講解了“vue3+ts如何使用APlayer”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue3+ts如何使用APlayer”吧！

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的臺(tái)江網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

安裝依賴

yarn add aplayer

代碼

APlayer.Vue

import http from '@/api/http'
import APlayer from 'APlayer';
import 'APlayer/dist/APlayer.min.css';
import type {PropType} from '@vue/runtime-core';
import {nextTick, onBeforeUnmount, onMounted, ref} from 'vue'

const playerRef = ref()
let instance: APlayer;

// APlayer歌曲信息
class Audio {
  // 音頻藝術(shù)家
  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,
    default: true
  },
  // 開啟迷你模式
  mini: {
    type: Boolean as PropType,
    default: true
  },
  // 音頻自動(dòng)播放
  autoplay: {
    type: Boolean as PropType,
    default: false
  },
  // 主題色
  theme: {
    type: String as PropType,
    default: 'rgba(255,255,255,0.2)'
  },
  // 音頻循環(huán)播放
  loop: {
    type: String as PropType<'all' | 'one' | 'none'>,
    default: 'all'
  },
  // 音頻循環(huán)順序
  order: {
    type: String as PropType<'list' | 'random'>,
    default: 'random'
  },
  // 預(yù)加載
  preload: {
    type: String as PropType<'auto' | 'metadata' | 'none'>,
    default: 'auto'
  },
  // 默認(rèn)音量
  volume: {
    type: Number as PropType,
    default: 0.7,
    validator: (value: Number) => {
      return value >= 0 && value <= 1;
    }
  },
  // 歌曲服務(wù)器(netease-網(wǎng)易云, tencent-qq音樂, kugou-酷狗, xiami-小米音樂, baidu-百度音樂)
  songServer: {
    type: String as PropType<'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'>,
    default: 'netease'
  },
  // 播放類型(song-歌曲, playlist-播放列表, album-專輯, search-搜索, artist-藝術(shù)家)
  songType: {
    type: String as PropType,
    default: 'playlist'
  },
  // 歌的id
  songId: {
    type: String as PropType,
    default: '19723756'
  },
  // 互斥，阻止多個(gè)播放器同時(shí)播放，當(dāng)前播放器播放時(shí)暫停其他播放器
  mutex: {
    type: Boolean as PropType,
    default: true
  },
  // 傳遞歌詞方式
  lrcType: {
    type: Number as PropType,
    default: 3
  },
  // 列表是否默認(rèn)折疊
  listFolded: {
    type: Boolean as PropType,
    default: true
  },
  // 列表最大高度
  listMaxHeight: {
    type: String as PropType,
    default: '100px'
  },
  // 存儲(chǔ)播放器設(shè)置的 localStorage key
  storageName: {
    type: String as PropType,
    default: 'aplayer-setting'
  }
})

// 初始化
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()
})

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()}`);
  }
}

效果圖

感謝各位的閱讀，以上就是“vue3+ts如何使用APlayer”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)vue3+ts如何使用APlayer這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！