Question

目前我有一个可以使用Matt Diamond的recorder.js + getUserMedia（Web Audio API）录制音频的网站。客户端完成录制后，我将数据（在.wav中）通过ajax帖子上传到文件系统。然后我的服务器端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>

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

1 个答案: