【React / GLSL】音の波形を canvas に描画する


canvas の描画を動画にして保存したり、 動画に音を付けたりしました。

応用すると音と画像から新しい動画を作れるようになる。

まずは、音を元に canvas を書き換えてみます。

ファイル / データ読み込み

前回の onDrop を使ってローカルファイルを読み込みます。

inputfile が取得できればやり方はなんでもいいです。

 

欲しいのは読み込みのための画像URLAudioBuffer です。

 

GLSL の準備

gl-react を使って GLSL を書ける canvas を用意します。

 

音の解析と描画のアップデート

AudioContext.createAnalyser()AnalyserNode を作成。

フーリエ変換(FFT)をして波形を GLSL に渡します。

Analyer サンプルでは fftSize2048 でしたが、GLSLに渡そうとしたところ ERROR: too many uniforms エラーで怒られたので 1024 に減らしています。

大分ごちゃついてきた。

ここから stop, pause, resume あたりのイベント管理を追加する必要がありそう。

 

実際に動かしてみるとこのような感じになります。

もうちょっと見せ方を考えて GLSL を書いた方がいいですね。

あとは getFloatFrequencyData() などに変えて精度を上げてみたり。

 

とりえあず音のデータを GLSL に渡せるようになったので、また色々試します。


コメントを残す

メールアドレスが公開されることはありません。