Audio node reuse

Looks buggy on iPad. Let's find out.

by parente

HTML

<button id="b" onclick="run();">Click me</button>

<h1>Instructions</h1>
<p>Click the button. It disables immediately. When the audio starts playing (DOM event 'play'), it switches labels to "Playing". When the audio stops playing (DOM event 'ended'), it enables and reverts to the "Click me" label.</p>

<p>On iPad iOS 3.x, I can click the button roughly 3 times. On the last time, I hear the sound play but the button never re-enables. Apparently, the 'ended' event never fires.</p>

<p>If I remove the load() call, the problem seems to go away for some sounds. But then other sounds refuse to play at all.</p>

CSS

p { margin : 1em }
h1 { font-size: 2em; }

JavaScript

var n;

function run() {
    document.getElementById('b').disabled = true;
    n.src = 'http://mindtrove.info/files/sound1.mp3';
    n.load();
    n.play();
}

window.onload = function() {
    n = new Audio();
    n.addEventListener('play', function() {
        document.getElementById('b').innerHTML = 'Playing';
    });
    n.addEventListener('ended', function() {
        var b = document.getElementById('b');
        b.innerHTML = 'Click me';
        b.disabled = false;
    });
}