# audiomotion-analyzer draws a spectrum you can actually read

> audioMotion-analyzer is a spectrum analyzer for the browser, built on the Web Audio and Canvas APIs with no dependencies and a minified size of about thirty kilobytes. The interesting decisions are in the options, logarithmic, linear and perceptual frequency scales, decibel and linear amplitude, optional weighting filters and up to 240 frequency bands, and in the fact that the whole thing can be taken apart and used to build a different visualization entirely.

**hvianna/audioMotion-analyzer** — High-resolution real-time graphic audio spectrum analyzer JavaScript module with no dependencies.

- Repository: https://github.com/hvianna/audioMotion-analyzer
- Website: https://audioMotion.dev
- Stars: 966 · Forks: 100
- Language: JavaScript
- License: AGPL-3.0
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/hvianna-audiomotion-analyzer

## A self-contained module, carved out of a media player

The project is a high resolution real time graphic audio spectrum analyzer built on the Web Audio and Canvas JavaScript APIs, and it has no dependencies at all. The origin story explains the shape of it. The analyzer was originally conceived as part of the author's full featured media player called audioMotion, and it was later split out as a self contained module so other developers could use it in their own projects. That is why it is a module and not an application, and why the source is a single file, `audioMotion-analyzer.js` in the `src/` directory, which the documentation tells you to copy into your project if you would rather not use a package manager. The stated goal is to be the best looking, most accurate and customizable spectrum analyzer around, in a small footprint and high performance package, and the size claim is about thirty kilobytes minified as a native ES6 module.

## The analysis options are where the accuracy actually lives

A spectrum analyzer is easy to draw and hard to draw honestly, and the option list is where this one earns its keep. There is a dual channel analyzer, so the two channels of a stereo signal are shown separately rather than summed. The frequency scale can be logarithmic, linear or perceptual, with Bark and Mel available, and the range is customizable. The display can show the discrete FFT frequencies or up to 240 frequency bands, with support for ANSI bands and equal tempered octave bands. Amplitude can be shown on a decibel or a linear scale with adjustable sensitivity, and there are optional A, B, C, D and ITU-R 468 weighting filters, which are the standards curves used to approximate how the human ear weights frequency. A visualiser that ignores the weighting curves will look right and measure wrong, so the presence of the filters is the difference between a toy and an instrument.

## Effects, gradients and a fullscreen, retina ready canvas

On top of the analysis there is a set of presentation effects, and the list reads like a menu of styles rather than a bag of switches. There are LED bars, which is the classic segmented look, luminance bars, mirroring and reflection, and a radial spectrum that arranges the frequencies around a circle. Colour comes from one of five built in gradients or from your own, with separate left and right gradient options, and the mode can be switched between a gradient and a solid colour. The renderer supports fullscreen and is ready for retina and HiDPI displays, and the analyzer will also work without a canvas of its own, which is the point of the next section. The demonstration page is worth opening before anything else, because the difference between the built in gradients is the fastest way to understand what the options are for.

## The constructor takes a container, and the canvas is a detail

The constructor has four shapes, with no arguments, with a container, with a container and options, or with options alone, and the options object is required in the last two cases. The container is the DOM element the canvas is inserted into, and if it is not defined it defaults to `document.body`, unless a canvas is supplied in the options, in which case the parent of that canvas becomes the container. The usage example is short:

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

Which starts the visualisation of the audio coming from the element. There is one warning attached to this, and it is a practical one. By default the analyzer tries to use all the available container space for the canvas, so to stop it growing without limit you have to constrain the container with CSS or set the height and width properties in the constructor options. That is the kind of detail that shows up as a page that grows until the browser gives up, and it is documented in bold enough to be noticed.

## The options list is the design document

The options are documented as a single object with every default value, and the defaults are the interesting part. The FFT size is 8192, which is a high resolution setting rather than a cheap one. The frequency scale defaults to logarithmic, the colour mode to a gradient, the channel layout to single, the maximum frequency to 22000 and the maximum decibels to -25, with a bar space of 0.1 and a gravity of 3.8 for the peak decay. The line width is zero, and the alpha, fade peaks, low resolution, linear amplitude and linear boost settings are all off or at neutral values. The documentation also separates the properties that can only be set in the constructor, the audio context, the canvas, the speaker connection and the fullscreen element, from the ones that can be changed at any time through a `setOptions()` method or set directly as properties of the instance. That distinction exists because those four options decide how the analyser is wired to the audio graph, and changing them later would mean tearing down the connection, so the API makes the boundary explicit rather than letting you discover it.

