github.com/hvianna/audioMotion-analyzer @4.5.4

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 media player called audioMotion, 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:

    <strong>I still, to this day, haven't found anything close to audioMotion in terms of beauty.</strong>
    <span class="author">&mdash; Weakky@github</span>






    <strong>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

    <strong>It works amazing! The spectrum is so easy readable even for complex sound.</strong>
    <span class="author">&mdash; davay42@github</span>

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), \~30kB minified

Online demos

?> https://audiomotion.dev/demo/

Live code examples

• Quick and easy spectrum analyzer
• Using microphone input
• Creating additional effects with getEnergy()
• No canvas example (create your own visualization using analyzer data)
• Example integrations with other audio libraries:
• Icecast Metadata Player
• Pizzicato
• jPlayer
• See more code examples on CodePen

Usage

Node.js project

Install via npm:

npm i audiomotion-analyzer

Use ES6 import:

import AudioMotionAnalyzer from 'audiomotion-analyzer';

Or CommonJS require:

const { AudioMotionAnalyzer } = require('audioMotion-analyzer');

In the browser using native ES6 module (ESM)

Load from jsDelivr CDN:

<script type="module">
  import AudioMotionAnalyzer from 'https://cdn.jsdelivr.net/npm/audiomotion-analyzer@4/+esm';
  // your code here
</script>

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

In the browser using global variable

Load from jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/audiomotion-analyzer@4"></script>
<script>
  // available as AudioMotionAnalyzer global
</script>

Constructor

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

Creates a new instance of audioMotion-analyzer.

container is the DOM element into which the canvas created for the analyzer should be inserted.

If not defined, defaults to document.body, unless canvas is defined in the options, in which case its parent element will be considered the container.

options must be an Options object.

Usage example:

const audioMotion = new AudioMotionAnalyzer(
    document.getElementById('container'),
    {
        source: document.getElementById('audio')
    }
);

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

?> By default, audioMotion will try to use all available container space for the canvas. To prevent it from growing indefinitely, you must either constrain the dimensions of the container via CSS or explicitly define height and/or width properties in the constructor options.

Options object

Valid properties and default values are shown below.

Properties marked as constructor only can only be set in the constructor call, the others can also be set anytime via setOptions() method or directly as properties of the audioMotion instance.

options = {

  alphaBars: false,

  ansiBands: false,

  audioCtx: undefined, // constructor only

  barSpace: 0.1,

  bgAlpha: 0.7,

  canvas: undefined, // constructor only

  channelLayout: 'single',

  colorMode: 'gradient',

  connectSpeakers: true, // constructor only

  fadePeaks: false,

  fftSize: 8192,

  fillAlpha: 1,

  frequencyScale: 'log',

  fsElement: undefined, // constructor only

  gradient: 'classic',

  gradientLeft: undefined,

  gradientRight: undefined,

  gravity: 3.8,

  height: undefined,

  ledBars: false,

  linearAmplitude: false,

  linearBoost: 1,

  lineWidth: 0,

  loRes: false,

  lumiBars: false,

  maxDecibels: -25,

  maxFPS: 0,

  maxFreq: 22000,

  minDecibels: -85,

  minFreq: 20,

  mirror: 0,

  mode: 0,

  noteLabels: false,

  onCanvasDraw: undefined,

  onCanvasResize: undefined,

  outlineBars: false,

  overlay: false,

  peakFadeTime: 750,

  peakHoldTime: 500,

  peakLine: false,

  radial: false,

  radialInvert: false,

  radius: 0.3,

  reflexAlpha: 0.15,

  reflexBright: 1,

  reflexFit: true,

  reflexRatio: 0,

  roundBars: false,

  showBgColor: true,

  showFPS: false,

  showPeaks: true,

  showScaleX: true,

  showScaleY: false,

  smoothing: 0.5,

  source: undefined, // constructor only

  spinSpeed: 0,

  splitGradient: false,

  start: true, // constructor only

  trueLeds: false,

  useCanvas: true,

  volume: 1,

  weightingFilter: ''

  width: undefined

}

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.

canvas HTMLCanvasElement object

Available since v4.4.0

Allows you to provide an existing Canvas where audioMotion should render its visualizations.

If not defined, a new canvas will be created. After instantiation, you can obtain its reference from the canvas read-only property.

connectSpeakers boolean

Available since v3.2.0

Whether or not to connect the analyzer output to the speakers (technically, the AudioContext destination node).

Some scenarios where you may want to set this to false:

1. when running multiple instances of audioMotion-analyzer sharing the same audio input (see the multi demo), only one of them needs to be connected to the speakers, otherwise the volume will be amplified due to multiple outputs;
2. when audio input comes from the microphone and you're not using headphones, to prevent a feedback loop from the speakers;
3. when you're using audioMotion-analyzer with an audio player which already outputs sound to the speakers (same reason as 1).

After instantiation, use connectOutput() and disconnectOutput() to connect or disconnect the output from the speakers (or other nodes).

See also connectedTo.

Defaults to true.

fsElement HTMLElement object

Available since v3.4.0

HTML element affected by the toggleFullscreen() method.

If not defined, defaults to the canvas. **Set it to a container `

` to keep additional interface elements available in fullscreen mode.**

See the overlay demo or this pen for usage examples.

After instantiation, fsElement is available as a read-only property.

source HTMLMediaElement or AudioNode object

If source is specified, connects an HTMLMediaElement (<audio> or <video> HTML element) or AudioNode object to the analyzer.

At least one audio source is required for the analyzer to work. You can also connect audio sources after instantiation, using the connectInput() method.

start boolean

If start: false is specified, the analyzer will be created stopped. You can then start it with the start() or toggleAnalyzer() methods.

Defaults to true, so the analyzer will start running right after initialization.

Properties

alphaBars boolean

Available since v3.6.0

When set to true each bar's amplitude affects its opacity, i.e., higher bars are rendered more opaque while shorter bars are more transparent.

This is similar to the lumiBars effect, but bars' amplitudes are preserved and it also works on Discrete mode and radial spectrum.

For effect priority when combined with other settings, see isAlphaBars.

Defaults to false.

!> See related known issue

ansiBands boolean

Available since v4.0.0

When set to true, ANSI/IEC preferred frequencies are used to generate the bands for octave bands modes (see mode). The preferred base-10 scale is used to compute the center and bandedge frequencies, as specified in the ANSI S1.11-2004 standard.

When false, bands are based on the equal-tempered scale, so that in 1/12 octave bands the center of each band is perfectly tuned to a musical note.

ansiBands	bands standard	octaves' center frequencies