Quickstart - AlgoRythm-Dylan/Visualize GitHub Wiki
You need a visualizer. Now.
Good, I have one.
Things you need
- A
canvas - An
audiotag - The
visualize.jslibrary
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.