Html5 ленивый обработчик события onplay для аудио тега?

Question

С новым звуковым тегом Html5 событие onplay, похоже, срабатывает только при первом воспроизведении звука. В этом примере при нажатии кнопки «Воспроизвести» начинается звуковое оповещение с надписью «Воспроизведение». После завершения звука и повторного нажатия кнопки «Воспроизведение» звук снова включается, но оповещение не запускается. Я что-то здесь упускаю? Нужно ли как-то сбрасывать звук?

<a href="#" onclick="$('#audio')[0].play();">Play</a>

<audio preload="none" id="audio" onplay="alert('playing');"><source type="audio/wav" src="..."></source></audio>

Я также пытался привязать событие воспроизведения с помощью jQuery, но получаю те же результаты.

<a href="#" onclick="$('#audio')[0].play(); return false;">Play</a>

<audio preload="none" id="audio"><source type="audio/wav" src="..."></source></audio>

<script type="text/javascript">

    $(document).ready(function () {

        $('#audio')[0].bind('play', function () {

            alert("Playing");

        });

    });    

</script>

Answer 1

onplay запускается, когда носитель готов к запуску,

Элемент больше не приостановлен. Запускается после того, как метод play () или когда атрибут autoplay вызвал начало воспроизведения.

взято из спецификации

Вы можете попробовать

<input type="button" value="Play" id="play_pause" onclick="audio.play()">

, а затем

var play_pause = document.getElementById('play_pause');
video.onpause = function(e) {
  play_pause.value = 'Play';
  play_pause.onclick = function(e) { video.play(); }
}
video.onplay = function(e) {
  play_pause.value = 'Pause';
  play_pause.onclick = function(e) { video.pause(); }
}

источник