Javascript - Seek Audio To Certain Position When At Exact Position In Audio Track

Scenario: Audio starts playing from 0:00. At exactly 0:05, the track skips forwards to 0:30. The track immediately starts playing at 0:30, and at exactly 0:35, the track skips bac

Solution 1:

You don't ever show when you actually call start() on an AudioBufferSourceNode, so I can't explicitly debug. But in short, you need to schedule the stops and starts AHEAD of when they need to happen, not try to "swap" the active sound playing in a setTimeout callback (or try to get them to align once the sound has stopped playing).

For example, you'd do something like:

var bs1 = audioCtx.createBufferSourceNode();
var bs2 = audioCtx.createBufferSourceNode();
var bs3 = audioCtx.createBufferSourceNode();
var now = audioCtx.currentTime + 0.020; // add 20ms for scheduling slop

bs1.buffer = audioBuffer;
bs1.connect( audioCtx.destination );
bs2.buffer = audioBuffer;
bs2.connect( audioCtx.destination );
bs3.buffer = audioBuffer;
bs3.connect( audioCtx.destination );
bs1.start( now, 0, 5 );  // time, offset, duration
bs2.start( now+5, 30, 5 );
bs3.start( now+10, 5 );   // no duration; play to end

If you want to cancel this playing, you'll have to disconnect the buffersource nodes.

Solution 2:

The main issue in this will be the accuracy in time and shifting seamlessly from 0:05 to 0:30 and back from 0:35 to 0:05.

I think you should create two different audio sources. Start one from 0:00 and seek the other one at 0:30 but pause it as soon as it starts playing using events.

Then track time using the ontimeupdate event and check it if it is 5 then pause the current and start the second which should now be buffered and when it reaches to 0:35 pause it and start the first one and let it play till the audio finishes.

Solution 3:

Play: 0:00 to 0.05, Skip: 0:05 to 0:30, Play: 0:30 to 0:35, Skip: 0:35 to 0:05, Play: 0.05 to END

You can use Media Fragments URI and pause event to render exact media playback in sequence. If necessary pass the HTMLMediaElement to AudioContext.createMediaElementSource()

const audio = document.querySelector("audio");

const mediaURL = "https://ia600305.us.archive.org/30/items/return_201605/return.mp3";

const timeSlices = ["#t=0,5", "#t=30,35", "#t=5"];
let index = 0;
audio.onpause = e => {
  if (index < timeSlices.length) {
    audio.src = `${mediaURL}${timeSlices[index++]}`
  } else {
    console.log("Media fragments playlist completed");
  }
}
audio.ontimeupdate = e =>console.log(Math.ceil(audio.currentTime));
audio.oncanplay = e => audio.play();
audio.src = `${mediaURL}${timeSlices[index++]}`;

<audiocontrols></audio>