Convert audio data uri string to file - javascript

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?

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.

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

Related

Arraybuffer to Base64 for large videos crashing in ChromeApp

I am creating a Chrome Application and I'm trying to convert a video I get back as a arraybuffer from a xmlHttpRequest to Base64 so I am able to store it in chrome.storage (as chrome.storage does not support storing blobs or straight up arraybuffers).
I am using this function to encode/convert
this.arrayBufferToBase64 = function ( buffer, type ) {
var binary = '';
var bytes = new Uint8Array( buffer );
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
if (type == "video"){
return 'data:video/webm;base64,' + window.btoa( binary );
}
else{
return 'data:image/png;base64,' + window.btoa( binary )
}
}
Videos that are 20MB's work just fine, but it seems video's that are over 200MB just crash the application.
So couple of questions with this:
Is there a better way to convert from arraybuffer to base64?
Is there a way to storge a non-serialize-able object (example blob) into chrome.storage?
Any other suggestions welcome

createObjectUrl for binary data fails

In my javascript I have a base64 encoded pkcs12 object, which I want to provide as download link. The Pkcs12 (pfx) file to be downloaded is binary data.
So I decoded the object and tried to create an objectUrl from it:
var bin = atob(pkcs12);
var blob = new Blob([bin],
{ type : 'application/x-pkcs12' });
$scope.pkcs12Blob = (window.URL || window.webkitURL).createObjectURL( blob );
The problem is, that the downloaded file is bigger than the original binary data and is not recognized as pkcs12. It looks like as if some utf-8/unicode stuff was introduced into the file.
If I provide the original base64 encoded data to the createObjectURL and download the base64 encoded file, I can decode the downloaded file and get a valid p12 file.
So I am wondering: How does createObjectURL work for binary data?
For some reason createObjectURL does not accept a binary string but requires a byte array. This code worked like a charm:
var bytechars = atob($scope.enrolledToken.pkcs12);
var byteNumbers = new Array(bytechars.length);
for (var i = 0; i < bytechars.length; i++) {
byteNumbers[i] = bytechars.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], {type: 'application/x-pkcs12'});
$scope.pkcs12Blob = (window.URL || window.webkitURL).createObjectURL( blob );

Javascript: create UTF-16 text file?

I have some string need to be a UTF-16 text file. For example:
var s = "aosjdfkzlzkdoaslckjznx";
var file = "data:text/plain;base64," + btoa(s);
This will result a UTF-8 encoding text file. How can I get a UTF-16 text file with string s?
Related: Javascript to csv export encoding issue
This should do it:
document.getElementById('download').addEventListener('click', function(){
downloadUtf16('Hello, World', 'myFile.csv')
});
function downloadUtf16(str, filename) {
// ref: https://stackoverflow.com/q/6226189
var charCode, byteArray = [];
// BE BOM
byteArray.push(254, 255);
// LE BOM
// byteArray.push(255, 254);
for (var i = 0; i < str.length; ++i) {
charCode = str.charCodeAt(i);
// BE Bytes
byteArray.push((charCode & 0xFF00) >>> 8);
byteArray.push(charCode & 0xFF);
// LE Bytes
// byteArray.push(charCode & 0xff);
// byteArray.push(charCode / 256 >>> 0);
}
var blob = new Blob([new Uint8Array(byteArray)], {type:'text/plain;charset=UTF-16BE;'});
var blobUrl = URL.createObjectURL(blob);
// ref: https://stackoverflow.com/a/18197511
var link = document.createElement('a');
link.href = blobUrl;
link.download = filename;
if (document.createEvent) {
var event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
link.dispatchEvent(event);
} else {
link.click();
}
}
<button id="download">Download</button>
You can use a legacy polyfill of the native TextEncoder API to transform a JavaScript string into an ArrayBuffer. As you'll see in that documentation, UTF16 with either endianness is was supported. Libraries that provide UTF-16 support in a Text-Encoder-compatible way will probably appear soon, if they haven't already. Let's assume that one such library exposes a constructor called ExtendedTextEncoder.
Then you can easily create a Blob URL to allow users to download the file, without the inefficient base-64 conversion.
Something like this:
s = "aosjdfkzlzkdoaslckjznx"
var encoder = new ExtendedTextEncoder("utf-16be")
var blob = new Blob(encoder.encode(s), "text/plain")
var url = URL.createObjectURL(blob)
Now you can use url instead of your data: URL.

Saving binary data in a browser without it getting UTF8 encoded on download

My web app receives data in the form of a base64 encoded string, which is decodes using atob, and stores via URL.createObjectURL(). This data is then downloaded via the right-click save-as dialog. The downloaded filed always matches the source file when the source file is ascii encoded. However this isn't the case when the source file is just plain binary data. A diff of a non ascii encoded downloaded file vs its source file appears to show that the downloaded file is UTF-8 encoded. How can this problem be fixed? Please note, I'm locked into using firefox 10.
Convert the string to a Arraybuffer and it should work. If there is any way that you can get the data into an array buffer directly without passing a sting that would be the best solution.
The following code is tested in FF10, and are using the now obsolete MozBlobBuilder.
fiddle
var str="",
idx, len,
buf, view, blobbuild, blob, url,
elem;
// create a test string
for (var idx = 0; idx < 256; ++idx) {
str += String.fromCharCode(idx);
}
// create a buffer
buf = new ArrayBuffer(str.length);
view = new Uint8Array(buf);
// convert string to buffer
for (idx = 0, len = str.length; idx < len; ++idx) {
view[idx] = str.charCodeAt(idx);
}
blobbuild = new MozBlobBuilder();
blobbuild.append(buf);
blob = blobbuild.getBlob('application/octet-stream');
url = URL.createObjectURL(blob);
elem = document.createElement('a');
elem.href = url;
elem.textContent = 'Test';
document.body.appendChild(elem);

Blob constructor not working in safari / opera?

I'm trying to construct a Blob from an array buffer that original comes from a binary string. It works fine in Firefox & Chrome, but I don't know whats wrong with Safari & Opera
This is a simplified version of my problem:
http://plnkr.co/edit/sfEEHf?p=preview
// 1x1 red PNG pixle
base64 = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P8z8DwHwAFBQIAHl6u2QAAAABJRU5ErkJggg==";
byteString = atob(base64);
// convert binary to array buff so we can construct a blob later
arrayBuffer = new ArrayBuffer(byteString.length);
intArray = new Uint8Array(arrayBuffer);
for (i = 0; i < byteString.length; i += 1) {
intArray[i] = byteString.charCodeAt(i);
}
// construct blob
blob = new Blob([intArray], {type: "image/png"});
console.log(blob.size); // suppose to be 70 (its 19 in safari)
In Safari you need to use the 'buffer' property on the TypedArray, i.e. this:
blob = new Blob([intArray.buffer], {type: "image/png"});
and it'll work.

Categories