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.
are you saying that you are playing 10 tracks all at the same time?