Javascript 使用ffmpeg和html5构建语音记录器

Javascript 使用ffmpeg和html5构建语音记录器,javascript,ffmpeg,html5-audio,Javascript,Ffmpeg,Html5 Audio,我正在使用html5构建一个语音录制程序。到目前为止,我已经成功地录制了语音并将音频文件保存为.wav。我还可以使用ffmpeg将该文件转换为选定的文件格式。我想做的是让用户在录制前选择格式,这样在保存音频文件时,可以直接使用ffmpeg将其转换为所选格式。我已经找了几个星期的演示,如果有人能帮我做演示,我什么也找不到。 先谢谢你 这是我的javascript代码,用于在名为upload的文件夹中上载保存为.wav的音频,以及fmpeg转换,我缺少对保存在文件夹中的文件的调用,请: functi

我正在使用html5构建一个语音录制程序。到目前为止,我已经成功地录制了语音并将音频文件保存为.wav。我还可以使用ffmpeg将该文件转换为选定的文件格式。我想做的是让用户在录制前选择格式,这样在保存音频文件时,可以直接使用ffmpeg将其转换为所选格式。我已经找了几个星期的演示,如果有人能帮我做演示,我什么也找不到。 先谢谢你 这是我的javascript代码,用于在名为upload的文件夹中上载保存为.wav的音频,以及fmpeg转换,我缺少对保存在文件夹中的文件的调用,请:

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

 }

请注意,此代码取自一个演示,用户通过浏览上传要转换的文件,我只想取消浏览过程,直接上传保存的文件。您必须先保存音频格式。然后,允许用户为音频选择常用格式并将其应用于ffmpeg CLI字符串:

// ffmpeg -i input.wav -f mp3 output.mp3
ffmpeg -i input.wav -f {$userFormat} output.{$userFormat}

我相信,使用ajax请求可以实现您的目标。首先,您必须为用户创建一个输入,可能是一个表单,并在表单中指定音频和文件格式类型,然后将其提交给服务器并进行转换


这里有一个链接可以帮助您处理ajax请求。

我希望用户先选择格式,然后再录制。我想做的是在后台代码中将音频文件保存为.wav,将其上传到一个文件夹中,调用该音频并使用ffmpeg进行转换,由于选择原因。但我的问题是,我无法再次调用该文件进行转换,我知道路径,但不知道如何调用它。@user3789242所以不要插入该文件的路径:
/usr/bin/generatedAudio/inputSomeRandomNumbers.wav
。你的链接引出了JS问题,你正在使用PHP(你不能直接从JS调用FFMpeg)。正如我前面所说,我设法将另存文件上载到一个文件夹中(使用ajax)我想要的是如何检索数据以便进行转换一种方法是在服务器中转换音频,当用户单击下载时,您可以将格式发送到服务器,转换并将文件发送回用户。另一种方法是以所需格式录制音频。是一个解释如何录制mp3格式的链接。您可以寻找可以帮助您获得更多格式的库。此外,您还可以使用javascript转换该文件。这里是一个实现该转换的方法。