INADEQUATE VISUALIZER!

Easy to set up web audio api visualizers. No dependencies

DOWNLOAD

Grab the full script, or the minified version.

SET UP

Add the inadequateVisualizer.min.js file to your project, create a inadequateVisualizer object and a div to hold it, and connect it to your node.

We'll use a TolerableKeyboard to generate the sound

      // In Script file

      let keyboard = new TolerableKeyboard({showKey:true})
      let c = keyboard.context
      let n = keyboard.mixNode

      //Create the visualizers, give them a context, container and type
      //the full options list is shown, but params will fall back on default
      // values if not provided
      let visualizerVolume = new InadequateVisualizer({context:c,
                      divID:'volumeID',
                      type:'Volume', //type can be Volume/Frequency/Oscilloscope
                      width:400,
                      height:220,
                      fftSize:2048})
                      
      //Connect to the desired node
      visualizerVolume.connectAndDraw(n)

      let visualizerFreq = new InadequateVisualizer({context:c,divID:'freqID',type:'Frequency'})
      visualizerFreq.connectAndDraw(n)

      let visualizerScope= new InadequateVisualizer({context:c,divID:'scopeID',type:'Oscilloscope'})
      visualizerScope.connectAndDraw(n)

      // In HTML file

      <div id="keyboard"></div>;

      <div id="volumeID"></div>
      <div id="freqID"></div>
      <div id="scopeID"></div>
        

And that's it