noise-labs / audiomotion.js

High-resolution real-time spectrum analyzer and music player using Web Audio and Canvas APIs.

♪♫ See your music with audioMotion! ♪♫

audioMotion is a high-resolution real-time audio spectrum analyzer and full-featured music player written in JavaScript.

The spectrum analyzer module is also available as a standalone project and a zero-dependency npm package you can use in your own JavaScript projects!

Features

• High-resolution real-time dual channel audio spectrum analyzer
• Fullscreen support at up to 60fps, ready for retina / HiDPI displays
• Logarithmic frequency scale with customizable range
• Visualize discrete frequencies or octave bands based on the equal tempered scale
• Optional effects: vintage LEDs, luminance bars, reflection, radial visualization
• 17 beautiful color gradients
• HTML5 audio player for MP3, AAC (m4a), OGG and FLAC files (support may vary depending on browser and operating system)
• Visual file explorer and play queue with drag-and-drop functionality
• Support for M3U playlists (m3u and m3u8 file extensions)
• Visualize audio from your microphone (or "stereo mix", if your soundcard supports it)
• Lightweight custom file server — also works on standard web servers with minimal configuration
• Client runs on any modern browser (tested on Chrome, Firefox, Opera and Safari)

Live demo

▶ TRY THE LIVE DEMO

The demo allows you to play audio files from your PC, remote files and streams via URL and use the microphone input. The file explorer is not available, since there are no media files hosted on the demo server.

Also check out our ▶ YouTube channel for some cool songs visualized with audioMotion!

Getting started

Download the latest version from the releases page. Portable binaries are available for Windows, Linux and macOS.

Launch audioMotion and you'll be asked for the path to your music folder. Only files under that folder will be accessible to the player.

You can also use the command line argument -m to set the music folder when launching audioMotion:

audioMotion -m c:\users\john\music

This will start the server and should also launch the client in your browser.

The complete command line options are:

-m <path> : path to music directory
-p <port> : change server listening port (default is 8000)
-s        : start server only (do not launch client)
-e        : allow external connections (by default, only localhost)

⚠ WARNING:
Please be aware that the -e flag will expose the contents of the mounted folder to anyone in your network (and potentially to the entire internet!) — use it only if you're in a trusted network and behind a firewall!

Screenshots

Discrete frequencies mode. User interface: main function buttons, audio source selector, player controls, volume control and file explorer.

---

1/4th-octave bands with LED effect, extra wide bar spacing and on-screen song information. User interface shows the settings panel open.

---

Fullscreen view: 1/6th-octave bands, regular bar spacing, "Outrun" gradient, Reflex effect and complete on-screen information.

---

Fullscreen view: Stereo Line graph, frequency and level scales on, "Rainbow" gradient.

---

Fullscreen view: 1/8th-octave bands, LUMI effect on, "Tie Dye" gradient.

---

Fullscreen view: 1/6th-octave bands, Radial analyzer, frequency scale on, "Apple ][" gradient.

Documentation

For complete documentation, see the docs folder.

Credits and acknowledgments

audioMotion was largely inspired by Soniq Viewer for iOS, by Yuji Koike.

The documentation website is powered by GitHub Pages, docsify and docsify-themeable.

JavaScript libraries

Some of audioMotion's great features are provided by these awesome open-source libraries:

• express - fast, unopinionated, minimalist web framework for node
• music-metadata-browser - stream and file based music metadata parser for the browser
• notie - clean and simple notification, input, and selection suite for javascript, with no dependencies
• open - open stuff like URLs, files, executables
• pkg - single-command Node.js binary compiler
• readline-sync - synchronous Readline for interactively requesting user input via console
• scrollIntoViewIfNeeded 4 everyone - polyfill for non-standard scrollIntoViewIfNeeded() method
• sortablejs - JavaScript library for reorderable drag-and-drop lists
• webpack - JavaScript module bundler for the browser
  • mini-css-extract-plugin - extracts CSS into separate files
  • optimize-css-assets-webpack-plugin - a webpack plugin to optimize / minimize CSS assets
  • terser-webpack-plugin - JavaScript compressor

Graphic resources

• The font used in audioMotion's logo is Orbitron by Matt McInerney
• Icons provided by icons8 licensed under Creative Commons Attribution-NoDerivs 3.0 Unported
• Mouse scroll icon by Viktor Ostrovsky, licensed under Creative Commons CCBY
• Gradients Candy, Miami, Outrun and Tie Dye from Gradient Hunt
• Gradients Pacific Dream, Shahabi, Summer and Sunset from uiGradients
• The Apple ][ gradient was created based on this post by Creative Market
• Gradients used in the UI buttons are from ColorZilla's Ultimate CSS Gradient Generator
• CSS3 inset text shadow by Adam Bundy
• CSS slider switches by Billy
• Radial brushed metal texture taken from this pen by GreenSock
• Volume knob design based on Dark dial by Jeff

References

These online references were invaluable for the development and improvement of audioMotion:

• HTML Canvas Reference @W3Schools
• Web Audio API documentation @MDN
• Web Audio API Specification
• What does the FFT data in the Web Audio API correspond to?
• HTML5 check if audio is playing?
• Unlocking Web Audio — the smarter way
• Equations for equal-tempered scale frequencies
• Pure CSS modal windows based on this pen by Timothy Long and CSS Modal by Hans Christian Reinl

License

audioMotion.js copyright (c) 2018-2020 Henrique Avila Vianna
Licensed under the GNU Affero General Public License, version 3 or later.