ライブウェブ音声入力が有効

Chris Wilson 氏
Chris Wilson

昨日の Chrome Canary ビルド(23.0.1270.0)に追加された新機能には、OSX のマイクや他の音声入力から生の音声に低レイテンシでアクセスできるというものがあります。(Windows ではまだこの機能が有効ではありませんが、現在対応中です)。

この機能を有効にするには、chrome://flags/ に移動し、下部にある [Web Audio Input] アイテムを有効にして、ブラウザを再起動する必要があります。これで準備は完了です。

ライブ オーディオ入力をテストするには、ライブ入力ビジュアライザを使用して入力のスペクトルを確認します。

ウェブ オーディオ コーダーの方は、以下の手順で音声入力ストリームをリクエストし、任意の処理グラフに接続するためのノードを取得します。

// success callback when requesting audio input stream
function gotStream(stream) {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    var audioContext = new AudioContext();

    // Create an AudioNode from the stream.
    var mediaStreamSource = audioContext.createMediaStreamSource( stream );

    // Connect it to the destination to hear yourself (or any other node for processing!)
    mediaStreamSource.connect( audioContext.destination );
}

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia( {audio:true}, gotStream );

特に音楽空間では、低レイテンシの音声入力の可能性が数多くあります。この使用例は、私が一緒に投げたシンプルなピッチ検出器で、ギターを接続したり、マイクに口笛を吹いてみたりして簡単に確認できます。

約束したとおり、Google IO 用に作成した Vocoder に入力ソースとしてライブ音声を追加しました。[modulator] の下の [live input] を選択します。モジュレーターのゲインとシンセレベルの調整が必要な場合があります。処理のためにわずかな遅延が生じる(入力レイテンシではない)。ライブ 音声入力ができたので、もう一度調整します。

最後に、私のウェブ オーディオ デモのコレクションをご覧ください。この記事をお読みになる頃には、さらにライブ オーディオ デモをご用意しております。