2

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);
}
4

1 に答える 1

3

私もそれに取り組んでいます。このrecorder.jsのフォークはすでにこれを行っています.リンクでダウンロードできるblobを作成しています. https://github.com/mattdiamond/Recorderjs

この他のフォークは、API 呼び出しを介してサーバーにアップロードします。これは、必要に応じて変更できます。このフォークの他の利点は、すべてのブラウザで簡単に記録できる swf レコーダー バージョンです。 https://github.com/jwagener/recorder.js

ということで、合体する必要があります(^^)

于 2013-06-23T17:27:57.177 に答える