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

我也在努力。这个记录器.js的分支已经完成了这个：创建一个可以通过链接下载的blob。 https://github.com/mattdiamond/Recorderjs

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

所以他们需要合并^^

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

1 个答案: