javascript - 如何使用 recorder.js、getUserMedia 和 blob.slice 正确切片音频文件？

Question

我正在使用 HTML5 构建一个简单的录制应用程序，并且我正在尝试将文件分成更小的部分并将每个部分保存到 Web 服务器以模拟实时流媒体？我已经获得了记录和分割的代码，但由于某种原因，只有第一个切片会记录。其余的有数据但不会播放(至少在vlc中不会)

这是代码:

 window.URL = window.URL || window.webkitURL;
  navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    var audio = document.querySelector('audio');


  var context = new webkitAudioContext();
  var recorder;
  var lastByte = 0;
  var intv;
  var fileCount = 1;

  var onFail = function(e) {
    document.getElementById("results").innerHTML = "An error Occured<br />" + e;
  };

  var onSuccess = function(s) {
    var mediaStreamSource = context.createMediaStreamSource(s);
    recorder = new Recorder(mediaStreamSource);
    recorder.record();
    intv = setInterval(function(){getSnippet();} , 3000);
  }

  function startRecording() {
    if (navigator.getUserMedia) {
        document.getElementById("results").innerHTML = "Starting....";
        navigator.getUserMedia({audio: true}, onSuccess, onFail);
    } 
    else {
      document.getElementById("results").innerHTML = "Get User Media not Present/Active";
    }
  }

  function stopRecording() {
        recorder.stop();
        clearInterval(intv);
        recorder.exportWAV(function(s) { console.log(s);
        saveSnippet(s, "Final"); 
        audio.src = window.URL.createObjectURL(s);
        });

  }

  function getSnippet(){
    recorder.exportWAV(function(s) { 
        //Slice the unsaved part of the file
        slc = s.slice(lastByte, s.size, s.type );
        console.log("Start: " + lastByte + "; End: " + s.size + "; FileName:  " + fileCount);
        saveSnippet(slc, fileCount); 
        lastByte = s.size;
        fileCount++;
        });
    //recorder.exportWAV(function(s) { saveFile(s); });
  }

  function saveSnippet(s, fname){
    var fd = new FormData();
    fd.append('fname', fname + '.wav');
    fd.append('fileToUpload', s);
    $.ajax({
        url: 'savefile.php',
        type: 'POST',
        data: fd,
        processData: false,
        contentType: false,
        success: function(data){ document.getElementById("results").innerHTML = "File Saved: <br />" + data;},
        error: function(jqXHR, textStatus, errorMessage) {  document.getElementById("results").innerHTML = errorMessage; }
    });
  }

是不是我做错了什么，为什么第一个文件会记录但没有后续文件？ 我是一个完全的新手，所以请温柔。如果有更好的方法来做到这一点，我洗耳恭听!

根据要求，这里是 savefile.php 的代码

    if(count($_FILES) > 0 ){
    echo "Data Found<br />";
    echo $_FILES['fileToUpload']['tmp_name'];
    $fl = file_get_contents($_FILES['fileToUpload']['tmp_name']);
    echo "<br />File Uploaded: " . file_put_contents("uploads/" . $_POST['fname'], $fl, FILE_APPEND);
}

Answer 1

我也在努力。 recorder.js 的这个分支已经做到了这一点:创建一个可通过链接下载的 blob。 https://github.com/mattdiamond/Recorderjs

这个另一个 fork 确实通过 api 调用上传到服务器，这可以根据您的需要进行修改。这个 fork 的另一个好处是 swf 记录器版本，它允许所有浏览器轻松记录。 https://github.com/jwagener/recorder.js

所以他们需要合并^^