Playing a blob in the audio element on Android
<p>I have some code that works fine on the desktop in Chrome and Firefox, and now I'm trying to get it to work on Chrome in Android. I have created some audio in the browser and I'd like to present an audio control so that the user can click play. Here is the final look of the control:</p>

<pre><code>&lt;audio controls src="blob:https%3A//mydomain.com/5b7cbd96-b204-4b1c-8de3-9fb212c37928"&gt;&lt;/audio&gt;
</code></pre>

<p>I tried playing a file from the browser with this:</p>

<pre><code>&lt;audio controls src="/sample.wav"&gt;&lt;/audio&gt;
</code></pre>

<p>And that worked fine, so I know that the audio control can play WAV files.</p>

<p>The controls look different, too. The one that plays from the server contains the timing, that is, "0:00 / 1:23". The one that is created in JavaScript contains only "0:00". That leads me to believe that the control didn't actually load the audio in, but I have no idea why.</p>

<p>I printed out some debug info on the blob and I see the reported size is 184,440, and the reported type is "audio/wav".</p>

<p>The way I created the URL that I put in the audio's src is:</p>

<pre><code>// dataView is of type DavaView, and contains the WAV.
var audioBlob = new Blob([dataView], { type: "audio/wav" });
var url = URL.createObjectURL(audioBlob);
</code></pre>

<p>How would I debug this further? Or is there another way to set up the audio control for Android?</p>

<p>Thanks!</p>

<p><strong>Update:</strong></p>

<p>I didn't solve this problem but I worked around it. Instead of using the <code>&lt;audio&gt;</code> control for playback, I am using an <code>AudioBuffer</code> directly:</p>

<pre><code>var source = audioCtx.createBufferSource();
var audioBuffer = audioCtx.createBuffer(1, sampleArray.length, audioCtx.sampleRate);
audioBuffer.copyToChannel(sampleArray);
source.buffer = audioBuffer;
source.connect(audioCtx.destination);
source.start();
</code></pre>