使用html5和javascript构建录音机

时间:2014-07-16 12:49:40

标签: javascript ffmpeg html5-audio

我想使用与gitHub JSSoundecorder中的HTML5相同的HTML5构建录音机,但我想要的是用户能够在录制语音之前选择文件格式。我可以使用ffmpeg来完成此操作。换句话说,用户必须能够通过复选框(mp3,wma,pcm)选择音频格式,并且在后台代码中,通常由程序创建的.wav文件而不是显示它,它应该按格式转换选中,然后以新格式显示。这是我们可以使用的ffmpeg代码,但我不知道如何获取.wav音频文件来转换它并显示它。如果有人有想法,或者如果能找到演示我一直在寻找几周。这是ffmpeg代码:

   var fileName;
   var fileBuffer;

   function timeToSeconds(time) {
      var parts = time.split(":");
      return parseFloat(parts[0]) * 60 * 60 + parseFloat(parts[1]) * 60 + parseFloat(parts[2]) + parseFloat("0." + parts[3]);
  }

  // create ffmpeg worker
  function getFFMPEGWorker() {
      // regexps for extracting time from ffmpeg logs
      var durationRegexp = /Duration: (.*?), /
      var timeRegexp = /time=(.*?) /;
      var duration;

      var ffmpegWorker = new Worker('worker.js');
      var durationLine;
      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
              $('#loading').hide();
          } else if (message.type == "stdout") {
              console.log(message.data);
          } else if (message.type == "stderr") {
              console.log(message.data);
              // try to extract duration
              if (durationRegexp.exec(message.data)) {
                  duration = timeToSeconds(durationRegexp.exec(message.data)[1]);
              }
              // try to extract time
              if (timeRegexp.exec(message.data)) {
                  var time = timeToSeconds(timeRegexp.exec(message.data)[1]);
                  if (duration) {
                      $("#progress").text("Progress: " + Math.floor(time / duration * 100) + "%");
                      $("#progress").show();
                  }
              }
          } else if (message.type == "done") {
              var code = message.data.code;

             console.log(message.data);
              var outFileNames = Object.keys(message.data.outputFiles);

              console.log(outFileNames);
              if (code == 0 && outFileNames.length) {
                  var outFileName = outFileNames[0];

                  var outFileBuffer = message.data.outputFiles[outFileName];

                  var src = window.URL.createObjectURL(new Blob([outFileBuffer]));

                  $("#downloadLink").attr('href', src);
                  $("#download").show();
              } else {
                  $("#error").show();
              }
              $("#converting").hide();
              $("#progress").hide();
          }
      }, false);
      return ffmpegWorker;
   }

   // create ffmpeg worker
   var ffmpegWorker = getFFMPEGWorker();
   var ffmpegRunning = false;

   $('#convert').click(function() {
      // terminate existing worker
      if (ffmpegRunning) {
          ffmpegWorker.terminate();
          ffmpegWorker = getFFMPEGWorker();
      }
      ffmpegRunning = true;

      // display converting animation
      $("#converting").show();
      $("#error").hide();

      // hide download div
      $("#download").hide();

      // change download file name
      var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);

      var outFileName = fileName.substr(0, fileName.lastIndexOf('.')) + "." + getOutFormat();

        $("#downloadLink").attr("download", outFileName);
      $("#downloadLink").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();
  }

  // disable conversion at start
  $('#convert').attr('disabled', 'true');

  function readInputFile(file) {
      // disable conversion for the time of file loading
      $('#convert').attr('disabled', 'true');

      // load file content
      var reader = new FileReader();
      reader.onload = function(e) {
          $('#convert').removeAttr('disabled');
          fileName = file.name;
        console.log(fileName);
          fileBuffer = e.target.result;
      }
      reader.readAsArrayBuffer(file);

  }

  // reset file selector at start
  function resetInputFile() {
      $("#inFile").wrap('<form>').closest('form').get(0).reset();
      $("#inFile").unwrap();
  }
  resetInputFile();

  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) {
          $("#drop").text("Drop file here");
          readInputFile(file);


      }
  }


  // setup input file listeners

  document.getElementById('inFile').addEventListener('change', handleFileSelect, false);

0 个答案:

没有答案