日曜プログラマー大歓迎 JavaScriptの部屋 第11回

JavaScriptなら1行でできる高速フーリエ変換

音楽を“見て”楽しむ――色と形に変換するプログラム

●登場人物

尾地定数（おじ･さだかず） 自称「日曜プログラマー」。芽衣のおじ。

開発芽衣（かいほつ･めい） 尾地のめいで、近所に住む中学生。

めい　ふんふんふん～♪
おじ　めい、ご機嫌だな。
めい　わっ、いるならいるって言ってよ。鼻歌聞かれて恥ずかしい///
おじ　すまんすまん、今週4月4日発売の週刊アスキーNo.1121『JavaScriptの部屋』の話してもいいかな？
めい　もちろん！　今回は、音楽を鳴らしながら、再生アプリなんかでよく見る棒グラフみたいなやつを表示するってネタだった。
おじ　こんなやつね。

めい　音楽に合わせて、ぴょこぴょこ動くという。これ、右の方へいくほど高い音が鳴ってるってことでいいのかな。
おじ　右のほうが周波数が高いっていうことだから、そうだね。
めい　見た目はおもしろいんだけど、今回のプログラムはなんか知らない言葉がいっぱいで難しかったよ……。
おじ　APIとか、ノードとか、フーリエ変換とかだね。松下師匠も言ってたけど、とりあえずは定義とか理論とかはわからなくても、使い方がわかればプログラムは組めるよね。「われわれ日曜プログラマーは、別にそれでもいいじゃん」っていう話でもある。
めい　まぁ、音楽を数字で表わしたいときはこうすればいい、ってのはわかったからね。
おじ　で、JavaScriptの便利なところは、そういうメソッド（命令）があるってことなんだ（注：ただし今回のプログラムは、IEでは動きません）。「1行で」というと言い過ぎかもしれないけど、音楽ファイルを読み込んで、ノードを作ったり配列変数を用意したりしたら、「.getByteFrequencyData（配列名）」というメソッドを実行するだけで今鳴ってる音の高速フーリエ変換ができちゃうんだから。
めい　ちょっと何言ってるのかわからないんですけど。
おじ　いやいや、教えてもらったからだいたいわかるはずだろ。
めい　たしか、グラフの棒の本数と太さも設定できるんだったよね。
おじ　そうそう、正確には、高速フーリエ変換のサイズというか解析の精度だな。グラフは描くときになんとでもなるから。下のグラフは、精度を上に掲載したグラフの4倍にしたもの。ちなみに今回のプログラムの場合、変換間隔は0.1秒ごとね。

めい　とにかく、その0.1秒ごとに音楽を0～255の数値として取り出せるわけだから、表示のしかたは自由ってことね。
おじ　なんか新しいビジュアルエフェクトが作れると楽しいかもね。
めい　せっかくキャンバスの使いかたを覚えたので、グラフじゃなくって、音の高さごとに円の大きさで描くとか。
おじ　色も利用できるよね。値が大きいほど明るいとか。色と言えば、今回はグラデーションの作り方も教えてもらったね。詳しくは週刊アスキーの誌面を見ていただくとして、グラデーションもJavaScriptでは、2色の間の色を自動で作ってくれるんだったね。いやーいろんな機能があって便利だな～。

めい　今回のプログラムは、内容は難しかったけど、142行程度の量で、しかも108行～139行はセレクトフォームの選択肢の表示に使っているから、ジャバスクリプトの部分は短めなんだね。
おじ　そうなるね。これを応用したプログラムができたらぜひ投稿してほしいね。投稿は以下のウェブページから。
めい　よろしくお願いしまーす。

アスキーJavaScriptプログラム募集要項

★アスキーの有料会員サービス「ASCII倶楽部」会員の方は、下記リンクをクリックすると直接ページが開きます。

日曜プログラマー大歓迎
JavaScriptの部屋

週刊アスキーNo.1121はBOOK☆WALKER、Kindle、kobo等電子書店で発売中!

週刊アスキー No.1121 (2017年4月4日発行）[Amazon]

電子版週刊アスキーの購入はこちらから