Web Audio API の Oscillator で楽器を作りたい話
この記事は賞味期限切れです。（更新から1年が経過しています）
横浜で行われたHTML5飯でWeb Audio APIでモールス信号を表現してみる話をさせて頂いたのが今月頭の話。 その際に「Oscillator使えばよい」というアドバイスを頂いたので調べてみたところ、 「これで楽器をつくってみたい」と思って試してみた話を Yokohama.js でしゃべらせていただきました。
Oscillator で楽器を作りたい！
こちらが当日の資料です。ざっくり言うと…
- Oscillator はオシレーターであってオスシレーターではない
- Oscillator は周波数・デチューン・波形をいじることでいろんな音になる
- 作ってみた物の紹介・デモ
といった内容をお話しました。
作ってみたデモ（Oscy.js）
そして作ってみたデモがこちら。 触ると音が出るのでご注意ください。
Web Audio API に対応していない環境ではウンともスンとも言わないどころか描画もしませんのでご了承ください。 デスクトップのChromeやFirefox、iOS Safariなどで動きます。 Android は Chrome等であれば動くようです。
Oscillator の使い方をものすごくざっくり説明する
環境によってクラス名やメソッド名が違ったりするのでご注意ください。 AudioContext が webkitAudioContext だったり、createGain が createGainNode だったりします。
とりあえず鳴らす
まずはじめにAudioContextを用意します。
var context = new AudioContext();
次に、Oscillatorノード（音を生成する人）と Gainノード（音量を調節する人）を用意します。
var oscillator = context.createOscillator();
var gain = context.createGain();
これらを出力先（destination）に接続します。Gainノードは生成元と出力先の間に挟まってエフェクタのように機能します。
// oscillator => gain => destination
oscillator.connect(gain);
gain.connect(context.destination);
音を出します。
oscillator.start(0); // < プーーーーーーーーー
音を変えてみる
周波数（frequency）・デチューン（detune）・波形（type）を変える事で様々な音に変化します。 音量の調節は Gainノードで行います。
// AからA#の音にかわります
oscillator.frequency.value = (440 * 1.06);
// 微妙に音高がかわります
oscillator.detune.value = 100;
// "sine" から "triangle" の音に変わります。少し硬い音になります。
oscillator.type = "triangle";
// 音量の調節はGainノードで調節します。
gain.gain.value = 0.5;
調べていきたい事・課題など
リバーブエフェクト
デモでは音量をイージング関数でいじって似非リバーブエフェクトをかけていますが、 Convolver を使う事でより自然な音響効果を付与する事が出来るようです。 その為には音響効果の元となるインパルスレスポンス（IR）データが必要になります。 IRデータをシェアするWebサイト等もあるので参考にしてみましょう。
自作の波形テーブル
createPeriodicWave / setPeriodicWave を使用して自作の波形テーブルを指定する事で様々な音色を出すことができます。 が、スペクトラムとかハーモニクスとかフーリエとかちょっとなにいってんのかぜんぜんわかんないので、今度の課題にしましょう。
Chromiumのリポジトリに波形テーブルのサンプルがありましたので、こちらも参考まで。
まとめ
音の生成はちょっと踏み込むとドツボにはまりそうな奥深さがありますが、かなり面白いテーマですね。 またアップデートしていきたいと思います。
コメント