岩崎航也
Ko.Yelie (エリー)
自分で VJ アプリを作った
どんな表現ができるだろう?
const fftSize = /* your fftSize */
const audioCtx = new AudioContext()
const audio = new Audio(/* your audio */)
const source = audioCtx.createMediaElementSource(audio)
const gain = audioCtx.createGain()
gain.connect(audioCtx.destination)
source.connect(gain)
const analyser = audioCtx.createAnalyser()
analyser.fftSize = fftSize
source.connect(analyser)
const array = new Uint8Array(fftSize)
audio.play()
function update () {
analyser.getByteTimeDomainData(array)
// array の中の値に応じてビジュアルを動かす
requestAnimationFrame(update)
}
requestAnimationFrame(update)
getByteTimeDomainData で音量を取得
ビジュアルは Three.js で実装
円周上にパーティクルを配置し各パーティクルの大きさを音量に合わせて大きくする
中心からの距離も全体の平均音量に合わせて広げる
fftSize = 32
パーティクルの数を増やす
(32 → 2048)
中心からの距離は変えない
→なんか回転して見える
fftSize = 2048
よくあるグリッチエフェクト
音量が大きいほど揺らす
ズームもさせてみる
fftSize = 32
波形からパーティクルをたくさん散らす
散っていく動きを見せるために音量はリアルタイムではなく一定時間ごとに取得
fftSize = 128
その瞬間の波形だけを表示するのではなく今までのを全部表示していく
全部見えるように3Dにする
シンプレックスノイズみたい
ノイズとしても使えそう
fftSize = 512
ゴールが見えないままなんとなく始めたが、
既存のコードを流用したら意外と面白い表現
になった
他にも作ってみたい
Web Audio API のことをまだまだ知らないので、
もっと知識をつけたい
※音楽や画像はすべてフリー素材です