HTML5 Audio Event Debugger

Events fired successfully from the audio tag will be marked in the table with an X. Click a corresponding button to forcibly trigger an event.

by schlomm

HTML

<audio id="audio" controls>
    <source src="http://dl.dropbox.com/u/1538714/article_resources/song.m4a" type="audio/mpeg" />
    <source src="http://dl.dropbox.com/u/1538714/article_resources/song.ogg" type="audio/ogg" />
</audio>
<table cellspacing="0" id="table">
    <thead>
        <tr>
            <th>Event</th>
            <th>Fired</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abort</td>
            <td id="event-abort"></td>
            <td><button onclick="emptyAudio();">abort audio</button></td>
        </tr>
        <tr>
            <td>canplay</td>
            <td id="event-canplay"></td>
            <td></td>
        </tr>
        <tr>
            <td>canplaythrough</td>
            <td id="event-canplaythrough"></td>
            <td></td>
        </tr>
        <tr>
            <td>durationchange</td>
            <td id="event-durationchange"></td>
            <td></td>
        </tr>
        <tr>
            <td>emptied</td>
            <td id="event-emptied"></td>
            <td><button onclick="emptyAudio();">empty audio</button></td>
        </tr>
        <tr>
            <td>ended</td>
            <td id="event-ended"></td>
            <td><button onclick="audio.currentTime = audio.duration;">seek to end of audio</button></td>
        </tr>
        <tr>
            <td>error</td>
            <td id="event-error"></td>
            <td><button onclick="emptyAudio();">add invalid URL</button></td>
        </tr>
        <tr>
            <td>loadeddata</td>
            <td id="event-loadeddata"></td>
            <td></td>
        </tr>
        <tr>
            <td>loadedmetadata</td>
            <td id="event-loadedmetadata"></td>
            <td></td>
        </tr>
        <tr>
            <td>loadstart</td>
            <td id="event-loadstart"></td>
            <td></td>
        </tr>
        <tr>
            <td>pause</td>
            <td id="event-pause"></td>
            <td></td>
       ...

CSS

/** quick and dirty css reset **/
* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 16px;
    font-family: Arial, sans-serif;
}

audio {
    width: 400px;
}

table {
    border-right: 1px solid #AAA;
    border-bottom: 1px solid #AAA;
    width: 400px;
}

td, th {
    padding: 2px 5px;
    border-left: 1px solid #AAA;
    border-top: 1px solid #AAA;
}

th {
    font-weight: bold;
    text-align: left;
}

button {
    padding: 3px 5px;
}

JavaScript

var audio = document.getElementById('audio');
var table = document.getElementById('table');

// list of events to track
var events = 'abort,canplay,canplaythrough,durationchange,emptied,ended,error,loadeddata,loadedmetadata,loadstart,pause,play,playing,progress,ratechange,seeked,seeking,stalled,suspend,timeupdate,volumechange,waiting'.split(',');

// event handler
var onEvent = function(e) {
    document.getElementById('event-' + e.type).innerHTML = 'X'; // mark event fired in table
    this.removeEventListener(e.type, onEvent, false); // remove event listener
};

// add event listener to audio for all events
for (var i = 0, len = events.length; i < len; i++) {
    audio.addEventListener(events[i], onEvent, false);
}

// change playback rate
var changePlaybackRate = function(button) {
    if (audio.playbackRate !== 1) {
        audio.playbackRate = 1;
        button.innerHTML = 'change playbackRate to 0.5';
    } else {
        audio.playbackRate = 0.5;
        button.innerHTML = 'change playbackRate to 1';
    }
};

// change volume
var changeVolume = function(button) {
    if (audio.volume !== 1) {
        audio.volume = 1;
        button.innerHTML = 'change volume to 0.5';
    } else {
        audio.volume = 0.5;
        button.innerHTML = 'change volume to 1';
    }
};

// invalidate audio source (will fire abort, emptied, and error)
var emptyAudio = function() {
    audio.src = 'invalid_url.m4a';
};