I'm building a voice recorder program using html5 I have managed so far to record the voice and save the audio file as .wav I also can convert that file to a selected file format using ffmpeg. what I want to do is to let the user choose the format before recording so that when saving the audio file will be converted directly using ffmpeg into the selected format.I have been looking for demos for weeks and can't find anything if someone can help me with a demo please. thank you in advance this is my javascript code for uploading the saved audio as .wav in a folder named upload, and the fmpeg conversion, i'm missing the call of the file saved in the folder please:
function handleWAV(blob) {
if (currentEditedSoundIndex !== -1) {
$('#inFile2 tr:nth-child(' + (currentEditedSoundIndex + 1) + ')').remove();
}
var url = URL.createObjectURL(blob);
var li = document.createElement('li');
var au = document.createElement('audio');
var hf = document.createElement('a');
au.controls = true;
au.src = url;
hf.href = url;
hf.download = 'audio_recording_' + new Date().getTime() + '.wav';
hf.innerHTML = hf.download;
li.appendChild(au);
li.appendChild(hf);
inFile2.appendChild(li);
fileName=hf.download;
var reader = new FileReader();
reader.onload = function(event){
var fd = new FormData();
var Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav');
console.log("name = " + Name);
fd.append('fname', Name);
fd.append('data', event.target.result);
$.ajax({
type: 'POST',
url: 'upload.php',
data: fd,
processData: false,
contentType: false,
success: function(data){
//console.log(data);
}
});
};
reader.readAsDataURL(blob);
var fileBuffer;
// create ffmpeg worker
function getFFMPEGWorker() {
var ffmpegWorker = new Worker('worker.js');
ffmpegWorker.addEventListener('message', function(event) {
var message = event.data;
console.log(message.type);
if (message.type === "ready" && window.File && window.FileList && window.FileReader) {
// script loaded, hide loader
} else if (message.type == "stdout") {
console.log(message.data);
} else if (message.type == "stderr") {
console.log(message.data);
} else if (message.type == "done") {
var code = message.data.code;
console.log(code);
console.log(message.data);
var outFileNames = Object.keys(message.data.outputFiles);
console.log(outFileNames);
if (code == 0 && outFileNames.length) {
var outFileName = outFileNames[0];
console.log(outFileName);
var outFileBuffer = message.data.outputFiles[outFileName];
console.log(outFileBuffer);
var src = url;
console.log(url);
$("#downloadLink2").attr('href', src);
$("#download2").show();
} else {
$("#error").show();
}
}
}, false);
return ffmpegWorker;
}
// create ffmpeg worker
var ffmpegWorker = getFFMPEGWorker();
var ffmpegRunning = false;
if (ffmpegRunning) {
ffmpegWorker.terminate();
ffmpegWorker = getFFMPEGWorker();
}
ffmpegRunning = true;
// hide download div
$("#download2").hide();
// change download file name
var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);
var outFileName = fileName.substr(0, fileName.lastIndexOf('.')) + "." + getOutFormat();
$("#downloadLink2").attr("download2", outFileName);
$("#downloadLink2").text(outFileName);
var arguments = [];
arguments.push("-i");
arguments.push(fileName);
arguments.push("-b:a");
arguments.push(getBitrate());
switch (getOutFormat()) {
case "mp3":
arguments.push("-acodec");
arguments.push("libmp3lame");
arguments.push("out.mp3");
break;
case "wma":
arguments.push("-acodec");
arguments.push("wmav1");
arguments.push("out.asf");
break;
case "pcm":
arguments.push("-f");
arguments.push("s16le");
arguments.push("-acodec");
arguments.push("pcm_s16le");
arguments.push("out.pcm");
}
ffmpegWorker.postMessage({
type: "command",
arguments: arguments,
files: [
{
"name": fileName,
"buffer": fileBuffer
}
]
});
function getOutFormat() {
return $('input[name=format]:checked').val();
}
function getBitrate() {
return $('input[name=bitrate]:checked').val();
}
function readInputFile(file) {
// load file content
var reader = new FileReader();
reader.onload = function(e) {
fileName = file.name;
console.log(fileName);
fileBuffer = e.target.result;
}
reader.readAsArrayBuffer(file);
}
function handleFileSelect(event) {
var files = event.target.files; // FileList object
console.log(files);
// files is a FileList of File objects. display first file name
file = files[0];
console.log(file);
if (file) {
readInputFile(file);
console.log(file);
}
}
// setup input file listeners
el=document.getElementById('inFile2');
el.addEventListener('change',handleFileSelect, true);
}
note that this code was taken from a demo where the user upload the file to be converted by browisng it, I just want to cancel the browsing process and upload the saved file directly
