Fork
7
Fav
16
View
2381
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • ES6 1053 lines
  • HTML 143 lines
  • CSS 145 lines

音声再生 + 高速フーリエ変換 + WebGL = ビジュアライザ

それはサウンドと3Dの融合

概要

HTML上での3Dプログラミングと音声の信号処理を融合した実験用のプログラムとなります。

AudioContextのScriptProcessorNodeを使用することにより生の波形を取得、 その波形に高速フーリエ変換を行うことにより周波数に変換、その周波数スペクトルに 編集を加えることのできるパラメトリックイコライザを実装しました。

更に高速フーリエ変換により得られた周波数情報をWebGLを使用して描画することにより ビジュアライザも実装してみました。

なお周波数解析に AnalyserNode は使っていません。

動作確認済み

とりあえず正常動作

  • Mac mini
  • Mac book air
  • Surface 3

注意!

  • 音がなります。
  • WebGL, AudioContext(ScriptProcessorNode), 高速フーリエ変換等の重量系の 処理を詰め込んでいるので激重です。 ある程度のスペックをもったマシーンで実行することをおすすめします。
  • 一部のマシーンで自動的に再生されない事があるようです。しばらく待っても音声が 再生されてない場合は再生ボタンを押して手動で再生を開始してください。

高速フーリエ変換

今回の実装ではCooley-Tukey型の高速フーリエ変換を実装しています。
素の離散フーリエ変換を使用すると N^2 のオーダーで処理されますが、 このアルゴリズムを使用することにより N log_2(N) のオーダーで 処理する事が出来ます。

このプログラミングではアルゴリズム的な複素数の周期性を利用して処理を改良、 複素数の掛け算を利用することにより再帰的な処理では N * log_2(N) / 2 回必要な Math.cos, Math.sin の呼び出しを1回ですむように改良してあります。

構成

前半に各種ユーティリティの処理を配置しています。

  • HTML5に関するもの
  • WebGLに関するもの
  • ベクトル、行列に関するもの
  • 信号に関するもの

後半にメインとなる処理を配置しています。

  • イベント処理
  • 音声処理
  • 描画処理

今後について

JSで高速フーリエ変換を回すなど正気の沙汰ではないのでWebGLを使ってGPGPUでここら辺の信号処理を実装出来たらと思います。

リソースについて

音声データに関してはMusMus様の「reflectable」を使わせて頂きました。

http://musmus.main.jp/

最後に

良ければフォークしたりコピペして自分なりに改良したりして遊んでみてください。

参考

FFT (高速フーリエ・コサイン・サイン変換) の概略と設計法

AudioContext

ScriptProcessorNode

  • 音声再生 + 高速フーリエ変換 + WebGL = ビジュアライザ
  • 音声再生 + 高速フーリエ変換 + WebGL = ビジュアライザ

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

ku-ya

Author

プログラミングが趣味の職業プログラマ。 過去はソシャゲー系統のゲームプログラマだったが最近転職してシステム系統にクラスチェンジ、専門分野はAndroid, iOS系統、JavaScriptとかは完全に趣味です。 私生活はゲーム、アニメ、日曜プログラミングをゆるく嗜みながら生きています。

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by