Quickstart - AlgoRythm-Dylan/Visualize GitHub Wiki

You need a visualizer. Now.

Good, I have one.

Things you need

  • A canvas
  • An audio tag
  • The visualize.js library

How to put them together

Create a new visualizer object. This holds all of your effects - including the renderer, audio dampers, particle systems, paints, etc. If you don't know what any of those are, that's all right.

var myCanvas = document.getElmentById("myCanvas");
var myAudio = document.getElementById("myAudio");
var visualizer = new MusicVisualizer.Visualizer(myCanvas, myAudio);

You will notice that this won't do anything. You need to add a renderer. A renderer takes the data from the audio and displays it graphically. By default, there is no renderer in a visualizer. There are a few ones pre-made for you. Lets go with the simple one.

var simpleRenderer = new MusicVisualizer.SimpleBarRenderer();
visualizer.renderer = simpleRenderer;

Now you have a visualizer, congratulations. Still, nothing is happening because you aren't asking it to render. You only need to execute one command on a loop (however you wish to set up the loop). I will use requestAnimationFrame to set up a loop.

function renderVisualizer(){
    visualizer.render();
    requestAnimationFrame(renderVisualizer);
}

renderVisualizer();

Now everything should be working. It's basic, but this is technically all you need to make a visualizer.