Blob size limit to assign Audio HTML src in mobile navigators?

Question

Mobile browser launch an error if I assign a dynamically SRC of an Audio HTML Element bigger than 500000000 KBytes (48 MGBytes). No problem if the blob is lower that 500000000 KBytes.

Its about 13 minutes of mono audio. I need 30 minutes.

Is possible to enlarge it?

I am generating waves sound (aleatory noise for this case) with javascript and saving in a Uint8Array buffer.

  var megaBytes = 48; //50331648 KBytes
  var bytes = megaBytes*1024*1024;

  var uint8 = new Uint8Array(bytes);
  for (i = 0; i < bytes; i++) {
    uint8[i] = getRandomInt(0,100) + 128;
  }

Then I need to create the WAV Base64 array:

    var arrBytesFinal = getWavBytes( uint8, {
      isFloat: false,      // floating point or 16-bit integer
      numChannels: 1,     // Mono. 2 - Stereo    
      sampleRate: 32000, // Bitrate
    })

After I create an audio/wav type Blob and assign to my HTML audioControl as src.

    var myBlob = new Blob( [arrBytesFinal] , { type : 'audio/wav; codecs=0' });
    var readerBlob = new FileReader();
    readerBlob.addEventListener("loadend", function() {
        var myAudioFinal = readerBlob.result.toString(); 
        audioControl.src = myAudioFinal; //HERE THE NAVIGATOR PROBLEM.
        playButton.disabled = false;
    });
    readerBlob.readAsDataURL(myBlob);

Just do like audioControl.src = URL.createObjectURL(myBlob) instead. DataURLs can only be so large. — StackSlave
@StackSlave The data:// URL itself can be bigger (about 512MB in v8 browsers), but it takes definitely more memory than a blob:// URI (about 3 times+). To OP, for what you are doing use the Web Audio API, you can generate the sound directly, with no memory pressure. developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/… — Kaiido
@Kaiido. Thanks! but I can not use Web Audio API because the navigator turn off the sound if navigator is minimized or mobile suspended. — JTConsulta

VC.One VC.One · Accepted Answer · 2021-01-22T08:53:01

Some notes:

Make sure that your WAV is really a WAVE file (44-byte header according to RIFF format etc).
Using readerBlob.result.toString(); will not give you audio data (is text from byte values).

Try this version (untested) of your last shown code:

var myBlob = new Blob( [arrBytesFinal] , { type : 'audio/wav;' });
var readerBlob = new FileReader();
readerBlob.addEventListener("loadend", function( evt ) {
    var myAudioFinal = new Uint8Array( readerBlob.result );
    //var myAudioFinal = new Uint8Array( evt.target.result ); //# or try this way...
    audioControl.src = myAudioFinal; //HERE THE NAVIGATOR PROBLEM.
    playButton.disabled = false;
      
});
readerBlob.readAsArrayBuffer(myBlob);

Blob size limit to assign Audio HTML src in mobile navigators?

1 Answers