javascript - 将捕获的音频上传到服务器。 JS jQuery PHP

Question

我正在使用这个

<button onclick="startRecording(this);">record</button>
  <button onclick="stopRecording(this);" disabled>stop</button>

  <h2>Recordings</h2>
  <ul id="recordingslist"></ul>

  <h2>Log</h2>
  <pre id="log"></pre>

  <script>
  function __log(e, data) {
    log.innerHTML += "\n" + e + " " + (data || '');
  }

  var audio_context;
  var recorder;

  function startUserMedia(stream) {
    var input = audio_context.createMediaStreamSource(stream);
    __log('Media stream created.' );
    __log("input sample rate " +input.context.sampleRate);

    // Feedback!
    //input.connect(audio_context.destination);
    __log('Input connected to audio context destination.');

    recorder = new Recorder(input, {
                  numChannels: 1
                });
    __log('Recorder initialised.');
  }

  function startRecording(button) {
    recorder && recorder.record();
    button.disabled = true;
    button.nextElementSibling.disabled = false;
    __log('Recording...');
  }

  function stopRecording(button) {
    recorder && recorder.stop();
    button.disabled = true;
    button.previousElementSibling.disabled = false;
    __log('Stopped recording.');

    // create WAV download link using audio data blob
    createDownloadLink();

    recorder.clear();
  }

  function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
      /*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 = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);*/
    });
  }

  window.onload = function init() {
    try {
      // webkit shim
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);
      window.URL = window.URL || window.webkitURL;

      audio_context = new AudioContext;
      __log('Audio context set up.');
      __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
    } catch (e) {
      alert('No web audio support in this browser!');
    }

    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
      __log('No live audio input: ' + e);
    });
  };
  </script>

   <script src="js/jquery-1.11.0.min.js"></script>
  <script src="recordmp3.js"></script>

要捕获音频并提供 mp3 下载，但我真正需要做的是将录音上传到服务器，作为奖励，如果我可以在上传之前重命名文件，这将使它变得完美!无法展示我尝试过的示例，因为我不知道从哪里开始，非常感谢任何帮助。
流程将是捕获一些简短的录音，重命名它们，然后点击上传按钮，将它们作为 mp3 上传，然后重定向到成功页面。
完整代码在这里 https://github.com/Audior/Recordmp3js

Answer 1

您应该将数据作为 XMLHttpRequest 上传，但是在服务器端，您应该将其保存到具有自定义名称的文件中。这也更安全，因为您可以通过不指定路径很容易地避免文件遍历攻击(据我了解，其他人无法将文件上传到您的计算机/服务器，但是我仍然相信您应该使用这种方法，因为它很好地介绍了使用基本安全措施保护应用程序)。
您可以使用以下(修改后的)答案，取自 here , 做这项工作。 JS函数是这样的createDownloadLink应该注意修改:

function createDownloadLink() {
  recorder && recorder.exportWAV(function(blob) {
    // Generate the 'File'
    var data = new FormData();
    data.append('file', blob);

    // Make the HTTP request
    var oReq = new XMLHttpRequest();

    // POST the data to upload.php
    oReq.open("POST", 'upload.php', true);
    oReq.onload = function(oEvent) {
      // Data has been uploaded
    };
    oReq.send(data);
  });
}

但是，在 PHP 方面，您还应该进行一些修改，因为现在这是一个经典的文件上传，而不是一个将数据作为参数发送的 POST 请求。修改 upload.php像这样(有关移动上传文件的信息取自 here ):

<?php
// Make sure recordings folder exists
if(!is_dir("recordings")){
    $res = mkdir("recordings",0777); 
}

// Declare file name
$filename = 'recordings/' . 'audio_recording_' . date( 'Y-m-d-H-i-s' ) .'.mp3';

// Move the uploaded file to the directory
move_uploaded_file($_FILES['file']['tmp_name'], $filename));
?>