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.
Related
I have a web page where I upload file from an input type file HTML element.
Then I need to send that file by Url with Ajax to a Java server to a REST web service where it will be processed.
I tried FileReader().readAsDataURL function in javascript, file is encoded in base64 then sent to server by url. But when I try to decode it in Java, it fails.
How can I achieve this ?
My code client-side :
var file = document.getElementById('add_attach').files[0];
var filename = document.getElementById('add_attach').value;
if (file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var name = encodeURIComponent(filename);
var file_content = e.target.result;
//Ajax request to server with sending file_content
};
}
My code server-side :
file_content = file_content.substring(file_content.indexOf("base64"));
file_content = file_content.replace("base64,", "");
byte[] decodedBytes = Base64.getDecoder().decode(file_content);
The errror I get :
java.lang.IllegalArgumentException: Illegal base64 character 20
Adding CropperJS into a nodejs solution, and I'm trying to get the returned Base64 string back into file format. So I can send the file to the upload function.
I can't change any functionality and need to use file type to send as a parameter.
I tried: Creating a blob and passing it -> get an error can't to parse the file.
//this is used to upload the file
File.upload(file).then(function (savedFile) {
//with the new cropper i get back base64 string from:
$scope.imgSrc = $scope.cropperCrop.getCroppedCanvas().toDataURL();
How do I convert imgSrc to file to pass into the File upload function?
You can use this function to convert Base64 image string to image/file object.
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
//Usage example:
var base64String = "data:image/jpeg;base64,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"
var file = dataURLtoFile(base64String, 'filename.png');
console.log(file);
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 convert file that are uploaded on the GUI and decoded it on the server which is a node.js server. Following code works fine for PDF files etc. but does not work for Image files ( PNG and JPEG). Following is the code :-
var fileName = form.findField("attachment").fileInputEl.dom.files[0];
var fileReader = new FileReader();
fileReader.onload = function (olEvent) {
var payload = window.btoa(unescape(encodeURIComponent(olEvent.target.result)));
contactObj['file_content'] = payload;
contactObj['file_name'] = fileName.name;
contactObj['file_type'] = fileName.type;
contactObj['file_size'] = fileName.size;
contactObj['fileAttached'] = fileAttached;
me.postContactUs(contactObj);
};
fileReader.readAsBinaryString(fileName);
}
on the node server using an npm (base-64) to decode this. Any ideas??
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.