Chrome on Android cannot play recorded audio from object URL

Question

I am using Recorder.js to record something with the Audio API and I want to give the user the opportunity to listen to their recording before uploading it to the server. The recording code is heavily based on the supplied example, but instead of exporting to WAV for downloading I am using a blob and setting the src attribute of an audio element for playback. The responsible code (called after stopping the recording) looks like this:

function createAudioPlayer() {
  recorder && recorder.exportWAV(function (blob) {
    var url = URL.createObjectURL(blob);
    var au = document.getElementById('recording');
    au.src = url;
  });
}

It results in something like this: <audio id="recording" src="blob:https%3A//example.com/499ca96f-37b2-4515-bd1b-3c298f201dbd" controls="controls"></audio>

Playing back this audio works in Chrome 50 and Firefox 46 on OS X 10.11, and in Edge 13 on Windows 10. Chrome 50 on Android 6.0 records and uploads fine, but refuses playback with the following error when play() is called on the audio element:

Uncaught (in promise) DOMException: The element has no supported sources.

I've tried adding type="audio/wav" but that didn't work. If I upload the file from blob (with the File API and XHR) and use a src attribute with a 'normal' URL of the wav file on the server it also plays back fine. What should be changed so that users can listen to their recording before uploading?

Answer 1

Not yet supported. We've got work in progress that should fix it, hopefully in Chrome 51. (https://groups.google.com/a/chromium.org/forum/#!topic/chromium-reviews/Qi4dLcKjcCM)