Web Audio API crackling ("drrrr" noise) when playing 10+ tracks in Tone.js but export is clean


I am building a browser-based multi-track audio app using Tone.js (similar to a lightweight DAW).

I noticed a specific issue during real-time playback:

- When playing 5–10 tracks → audio is smooth

- When playing 10+ tracks → I get crackling / buzzing ("drrrr") sound

- However, when I export the same composition using Tone.Offline(), the output WAV is perfectly clean

Setup details:

- Multiple tracks using Tone.PolySynth and samplers

- Each track may play chords (so multiple voices per track)

- Master chain includes Tone.Gain, Tone.Compressor, and Tone.Limiter

- lookAhead increased (~0.15)

- Latency hint set to "playback"

Fixes already attempted:

- Reduced track volume (gain staging)

- Added limiter and compressor

- Increased lookAhead

- Limited polyphony (maxPolyphony: 4–6 per synth)

Observation:

The issue only happens in real-time playback (especially on mobile devices), not during offline rendering.

My assumption:

This might be caused by CPU overload or audio buffer underruns in the RealTimeAudioContext.

Questions:

1. Is this behavior expected due to Web Audio limitations?

2. What is the recommended way to handle multi-track playback without crackling?

3. Should I hard-limit track count, or is there a better architecture (e.g., track freezing, audio buffers)?

4. Are there best practices for managing polyphony and scheduling in Tone.js for mobile performance?

Any guidance from people who have built multi-track Web Audio apps would be really helpful.

0
Apr 5 at 7:01 PM
User AvatarELAVARASAN SHANKAR
#android#audio

Accepted Answer

are you saying that you are playing 10 tracks all at the same time?

User Avatarjsotola
Apr 5 at 7:22 PM
0