@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.

Props

name
type
required
id
string
no
masterVolume
number
no

Bindings

name
type
resumeContext
() => Promise<void>
audioContext
AudioContext
Previous Page <Audio>
Next Page <PositionalAudio>