HTML5 web audio seekTo for buffered source

Question

I have web application(similar to Karaoke) where user can record his voice over instrumental. After recording user plays back recording. Here I play instrumental in <audio> tag and voice using web audio api. To sync both audios on play/pause I calculate time like this

pausedAt = Date.now() - startedAt;
startedAt = Date.now() - pausedAt;

This works fine. Issue is when user uses slider on audio tag to move forward/backward. I am thinking of solution like this

• Use ontimeupdate event, stop the voice and then use startAt(currentTime) where currentTime is of instrumental playing in audio tag.

Since there is no seekTo function in api, I have to stop and then start audio. Is there any better solution for this?

Second issue I face is seeking on audio tag is not smooth. If I arbitrarily clicks on progress bar sometimes it doesn't work. When I saw network tab in developer tool window I saw something like shown in image. It sends out some 600 requests and some 86 MB data downloaded whereas file size is less than 10 MB.

Answer 1

You really should use the Web Audio API to do this. will never give you precise synchronization, and it will rely on streaming to seek - which is going to result in extra downloading, as you saw. Just load the song via XHR and decodeAudioData, and provide your own playback controls.