Search code examples
audioweb-audio-apitone.js

Tone.js: How do I loop a sound seamlessly?


I've got a short, crossfaded ambient sound clip running on a loop using Tone.js. Trouble is, there's an audible gap between the end of one playback and the beginning of the next.

I know it's possible to achieve a seamlessly crossfaded loop in Howler.js using audio sprites, but I'm not sure how to do it in Tone.js (and I'd rather stick with this library if possible).

Does anybody out there know how to resolve this?


Solution

  • To avoid discontinuities in looped audio, you need to crossfade the end of the loop with the beginning of it. If your program is only working with a fixed set of loops, you can pre-render the crossfade into the clip using an audio editor like Audacity or a DAW like Pro Tools or Reaper.

    If you have a general-purpose app that needs to work with user-supplied audio, then you'll need to write code to mix the end of the loop fading out with the beginning of the loop fading in.