Visit the Documentation of the upcoming Threlte 6.
  1. @threlte/core
  2. useAudioListener



This module will be moved to @threlte/extras at some point in the future. Please read the update notice.

Components like <Audio> and <PositionalAudio> use the Web Audio API and therefore you may find yourself in situations where the AudioContext is important to create e.g. a BiquadFilterNode.



Github View Source Code


NPM View Package

This hook needs context. Use only in a child component to <Canvas>.


// Retrieve a THREE.AudioListener which hasn't
// been assigned an id: <AudioListener />
const { context, listener } = useAudioListener()
// -> { context: AudioContext, listener: THREE.AudioListener }

// Retrieve a THREE.AudioListener which has
// been assigned an id: <AudioListener id="left-ear" />
const { context, listener } = useAudioListener('left-ear')
// -> { context: AudioContext, listener: THREE.AudioListener }

// Use a THREE.AudioListener and the underlying
// AudioContext to construct e.g. a filter. You
// may also pass a listener id as the second argument.
const filter = useAudioListener(({ context }) => {
	return context.createBiquadFilter()
// -> BiquadFilterNode