Playing A Blob In The Audio Element On Android

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 l

Solution 1:

Apparently, Android Chrome cannot play audio from a blob. I came across this bug when I was implementing Recorder.js to record audio on mobile browsers. In my research I came across a couple of issues reported to the chromium project. Issue 1Issue 2

Lucky for me, I was working on the Recorder.js library because if I wasn't, It would have taken me a lot more than a 1 day to find a fix to this bug. Anyway, there was an issue opened about this in the Recorder.js git repository as well. @dokechin's answer in that thread worked for me. Thanks @dokechin!

Just convert your blob to base64 data and Android Chrome will play it. You can do it like this,

var reader = newFileReader();
  reader.onload = function(e) {
      // e.targer.result will hold the base64 data.// Note: It includes the pre-text "data:audio/<format>;base64,<base64 data>"// Then do
      audio.src = e.target.result;
      // OR
      $("#your-audio-tag").attr("src", e.target.result);
  };
  reader.readAsDataURL(blob);