AudioVis

vis.js

class AudioVis { 
  
  constructor() {
    this.analyser = …

    this.data = new Uint8Array(…)
    this.frequencies = new Uint8Array(…)
  }
  
  populateArrays() {
   // populate data arrays 
  }
  
  draw(fn) {
    const loop = (t) => {
      const raf = requestAnimationFrame(loop)
      
      this.populateArrays()
      
      // cancel if an error was thrown
      try { fn() } catch (e) {
        console.error(e)
        cancelAnimationFrame(raf)
      }
    }
    requestAnimationFrame(loop)
  }
}


const vis = AudioVis()

vis.draw(() => {
  ctx.beginPath()
  
  vis.frequencies.forEach((f, i) => { 
    ctx.lineTo(i, f)   
  })
  
  ctx.stroke()
})