audioMotion is a media player and high-resolution real-time audio spectrum analyzer that allows you to SEE your music! ♪♫🤩
It is completely free, open-source software, created out of my passion for the graphic spectrum analyzers of hi-fi systems from the 1980s.
- Dual channel high-resolution real-time audio spectrum analyzer
- Multimedia player lets you use images and videos as backgrounds to your music, or watch music videos with the spectrum analyzer on top
- Fullscreen and Picture-In-Picture support at 60fps, ready for retina / HiDPI displays
- 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
- Optional effects: vintage LEDs, variable opacity, mirroring and reflection, radial spectrum
- 17 beautiful color gradients, plus a visual editor to easily create your own gradients
- Support for M3U playlists (.m3u and .m3u8 file extensions)
- Visualize audio from your microphone (or "stereo mix", if your soundcard supports it)
?> For developers:
Check out audioMotion-analyzer for easy integration of audioMotion's full-featured spectrum analyzer into your own Javascript projects!
Click the button below to open the web app:
Use a Chromium-based browser to be able to play media files from your hard drive.
Works on Chrome, Opera and Edge by default. On Brave, access chrome://flags/#file-system-access-api to enable this feature.
You can install audioMotion on your PC by clicking the install icon in the browser's address bar, shown below:
If you don't have any music files at hand, the app also includes a few songs and some online radio streams.
Click the Switch to Server button to browse server-hosted content.
Also check out our YouTube channel for some cool songs visualized with audioMotion!
?> See the User's Manual for the complete documentation of audioMotion's features and settings.
I would like to thank:
My wife Virginia, for the endless love and support! 💞
Yuji Koike, for his great Soniq Viewer for iOS, which inspired me to create audioMotion.
And all the developers and artists, for the following resources:
- buffer - Node.js Buffer API, for the browser
- express - fast, unopinionated, minimalist web framework for node
- idb-keyval - super-simple promise-based keyval store implemented with IndexedDB
- 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
- process - process information for node.js and browsers
- readline-sync - synchronous Readline for interactively requesting user input via console
- scrollIntoViewIfNeeded 4 everyone - polyfill for non-standard scrollIntoViewIfNeeded() method
- serve-index - serve directory listings
- sortablejs - JavaScript library for reorderable drag-and-drop lists
- webpack - JavaScript module bundler for the browser
- css-loader - CSS loader module for webpack
- css-minimizer-webpack-plugin - cssnano plugin for Webpack
- mini-css-extract-plugin - extracts CSS into separate files
- Fonts Orbitron, Jet Brains Mono (from Google Fonts) and Sofia-Sans Semi-Condensed licensed under the SIL Open Font License
- Icons provided by icons8 licensed under Creative Commons Attribution-NoDerivs 3.0 Unported
- Additional icons provided by @fontawesome licensed under Font Awesome Free License
- Mouse scroll icon by Viktor Ostrovsky, licensed under Creative Commons CCBY
- Gradients Prism and Rainbow use the 12-bit rainbow palette by Kate Morley
- 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
- Knobs design based on Dark dial by Jeff
- Warp effects based on this pen by bytrangle
- Background images
- "Band Performing on Stage" by Vishnu R Nair on Unsplash
- "Jewels of the Queen Cassiopeia" by Aldebaran S on Unsplash
- "Music Room" by John Matychuk on Unsplash
- "Water Droplets on Glass Window" by Aleksandar Pasaric from Pexels
- Background videos
- Music
- "Funky Chunk" by Kevin MacLeod - Licensed under Creative Commons: By Attribution 3.0 License
- "Spell" by Rolemusic - Licensed under Creative Commons: By Attribution NonCommercial ShareAlike 3.0 US License
- "The Factory" by Multifaros - Licensed under Creative Commons: By Attribution 3.0 US License
- "We Come Together" by Lukhash - Licensed under Creative Commons: By Attribution NonCommercial NoDerivatives 3.0 License
- Web radios: Capital FM, Classic FM, Costa del Mar, Ibiza Global Radio, jazz 4 ever, Nightride FM
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
audioMotion.js copyright (c) 2018-2024 Henrique Avila Vianna
Licensed under the GNU Affero General Public License, version 3 or later.
This website is powered by GitHub Pages, docsify and docsify-themeable.