Skip to main content
Version: Next

Audio

Audio. This component is no longer maintained as of 1.6.0. Taro.createInnerAudioContext API with more powerful capabilities is recommended.

Reference

Type

ComponentType<AudioProps>

Examples

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

PropertyTypeDefaultRequiredDescription
idstringNoThe unique identifier of the audio component
srcstringYesThe resource address of the audio to be played
loopbooleanfalseNoSpecifies whether to enable loop playback
mutedbooleanfalseNoSpecifies whether to enable mute playback.
Not recommended
controlsbooleanfalseNoSpecifies whether to display default controls
posterstringNoThe image resource address of the audio cover on a default control. If the value of the controls property is false, the setting of poster does not take effect.
namestring"An unknown audio"NoThe audio name on a default control. If the value of the controls property is false, the setting of name does not take effect.
authorstring"An unknown author"NoThe author name on a default control. If the value of the controls property is false, the setting of author does not take effect.
onErrorBaseEventOrigFunction<onErrorEventDetail>NoTriggers the error event when an error occurs. detail = {errMsg: MediaError.code}
onPlayBaseEventOrigFunction<any>NoTriggers the play event when the playback is started/resumed.
onPauseBaseEventOrigFunction<any>NoTriggers the pause event when the playback is paused.
onTimeUpdateBaseEventOrigFunction<onTimeUpdateEventDetail>NoTriggers the timeupdate event when the playback progress changes. detail = {currentTime, duration}
onEndedBaseEventOrigFunction<any>NoTriggers the ended event at the end of the video.

Property Support

PropertyWeChat Mini-ProgramBaidu Smart-ProgramH5React 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

ParamValue
errMsg1 | 2 | 3 | 4

onTimeUpdateEventDetail

ParamTypeDescription
currentTimenumbercurrent time
durationnumberduration

MediaError

code

ValueDescription
1Request for getting resources is rejected by the user
2Network error
3Decoding error
4Improper resource

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramH5React Native
Audio✔️✔️✔️