audioMotion-analyzer | interactive demos

Note: except for the UMD demo, these won't work if loaded via file:// protocol. See the README file inside the demo/ folder for more information.

▶ Minimal demo

• A simple demo on how to create and destroy audioMotion-analyzer instances;
• Uses a live stream as audio source (note: streams currently do NOT work on Safari - see the known issues);
• This alternate version demonstrates how to use the UMD module via global variable.

▶ Fluid layout demo

• Try all configuration options in real time - resize the window and the analyzer adjusts itself for best resolution (see console for events);
• Example usage of microphone input;
• An additional frequency oscillator node is connected to the analyzer for generating test tones;
• A callback function is used to add custom features using the analyzer data.

▶ Multiple instances demo

• Three analyzer instances share the same audio source and AudioContext, but each has its own configuration settings.

▶ Overlay demo

• audioMotion-analyzer is connected to a <video> element and displayed over it with semi-transparent background;
• Fullscreen is handled on the parent container element.

For more demos, check our CodePen collection.