読者です 読者をやめる 読者になる 読者になる

Webブラウザで端末のマイクやオーディオ入力の音を扱う:WebRTC

WebRTC / WebAudio API

以前の投稿webブラウザでwebカメラを使ってみようでは、WebRTCのgetUserMedia()関数を使って、端末のWebカメラのデータをブラウザに表示させました。

こんどは、同じくWebRTCのgetUserMedia()関数を使って、端末のマイクやオーディオ入力から取得した音データをWebブラウザで鳴らしてみます。

ブラウザの設定

  1. Chromeを起動して、アドレスバーに以下のアドレスを入力します。

     chrome://flags
    
  2. 「ウェブ音声入力」の項目を有効化します。(以下の状態にする)

f:id:slowquery:20130220020209p:plain

以上でブラウザの設定は終わりです。

コード

//getUserMedia()の汎用化
   navigator.getMedia = ( navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia );

//端末のビデオ、音声ストリームを取得
   navigator.getMedia ({ video:true, audio:true }, function(stream) {
       
       var context = new webkitAudioContext();
       var source = context.createMediaStreamSource(stream);
       source.connect(context.destination);

   }, function(err){ //エラー処理 });

ポイント

  1. WebRTCのgetUserMedia()関数の第一引数のJSONでaudiotrueにする

  2. WebAudio APIMediaStreamAudioSourceNodecreateMediaStreamSource()関数にWeb RTCのgetUserMedia()関数で取得したストリームデータを渡す。

あとは、WebAudio APIの使い方次第ですね。