SuperAPI AI Directory

threejs-audio

Frontend & websites

View repository

Updated 10-15 12:43

About this skill

When to use this skill

ALWAYS use this skill when the user mentions:

  • AudioListener on Camera, Audio vs PositionalAudio, distance models, refDistance/maxDistance/rolloff
  • AudioAnalyser for visualization bars/spectrum
  • Browser autoplay policies blocking audio start

IMPORTANT: audio vs loaders

Step Skill
Decode mp3/ogg buffer threejs-loaders (AudioLoader)
Spatial playback API threejs-audio

Trigger phrases include:

  • "PositionalAudio", "AudioListener", "AudioAnalyser", "panner"
  • "Spatial audio", "Volume attenuation", "Frequency spectrum"

How to use this skill

  1. Attach listener to camera object so head-related audio follows view.
  2. Create context compatible with user gesture unlock patterns in browsers.
  3. PositionalAudio: set refDistance, maxDistance, rolloffFactor, distanceModel per docs.
  4. Load buffer via AudioLoader (threejs-loaders), then positionalAudio.setBuffer.
  5. Analyser: connect graph listener.context.createAnalyser() pathways per examples; watch performance.
  6. Update: audio nodes usually need no per-frame update unless following moving sources manually.

See examples/workflow-positional-audio.md.

Doc map (official)

Docs section Representative links
Audio https://threejs.org/docs/AudioListener.html
Audio https://threejs.org/docs/Audio.html
Audio https://threejs.org/docs/PositionalAudio.html
Audio https://threejs.org/docs/AudioAnalyser.html

Extended list: references/official-sections.md.

Scope

  • In scope: Core Audio classes, spatialization parameters, analyser usage overview.
  • Out of scope: FMOD/Wwise-style authoring tools.

Common pitfalls and best practices

  • Autoplay restrictions require user interaction to resume AudioContext.
  • Too many positional sources hurt CPU—pool or LOD audio.
  • Ensure world units match distance model expectations.

Documentation and version

Audio classes are under Audio in three.js docs. Decoding buffers uses AudioLoader—see threejs-loaders. Browser Web Audio policies are external but must be mentioned when AudioContext is suspended.

Agent response checklist

When answering under this skill, prefer responses that:

  1. Link AudioListener, PositionalAudio, or AudioAnalyser as relevant.
  2. Delegate file loading of sound buffers to threejs-loaders (AudioLoader).
  3. Note autoplay / user-gesture requirements for resuming context.
  4. Relate distance attenuation to world units and threejs-objects placement.
  5. Avoid promising DAW-level mixing—stay within three.js audio scope.

References

Keywords

English: audio, positional audio, listener, analyser, spatial sound, web audio, three.js

Chinese: Audio, Spatial audio, AudioListener, PositionalAudio, Web Audio, three.js