uview-plus

# Audio 音频播放器

打开

音频播放器组件，用于播放音频文件。

uni-app 在 Vue3 中已废除 <audio> 组件，官方推荐使用 uni.createInnerAudioContext() API 播放音频，本组件即基于该 API 封装，内置播放/暂停、进度条拖动、倍速切换、多源自动切换等能力。

提示

本组件基于 uni.createInnerAudioContext (opens new window) 实现，适用于 App、H5、各小程序平台。

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

通过 src 参数绑定音频地址即可。

<template>
  <up-audio src="https://xxx.mp3" title="音频标题"></up-audio>
</template>

# 多源地址

src 支持传入数组，当某个地址加载失败时会自动切换到下一个源。

<up-audio :src="['https://xxx.mp3', 'https://xxx.ogg']"></up-audio>

# 倍速与循环

showRate 控制是否显示倍速切换按钮，rateList 自定义倍速档位，loop 控制是否循环播放。

<up-audio src="https://xxx.mp3" :show-rate="true" :loop="true"></up-audio>

# 事件

<template>
  <up-audio src="https://xxx.mp3" @play="onPlay" @error="onError"></up-audio>
</template>

<script setup>
const onPlay = (e) => {
  // e = { source: 'audio', src: '...' }
}
const onError = (e) => {
  // e = { source: 'audio', errMsg: '...' }
}
</script>

# API

# Props

参数 说明 类型 默认值
src 音频地址，支持数组多源 String | Array ''
title 标题 String ''
loop 是否循环播放 Boolean false
showRate 是否显示倍速切换 Boolean true
rateList 倍速档位 Array [0.5, 0.75, 1, 1.25, 1.5, 2]
activeColor 主题色（播放按钮、进度条选中色） String #2979ff
showTitle 是否显示标题 Boolean true

# Events

事件名 说明 回调参数
play 开始播放时触发 { source, src }
error 加载/播放出错时触发 { source, errMsg }

← Parse 富文本解析器 →