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

Chris Wilson
Chris Wilson
X

昨日の Chrome Canary ビルド（23.0.1270.0）に追加された新機能がとても楽しみです。macOS でマイクやその他の音声入力からライブ音声に低レイテンシでアクセスできる機能です。（Windows ではまだ有効になっていません。現在、対応に向けて取り組んでいます）。

これを有効にするには、chrome://flags/ に移動し、下部にある [Web Audio Input] 項目を有効にしてブラウザを再起動します。これで準備完了です。

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

Web Audio のコーダー向けに、音声入力ストリームをリクエストし、任意の処理グラフに接続するノードを取得する方法について説明します。

// 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 用に作成したボコーダーに、入力ソースとしてライブ音声を追加しました。モジュレータで [ライブ入力] を選択するだけです。モジュレータのゲインとシンセのレベルを調整する必要がある場合があります。処理が原因で若干の遅延が生じます（入力レイテンシが原因ではありません）。ライブ音声入力が設定できたので、もう一度調整を行いましょう。

最後に、ウェブ オーディオのデモのコレクションもご覧ください。この記事を読んでいる頃には、ライブ オーディオのデモがさらに追加されているかもしれません。