Webブラウザで端末のマイクやオーディオ入力の音を扱う:WebRTC
WebRTC / WebAudio API
以前の投稿webブラウザでwebカメラを使ってみようでは、WebRTCのgetUserMedia()
関数を使って、端末のWebカメラのデータをブラウザに表示させました。
こんどは、同じくWebRTCのgetUserMedia()
関数を使って、端末のマイクやオーディオ入力から取得した音データをWebブラウザで鳴らしてみます。
ブラウザの設定
Chromeを起動して、アドレスバーに以下のアドレスを入力します。
chrome://flags
「ウェブ音声入力」の項目を有効化します。(以下の状態にする)
以上でブラウザの設定は終わりです。
コード
//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){ //エラー処理 });
ポイント
WebRTCの
getUserMedia()
関数の第一引数のJSONでaudio
をtrue
にするWebAudio APIの
MediaStreamAudioSourceNode
のcreateMediaStreamSource()
関数にWeb RTCのgetUserMedia()
関数で取得したストリームデータを渡す。
あとは、WebAudio APIの使い方次第ですね。