audioMotion-analyzer

High-resolution real-time graphic audio spectrum analyzer JavaScript module...

Audio
hvianna/audioMotion-analyzeraudioMotion.devaudiomotion-analyzer

README

audioMotion-analyzer


About


audioMotion-analyzer is a high-resolution real-time audio spectrum analyzer built upon Web Audio and Canvas JavaScript APIs.

It was originally conceived as part of my full-featured music player called [audioMotion](https://audiomotion.me), but I later decided
to make the spectrum analyzer available as a self-contained module, so other developers could use it in their own JS projects.

My goal is to make this the best looking, most accurate and customizable spectrum analyzer around, in a small-footprint and high-performance package.

What users are saying:

I still, to this day, haven't found anything close to audioMotion in terms of beauty. — Weakky@github

I've been visualizing input with FFT with p5.js for a while, but got sick of how much code was needed.
This looks way better and works better too. — Staijn1@github

It works amazing! The spectrum is so easy readable even for complex sound. — davay42@github


Features


+ Dual-channel high-resolution real-time audio spectrum analyzer
+ Logarithmic, linear and perceptual (Bark and Mel) frequency scales, with customizable range
+ Visualization of discrete FFT frequencies or up to 240 frequency bands (supports ANSI and equal-tempered octave bands)
+ Decibel and linear amplitude scales, with customizable sensitivity
+ Optional A, B, C, D and ITU-R 468 weighting filters
+ Additional effects: LED bars, luminance bars, mirroring and reflection, radial spectrum
+ Choose from 5 built-in color gradients or easily add your own!
+ Fullscreen support, ready for retina / HiDPI displays
+ Zero-dependency native ES6+ module (ESM), \~25kB minified

Usage


Native ES6 module (ESM)


Load from Skypack CDN:

  1. ```html
  2. <script type="module">
  3.   import AudioMotionAnalyzer from 'https://cdn.skypack.dev/audiomotion-analyzer?min';
  4.   // your code here
  5. </script>
  6. ```

Or download the latest version and copy theaudioMotion-analyzer.js file from the src/ folder into your project folder.

npm project


Install as a dependency:

  1. ```console
  2. $ npm i audiomotion-analyzer
  3. ```

Use ES6 import syntax:

  1. ```js
  2. import AudioMotionAnalyzer from 'audiomotion-analyzer';
  3. ```

Constructor


new AudioMotionAnalyzer( [container], [{options}] )

Creates a new instance of audioMotion-analyzer.

The analyzer canvas will be appended to the HTML element referenced by container, unless you set [useCanvas: false](#usecanvas-boolean) in the options.

If container is undefined, the document's body will be used instead.

Usage example:

  1. ```js
  2. const audioMotion = new AudioMotionAnalyzer(
  3. document.getElementById('container'),
  4. {
  5.   source: document.getElementById('audio')
  6. }
  7. );
  8. ```

This will insert the analyzer canvas inside the #container element and start the visualization of audio coming from the #audio element.

Options object


Valid properties and default values are shown below.

Properties marked as constructor only can only be set by the constructor call, the others can also be set anytime via [setOptions()](#setoptions-options-) method.

Constructor-specific options


audioCtx AudioContext object


Available since v2.0.0

Allows you to provide an external AudioContext for audioMotion-analyzer, for connection with other Web Audio nodes or sound-processing modules.

Since version 3.2.0, audioCtx will be automatically inferred from the source property if that's an AudioNode.

If neither is defined, a new audio context will be created. After instantiation, audioCtx will be available as a read-only property.

See this live code and the multi-instance demo for more usage examples.