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

 }

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

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请求。

使用ffmpeg和html5构建录音机

2 个答案: