getUserMediaからオーディオストリームを録音する

Question

最近、私はオーディオストリームを記録するためにjavascriptを使用しようとしました。 動作するサンプルコードがないことがわかりました。

対応ブラウザはありますか？ここで

は私のコードは、現在、音声のみ許可していないバグがあり

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

あなたはこのサイトをチェックすることができます。

Answer 2

です。参照してくださいhttp://code.google.com/p/chromium/issues/detail?id=112367

Answer 3

現在、これはサーバー側にデータを送信しなければ不可能です。しかし、ブラウザですぐにMediaRecorder working draftのサポートが開始されると、これはすぐに可能になります。 https://webaudiodemos.appspot.com/AudioRecorder/index.html

これは、クライアント側のファイル（.WAV）にオーディオを格納します。

Answer 4

getUserMediaではデバイスにアクセスできますが、オーディオを録音するのはあなたの責任です。これを行うには、デバイスの「聞き取り」を行い、データのバッファを構築したいと思うでしょう。その後、デバイスの再生を停止すると、そのデータをWAVファイル（または他の形式）としてフォーマットすることができます。フォーマットが完了したら、それをサーバー、S3にアップロードするか、ブラウザで直接再生できます。

バッファを構築するのに便利な方法でデータを聴くには、ScriptProcessorNodeが必要です。 ScriptProcessorNodeは、基本的に入力（マイク）と出力（スピーカー）の間にあり、オーディオデータをストリームとして扱う機会を与えます。残念ながら、実装は簡単ではありません。

あなたが必要があります：

• getUserMediaをMediaStreamAudioSourceNodeを作成するためのデバイス
• AudioContextとストリーミングへのアクセスを取得するには、オーディオストリーム
• ScriptProcessorNodeを表現するScriptProcessorNode
• MediaStreamAudioSourceNodeにアクセスするにはオーディオデータをオンデュアルプロセッサで処理する。このイベントは、バッファを構築するチャネルデータを公開します。

すべて一緒にそれを置く：

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

をむしろこの自分のすべてを構築するよりも、私はあなたが素晴らしいですAudioRecorderコードを、使用することをお勧め。 WAVファイルへのバッファの書き込みも処理します。 Here is a demo。

もう1つはgreat resourceです。

Answer 5

MediaRecorder APIをサポートするブラウザでは、それを使用してください。MediaRecorder APIをサポートしていない古いブラウザ用

、それは

1. wav
   • すべてのコードのクライアント側として行うには3つの方法があります。
   • 非圧縮記録です。
   • ソースコード - >http://github.com/mattdiamond/Recorderjs
2. mp3
   • すべてのコードのクライアント側として。
   • 圧縮記録。
   • ソースコード - opus packetsとして>http://github.com/Mido22/mp3Recorder
3. は
   • クライアントとサーバ（node.js）コード（wav、mp3またはoggとして出力を得ることができます）。
   • 圧縮記録。
   • ソースコード - >http://github.com/Mido22/recordOpus