将 Web Audio API 流发送到服务器端 Java 进行处理的最佳方式

Question

目前我有一个网站可以使用 Matt Diamond 的 recorder.js + getUserMedia (Web Audio API) 录制音频。客户端完成录制后，我通过 ajax post 将数据（以 .wav 格式）上传到文件系统。然后我的服务器端 java 将 data.wav 处理成其他格式。这很好用。

但是，我担心 ajax 帖子的性能/带宽问题，并想探索将数据直接流式传输到 java 代码或文件系统的选项。有人对如何将此客户端音频流（使用 getUserMedia 打开）传递给服务器端 Java 有任何建议吗？如果有什么不同，我们使用的是 spring 框架。

谢谢。

编辑：

这是请求的代码：

我将此添加到 recorder.js

    this.upload = function () {
        var data = new FormData();
        data.append('file', blob);

        $j.ajax({
            url :  "/Your_Path/To_PHP/action/UploadAudio/",
            type: 'POST',
            data: data,
            contentType: false,
            processData: false,
            success: function(data) {
                alert("Success");
            },    
            error: function() {
                alert("uploadFail");
           }
        });
     }

关于php代码：

        if($_GET['action'] == 'UploadAudio') {
            if (!file_exists('/audioArchiveDestination/subDirectory/')) {
                mkdir('/audioArchiveDestination/subDirectory/', 0777, true);
            }
            $filePath = "/audioArchiveDestination/subDirectory/";

            $filename = $_SESSION['member_id'].'_'.time();   //Can be anything
            $fileExtension = "wav";
            $uploadSuccess = move_uploaded_file($_FILES['file']['tmp_name'], $filePath.$filename.".wav");

            if($uploadSuccess) {
                $results = json_encode(array("filename" => $filename));
                echo $results;
            }
        }

Answer 1

您可以尝试在客户端对数据进行编码，从而减少带宽。此外，您可以在获得数据后立即发送数据。我认为 MediaRecorder（编码媒体的标准 API）目前仅在 Firefox 中可用，但我确信其他浏览器会实现它。无论如何，事情是这样的，您可以在每次调用 evt.data 的内容时将其发送到您的 java 应用程序。

<audio controls></audio>
<button></button>
<script>
  var v = document.querySelector("video");
  var b = document.querySelector("button");

  window.navigator.mozGetUserMedia({audio:true}, function(stream) {
    v.mozSrcObject = stream;
    v.play();

    var mediaRecorder = new MediaRecorder(stream);
    var chunks = [];

    b.addEventListener("click", function() {
        mediaRecorder.stop();
    });

    mediaRecorder.ondataavailable = function(evt) {
      chunks.push(evt.data);
      // or send evt.data using an XMLHttpRequest to the server
    };

    mediaRecorder.onerror = function(evt) {
      console.log('onerror fired');
    };

    mediaRecorder.onstop = function(evt) {
      console.log('onstop fired');
      // make a blob out of all the chunks
      var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
      // allow the user to download the opus file
      window.location.href = URL.createObjectURL(blob);
    };

    mediaRecorder.onwarning = function(evt) {
      console.log('onwarning fired');
    };

    v.addEventListener("loadedmetadata", function() {
      mediaRecorder.start();  
      v.play();
    });

    v.addEventListener("ended", function() {
      mediaRecorder.stop();
      mediaRecorder.requestData();
    });
  }, function() {
    alert("gUM failure")
  });
</script>