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

Web Audio APIでAudioビジュアリゼーションをしてみよう@Homage to Rez

HTML5

HTML5 Advent Calendarの7日目です。

本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。ここでは、「HTML5」がテーマになります。他にも面白い記事が公開される予定ですので興味のある方は是非チェックしてみてください。

http://atnd.org/events/21987

今日はこれまで取り上げてきたWeb Audio APIの技術を組み合わせてAudioビジュアリゼーションをおこないます。
これまでのWeb Audio APIに関する記事はこちら↓

とりあえずデモ

マウスオーバーして動かしたり、クリックしたりすると音楽とビジュアルが反応します。
Firefoxで動作しません(><; 時間があるときに直します。IEってなにそれおいしいの?

これはなに?

これまで取り上げてきたWeb Audio APIの要素に加えて

  • 早送り
  • フィルター

を用いています。どちらもちょっとマイナーな機能なので以下で解説します。

早送り?

Web Audio APIで音楽の再生速度を上げるには、AudioBufferSourceNodeのplaybackRateという
そのまんまな名前のパラメーターを調整する必要があります。
具体的にはAudioBufferSourceを生成し、そのplaybackRate.valueを変更します。

var context = new AudioContext();
var source = context.createBufferSource();
source.buffer = audioBuffer;
//change rate of playback
source.playbackRate.value = 1.2 // default 1.0

動的に変更させることで早送りやスロー再生のような効果をつけることが出来ます。

フィルター?

音楽データには特定範囲の周波数を遮断するフィルターをかけることが出来ます。
フィルターをかけるにはBiquadFilterNodeを生成し、AudioBufferSourceNodeとAudioDestinationNodeの間に挟みこむ必要があります。

var context = new AudioContext();
var source = context.createBufferSource();
source.buffer = audioBuffer;

//create BiquadFilterNode.
var lowpass = context.createBiquadFilter();
//BiquadFilterNodeは使用する前にフィルターのタイプを指定する必要があります
lowpass.type = 0; //low-pass filter
//frequency.valueでフィルターの境界値を設定します。単位はHzです。
lowpass.frequency.value = 10000;

souce.connect(lowpass);
lowpass.connect(context.destination);

source.noteOn(0);

フィルターは8種類用意されています

  • LOWPASS
    • 設定されたfrequencyよりも高い周波数をカットします。
    • Qパラメーターでカットオフされる周波数のピークを設定します(?)この値を大きくするとより「とんがった」音が返ってきます。
  • HIGHPASS
    • 設定されたfrequencyよりも低い周波数をカットします。
    • QパラメーターはLOWPASSと同じです。
  • BANDPASS
    • 設定された帯域の周波数をカットします。
    • Qパラメーターでカットオフされる周波数の帯域を設定できます。
  • LOWSHELF
    • 設定された周波数を上限として、それ以下の周波数に対してgainパラメーターで指定しただけの音量の増大(もしくは減衰)を与えます。
    • gainパラメーターで対象の周波数に対するdBの増大(もしくは減衰)効果を与えられます。このパラメーターが0より大きい場合はdBを増大させます。
  • HIGHSHELF
    • 設定された周波数を下限として、それ以下の周波数に対してgainパラメーターで指定しただけの音量の増大(もしくは減衰)を与えます。
    • gainパラメーターはLOWSHELFと同じです。
  • PEAKING
    • 設定された周波数を中央値としてdBの増大(もしくは減衰)効果を与えられます。
    • Qパラメーターで効果を与える範囲を設定します。この値が大きくなるほど効果を与える範囲は狭くなります。
  • NOTCH
    • BANDPASSフィルターの逆で設定された範囲の周波数のみを通し、それ以外をカットします
    • Qパラメーターで効果を与える範囲を設定します。この値が大きくなるほど効果を与える範囲は狭くなります。
  • ALLPASS
    • すべての周波数を通過させますが、設定された周波数を中央値としてそれらの関係性を変更します。
    • Qパラメーターで相転移の際の急速さ(?)を設定します。

今回はこれらのNodeを用いてなつかしの音ゲーRezを意識したデモを作ってみました。
Web Audio APIにはこれ以外にもいろいろと面白いオブジェクトがありますので、是非forkして遊んでみてください :)