Блог

Я создал свой собственный аудиоплеер, и у меня возникли проблемы с браузером safari. Эта проблема не возникает в chrome и firefox.

Когда я изменяю значение ползунка поиска, музыка в safari приостанавливается. Я добавил прослушиватель событий паузы на звуковую дорожку, чтобы проверить, и он действительно срабатывает в safari, когда я изменяю значение ползунка поиска. Событие паузы не срабатывает в chrome и firefox.

Я добавил точки останова в свой файл js в safari, чтобы проверить стек вызовов, но он не сообщил мне, где изменяется свойство паузы звукового элемента.

Вы можете просмотреть рабочий аудиоплеер здесь. https://codepen.io/theMugician/pen/yLoNgPP

После некоторых исследований я понял, что звуковая дорожка приостанавливается при this.audioTrack.currentTime обновлении change события. Вот часть кода, которая, по моему мнению, имеет отношение к этой проблеме.

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

}