如何使用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

這個其他的叉子通過API調用上傳到服務器，這是可以根據你的需要修改的。此叉的其他好處是一個瑞士法郎記錄器版本，它允許所有瀏覽器輕鬆記錄。 https://github.com/jwagener/recorder.js

因此，他們需要合併^^