Creé mi propio reproductor de audio personalizado y tengo un problema con el navegador Safari. Este problema no ocurre en Chrome y Firefox.

Cuando cambio el valor del control deslizante de búsqueda, la música se detiene en safari. Agregué un detector de eventos de pausa en la pista de audio para verificar y en realidad se dispara en safari cuando cambio el valor del control deslizante de búsqueda. El evento de pausa no se activa en Chrome y Firefox.

Agregué puntos de interrupción a mi archivo js en safari para verificar la pila de llamadas, pero no me dijo dónde se cambia la propiedad de pausa del elemento de audio.

Puede ver el reproductor de audio en funcionamiento aquí. https://codepen.io/theMugician/pen/yLoNgPP

Después de investigar un poco, me di cuenta de que la pista de audio se detiene cuando this.audioTrack.currentTime se actualiza en un evento de change . Aquí hay una parte del código que creo que es relevante para este problema.

 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) }

}