AudioPlayer 音频播放器

支持单首/多首的音频播放器

何时使用

  • 需要播放音频内容时。

导入

import { AudioPlayer } from "@reglow/reui";
0:00 / 0:00

基础用法

通过 audioUrl 传入音频地址，支持字符串、字符串数组、对象、对象数组。

<script setup>
import { AudioPlayer } from "@reglow/reui";
</script>

<template>
  <!-- 字符串 -->
  <AudioPlayer audio-url="/audio/demo.mp3" class="w-[400px]" />

  <!-- 对象（带标题和封面） -->
  <AudioPlayer
    :audio-url="{
      src: '/audio/demo.mp3',
      title: '音频标题',
      cover: '/images/cover.jpg',
    }"
    class="w-[400px]"
  />
</template>

更多示例

多首音频

传入数组实现多首音频播放。

<script setup>
import { AudioPlayer } from "@reglow/reui";

const audioList = [
  {
    src: "/audio/song1.mp3",
    title: "歌曲一",
    cover: "/images/cover1.jpg",
  },
  {
    src: "/audio/song2.mp3",
    title: "歌曲二",
    cover: "/images/cover2.jpg",
  },
  {
    src: "/audio/song3.mp3",
    title: "歌曲三",
    cover: "/images/cover3.jpg",
  },
];
</script>

<template>
  <AudioPlayer :audio-url="audioList" class="w-[400px]" />
</template>

隐藏工具栏

设置 showToolbar 为 false 隐藏工具栏。

<template>
  <AudioPlayer
    audio-url="/audio/demo.mp3"
    :show-toolbar="false"
    class="w-[400px]"
  />
</template>

主题

通过 theme 设置主题，支持 light 和 dark，默认 dark。

<template>
  <AudioPlayer audio-url="/audio/demo.mp3" theme="light" class="w-[400px]" />
</template>

自动播放

<template>
  <AudioPlayer audio-url="/audio/demo.mp3" auto-play class="w-[400px]" />
</template>

自定义跳转时间

通过 skipDuration 设置快进/快退的跳转时间（秒）。

<template>
  <AudioPlayer
    audio-url="/audio/demo.mp3"
    :skip-duration="15"
    class="w-[400px]"
  />
</template>

事件监听

<script setup>
const onEnded = () => console.log("播放结束");
const onPlay = () => console.log("开始播放");
const onPause = () => console.log("暂停播放");
const onTimeUpdate = (current, duration) => {
  console.log(`进度: ${current}/${duration}`);
};
</script>

<template>
  <AudioPlayer
    audio-url="/audio/demo.mp3"
    @ended="onEnded"
    @play="onPlay"
    @pause="onPause"
    @time-update="onTimeUpdate"
    class="w-[400px]"
  />
</template>

API

AudioPlayer Props

参数说明类型默认值
audioUrl音频地址string | string[] | AudioInfo | AudioInfo[]-
autoPlay自动播放booleanfalse
theme主题light | darkdark
showToolbar是否显示工具栏booleantrue
skipDuration快进/快退跳转时间（秒）number10
class附加类名string-

AudioPlayer Events

事件说明回调参数
ended播放结束-
play开始播放-
pause暂停-
timeUpdate进度更新(currentTime: number, duration: number)

AudioInfo

参数说明类型默认值
src音频地址string-
title音频标题string-
cover封面图片string-

功能说明

功能说明
播放/暂停点击中间按钮
上一首/下一首多首音频时显示
快退/快进按 skipDuration 跳转
音量控制点击图标静音，拖动滑块调节
播放速度支持 0.5x / 0.75x / 1x / 1.25x / 1.5x / 2x
循环播放点击循环按钮切换
进度条点击跳转到指定位置
Upload 上传
文件选择上传组件
Avatar 头像
Avatar 头像