title: Webaudio, play sound twice
body: <p>I am experimenting with WebAudio and I am loading in a sound with the following javascript code. </p>
  
  <pre><code>function playAudio(){
      var audio = document.getElementById('music');
      var audioContext = new webkitAudioContext();
      var analyser = audioContext.createAnalyser();
      var source = audioContext.createMediaElementSource(audio);
      source.connect(analyser);
      analyser.connect(audioContext.destination);
      audio.play();
  }
  </code></pre>
  
  <p>I also want to analyse the sound can visualise it with canvas, hence the <code>analyser</code>. It works fine the first time but if I run this function twice I get an error. </p>
  
  <pre><code>&gt; playAudio(); // works fine, i can hear a sound
  &gt; playAudio(); // error 
  InvalidStateError: Failed to execute 'createMediaElementSource' on 'AudioContext': invalid HTMLMediaElement.
  </code></pre>
  
  <p>What is causing this error? I know that the error is caused by this line of code: </p>
  
  <pre><code>var source = audioContext.createMediaElementSource(audio);
  </code></pre>
  
  <p>I am creating a <em>new</em> audio context, so I would assume that I can re-use the same audio element in my html. </p>