JavaScript – play blobs in Android audio elements

I have some code that can run normally on chrome and Firefox desktops. Now I'm trying to run it on Android chrome. I've created some audio in the browser. I want to show an audio control so that users can click to play. This is the final view of the control:

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

I tried to play the file from the browser:

<audio controls src="/sample.wav"></audio>

And the effect is very good, so I know that the audio control can play WAV files

The control looks different. The one played from the server contains timing, i.e. "0:00 / 1:23". The one created with JavaScript only contains "0:00". This makes me believe that the control does not actually load audio, but I don't know why

I printed some debugging information on the blob, and then saw that the size of the report was 184440 and the type of report was "audio / waveform"

The way I create a URL placed in the audio SRC is:

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

How can I debug further? Is there another way to set up Android's audio controls?

thank you!

to update:

I haven't solved this problem, but I have solved it. Instead of using < audio > playback control, I directly use audiobuffer:

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();

resolvent:

Obviously, Android chrome cannot play audio in blob. I encountered this error when implementing recorder.js to record audio on mobile browser. In my research, I encountered some problems reported to chrome project. Issue 1 issue 2

Fortunately for me, I am using the recorder.js library, because if not, it will take me more than 1 day to find the fix for this bug. Anyway, the issue is also opened in the recorder.js git repository for this purpose. @ dokechin's answer in this topic is useful to me. Thank you @ dokechin!

As long as you convert your blob to Base64 data, Android chrome will play it. You can do this

  var reader = new FileReader();
  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);