relistennet / gapless.js

Gapless audio playback javascript plugin (for seamless audio playback)

gapless.js

gapless.js is a library for gapless audio playback. It is not intended to be a flawless solution for every use-case, but rather a balance between the needs of my use-case over at <Relisten.net>.

In short, it takes an array of audio tracks and utilizes HTML5 audio and the web audio API to enable gapless playback of individual tracks.

I will expand this README with more details in time. If you're interested in this library, don't hesitate to leave me a note with any questions.

You can see a sample of the library in use currently at <Relisten.live> which is the not-yet-released beta of the next version of <Relisten.net>

Sample usage

    const player = new Gapless.Queue({
      tracks: [
        "http://phish.in/audio/000/012/321/12321.mp3",
        "http://phish.in/audio/000/012/322/12322.mp3",
        "http://phish.in/audio/000/012/323/12323.mp3",
        "http://phish.in/audio/000/012/324/12324.mp3"
      ],
      onProgress: function(track) {
        track && console.log(track.completeState);
      }
    });
    
    player.play();

Gapless.Queue Options

        tracks = [],
        onProgress,
        onEnded,
        onPlayNextTrack,
        onPlayPreviousTrack,
        onStartNewTrack,
        webAudioIsDisabled = false

API (subject to change)

// functions
player.togglePlayPause();   // toggle play/pause
player.playNext();          // play next track
player.playPrevious();      // play previous track
player.resetCurrentTrack(); // reset current track to 0
player.gotoTrack(idx, playImmediately); // jump to track by index and pass true to play immediately
player.disableWebAudio();   // disable gapless playback/web audio

// getters
player.currentTrack;        // returns current active track
player.nextTrack;           // returns next track

License

MIT - do as you please

gapless.js's Issues

Finalize API and submit to npm

Investigate: Gapless playback doesn't seem to work so well in Firefox

Tested on Firefox 61.0.1 on Windows 8.1

Not sure if anything can be done, but worth doing a lil' research.

Gapless jumps on Windows 10/Firefox

For some reason the HTML audio api returns current time as undefined.

Needs investigation

Investigate and improve memory usage

It's bad. Must be improved somehow.

Volume controls

Status of the issues

In the relisten-web repo there are these comments

  // if we're on mobile, disable web audio
  // if we're on firefox, disable web audio/gapless
  // gapless doesn't work on firefox & its been causing a ton of issues
  // disable for everyone until I can inspect the issue again...

which correspond approx to issues in the gapless.js tracker.

How do you feel about gapless.js since then? Have these problems gotten any better with newer browsers? Do you still think Web Audio API is at all promising?

Make a better demo website of this library

Firefox: TypeError: this.gainNode is undefined

On volume changes

Don't always have an audiocontext node running

The browser thinks there is always music playing even during pauses. Destroy and recreate the node during pause or if no music is playing.

Next track automatically starts despite being paused

In my code below, I'm adding a few tracks, and then I have player.togglePlayPause() connected to a button's click event. When I call click the button to start playback, then click it again shortly afterwards to pause, the next track will start playing about 3 minutes later (the length of the song).

This issue happens in 2.2.3. I tested 1.0.0 as well, and it's an issue there as well.

// import Gapless from 'gapless.js'
import Gapless from '../../gapless2.js'
let sliderBeingDragged = false
let currentTime = 0
let duration = 0
let sliderValue = 0
const sliderSteps = 400
const player = new Gapless.Queue({
  numberOfTracksToPreload: 2,
  onProgress: (track) => {
    if (track) {
      currentTime = track.currentTime
      duration = track.duration
      if (!sliderBeingDragged && duration > 0) {
        sliderValue = currentTime/duration*sliderSteps
      }
    }
  },
})
const tracks = [
  '/Users/kasper/Downloads/01 Neo-Seoul (Part 1).m4a',
  '/Users/kasper/Downloads/02 Neo-Tokyo (Part 2).m4a',
  '/Users/kasper/Downloads/03 Aeon Metropolis (Part 3).m4a',
  '/Users/kasper/Downloads/04 Goodnight Sequence (part 4).m4a',
]
for (const track of tracks) {
  player.addTrack({ trackUrl: 'file://'+track })
}
function playPause() { // this function is tied to a button onclick
  player.togglePlayPause()
}

Below is the console log from when this happens. Once the next track starts playing by itself, the first log message is for the onEnded event.

I've noticed that running track.loadBuffer() causes the track to start playing, so perhaps that's related.

Woud love to see what's causing this, and whether there's an easy fix for it. Thanks!

Only start loading webaudio ~15% in to track to ensure people are playing the whole track

gotoTrack errors at pauseAll

When using gotoTrack to switch tracks outside of the player (ie: not previous,next) the error track.pause is not a function triggers. The trace is as follows

pauseAll index.js:131
pauseAll index.js:130
gotoTrack index.js:136
gotoTrack audioService.js:44

audioService.js is a class that basically wraps around gapless to allow the player to play continuously in as other components and/or views get loaded/unloaded.

an example would be going into one playlist, starting a track, then navigating to another playlist and trying to play a track in the new playlist. although this error happens when trying to play another track within the same playlist also.

happy to share any details if needed.

Convert fetch requests to XHR so we can cancel mid-request if queue/song changes

Investigate loading only the first bit of web audio, then switching to HTML5 when that's done

Bug when web audio buffer finishes loading while paused

Flow: start track -> start loading web audio buffer -> pause track (at: 0:05 time) -> web audio finishes loading -> [wait 17 seconds] -> play track (starts at 0:22 into track, as if it was playing the whole time it was paused since web audio finished loading)