muaz-khan
commented
6 years ago You can either use getDataURL or otherwise pass blob over the readAsDataURL method. Please try this:
audioElement.src = URL.createObjectURL(encoder.finish());
let reader = new window.FileReader();
reader.readAsDataURL(recorder.getBlob()); // <----------------check this line
reader.onloadend = function() {
var audioBase64 = reader.result;
let audioTurned = audioBase64.substr(audioBase64.indexOf(',') + 1);
$("#audiofile").val(audioTurned);
};If you're using index.html demo then replace recorder with btnStartRecording.recordRTC.getBlob().
First off thank you very much for making an audio recorder that works in most browsers and iOS!!
The recording works great and produces a Blob URL. What I am in need of is to convert that URL to Base64, set the value of a hidden element to that, then send that to my processor.php file. I do not want to do this via formdata, as when I do that the page submits immediately. The audio recording is being done in a step by step process which is why I am looking to just grab the base64 data and assign it to a hidden form element which will be available when the form is ready to submit.
I've tried the following but it returns Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'
I am currently using Example 3 for the browser/iOS support. In the StopBtnRecord functionality, I am adding this.
audioElement.src = URL.createObjectURL(encoder.finish()); let reader = new window.FileReader(); reader.readAsDataURL(audioElement.src); reader.onloadend = function() { var audioBase64 = reader.result; let audioTurned = audioBase64.substr(audioBase64.indexOf(',')+1); $("#audiofile").val(audioTurned); };