実は，兼ねてから JavaScript で絵を描く遊びが好きで，ふと思いたつと書いてはTumblrに投稿している．この中の多くはp5.jsを使って書いた．

音に合わせてなにかを動かしたい

p5.js にはp5.sound libraryという拡張がある．Web Audio API に関する知識はほとんど無いけどこれならすぐに試せそう．これを使って絵を動かしてみたくなった．

オーディオの可視化に関しては以下の記事が大変参考になった．

一般的に，以下の 4 つの要素が重要とのこと．

  • Volume
  • Waveform
  • Level
  • Beat Detection

音に合わせて動かしたいので，上の記事の Beat Detection アルゴリズムをそのまま拝借．

  1. Volume の値を監視する．
  2. Volume の値が閾値を超えたときに Beat と判定し，閾値を Volume の値で更新．
  3. 閾値は一定の割合(Decay Rate)で小さくなる．
  4. Beat の発生直後の一定時間(Hold Time)は閾値が減少しない．
class BeatDetector {

  constructor(holdTime, decayRate, minLevel) {
    this.holdTime = holdTime // the number of frames to hold a beat
    this.decayRate = decayRate
    this.minLevel = minLevel // a volume less than this is no beat

    this.cutOff = 0.0
    this.time = 0
  }

  detect(level) {
    const val = level || 0.0

    if (this.minLevel < val && this.cutOff < val) {
      this.cutOff = val * 1.1
      this.time = 0

      return true

    } else {
      if (this.time <= this.holdTime) {
        this.time += 1
      } else {
        const decayed = this.cutOff * this.decayRate
        this.cutOff = Math.max(decayed, this.minLevel)
      }
      return false
    }
  }
}

Demo

p5.js を使ったサンプルは以下．5 つの周波数レンジ毎に Volume の値を取得して Beat Detection してみました．

https://chooblarin.github.io/beat-detection-demo/

以上です．引き続きよろしくお願いします．