WebGL + three.js + Web Audio API をいじって音を鳴らす。

公開:2013-09-15 21:42
更新:2020-02-15 04:37
カテゴリ:web audio api,javascript,html5,audio,web 2d shooting game

Web Audio APIで波形メモリ音源をエミュレートする

ゲームを作るうえで避けて通れないのがサウンドであり、私にとってかなり興味のある部分でもある。Web Audio APIの出現によって貧弱であったブラウザのサウンド機能も強力になりつつある。波形メモリ音源などわけなくできるだろうと思っていろいろいじって何とか音が出るようになった。g200kgさんの「Web Audio API 解説」がとても参考になった。 一応4ビット波形メモリ音源(ナムコ)風の音がでるように作ってみた。中身のつくりはまるで異なるけれども。Web Audio APIを使った時点でデフォルトで動作するのはChromeだけとなる。Web GLに比べてやはり対応は遅れている。サウンドはなにかと後回しなんだよなぁ。。「ZSXDCVGBHNM<」キーを押すと音が鳴り、1-8キーで音色を切り換えることができる。音色は「いかにも」といった感じの音がする。今は単音だけれども8音くらいは同時に出したいよねぇ。やっぱり。

波形の再生はオシレータ・ノードやスクリプトプロセッサーノードを使用せず、バッファー・バッファーノードを使って再生している。ループのつなぎ目が悪いのか音が少し歪むというかプチノイズが入ってしまっている。何か凡ミスをしているのかもしれない。スクリプトプロセッサーを使ったほうがよさそうだけれども、パフォーマンス面が気になる

オシレーター・ノードのカスタム波形は倍音加算方式で合成する。サンプリング波形をフーリエ変換してan,bnの係数を求めてやれば複雑な波形も再現できる。細かいことは忘れたな、すっかり。理論的にはどんな波形でも合成できるというやつだが、4096までなのでまあそこそこであろう。

音量はgainノードを使ってコントロールする。音量変化はエンベロープジェネレーターを自作しgainノードを制御して行う。そのあとフィルターノードを使って高周波をカットし、コンプをリミッター代わりにかけている。このあたりはモジュラー・トラッカーで慣れているのでそんなに悩むこともなかった。

続いてシーケンサーを作ろうかなと思っているけれども、この時間管理がWeb Audio APIでは独特であるので理解するのにもう少し時間がかかる。APIにうまくタイミング・コントロールさせるようにしないとやっぱりテンポがボロボロになると思うのでここはしっかり理解してから進めたい。