## ESM first, with a CommonJS build and a global for a script tag

The packaging supports the three ways a browser project usually consumes a library. From npm, the package is `audiomotion-analyzer`, and the import is the native ES module form:

```js
import AudioMotionAnalyzer from 'audiomotion-analyzer';
```

There is also a CommonJS `require` form for a Node project. In the browser without a bundler, the documentation gives a module script that imports from jsDelivr, and a plain script tag that exposes the same class as a global, both pinned to a major version. The manifest shows how the two builds are produced, with the ESM entry point in `src/` and a Babel built CommonJS bundle in `dist/`, and a build script that removes the old output, runs Babel and then patches the exported default onto the module object so the CommonJS import has the same shape as the ESM one. The published files are just `dist` and `src`, so you can install from npm or drop the single source file into a project.

## The AGPL, the beta, and who maintains it

Two things to know before you commit to the project. The first is the licence, AGPL-3.0-or-later, which for a library that runs in a browser is worth reading carefully, because the copyleft reaches use over a network and a page that ships the library to other people is not obviously the same case as a page that merely uses it. The second is the version state. The release list has 5.0.0-beta.0 from July 2026, 5.0.0-alpha.2 from June 2026 and 4.5.4 from January 2026, so a 5.0 line is in progress while the stable line sits at 4.5.4, and the last push to the repository was on 2026-07-19. The documentation site is audiomotion.dev, and the author is Henrique Vianna, who takes funding through Ko-fi. The live examples on CodePen are the fastest way to judge the library, and they include the microphone input case, the integrations with other audio libraries such as Pizzicato and jPlayer, and the no canvas example where the analyzer data drives a visualization of your own.

## Conclusion

audiomotion-analyzer suits a front end developer who wants a spectrum that looks considered rather than a row of rectangles, and it suits anyone who needs the analysis without the drawing, since the no canvas example shows the analyzer data being used to build a different visualization. It is a poor fit if you need a permissive licence, because the project is AGPL-3.0-or-later, and it is a poor fit if you need the current major version to be stable, because 5.0.0 is still in beta. Before you adopt it, check three things: which major version you take, since 4.5.4 is the last stable one and 5.0.0-beta.0 is the newest, how the canvas is sized, since by default the analyzer takes all the space the container gives it and grows unless you constrain it, and the licence, because the AGPL reaches network use and the project is funded through Ko-fi rather than by a commercial licence.

## FAQ

### How do I install and use audioMotion-analyzer?

Install it with `npm i audiomotion-analyzer` and import it as an ES module, or use the CommonJS require form, or load it from jsDelivr as a module script or as a global script tag. You can also copy the single audioMotion-analyzer.js file from the src directory of a release into your project.

### What analysis options does audioMotion-analyzer offer?

Logarithmic, linear and perceptual frequency scales with Bark and Mel, a choice of the discrete FFT frequencies or up to 240 frequency bands with ANSI and equal tempered octave bands, decibel and linear amplitude scales with adjustable sensitivity, and optional A, B, C, D and ITU-R 468 weighting filters. The default FFT size is 8192.

### Why does my audioMotion-analyzer canvas keep growing?

By default the analyzer tries to use all the available container space for the canvas. To stop it growing indefinitely you have to constrain the container dimensions with CSS or set the height and width properties explicitly in the constructor options.

### Can I use audioMotion-analyzer without its canvas?

Yes, and the documentation has an example that does exactly that, creating your own visualization from the analyzer data, with a companion example on creating additional effects with the getEnergy() function. The analyzer exposes the data as well as drawing it.

### What licence is audioMotion-analyzer under?

AGPL-3.0-or-later, with the author taking funding through Ko-fi. The project is at 4.5.4 as the stable line while 5.0.0 is in beta, with 5.0.0-beta.0 published on 2026-07-19 and the last push to the repository on the same day.

## Sources

- [hvianna/audioMotion-analyzer on GitHub](https://github.com/hvianna/audioMotion-analyzer)
- [License: AGPL-3.0](https://github.com/hvianna/audioMotion-analyzer/blob/master/LICENSE)
- [Project website](https://audioMotion.dev)
- [README](https://github.com/hvianna/audioMotion-analyzer/blob/master/README.md)
- [Releases](https://github.com/hvianna/audioMotion-analyzer/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/hvianna-audiomotion-analyzer