title: Streaming into <audio> element
body: <p>I would like to play audio from a web socket that sends packages of sound data of unknown total length. The playback should start as soon as the first package arrives and it should not be interrupted by new packages.</p>
  <p>What I have done so far:</p>
  <pre><code>ws.onmessage = e =&gt; {
    const soundDataBase64 = JSON.parse(e.data);
    const bytes = window.atob(soundDataBase64);
    const arrayBuffer = new window.ArrayBuffer(bytes.length);
    const bufferView = new window.Uint8Array(arrayBuffer);
    for (let i = 0; i &lt; bytes.length; i++) {
      bufferView[i] = bytes.charCodeAt(i);
    }
    const blob = new Blob([arrayBuffer], {&quot;type&quot;: &quot;audio/mp3&quot;});
    const objectURL = window.URL.createObjectURL(blob);
    const audio = document.createElement(&quot;audio&quot;);
    audio.src = objectURL;
    audio.controls = &quot;controls&quot;;
    document.body.appendChild(audio);
  };
  </code></pre>
  <p>However, to my knowledge, it is not possible to extend the size of <code>ArrayBuffer</code> and <code>Uint8Array</code>. I would have to create a new blob, object URL and assign it to the audio element. But I guess, this would interrupt the audio playback.</p>
  <p>On the MDN page of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio" rel="nofollow noreferrer"><code>&lt;audio&gt;</code></a>, there is a hint to <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream" rel="nofollow noreferrer"><code>MediaStream</code></a>, which looks promising. However, I am not quite sure how to write data onto a media stream and how to connect the media stream to an audio element.</p>
  <p>Is it currently possible with JS to write something like pipe where I can input data on one end, which is then streamed to a consumer? How would seamless streaming be achieved in JS (preferably without a lot of micro management code)?</p>