javascript - 使用 recorder.js 将 wav 文件上传到我的服务器

Question

我正在尝试使用以下代码上传录制的音频:

(function(window){

  var WORKER_PATH = '../js/recorderjs/recorderWorker.js';

  var Recorder = function(source, cfg){
    var config = cfg || {};
    var bufferLen = config.bufferLen || 4096;
    this.context = source.context;
    if(!this.context.createScriptProcessor){
       this.node = this.context.createJavaScriptNode(bufferLen, 2, 2);
    } else {
       this.node = this.context.createScriptProcessor(bufferLen, 2, 2);
    }

    var worker = new Worker(config.workerPath || WORKER_PATH);
    worker.postMessage({
      command: 'init',
      config: {
        sampleRate: this.context.sampleRate
      }
    });
    var recording = false,
      currCallback;

    this.node.onaudioprocess = function(e){
      if (!recording) return;
      worker.postMessage({
        command: 'record',
        buffer: [
          e.inputBuffer.getChannelData(0),
          e.inputBuffer.getChannelData(1)
        ]
      });
    }

    this.configure = function(cfg){
      for (var prop in cfg){
        if (cfg.hasOwnProperty(prop)){
          config[prop] = cfg[prop];
        }
      }
    }

    this.record = function(){
      recording = true;
    }

    this.stop = function(){
      recording = false;
    }

    this.clear = function(){
      worker.postMessage({ command: 'clear' });
    }

    this.getBuffers = function(cb) {
      currCallback = cb || config.callback;
      worker.postMessage({ command: 'getBuffers' })
    }

    this.exportWAV = function(cb, type){
      currCallback = cb || config.callback;
      type = type || config.type || 'audio/wav';
      if (!currCallback) throw new Error('Callback not set');
      worker.postMessage({
        command: 'exportWAV',
        type: type
      });
    }

    this.exportMonoWAV = function(cb, type){
      currCallback = cb || config.callback;
      type = type || config.type || 'audio/wav';
      if (!currCallback) throw new Error('Callback not set');
      worker.postMessage({
        command: 'exportMonoWAV',
        type: type
      });
    }

    worker.onmessage = function(e){
      var blob = e.data;
      currCallback(blob);
    }

    source.connect(this.node);
    this.node.connect(this.context.destination);   // if the script node is not connected to an output the "onaudioprocess" event is not triggered in chrome.
  };

  Recorder.setupDownload = function(blob, filename){
    var url = (window.URL || window.webkitURL).createObjectURL(blob);
    var link = document.getElementById("save");
    var audioinput = document.getElementById("audioinput");
    link.href = url;
    link.download = filename || 'output.wav';
  }

  window.Recorder = Recorder;

})(window);

我正在使用 recorder.js

变量 link.href 生成一个 blob url，显示最近录制的预览。

当使用带有 anchor 标记的变量 link.download 下载文件时，代码工作完美，但由于用户是录制音频的人，我想在录制结束后将其上传到我的服务器，我不知道该怎么做。

有什么帮助吗？

