Sound #

Sound represents an audio source that is located within the scene. It supports 3D audio so the left/right stereo balance of the sound will change as the listener moves around the scene or turns their head (in VR mode).

Example usage:

<Image style={{height: 2.0, width: 2.0}} source={uri: 'images/waterfall.jpg'}> <Sound source={uri: 'sounds/waterfall.wav'} /> </Image>

The source attribute represents the external resource to load. It should be an asset() statement, or a resource declaration in the form {uri: 'PATH'}. Since different browsers support different audio formats, you can also supply a map of formats to their corresponding resource objects, and React VR will pick the supported sound for the browser:

<Sound source={{ ogg: asset('ambient.ogg'), mp3: asset('ambient.mp3'), }} />

You can read more about supported audio formats in the docs for the Sound Effects API.

Things to keep in mind when using this component:

  • Must be a leaf node with no child components
  • Defaults to style: {position: absolute}

Props #

autoPlay?: PropTypes.bool #

Whether audio starts playing automatically when component is loaded. Default is true

loop?: PropTypes.bool #

Whether audio repeats automatically when finished playing. Default is false

muted?: PropTypes.bool #

Whether the audio is muted. Default is false.

onDurationChange?: PropTypes.func #

Option callback evoked when video duration changed. event.nativeEvent.duration - the duration of video

onEnded?: PropTypes.func #

Option callback evoked when audio is done playing.

onPlayStatusChange?: PropTypes.func #

Option callback evoked when video play status changed. event.nativeEvent.playStatus - the play status of video: play status is one of 'closed' | 'loading' | 'error' | 'ended' | 'paused' | 'playing' | 'ready'

onTimeUpdate?: PropTypes.func #

Option callback evoked when video currentTime of video changed. event.nativeEvent.currentTime - the currentTime of video

playControl?: PropTypes.oneOf(['play', 'pause', 'stop']) #

Controls the playback status. If not set, the value of autoPlay determines whether the audio plays when the component is loaded.

playStatus?: PropTypes.oneOf(['play', 'pause', 'stop']) #

Controls the playback status. If not set, the value of autoPlay determines whether the audio plays when the component is loaded. This is going to be renamed to playControl, please migrate to use playControl

playerState?: PropTypes.object #

playerState - playerState is a MediaPlayerState that controls video playback with its inner state. When playerState is set, the value of autoPlay, muted volume and playControl properties are ignored as they will be set by playerState instead. See MediaPlayerState

source?: PropTypes.object #

source audio in the form of {uri: 'http'}

volume?: PropTypes.number #

Value of the audio volume. Minimum is zero, which mutes the sound, and the suggested maximum is 1.0, which is also the default value. Values greater than 1 are allowed allowed this may cause clipping / distortion depending on the audio hardware.

example: Lower the volume by 50% volume={0.5}

You can file an issue on GitHub if you see a typo or error on this page!