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

React

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>
    )
  }
}

Vue

<template>
  <view class="components-page">
    <audio
      id="video"
      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"
    />
  </view>
</template>

AudioProps

Property	Type	Default	Required	Description
id	string		No	The unique identifier of the audio component
src	string		Yes	The resource address of the audio to be played
loop	boolean	false	No	Specifies whether to enable loop playback
muted	boolean	false	No	Specifies whether to enable mute playback. Not recommended
controls	boolean	false	No	Specifies whether to display default controls
poster	string		No	The 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.
name	string	"An unknown audio"	No	The audio name on a default control. If the value of the controls property is false, the setting of name does not take effect.
author	string	"An unknown author"	No	The author name on a default control. If the value of the controls property is false, the setting of author does not take effect.
onError	BaseEventOrigFunction<onErrorEventDetail>		No	Triggers the error event when an error occurs. detail = {errMsg: MediaError.code}
onPlay	BaseEventOrigFunction<any>		No	Triggers the play event when the playback is started/resumed.
onPause	BaseEventOrigFunction<any>		No	Triggers the pause event when the playback is paused.
onTimeUpdate	BaseEventOrigFunction<onTimeUpdateEventDetail>		No	Triggers the timeupdate event when the playback progress changes. detail = {currentTime, duration}
onEnded	BaseEventOrigFunction<any>		No	Triggers the ended event at the end of the video.

Property Support

Property	WeChat Mini-Program	Baidu Smart-Program	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

Param	Value
errMsg	1 | 2 | 3 | 4

onTimeUpdateEventDetail

Param	Type	Description
currentTime	number	current time
duration	number	duration

MediaError

code

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

API Support

API	WeChat Mini-Program	Baidu Smart-Program	H5	React Native
Audio	✔️	✔️	✔️