CODEWITHSUNDEEP
javascripttypescripthtml5-audiomedia-source
Stefan Falk
Stefan Falk

Reputation: 25457

How to seek audio with MediaSource and continue playing?

I am currently trying to implement an audio player for my Angular web application following a tutorial on Google Developers and also some help I've found on " Can't seek video when playing from MediaSource ".

The big difference in my case though is that I want to stream the audio chunk-wize such that the user does not have to download the entire file in order to listen to it right away.

Listening to a track from the start to the beginning is already working as I am just downloading byte-chunks from the server and simply append each chunk to the SourceBuffer as they arrive.

However, I am not able to implement the "seek" functionality.

I do not quite understand how to handle this on the client. At the moment I only work with mp3 files. I cannot find any example where seeking is explained.

I know that setting currentTime of an audio element will trigger a seeking event according to the Media Events doc. We have:

this.audioObj = document.createElement('audio');

and a setter:

public seekTo(seconds) {
  this.logger.debug(`seekTo ${seconds.toFixed(2)} seconds`);
  // Setting currentTime will cause a "seeking" event to be emitted.
  this.audioObj.currentTime = seconds;
}

I think that I have to load new data before I set currentTime and append it to the sourceBuffer. However, this simply cannot work for obvious reasons.

How can I make this work?

Upvotes: 1

Views: 1706

Answers (1)

Anonymous Coward
Anonymous Coward

Reputation: 1263

If you've set the duration, you should be able to set the currentTime but there will be nothing to play. You can use the currentTime to inform your chunk fetcher which portion of the file you need and append it so the media element can continue to play.

Note that when using mp3, the SourceBuffer will be operating in sequence mode since there are no timestamps, which means that if you just blindly append bytes they will not be at the correct point in time - I believe you need to set timestampOffset to the relevant time for the frame in question (I haven't tried this myself).

Upvotes: 0

Related Questions