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?
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?
Share Improve this question edited May 23, 2017 at 12:16 CommunityBot 11 silver badge asked Sep 12, 2015 at 17:49 Yujun WuYujun Wu 3,01212 gold badges41 silver badges56 bronze badges2 Answers
Reset to default 11Figured out directly using the web audio api has the best patibility 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.
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 ;)