Yo-audio-player NPM

audio-player

可组合控制按钮音乐播放器

引用

// 单组件引用
import { AudioPlayer } from 'yo-audio-player'
import 'yo-audio-player/lib/style.css'

// main.js 全局引入
import AudioPlayer from 'yo-audio-player'
import 'yo-audio-player/lib/style.css'
app.use(AudioPlayer)

使用示例

<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>

Player 属性

属性名称	说明	类型	默认值
src	音频链接地址	String
controls	控制按钮未匹配的组件将以slot 方式插入	Array 'play', 'timer', 'progress', 'volume', 'speed', 'download' 操作按钮出现的顺序将以数组顺序渲染	'play', 'timer', 'progress', 'volume', 'speed', 'download'
width	播放器宽度	String / Number	100%
volumeBarWidth	number	音量控制条宽度	120
disabled	boolean	是否禁用	false
useDefaultDownload	boolean	是否使用默认下载行为	true

Player Events 方法

属性名称	说明	类型
download	点击下载按钮触发	Funtion
error	播放器发生错误触发	Function
volumeChange	音量发生变化触发	Function
progressChange	播放进度位置发生变化触发	Function
speedChange	播放速度发生变化触发	Function
timeupdate	播放进度回调	() => Event

Player Exposes

属性名称	说明	类型
audio	audio标签dom	HtmlAudioElement
pause	播放器暂停播放方法	Function
play	播放器开始播放方法	Function
setVoice	设置音量 0 - 100	Funtion
setSpeed	设置播放速度 0 - 5	Function

Player slots 属性及方法

属性名称	说明	类型
disabled	是否禁用	boolean
duration	音频总时长	number
audio	播放器dom	HtmlAudioElement
play	播放方法	Function
pause	暂停方法	Function
isPlaying	是否正在播放	boolean
loading	资源是否正在加载中	boolean
currentVolume	当前音量	number
currentProgress	当前播放进度百分比	number
currentTime	当前播放时间	number
currentSpeed	当前播放速度	number
src	当前音频地址	string
setProgress	设置播放进度	(pro: number) => void
setSpeed	设置播放速度	(speed: number) => void
setVolume	设置播放音量	(volume: number) => void