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 pauses on safari. I added a pause event listener on the audio track to check and it actually fires on safari when I change the seek slider value. The pause event does not fire on chrome and firefox.

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. https://codepen.io/theMugician/pen/yLoNgPP

After some investigating I realized that 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) {
            requestAnimationFrame(this.whilePlaying)
        }
    })

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

}

/**
 * Update the time of the track and the position of the seek slider while playing
 * @see playHandler
 */
    whilePlaying = () => {
    this.seekSlider.value = Math.floor(this.audioTrack.currentTime)
    this.currentTimeContainer.textContent = this.calculateTime(this.seekSlider.value)
    this.audioPlayer.style.setProperty('--seek-slider-before__width', `${this.seekSlider.value / this.seekSlider.max * 100}%`)
    this.state.requestAnimationFrameWhilePlaying = requestAnimationFrame(this.whilePlaying)
}

}