HTML5 Audio: использование событий oncanplay и oncanplaythrough для аудио

Question

Мне сказали использовать оба события oncanplay и oncanplaythrough, поскольку oncanplay может быть ненадежным в некоторых браузерах:

В моем коде я использую только событие oncanplay. Как я могу настроить свой код так, чтобы я мог использовать оба события, как мне сказали?

// player is an HTML5 Audio Element

player.oncanplay = function () {
        if (value.value !== "") {
            canPlay = true;
            playPauseIcon(true);
        }
    };  

Мой полный список кодов здесь: https://jsfiddle.net/vhgL96se/142/

Answer 1

Если вас беспокоит, что событие canplay не запускается, вы можете использовать оба события: canplaythrough и canplay одновременно. Исходя из вашего кода, должна быть возможность более или менее повторно использовать один и тот же обработчик событий для обоих событий.

Рассмотрим следующие изменения, а именно: использование addEventListener() для регистрации обработчиков для обоих событий и объявление функции общего обработчика со слегка измененной логикой:

// Define a common handler function that will be reused for
// both events
function playerMediaPlayable() {

    // Add canPlay !== true to prevent playPauseIcon() being
    // called a second time if 'canplaythrough' fires after 'canplay'
    if (value.value !== "" && canPlay !== true) {

        canPlay = true;
        playPauseIcon(true);
    }
}

// Use playerMediaPlayable handler for both events
player.addEventListener('canplay', playerMediaPlayable);
player.addEventListener('canplaythrough', playerMediaPlayable);  

Надеюсь, это поможет!