Vue3 Audio Player API 文档

Vue3 Audio Player 是一个基于 Vue3 的音频播放器组件，提供了丰富的功能和自定义选项。

Try the demo

安装

使用 npm 安装 Vue3 Audio Player：

npm install @codeniu/vue3-audio-player

引入

在你的 Vue 项目中引入 Vue3 Audio Player：

import { Vue3AudioPlayer } from '@codeniu/vue3-audio-player'
import '@codeniu/vue3-audio-player/dist/vue3-audio-player.css'

使用

在你的组件中使用 Vue3 Audio Player：

<template>
  <vue3-audio-player
    :audioList="audioList"
    themeColor="#EC4141"
    @play="handlePlay"
    @pause="handlePause"
  />
</template>

<script setup lang="ts">
const audioList = [
  {
    src: 'path/to/audio1.mp3',
    title: '歌曲1',
    artist: '艺术家1',
    album: '专辑1'
  },
  'path/to/audio2.mp3'
]

const handlePlay = () => {
  console.log('开始播放')
}

const handlePause = () => {
  console.log('暂停播放')
}
</script>

属性 (Props)

事件 (Events)

插槽 (Slots)

方法

类型定义

interface AudioItem {
  src: string;      // 音频源地址
  title?: string;   // 音频标题
  artist?: string;  // 艺术家
  album?: string;   // 专辑名
  artwork?: {       // 封面图片
    src: string;
    sizes: string;
    type: string;
  }[];
}

注意事项

1. audioList 支持两种格式：
   • 字符串数组：直接传入音频文件地址
   • 对象数组：包含更多音频信息，支持媒体会话 API
2. 钩子函数 ( beforePlay 、 beforePrev 、 beforeNext ) 可用于拦截相应操作，需要调用回调函数并传入 true 或 false 来决定是否继续操作
3. 主题色 themeColor 会影响播放器的按钮、进度条等元素的颜色
4. 播放速率控制支持自定义速率列表，通过 playbackRates 属性配置
5. 组件支持移动端触摸操作，包括进度条拖拽和音量调节