title: How to prevent memory leak by cleaning up <audio> elements?
body: <p>I wrote a bit of JavaScript with jQuery that loads a sound file with the HTML 5 <code>&lt;audio&gt;</code> tag and on a mouse click starts playing a new instance of that sound file (so that it can be played multiple times in parallel/overlay).</p>
  
  <h3>HTML:</h3>
  
  <pre><code>&lt;audio id="audiotemplate" src="audio/myfile.ogg"&gt;&lt;/audio&gt;
  </code></pre>
  
  <h3>JavaScript:</h3>
  
  <pre><code>mybutton.click(function() {
      $('#audiotemplate').clone()[0].play();
  });
  </code></pre>
  
  <p>This works as intended, but creates a memory leak that causes FF to eat up the system RAM and Chromium to show its "Ah, Snap" page if you click the button too many times.</p>
  
  <p><strong>EDIT:</strong> For a quick test better use <code>$(document).keypress</code> instead of <code>mybutton.click</code> and keep a button pressed.</p>
  
  <p>How to clean up the <code>&lt;audio&gt;</code> element after the sound file has finished playing?</p>
  
  <p><strong>NOTE:</strong> I do not insert the cloned element into the the page.</p>
  
  <p><strong>NOTE 2:</strong> The leak also happens if you click, wait until the sound ends, klick again ...</p>
  
  <p><em>(I am happy with a solution, but also appreciate an explanation why the leak happens at all.)</em></p>