How can I get a callback when the audio tag is ready to play. (to tell the user, when implementing my own controls)
Using Chrome.
To embed audio in HTML, we use the <audio> tag. Before HTML5, audio cannot be added to web pages in the Internet Explorer era. To play audio, we used web plugins like Flash. After the release of HTML5, it is possible.
We use preload=”auto” attribute to preload the audio file. The HTML Audio Preload Attribute is used to specify how the author thinks the audio should be loaded when the page loads. The audio preload attribute allows the author to indicate to the browser how the user experience of a website should be implemented.
HTML5 features include native audio and video support without the need for Flash. The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.
The HTMLAudioElement interface provides access to the properties of <audio> elements, as well as methods to manipulate them. This element is based on, and inherits properties and methods from, the HTMLMediaElement interface.
Have only done this on the video element but it should work for audio.
Firstly, you can't bind the event, I don't know why that doesn't work. So you have to use setTimeout.
Example using jQuery:
$(function(){
var audioReady = function(){
if (youraudioelement.attr('readyState')) {
alert("it's ready!");
} else {
setTimeout(audioReady, 250);
}
}
audioReady();
}
More info: http://www.w3.org/TR/html5/video.html#the-ready-states
Can you not bind to the onloadeddata
event? It works for me. W3C Reference
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With