100 audio element bugs

Audio fails to play when there are many others created, started, and paused. Problems on Mac / Linux in Firefox and Chrome.

by parente

HTML

<button id="go">Click to run test</button>
<h1>Instructions</h1>
<p>Click button above to run the test. Test creates 100 audio elements with play, pause, ended, and error event handlers that log to the console.log / console.error. The test then iterates over all 100 audio objects, invoking play() then immediately invoking pause() on the first 99 in turn. On the 100th, it invokes play() but does not immediately pause it.</p>
<p>On Mac OS X 10.6.3, Chrome 5.0.375.38 beta, the final audio element fires a start event, but no audio is heard and no other event follows it. It works fine in Safari 4.0.5 and Firefox 3.6.3 on the same platform.</p>
<p>On Ubuntu Lucid Lynx, Firefox 3.6.3 and Chrome 5.0.375.29 beta, the final audio element fires a start event, but no audio is heard and no other event follows it. After running the test, HTML5 audio is hosed in either browser until browser quit.</p>

CSS

body {
    font-family: sans-serif;
}
h1 {
    font-size: 1.5em;
}

p {
    margin-top: 1em;
    margin-bottom: 1em;
}

JavaScript

function onStart(event) {
    console.log('start event: ' + event.target.id);
}
function onPause(event) {
    console.log('pause event: ' + event.target.id);
}
function onEnded(event) {
    console.log('end event: ' + event.target.id);
}
function onError(event) {
    console.error('error event ('+event.target.error+'): '+ event.target.id);
}

document.getElementById('go').addEventListener('click', function() {
    var snds = [];
    var i, s;
    for(i = 0; i < 100; i++) {
        // build 100 audio objects; just reuse one here
        // but same problem manifests with 100 different files
        // which is more realistic (e.g., game queue of sounds)
        s = snds[i] = new Audio('http://static.mindtrove.info/test.ogg');
        s.id = 'snd'+i;
        // hook up listeners
        s.addEventListener('play', onStart, false);
        s.addEventListener('pause', onPause, false);
        s.addEventListener('ended', onEnded, false);
        s.addEventListener('error', onError, false);
    }
    for(i=0; i < snds.length; i++) {
        s = snds[i];
        // play and immediately pause the first N-1 sounds
        s.play();
        // but let the Nth sound play through
        if(i != snds.length - 1) {
            s.pause();
        }
    }
}, false);