Record Audio Stream von getUserMedia

Question

In den letzten Tagen habe ich versucht, Javascript zu verwenden, um Audio-Stream aufzuzeichnen. Ich habe festgestellt, dass es keinen Beispielcode gibt, der funktioniert.

Gibt es einen Browser, der unterstützt?

Hier ist mein Code

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || 
         navigator.mozGetUserMedia || navigator.msGetUserMedia; 

navigator.getUserMedia({ audio: true }, gotStream, null); 
function gotStream(stream) { 

     msgStream = stream;   
     msgStreamRecorder = stream.record(); // no method record :(
} 

Answer 1

Sie könnten diese Website überprüfen: https://webaudiodemos.appspot.com/AudioRecorder/index.html

Es speichert die Audiodaten in einer Datei (.wav) auf der Client-Seite.

Answer 2

Es ist ein Fehler, die derzeit nicht nur Audio erlaubt. Bitte beachten Sie http://code.google.com/p/chromium/issues/detail?id=112367

Answer 3

Derzeit ist dies nicht möglich, ohne die Daten an die Server-Seite zu senden. Dies würde jedoch bald im Browser möglich sein, wenn sie die MediaRecorder working draft unterstützen.

Answer 4

getUserMedia gibt Ihnen Zugriff auf das Gerät, aber es liegt an Ihnen, das Audio aufzuzeichnen. Um dies zu tun, sollten Sie dem Gerät "zuhören" und einen Puffer für die Daten erstellen. Wenn Sie dann aufhören, das Gerät zu hören, können Sie diese Daten als WAV-Datei (oder jedes andere Format) formatieren. Nach dem Formatieren können Sie es auf Ihren Server, S3, hochladen oder direkt im Browser abspielen.

Um die Daten auf eine Weise zu hören, die für die Erstellung Ihres Puffers nützlich ist, benötigen Sie einen ScriptProcessorNode. Ein ScriptProcessorNode befindet sich im Grunde zwischen dem Eingang (Mikrofon) und dem Ausgang (Lautsprecher) und gibt Ihnen die Möglichkeit, die Audiodaten während des Streams zu manipulieren. Leider ist die Implementierung nicht einfach.

Sie benötigen:

• getUserMedia auf das Gerät zuzugreifen
• AudioContext ein MediaStreamAudioSourceNode und ScriptProcessorNode
• MediaStreamAudioSourceNode zu erstellen, um den Audio-Stream darzustellen
• ScriptProcessorNode Zugang zum Streaming zu erhalten Audiodaten über ein Onaudioprozessesignal. Das Ereignis legt die Kanaldaten offen, mit denen Sie Ihren Puffer erstellen.

es Putting alles zusammen:

navigator.getUserMedia({audio: true}, 
    function(stream) { 
    // create the MediaStreamAudioSourceNode 
    var context = new AudioContext(); 
    var source = context.createMediaStreamSource(stream); 
    var recLength = 0, 
     recBuffersL = [], 
     recBuffersR = []; 

    // create a ScriptProcessorNode 
    if(!context.createScriptProcessor){ 
     node = context.createJavaScriptNode(4096, 2, 2); 
    } else { 
     node = context.createScriptProcessor(4096, 2, 2); 
    } 

    // listen to the audio data, and record into the buffer 
    node.onaudioprocess = function(e){ 
     recBuffersL.push(e.inputBuffer.getChannelData(0)); 
     recBuffersR.push(e.inputBuffer.getChannelData(1)); 
     recLength += e.inputBuffer.getChannelData(0).length; 
    } 

    // connect the ScriptProcessorNode with the input audio 
    source.connect(node); 
    // if the ScriptProcessorNode is not connected to an output the "onaudioprocess" event is not triggered in chrome 
    node.connect(context.destination); 
    }, 
    function(e) { 
    // do something about errors 
}); 

Anstatt alle diese selbst bauen Ich schlage vor, Sie verwenden, um die AudioRecorder Code, der fantastisch ist. Es behandelt auch das Schreiben des Puffers in eine WAV-Datei. Here is a demo.

Hier ist ein weiterer great resource.

Answer 5

für Browser, die MediaRecorder API unterstützen, verwenden Sie sie.

für ältere Browser, die nicht MediaRecorder API nicht unterstützt, gibt es drei Möglichkeiten, es

1. als wav
   • alle Client-Code-Seite zu tun.
   • unkomprimierte Aufnahme.
   • Quellcode ->http://github.com/mattdiamond/Recorderjs
2. als mp3
   • alle Client-Code-Seite.
   • komprimierte Aufnahme.
   • Quellcode ->http://github.com/Mido22/mp3Recorder
3. als opus packets
   • Client und Server (node.js) Code (ausgegeben als wav, mp3 oder ogg bekommen).
   • komprimierte Aufnahme.
   • Quellcode ->http://github.com/Mido22/recordOpus