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="http://attachment.0sm.com/node0/2024/06/866612DDA5B260F7-e9233f91f555a1ee.mp3"
    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>
  import { AudioPlayer } from 'yo-audio-player'
  export default {
    components: {
      AudioPlayer
    }
  }

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|