about

Takes care of some of the boilerplate involved in creating an AnalyserNode for monitoring web audio signals, be it in the time or frequency domains.

setup

Fetch latest from GitHub directly:

# Both ES and CJS versions are available
npm install thewhodidthis/binocular

usage

The default and only export is an anonymous function expecting an AudioNode type input and which once initialized returns another function meant to be called repeatedly for monitoring the data. For example,

import inspect from '@thewhodidthis/binocular'

window.AudioContext = window.AudioContext || window.webkitAudioContext

// Draw a sine wave bar chart
const canvas = document.createElement('canvas')
const canvasContext = canvas.getContext('2d')

document.body.appendChild(canvas)

document.addEventListener('click', () => {
  const audio = new AudioContext()
  const oscillator = audio.createOscillator()

  oscillator.connect(audio.destination)
  oscillator.start()

  const oscilloscope = inspect(oscillator)
  const draw = () => {
    canvasContext.clearRect(0, 0, canvas.width, canvas.height)

    const data = oscilloscope()

    for (const [index, value] of data.entries()) {
      const barHeight = 0.5 * canvas.height * value

      canvasContext.fillRect(index * 2, canvas.width * 0.5, 1, barHeight)
    }

    window.requestAnimationFrame(draw)
  }

  window.requestAnimationFrame(draw)
}, { once: true })