Trình xử lý sự kiện 'onplay' của Html5 lười biếng cho thẻ Audio?

Question

Với thẻ âm thanh Html5 mới, sự kiện onplay dường như chỉ kích hoạt lần đầu tiên âm thanh được phát. Trong ví dụ này, khi nhấp vào "Phát", âm thanh sẽ phát ra với cửa sổ bật lên cảnh báo hiển thị "Đang phát". Khi âm thanh đã kết thúc và "Phát" được nhấp một lần nữa, âm thanh sẽ khởi động lại nhưng không có cảnh báo nào được kích hoạt. Am i thiếu cái gì ở đây? Tôi có phải đặt lại âm thanh bằng cách nào đó không?

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

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

Tôi cũng đã thử ràng buộc với sự kiện phát với jQuery, nhưng tôi nhận được kết quả tương tự.

<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 được chạy khi các phương tiện truyền thông đã sẵn sàng để bắt đầu chạy,

Yếu tố không còn dừng lại. Được kích hoạt sau khi phương thức play() đã trả về hoặc khi thuộc tính autoplay đã bắt đầu phát lại.

lấy từ spec

Bạn có thể thử

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

và sau đó

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

source