使用 ffmpeg 和 html5 构建录音机

Question

我正在使用 html5 构建一个录音机程序，到目前为止我已经设法录制语音并将音频文件保存为 .wav 我还可以使用 ffmpeg 将该文件转换为选定的文件格式。我想要做的是让用户在录制之前选择格式，以便在保存音频文件时直接使用 ffmpeg 将其转换为所选格式。我一直在寻找演示数周，如果有人可以找到任何东西请帮我做一个演示。 先感谢您 这是我的 javascript 代码，用于将保存的音频作为 .wav 上传到名为 upload 的文件夹中，以及 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);

 }

请注意，此代码取自用户通过浏览上传要转换的文件的演示，我只想取消浏览过程并直接上传保存的文件

Answer 1

您必须先保存您的音频格式。比允许用户选择常见的音频格式并将其应用于 ffmpeg CLI 字符串：

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

More about arguments here

Answer 2

我相信您尝试做的事情可以使用 ajax 请求来实现。首先，您必须为用户创建一个输入，可能是一个 FORM，并在表单中分配音频和文件格式类型，然后将其提交给服务器并进行转换。

这是一个链接Uploading recorded blob via AJAX，可以帮助您处理 ajax 请求。