Question 1

How do I set up ThreeAudio.js with Three.js for a music visualizer?

Accepted Answer

Create an audio source with ThreeAudio.Source, load a file, and play it. Then, use ThreeAudio.Textures with the renderer and source to generate audio data textures, and apply them via ThreeAudio.Material with custom shaders. Update textures each frame before rendering.

Question 2

ThreeAudio.js vs using Web Audio API directly for visualizations?

Accepted Answer

ThreeAudio.js abstracts Web Audio API data into shader-friendly textures and includes helpers like beat detection, making it faster for GPU-driven visuals in Three.js. For low-level audio control or non-WebGL projects, use Web Audio API directly.

Question 3

Can I use my own GLSL shaders with ThreeAudio.js?

Accepted Answer

Yes, ThreeAudio.Material allows you to pass custom vertex and fragment shaders as literals or script tag IDs, giving full control over visual effects while leveraging the audio data textures.

Question 4

Does ThreeAudio.js work in Safari or Firefox?

Accepted Answer

No, it currently only supports Webkit browsers like Chrome due to reliance on Webkit Audio APIs, as stated in the README. You'd need patches or alternatives for broader compatibility.

Question 5

How to use the beat detector in shaders with ThreeAudio.js?

Accepted Answer

The beat detector is built into the audio data textures; access derived values like volume or bass in shaders to trigger visual changes. Refer to the included shader examples for implementation patterns.

Question 6

What audio file formats does ThreeAudio.js support?

Accepted Answer

It uses Web Audio API under the hood, so it likely supports common formats like MP3 and WAV, but the README doesn't specify—check the source code or test with your files.

ThreeAudio.js

What is ThreeAudio.js?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions