Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

readme.md

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 })