编辑:(工作代码)

    (function(window){

      var WORKER_PATH = '../js/recorderjs/recorderWorker.js';

      var Recorder = function(source, cfg){
        var config = cfg || {};
        var bufferLen = config.bufferLen || 4096;
        this.context = source.context;
        if(!this.context.createScriptProcessor){
           this.node = this.context.createJavaScriptNode(bufferLen, 2, 2);
        } else {
           this.node = this.context.createScriptProcessor(bufferLen, 2, 2);
        }

        var worker = new Worker(config.workerPath || WORKER_PATH);
        worker.postMessage({
          command: 'init',
          config: {
            sampleRate: this.context.sampleRate
          }
        });
        var recording = false,
          currCallback;

        this.node.onaudioprocess = function(e){
          if (!recording) return;
          worker.postMessage({
            command: 'record',
            buffer: [
              e.inputBuffer.getChannelData(0),
              e.inputBuffer.getChannelData(1)
            ]
          });
        }

        this.configure = function(cfg){
          for (var prop in cfg){
            if (cfg.hasOwnProperty(prop)){
              config[prop] = cfg[prop];
            }
          }
        }

        this.record = function(){
          recording = true;
        }

        this.stop = function(){
          recording = false;
        }

        this.clear = function(){
          worker.postMessage({ command: 'clear' });
        }

        this.getBuffers = function(cb) {
          currCallback = cb || config.callback;
          worker.postMessage({ command: 'getBuffers' })
        }

        this.exportWAV = function(cb, type){
          currCallback = cb || config.callback;
          type = type || config.type || 'audio/wav';
          if (!currCallback) throw new Error('Callback not set');
          worker.postMessage({
            command: 'exportWAV',
            type: type
          });
        }

        this.exportMonoWAV = function(cb, type){
          currCallback = cb || config.callback;
          type = type || config.type || 'audio/wav';
          if (!currCallback) throw new Error('Callback not set');
          worker.postMessage({
            command: 'exportMonoWAV',
            type: type
          });
        }

        worker.onmessage = function(e){
          var blob = e.data;
          currCallback(blob);
        }

        source.connect(this.node);
        this.node.connect(this.context.destination);   // if the script node is not connected to an output the "onaudioprocess" event is not triggered in chrome.
      };
    Recorder.setupDownload = function(blob, filename) {

    //Download button
      //var url = (window.URL || window.webkitURL).createObjectURL(blob);
        //var link = document.getElementById("save");
        //link.href = url;
        //link.download = filename || 'output.wav';
    //

      var fd = new FormData();
      fd.append('fname', filename);
      fd.append('data', blob);
      $.ajax({
        type: 'POST',
        url: 'upload.php',
        data: fd,
        processData: false,
        contentType: false,
      }).done(function(data) {
        console.log(data);
      });
    }

  window.Recorder = Recorder;

})(window); 

PHP 文件:

$p_audio = $_POST['data'];
$p_audio_name = $_FILES['data']['name'];
$p_audio_type = $_FILES['data']['type'];
$p_audio_temp = $_FILES['data']['tmp_name'];

$id1 = mt_rand(0, 9999999);
$id2 = mt_rand(0, 9999999);
$id3 = mt_rand(0, 9999999);
$id4 = mt_rand(0, 9999999);
$id5 = mt_rand(0, 9999999);
$id6 = mt_rand(0, 9999999);
$id7 = mt_rand(0, 9999999);
$id8 = mt_rand(0, 9999999);
$id9 = mt_rand(0, 9999999);
$id10 = mt_rand(0, 9999999);
$id11 = mt_rand(0, 9999999);

    //Conditionals
    if ($p_audio_type === "audio/wav" || $p_audio_type === "audio/wave" || $p_audio_type === "audio/x-wave" || $p_audio_type === "audio/vnd.wave"){$p_audio_type = ".wav";
     move_uploaded_file($p_audio_temp, "../yourmedia/".$id1.$id2.$id3.$id4.$id5.$id6.$id7.$id8.$id9.$id10.$id11.$p_audio_type);
   }
    if ($p_audio_type === "audio/wav" || $p_audio_type === "audio/wave" || $p_audio_type === "audio/x-wave" || $p_audio_type === "audio/vnd.wave"){$p_audio_type = ".wav";
     move_uploaded_file($p_audio_temp, "../yourmedia/".$id1.$id2.$id3.$id4.$id5.$id6.$id7.$id8.$id9.$id10.$id11.$p_audio_type);
   }

Answer 1

您可以 upload the blob使用 jQuery ajax()

Recorder.setupDownload = function(blob, filename) {
  var fd = new FormData();
  fd.append('fname', filename);
  fd.append('data', blob);
  $.ajax({
    type: 'POST',
    url: '/upload.php',
    data: fd,
    processData: false,
    contentType: false
  }).done(function(data) {
    console.log(data);
  });
}