title: Audio

sidebar_label: Audio

音频。1.6.0版本开始，该组件不再维护。建议使用能力更强的 Taro.createInnerAudioContext 接口

参考文档

类型

  1. ComponentType<AudioProps>

示例代码

  1. export default class PageView extends Component {
  2.   constructor() {
  3.     super(...arguments)
  4.   }
  6.   render() {
  7.     return (
  8.       <View className='components-page'>
  9.         <Audio
  10.           src='https://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46'
  11.           controls={true}
  12.           autoplay={false}
  13.           loop={false}
  14.           muted={true}
  15.           initialTime='30'
  16.           id='video'
  17.         />
  18.       </View>
  19.     )
  20.   }
  21. }

AudioProps

参数 类型 默认值 必填 说明
id string 是 audio 组件的唯一标识符
src string 是 要播放音频的资源地址
loop boolean false 是 是否循环播放
muted boolean false 否 是否静音播放
不推荐使用
controls boolean false 是 是否显示默认控件
poster string 是 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name string "未知音频" 是 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
author string "未知作者" 是 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
onError BaseEventOrigFunction<onErrorEventDetail> 否 当发生错误时触发 error 事件，detail = {{errMsg: MediaError.code}}
onPlay BaseEventOrigFunction<any> 否 当开始/继续播放时触发play事件
onPause BaseEventOrigFunction<any> 否 当暂停播放时触发 pause 事件
onTimeUpdate BaseEventOrigFunction<onTimeUpdateEventDetail> 否 当播放进度改变时触发 timeupdate 事件，detail = {{currentTime, duration}}
onEnded BaseEventOrigFunction<any> 否 当播放到末尾时触发 ended 事件

API 支持度

API 微信小程序 百度小程序 H5 React Native
AudioProps.id ✔️
AudioProps.src ✔️ ✔️ ✔️
AudioProps.loop ✔️ ✔️ ✔️
AudioProps.muted ✔️
AudioProps.controls ✔️ ✔️ ✔️
AudioProps.poster ✔️ ✔️
AudioProps.name ✔️
AudioProps.author ✔️
AudioProps.onError ✔️ ✔️ ✔️
AudioProps.onPlay ✔️ ✔️ ✔️
AudioProps.onPause ✔️ ✔️ ✔️
AudioProps.onTimeUpdate ✔️ ✔️ ✔️
AudioProps.onEnded ✔️ ✔️ ✔️

onErrorEventDetail

参数 类型
errMsg 1 | 2 | 3 | 4

onTimeUpdateEventDetail

参数 类型 说明
currentTime number 当前时间
duration number 持续时间

MediaError

code

参数 说明
1 获取资源被用户禁止
2 网络错误
3 解码错误
4 不合适资源

API 支持度

API 微信小程序 百度小程序 H5 React Native
Audio ✔️ ✔️ ✔️