Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Audio onLoad

Tags:

html

audio

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.

like image 809
yydl Avatar asked Mar 17 '11 05:03

yydl


People also ask

How do I embed audio in HTML5?

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.

How do I preload audio in HTML?

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.

Can I play audio in HTML5?

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.

What is HTMLAudioElement?

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.


2 Answers

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

like image 151
bcoughlan Avatar answered Oct 08 '22 23:10

bcoughlan


Can you not bind to the onloadeddata event? It works for me. W3C Reference

like image 25
rewolf Avatar answered Oct 08 '22 21:10

rewolf