audioMotion.js: a browser spectrum analyzer and player with a 1980s hi-fi streak

A visualiser that takes the analysis seriously

audioMotion is described as a media player and high-resolution real-time audio spectrum analyzer that lets you see your music, and the origin story in the README is more informative than the feature list. It is completely free, open-source software, created out of the author's passion for the graphic spectrum analyzers of hi-fi systems from the 1980s.

That origin explains the feature set. A hi-fi analyser display in the eighties was a piece of hardware with a specific vocabulary: it had frequency bands, it had peak indicators, it had segment colours, and the appeal was partly in the object itself rather than only in the information. audioMotion reproduces that vocabulary in a browser.

The feature list is what separates it from a simple bar visualiser. The core is a dual channel high-resolution real-time audio spectrum analyzer, and the frequency domain handling is unusually configurable: logarithmic, linear and perceptual scales using Bark and Mel, with a customisable range, and either discrete FFT frequencies or up to 240 frequency bands with support for ANSI and equal-tempered octave bands. The amplitude side has decibel and linear scales with customisable sensitivity, and there are optional A, B, C, D and ITU-R 468 weighting filters, which are the standards used in broadcast and audio measurement rather than in casual visualisers.

The optional effects are where the hi-fi homage shows: vintage LEDs, variable opacity, mirroring and reflection, and a radial spectrum. There are 17 built-in colour gradients plus a visual editor for making your own.

The topics list confirms the technical ground: web-audio, webaudio-api, html5-audio, html5-canvas, audio-player, audio-visualizer, spectrum-analyzer, music-player, media-player.

A player as well as a visualiser, with subtitles

The other half of the project is a media player, and it is a real one rather than a thin wrapper. It has a media player with subtitles support for audio and video files, fullscreen and Picture-in-Picture display at 60fps ready for Retina and HiDPI screens, and support for M3U playlists in the .m3u and .m3u8 file extensions.

The 60fps figure is worth noting because it is a rendering commitment rather than a feature. A spectrum analyser redraws on every frame, and at that rate the bottleneck is usually layout and paint rather than the FFT itself, which is why the project pairs the analysis with a canvas-based renderer and HiDPI support rather than treating display resolution as an afterthought.

The microphone input is the other feature that widens the use case. You can visualise audio from your microphone, or from the stereo mix if your soundcard supports it, which means the same display that visualises a track can visualise a live input or a system output.

Putting the player and the analyser together is the sensible design. A visualiser that only accepts a file has to be paired with something else to be usable, and a player that only plays files leaves the most interesting part of the tool unused. Here the spectrum display is attached to whatever the player is doing, including live input, and the subtitle support means a video with captions is not a dead end for a purely audio use case.

How you actually get it: a browser app, not an npm dependency

The distribution model is unusual for a JavaScript project and it is the first thing to understand before evaluating it.

The README directs you to the web app at audiomotion.app, and describes the access requirement plainly: use a Chromium-based browser to be able to play media files from your hard drive, and it works on Chrome, Opera and Edge by default. On Brave browser you access chrome://flags/#file-system-access-api to enable the feature.

That last detail is a fair signal of what the app is doing. Playing a file from your hard drive in a web page requires a browser API that grants access to local files, which is exactly the File System Access API, and which browsers gate behind a flag or do not expose at all. The app is designed around that capability rather than around uploading files to a server, which is why the local-file workflow is the documented path.

Installation onto your PC is then a browser-level install: click the install icon located in the browser's address bar, which produces a Progressive Web App, and the project badges it as a PWA.

The project is also open source with a public repository, and the source tree is visible in the listing: src/, public/, docs/, a webpack.config.js and a webpack.dev.js, a package.json, and an .editorconfig and .npmrc. The package name is audioMotion and the build script is webpack, with a dev script running webpack serve against webpack.dev.js and a docs script serving the docs/ folder on port 8081.

So there are two ways in. The web app at audiomotion.app is the one the README points you to. The repository is where the source and the documentation live, and it is also where the maintainer tells developers to go if you want to integrate the analyser.

The developer path is a different package

There is a boxed note in the features section aimed at developers, and it points somewhere else. For developers, check out audioMotion-analyzer for easy integration of audioMotion's full-featured spectrum analyzer into your own JavaScript projects, at audiomotion.dev.

