使用recorder.js

Question

我想上傳用下面的代碼所記錄的音頻上傳wav文件到我的服務器顯示最近記錄預覽的blob url。

使用帶錨標記的變量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); 
    }); 
}