HTML audio ending after seeking on safari

I built my own custom audio player and I’m getting a problem on the safari browser. This issue does not occur on chrome and firefox.

When I change the seek slider value the music ends on safari. I added a pause and ended event listeners on the audio track to check and it actually fires on safari when I change the seek slider value. The pause and ended events d not fire on chrome and firefox.

After some investigating the audio track pauses when the this.audioTrack.currentTime is updated on a change event. Here is a portion of the code that I think is relevant to this issue.

class SplashAudioPlayer {
 * Create an instance of SplashAudioPlayer
 * @param {string} player 
 constructor(player) {
    this.audioPlayer = typeof player === 'string' ? document.querySelector(player) : player

    this.audioTrack = this.audioPlayer.getElementsByTagName('audio')[0]
    this.seekSlider = this.audioPlayer.getElementsByClassName('splash-audio-player__seek-slider')[0]

    this.seekSlider.addEventListener('change', () => {
        this.audioTrack.currentTime = this.seekSlider.value // audio pauses when the current time is being updated
        console.log(`status audio pause: ${this.audioTrack.paused}`) // is true when seeking on safari browser
        if(!this.audioTrack.paused) {

    this.audioTrack.addEventListener('pause', () => {
        console.log('the audio track has been paused')


I added breakpoints to my js file on safari to check the call stack but it didn’t tell me where the pause property of the audio element is getting changed.

You can view the working audio player here.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.