note63

事情

WebAudioAPIを使ってみた

授業の課題の延長で使ってみました.

Web Audio API is 何?

単純に言うとHTML5で追加されたaudioタグが貧弱だから強化しようぜってことらしいです.
この記事が非常にわかりやすかったです.

記事でも言及されていますがWeb Audio APIは単純な話がAudioNode(というプロトタイプ)を継承した様々なプロトタイプをつなぎあわせて音を加工したり,出したりするという仕組みになっています.

試しに使ってみる

例としてマイクから入力された音声をスピーカーに出力させてみます.
コードは以下

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

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

getMediaからマイクやカメラへのアクセスを取得します.
カメラを使う場合は{video:true, audio:true}とします.

メディアを取得できると第二引数の関数が呼ばれ,MediaStream型の変数が引数として渡されます.
そしてこれとcreateMediaStreamSourceメソッドを使ってMediaElementAudioSourceNode型の変数を取得します.
最初は型を意識する必要はあまり無いですが,一言でいうとマイクからの入力音声を出力するノードということになります.

そしてこのAudioContextとはこの音声処理を扱うための変数で,Web Audio APIでは入力,加工,出力まで一つのコンテキストだけでやりくりできるように設計されています.
その辺は軽くこの記事で言及されています.

最後に入力ノードであるマイク(source)と出力ノードであるスピーカー(context.destination)をconnectメソッドでつなぎます.
AudioNode型はすべてconnect,disconnectというメソッドを持っていて,これらを使ってノードの結合を操作できます.

まとめ

WebAudioAPIはまだ策定中なのにドキュメントの日本語訳とかもあってわりと簡単に勉強することが出来た(見つけるのに時間がかかったけど).
課題で使うのでたぶんまたなんか書きます.

参考