title: Play AudioBuffer in existing HTML5 audio tag
body: <p>I've created a website that contains an audio-tag as well as a working drop-area for file upload.</p>
  
  <pre><code>&lt;body&gt;
      &lt;audio id="myPlayer" controls&gt;Your browser does not support the audio-tag&lt;/audio&gt;
      &lt;div id="dropArea"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>A dragged audio-file then gets converted into an <code>ArrayBuffer</code> and ultimately an <code>AudioBuffer</code>.</p>
  
  <pre><code>let audioContext = new (window.AudioContext || window.webkitAudioContext)();
  let arrayBuffer = await readFileAsArrayBuffer(audioFile);
  
  audioContext.decodeAudioData(arrayBuffer, buf =&gt; {
      console.log(buf);
  });
  </code></pre>
  
  <p>The <code>AudioBuffer</code> can then be played in the function like this:</p>
  
  <pre><code>playSound(buffer) =&gt; {
    let source = context.createBufferSource();
  
    source.buffer = buffer;
    source.connect(context.destination);
    source.start(0);
  }
  </code></pre>
  
  <p><strong>All of the above works fine, but that's not what I'm after.</strong></p>
  
  <p>I want to the <code>AudioBuffer</code> to be played and controlled in the audio-player in my HTML instead. How can this be done?</p>