html5 audio – Notes and Random Stuff

<source src=”video/myVideo.ogv” type=”video/ogg”>
<object width=”640″ height=”480″ type=”application/x-shockwave-flash” data=”myFlashVideo.SWF”>
<param name=”movie” value=”myFlashVideo.swf” />
<param name=”flashvars” value=”controlbar=over&image=myVideoPoster.jpg&file=video/myVideo.mp4″ />
<img src=”myVideoPoster.jpg” width=”640″ height=”480″ alt=”__TITLE__”
title=”No video playback capabilities, please download the video below” />
</object>
<p> <b>Download Video:</b>
MP4 Format: <a href=”http://myVideo.mp4″>”MP4″</a>
Ogg Format: <a href=”http://myVideo.ogv”>”Ogg”</a>
</p>
</video>

controls: will show the controls for the video

preload: pretty much the same as buffer

loop: automatically loops when the video ends

poster: the initial video image placeholder

<source> tags: if a format is not available in the current browser, it will play the next one up

All other HTML content, including the <object> flash tag are there just in case the current browser don’t support HTML5.

Audio pretty much the same, except it doesn’t have height, width and poster attributes:

<audio controls =  "controls">
    <source src =  "music.ogg" type =  "audio/ogg" />
    <source src =  "music.mp3" type =  "audio/mpeg" />
      Your browser does not support HTML5 Audio. Please shift to a newer browser.
</audio>

You can also add audio tags dynamically, via JavaScript:

<script>
    //Create a new Audio object
    var sound = new Audio();
    // Select the source of the sound
    sound.src = "music.ogg";
    // Play the sound
    sound.play();
</script>

To test if certain audio format can be played in the current browser:

if (audio.canPlayType) {
           // Currently canPlayType() returns: "", "maybe", or "probably"


To check if an audio file has finished loading:

<script>
    if(soundFileExtn) {
        var sound = new Audio();
        sound .addEventListener('canplaythrough', function(){
            alert('loaded');
            sound.play();
        });
        // Load sound file with the detected extension
        sound.src = "bounce" + soundFileExtn;
    }
</script>