@threlte/extras
<AudioListener>
The <AudioListener> represents a virtual listener of the all positional and non-positional audio effects in the scene.
An application usually creates a single <AudioListener> component. It is a mandatory component for audio components like <Audio> and <PositionalAudio>.
In most cases, the listener component is a child of the camera, so the 3D transformation of the camera represents the 3D transformation of the listener.
Examples
<script>
import { T, Canvas } from '@threlte/core'
import { AudioListener } from '@threlte/extras'
</script>
<Canvas>
<T.PerspectiveCamera
makeDefault
position={[3, 3, 3]}
lookAt={[0, 0, 0]}
>
<AudioListener />
</T.PerspectiveCamera>
</Canvas>You may pass an id to the <AudioListener> component in order to connect <Audio> and <PositionalAudio> components to specific <AudioListener> components:
<script>
import { T, Canvas } from '@threlte/core'
import { Audio, AudioListener } from '@threlte/extras'
</script>
<Canvas>
<T.PerspectiveCamera
makeDefault
position={[3, 3, 3]}
lookAt={[0, 0, 0]}
>
<AudioListener
id="left-ear"
position={{ x: -1 }}
/>
<AudioListener
id="right-ear"
position={{ x: 1 }}
/>
</T.PerspectiveCamera>
<Audio
id="left-ear"
source={'audio/left-track.mp3'}
/>
<Audio
id="right-ear"
source={'audio/right-track.mp3'}
/>
</Canvas>Component Signature
<AudioListener> extends
<T.AudioListener>
and supports all its props, slot props, bindings and events.