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

Chris Wilson
Chris Wilson

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

この機能を有効にするには、chrome://flags/ にアクセスして、下部にある [ウェブ オーディオ入力] を有効にし、ブラウザを再起動する必要があります。これで準備は完了です。

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

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

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