Skip to main content
Version: 3.x

Audio

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

支持情况:

参考文档

类型

ComponentType<AudioProps>

示例代码

export default class PageView extends Component {
constructor() {
super(...arguments)
}

render() {
return (
<View className='components-page'>
<Audio
src='https://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46'
controls={true}
autoplay={false}
loop={false}
muted={true}
initialTime='30'
id='video'
/>
</View>
)
}
}

AudioProps

参数类型默认值必填说明
idstringaudio 组件的唯一标识符
srcstring要播放音频的资源地址
loopbooleanfalse是否循环播放
mutedbooleanfalse是否静音播放
不推荐使用
controlsbooleanfalse是否显示默认控件
posterstring默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效
namestring"未知音频"默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效
authorstring"未知作者"默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效
onErrorCommonEventFunction<onErrorEventDetail>当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}
onPlayCommonEventFunction当开始/继续播放时触发play事件
onPauseCommonEventFunction当暂停播放时触发 pause 事件
onTimeUpdateCommonEventFunction<onTimeUpdateEventDetail>当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}
onEndedCommonEventFunction当播放到末尾时触发 ended 事件
nativePropsRecord<string, unknown>用于透传 WebComponents 上的属性到内部 H5 标签上

API 支持度

API微信小程序百度小程序H5React 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✔️✔️✔️
AudioProps.nativeProps✔️

onErrorEventDetail

参数类型
errMsgkeyof Code

onTimeUpdateEventDetail

参数类型说明
currentTimenumber当前时间
durationnumber持续时间

MediaError

Code

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