Convert audio data uri string to file

Question

The server saves the audio data as base64 data string. The mobile web client fetches the data and plays the audio.

But found an issue in mobile Chrome in iOS and android that the audio with data uri can't play (issue).

To make it work, I was wondering if there is a way in the client side to convert the data string to an audio file (like .m4a) and link the audio src to the file?

Answer 1

Figured out directly using the web audio api has the best compatibility across the mobile browsers in iOS and Android.

function base64ToArrayBuffer(base64) {
  var binaryString =  window.atob(base64);
  var len = binaryString.length;
  var bytes = new Uint8Array( len );
  for (var i = 0; i < len; i++)        {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

var base64 = '<data string retrieved from server>';
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
var source = audioContext.createBufferSource();
audioContext.decodeAudioData(base64ToArrayBuffer(base64), function(buffer) {
   source.buffer = buffer;
   source.connect(audioContext.destination);
   source.start(0);
});

It works in iOS safari, Chrome and Android default browser and Chrome.

Answer 2

There is a way to do kind of what you want, it works on desktop, but I cannot guarantee it works on mobile. The idea is to convert the dataURI to ArrayBuffer, construct a Blob from it and then make a ObjectURL with it, to pass to the audio element. Here is the code (I tested it in Chrome/Firefox under Linux and it works):

<script>
    var base64audio = "data:audio/ogg;base64,gibberish";

    function dataURItoBlob(dataURI)
    {
        // Split the input to get the mime-type and the data itself
        dataURI = dataURI.split( ',' );

        // First part contains data:audio/ogg;base64 from which we only need audio/ogg
        var type = dataURI[ 0 ].split( ':' )[ 1 ].split( ';' )[ 0 ];

        // Second part is the data itself and we decode it
        var byteString = atob( dataURI[ 1 ] );
        var byteStringLen = byteString.length;

        // Create ArrayBuffer with the byte string and set the length to it
        var ab = new ArrayBuffer( byteStringLen );

        // Create a typed array out of the array buffer representing each character from as a 8-bit unsigned integer
        var intArray = new Uint8Array( ab );
        for ( var i = 0; i < byteStringLen; i++ ) 
        {
            intArray[ i ] = byteString.charCodeAt( i );
        }

        return new Blob( [ intArray ], {type: type} );
    }
    document.addEventListener( 'DOMContentLoaded', function()
    {
        // Construct an URL from the Blob. This URL will remain valid until user closes the tab or you revoke it
        // Make sure at some point (when you don't need the audio anymore) to do URL.revokeObjectURL() with the constructed URL
        var objectURL = URL.createObjectURL(dataURItoBlob(base64audio));

        // Pass the URL to the audio element and load it
        var audio = document.getElementById( 'test' );
        audio.src = objectURL;
        audio.load();
    } );
</script>
...
<audio id="test" controls />

I hope that helps ;)