JSPM

<template>
  <AudioPlayer
    :controls="['play', 'timer', 'progress','volume', 'speed', 'download', 'slot']"
    :src="src[index]"
    @download="handleDownload"
    ref="playerRef"
  >
    <template #slot="{ play, playing }">
      <button @click="play">slot 按钮</button>
    </template>
  </AudioPlayer>
  <br>
  <br>
  <button @click="index = 0">音乐1</button>
  <button @click="index = 1">音乐2</button>
  <button @click="handleTest(true)">播放</button>
  <button @click="handleTest(false)">暂停</button>
  <button @click="handleSetSpeed()">设置3x速度</button>
  <button @click="handleSetVolume()">设置音量90%</button>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { AudioPlayer } from 'yo-audio-player'
  const src= [
    'http://attachment.0sm.com/node0/2024/06/866612DDA5B260F7-e9233f91f555a1ee.mp3',
    'http://music.163.com/song/media/outer/url?id=454828906.mp3'
  ]
  const index = ref(0)

  const handleDownload = () => {
    console.log('download')
  }

  const playerRef = ref<InstanceType<typeof Player>>()
  const handleTest = (state?: boolean) => {
    if (state) {
      playerRef?.value?.play()
    } else {
      playerRef?.value?.pause()
    }
  }

  const handleSetSpeed = () => {
    playerRef?.value?.setSpeed(3)
  }
  const handleSetVolume = () => {
    playerRef?.value?.setVoice(90)
  }
</script>
<style lang="scss" scoped></style>