13

最近、私は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 :(
}
4

5 に答える 5

33

getUserMedia を使用するとデバイスにアクセスできますが、オーディオを録音するのはユーザー次第です。そのためには、デバイスを「リッスン」して、データのバッファーを構築する必要があります。次に、デバイスの再生を停止すると、そのデータを WAV ファイル (またはその他の形式) としてフォーマットできます。フォーマットしたら、サーバー、S3 にアップロードするか、ブラウザで直接再生できます。

バッファの構築に役立つ方法でデータをリッスンするには、ScriptProcessorNode が必要です。ScriptProcessorNode は、基本的に入力 (マイク) と出力 (スピーカー) の間に位置し、ストリーミング中にオーディオ データを操作する機会を提供します。残念ながら、実装は簡単ではありません。

あなたは必要になるでしょう：

  • デバイスにアクセスするためのgetUserMedia
  • MediaStreamAudioSourceNode とScriptProcessorNodeを作成する AudioContext
  • オーディオ ストリームを表す MediaStreamAudioSourceNode
  • ScriptProcessorNodeを使用して、onaudioprocessevent を介してストリーミング オーディオ データにアクセスします。このイベントは、バッファーを構築するチャネル データを公開します。

すべてを一緒に入れて：

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 ファイルへのバッファの書き込みも処理します。 ここにデモがあります。

別の優れたリソースを次に示します。

于 2013-10-08T02:34:45.830 に答える
2

このサイトを確認できます: https://webaudiodemos.appspot.com/AudioRecorder/index.html

オーディオはクライアント側のファイル (.wav) に保存されます。

于 2013-08-22T06:58:00.647 に答える
1

現在、音声のみを許可していないバグがあります。http://code.google.com/p/chromium/issues/detail?id=112367を参照してください

于 2012-08-30T08:46:16.667 に答える
-2

現在、サーバー側にデータを送信しない限り、これは不可能です。ただし、 MediaRecorder ワーキング ドラフトのサポートが開始されれば、これはブラウザですぐに可能になります。

于 2013-03-16T17:53:31.900 に答える