threlte logo
@threlte/extras

<AudioListener>

webgl <AudioListener> works with WebGL and is available from the @threlte/extras export. webgpu <AudioListener> works with WebGPU and is available from the @threlte/extras/webgpu export.

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, snippets, bindings and events.

Props

name
type
required
default
description
autoResume
boolean
no
false
Resumes the audio context on the first user gesture (click, keydown, touchstart or pointerdown on window). Browsers block audio until the user interacts with the page, so this lets playback started by game logic (physics events, timers, gamepad input) make sound without wiring up the unlock yourself. The gesture listeners are removed once the context resumes. Leave it off if all playback starts from click handlers that already await context.resume().
id
string
no
'default'
Registers the listener under this id. <Audio> and <PositionalAudio> attach to the listener with the matching id, so use one per listener when a scene has several.
masterVolume
number
no
The overall volume of everything played through this listener, where 1 is unchanged. Leaves three's default untouched when not set.

Exports

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