先上效果~

安装依赖

npm install aplayer --save

使用

页面

声明

import APlayer from "APlayer"
import "aPlayer/dist/APlayer.min.css"

const playerRef = ref()
let ap: APlayer
const audioList = ref<IRMusicItem[]>([])

其中IRMusicItem声明如下：

export interface IRMusicItem {
  name: string,
  artist: string,
  url: string,
  cover: string,
  lrc: string,
}

其中lrc可以为.lrc文件的地址，也可以直接是文本，如'[00:00.00]APlayer\n[00:04.01]is\n[00:08.02]amazing'

初始化

const init = async () => {
  const res = await metingAPI(props.server, props.type, props.id)
  const audio: IRMusicItem = {
    // 此处省略
  }
  audioList.value.push(audio)
  ap = new APlayer({
    container: playerRef.value,
    audio: audioList.value
  })
}

new Aplayer中可以设置许多参数，但上面这两个是必须要有的，详细请看：首页 - APlayer，这里摘录一些

名称	默认值	描述
container	document.querySelector(‘.aplayer’)	播放器容器元素
autoplay	false	音频自动播放
order	‘list’	音频循环顺序, 可选值: ‘list’, ‘random’
preload	‘auto’	预加载，可选值: ‘none’, ‘metadata’, ‘auto’
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
audio	-	音频信息, 应该是一个对象或对象数组

template

很简单，随便找个div绑定ref就可以了

<div ref="playerRef"></div>

脚本

api

歌曲本身的获取，我们需要借助另外的api

export const metingAPI = (server: string, type: string, id: number) => {
  return http({
    url: "https://meting.qjqq.cn/",
    method: "GET",
    params: {
      server: server,
      type: type,
      id: id,
      r: Math.random()
    }
  })
}