That distinction is the single most important thing to understand if you are an engineer reading this repository rather than someone who wants to watch a spectrum. The app repository and the library are separate products with separate names, and the maintainer is explicit that the analyzer package is the integration path.

The repository's own package.json backs this up. The package is marked private, so it is not published to a registry as an installable dependency, and the runtime dependencies list is empty. Everything in devDependencies is tooling and assets: webpack and its loaders, the CSS extraction and minimisation plugins, http-server for the docs and start scripts, buffer, sortablejs for drag and drop, js-yaml, idb-keyval for browser storage, music-metadata-browser, notie for notifications, and process as a browser polyfill. The audiomotion-analyzer package appears there at version 4.5.1 as a dev dependency, which is how the app itself consumes the analyser.

For a developer wanting the analyser inside their own application, the practical reading is: go to audiomotion.dev, and do not plan to vendor the app repository. The app is a user-facing application built on top of the library, and the package metadata reflects that direction of dependency.

Maintenance reality, and how the project asks for help

The project's own framing of itself as a hobby project is stated plainly and is worth taking at face value when you plan around it. The README says to note that this is a hobby project that the author works on in their free time, so it may take a while to respond to inquiries sometimes.

The release history is consistent with that. The recent releases are v26.6-beta.3 from 2026-06-14, v25.9 from 2025-09-21 and v24.6 from 2024-06-03, and the package.json in the tree is at version 25.9. The last push to the repository was on 2026-09-22 and the project is not archived, so work is still landing between releases.

The contribution rules are unusually specific, and they are aimed at keeping the maintainer's workload down. Issues are reserved for bug reports only, and the Discussions section is where feature requests, questions, suggestions and other feedback should go. Pull requests should be branched off the project's dev branch, which the README explains makes it easier to incorporate changes into a future release.

That dev branch convention is a small thing with a large meaning for the workflow. It tells you that the master branch is the released state and that dev is where accepted changes accumulate, so a contributor aiming at the next release targets the right place, and the maintainer merges in one motion rather than cherry-picking.

The licence is AGPL-3.0, and the copyright notice covers 2018 to 2025. For a personal, non-commercial use of the web app, the practical effect is nil. For a product, it is the reason to use the analyzer package under its own terms rather than copying code out of the app repository.

What the tool is for, and what it is not

It is worth being clear about the category. audioMotion is a high quality spectrum display with a media player attached, packaged as a browser application you run locally. It is not a DJ tool, it is not an audio editor, and it is not a measurement instrument, even though the presence of Bark and Mel scales and A, B, C, D and ITU-R 468 weighting filters borrows the vocabulary of one.

The weighting filters are the most interesting of those borrows. They exist in broadcast and audio metrology so that measurements can be compared against a reference, and in a visualiser they give you a different weighting of the spectrum to look at, which is genuinely useful for reading the balance of a mix. But nothing in the project claims the output is a calibrated measurement, and the display is a picture of the signal, not a report of it.

The other thing to keep in mind is that the appeal is deliberately partly aesthetic. Vintage LEDs, mirroring, reflection, radial spectrum and seventeen gradients are not analysis features; they exist because the author's inspiration was the look of a piece of hi-fi equipment. That is a legitimate design goal and one that a lot of people will enjoy, but it means the tool is doing two things at once, and the second thing is the reason people keep it running.

For a reader deciding whether to use it: if you want to see what your music looks like, in a display that respects the analysis rather than approximating it, running on your own machine, this is one of the better free options. If you need something you can embed in a product, use the analyzer package. If you need calibrated measurements, use a measurement tool.

Editorial conclusion

Adopt audioMotion.js if you want a real-time spectrum display with genuinely serious analysis options, perceptual Bark and Mel scales, weighting filters and a dual channel view, and you are happy running it as a local browser app on your own machine. Do not adopt it as a library for your own product, because the package is marked private and the licence is AGPL-3.0, and the maintainer points developers to the separate audioMotion-analyzer package for that. Before you commit, read the online documentation for the analyser options, and if you plan to embed the analyser in your own JavaScript, use audioMotion-analyzer at audiomotion.dev rather than the app repository, since the project states that is the path for integration.

Frequently asked questions

Official sources

1. hvianna/audioMotion.js on GitHub
2. License: AGPL-3.0
3. Project website
4. README
5. Releases