I am using the MediaRecorder API to record audio on my page.
I need to convert this audio to base64.
Have a look at this example.
Each time new data is available, it pushes that data to an array, like this:
function handleDataAvailable(event) {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
Then, it combines all that data like this:
var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
So how would I convert this superBuffer to base64?
You can do this using FileReader Object.
var reader = new window.FileReader();
reader.readAsDataURL(superBuffer);
reader.onloadend = function() {
base64 = reader.result;
base64 = base64.split(',')[1];
console.log(base64 );
}
Answer referred from Convert blob to base64.
Read more about FileReader for better understanding.
Related
Basically that's it, Im trying to record audio, using the Web Audio API and tuna.js or pizzicato.js add some effects and save it into a server in base64.
The problem is, using recorder.js the audio is save the record in a blob object, after that I can transform it into a base64 (not editable) with the FileReader(). I've trying add effects to the blob:url, and works perfectly, but I cant transform the edited audio into base64.
recorder.addEventListener( "dataAvailable", function(e){
var fileName = new Date().toISOString() + "." + e.detail.type.split("/")[1];
var url = URL.createObjectURL( e.detail );
var audiob = "";
var reader = new window.FileReader();
reader.readAsDataURL(e.detail); //e.detail
reader.onloadend = function() {
base64data = reader.result;
audiob = base64data;
}
e.detail ->
Blob {size: 28278, type: "audio/wav"}
size:28278
type:"audio/wav"
__proto__:Blob
Any help? :)
PD: Sorry about my english, I know it sucks
I tried concatenating audio blobs using Web RTC experiment by Muaz Khan, but when I play the concatenated audio, the HTML audio element does not show the full length of the audio file and also if you download and play, the issue will persist. I used ffmpeg to concate these blobs, though is there a way which can be used for concatenating audio blobs using the Web RTC js experiment by Muaz Khan. A similar attempt which also did not work out : Combine two audio blob recordings
The best way is to convert the blobs into AudioBuffers (Convert blob into ArrayBuffer using FileReader and then decode those arrayBuffers into AudioBuffers). You can then merge/combine more than one AudioBuffers and get the resultant.
Following code will work in such situation:
var blob="YOUR AUDIO BLOB";
var f = new FileReader();
f.onload = function (e) {
audioContext.decodeAudioData(e.target.result, function (buffer) {
arrayBuffer.push(buffer);
if (arrayBuffer.length > 1) {
resultantbuffer = appendBuffer(arrayBuffer[0], arrayBuffer[1]);
arrayBuffer = [];
arrayBuffer.push(resultantbuffer);
}
else {
resultantbuffer = buffer;
}
}, function (e) {
console.warn(e);
});
};
f.readAsArrayBuffer(blob);
This code read the blob and convert into arrayBuffer (e.target.result) and decode those buffers into AudioBuffers (buffer). I used appendBuffer method for appending more than one audioBuffers. Here is the method:
function appendBuffer(buffer1, buffer2) {
///Using AudioBuffer
var numberOfChannels = Math.min(buffer1.numberOfChannels, buffer2.numberOfChannels);
var tmp = recordingAudioContext.createBuffer(numberOfChannels, (buffer1.length + buffer2.length), buffer1.sampleRate);
for (var i = 0; i < numberOfChannels; i++) {
var channel = tmp.getChannelData(i);
channel.set(buffer1.getChannelData(i), 0);
channel.set(buffer2.getChannelData(i), buffer1.length);
}
return tmp;
}
Do let me know if you face any problem.
I am converting the audio MP3 file and storing it as base64 in database using WEB API, now I am fetching the base64 file using ajax and I am getting the base64, the problem is how can I convert the base64 file back to mp3 file and play it using JavaScript.
This if for demo I am using input file, I am getting base64 file from server
<input type='file' onchange='openFile(event)' id="EdituserProfileImage">
var fileName;
var filetype;
var filesize;
var VoiceBase64;
var openFile = function (event) {
var input = event.target;
fileName = input.files[0].name;
filetype = input.files[0].type;
filesize = input.files[0].size;
console.log(input);
console.log(fileName);
var reader = new FileReader();
reader.onload = function (evt) {
var voiceInBinay = evt.target.result;
VoiceBase64 = btoa(voiceInBinay);
contvertBase64toBinaray(VoiceBase64);
};
reader.readAsBinaryString(input.files[0]);
};
This function "contvertBase64toBinaray" using for converting base64 to Binary, I have binary file, need to save as mp3 from this below binary
function contvertBase64toBinaray(VoiceBase64) {
var audiofile = atob(VoiceBase64)
};
Use window.atob function to decode your base 64 data.
This question shows you how you can play the mp3 in JS.
I am trying to read the contents of a video file as a binary string using the FileReader.readAsBinaryString(Blob|File) as shown in the example http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files and then store and play the video.
I tried it using the below (with a webm video file),but get a "Video format or MIME type not supported."
function readBlob (file, startByte, endByte, callback) {
console.log('readBlob():', file, startByte, endByte);
var reader = new FileReader();
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) {
callback(evt.target.result);
var player = document.getElementById('player');
player.src = "data:video/webm;base64,"+evt.target.result;
player.load();
player.play();
}
}
var blob = file.slice(startByte, endByte);
reader.readAsBinaryString(blob);
}
Does anyone know if it is possible to read a video file (one supported by the browser being used) as a binary string and play it in the browser HTML5 video player?
TIA
Your problem might be with the player.src
player.src = "data:video/webm;base64,"+evt.target.result;
It is expecting the data to be in base64 but you're giving it a binary string.
Try encoding it to base64 using btoa
player.src = "data:video/webm;base64,"+btoa(evt.target.result);
How about FileReader.readAsDataURL(Blob|File) ?
It is explained in your html5rocks-link as well.
Is there a script (javascript / client side). That create data URIs on the fly. Now i create data URIs with a online base64 creator. And then put that output in the css file. But when i changing the images. Its a lot of work to do it. Is there a script, that can do it for me.?
The modern browsers now have good support for base64 encoding and decoding. There are two functions respectively for decoding and encoding base64 strings:
atob() decodes a string of base-64 data
btoa() creates a base-64 encoded ASCII string from a "string" of binary data
This let's you create data uri's easily i.e
var longText = "Lorem ipsum....";
var dataUri = "data:text/plain;base64," + btoa(longText);
//a sample api expecting an uri
d3.csv(dataUri, function(parsed){
});
As a complete solution to your scenario, you can use fetch to get a blob representation of your image, and then use FileReader to convert the blob in its base64 representation
// get an image blob from url using fetch
let getImageBlob = function(url){
return new Promise( async resolve=>{
let resposne = await fetch( url );
let blob = resposne.blob();
resolve( blob );
});
};
// convert a blob to base64
let blobToBase64 = function(blob) {
return new Promise( resolve=>{
let reader = new FileReader();
reader.onload = function() {
let dataUrl = reader.result;
resolve(dataUrl);
};
reader.readAsDataURL(blob);
});
}
// combine the previous two functions to return a base64 encode image from url
let getBase64Image = async function( url ){
let blob = await getImageBlob( url );
let base64 = await blobToBase64( blob );
return base64;
}
// test time!
getBase64Image( 'http://placekitten.com/g/200/300' ).then( base64Image=> console.log( base64Image) );
One way is to make a Blob of an object, and then use URL.createObjectURL()
let a = URL.createObjectURL(new Blob([JSON.stringify({whatever: "String..."}, null, 2)]))
console.log(a)