Gapless playback with HTML+JavaScript is impossible

Hi,

The following methods of playing multiple audio files in sequence with no
audible breaks between tracks are all broken in (seemingly) all browsers:

• The naïve approach is simply to have two <audio> elements, each one loading
  the next track while the current one is playing, and have them switch on the
  'ended' event. Unfortunately the 'ended' event seems to take too long to fire
  and 'play' takes too long to trigger actual playback, so this method has big
  gaps between tracks.

• The next obvious approach is the Web Audio API. Unfortunately this also seems
  to produce (slight, but noticeable) audible gaps in output no matter how you
  try to adjust the start-time parameters for the next queued track. This is
  perhaps because the AudioBuffer duration property is inaccurate in (many)
  browsers, see <http://forestmist.org/blog/web-audio-api-loops-and-formats/>.

• If you try to use setTimeout to queue the next track, you'll still have
  gaps. I think millisecond resolution is not granular enough to prevent
  easily-perceptible gaps. (Strangely, though, using the Web Audio API to
  measure track duration but then queueing playback with setTimeout for a pair
  of <audio> elements seemed to produce the smoothest transitions of all the
  techniques I tried, though the quality was still unacceptable).

And these two libraries, which claim to support seamless/gapless playback, use
these techniques and are therefore also broken:

• Gapless5 <https://github.com/regosen/Gapless-5> uses a mix of <audio>
  elements and the Web Audio API so that playback can begin before a track
  is fully loaded (which <audio> allows) but still be gapless (which Web Audio
  supposedly makes possible). Strangely, though the transition between the two
  playing methods seems to be seamless, the transition between tracks still is
  not.

• SeamlessLoop <https://github.com/Hivenfour/SeamlessLoop> uses the setTimeout +
  <audio> element trick, and furthermore requires you to know the length in
  milliseconds of each track. And, of course, still has gaps.

(For the record, my testing was done with a VBR MP3 of Sailing By
<https://en.wikipedia.org/wiki/Sailing_By> split into 5-second chunks using
mp3splt 2.5.1. This meant there were plenty of potential gaps, and they were
easily audible when they happened.)

However, from the looks of things, Mozilla's now-deprecated Audio Data API would
have allowed gapless playback easily compared to any of these methods. It would
be nice to have that API back as a lower-level alternative to the Web Audio API,
or alternatively perhaps a GaplessPlaylist API implemented by browsers.

dpk

Received on Thursday, 23 October 2014 05:44:13 UTC