This content originally appeared on HackerNoon and was authored by hackernoon
\ Does anyone else remember the good old days of Windows Media Player? As a 2000’s kid growing up, Windows Media Player was the staple of how I consumed music. My friends used to give me flash drives of mp3 files that they most likely ripped off of Limewire, and I’d load up the same 50-100 songs to play on repeat.
\ As a bored kid, I thought that the visualizations in WMP were the coolest things ever. Everyone used to have them running in the background while we jammed to music. But nowadays, it seems like visualizations have all but died out. What happened?
\ It’s hard to pinpoint why exactly. Maybe music has gotten more complex. Maybe we’re so used to hyper-stimulating visuals that a simple waveform isn’t impressive anymore. Maybe ipods and phones killed it by making music portable and screenless. Or maybe… the world just moved on.
\ Nevertheless, I find myself in contention. I still feel nostalgia for the visualizers of old. I like having a visualizer attached to my music. And I still think that audio visualization has value beyond just ‘looking cool’.
\ Unfortunately, I feel that the current state of JS and React reflect the fading popularity of visualizers. The two primary visualizers available on NPM are… lackluster (in my opinion). They do visualize audio to certain degrees, but there could be more options. If we truly want to bring back visualizers, we need a solution that’s both robust and flexible. That’s where my team and I come in.
\
Vision
\ We built Waviz, a JavaScript/React-based visualization library aimed at reviving the magic of music visualizers. From the start, we knew it couldn’t just be powerful; it had to be adaptable, capable of servicing both tinkerers and casual users alike.
\ Some users want complete creative control. They want to hook onto the Web Audio API, manipulate raw frequency data, and fine-tune every frame of their visualizer. For them, we have built a modular core engine - one with exposed analyzers and utilities for total freedom to shape their experience.
\ Other users just want the nostalgic thrill of watching music come alive. They want to plug a component in, press play, and just vibe. For them, we have created a growing library of react components - filled with timeless waveforms, radial bars, particle bursts and more! All these components are styled and responsive, right out of the box.
\
Architecture
\ To service both sides, our library (called Waviz on NPM) can be split into two components:
- Waviz core library
- Waviz React component library - affectionately named ‘Plug n Play’.
\
Waviz Core
\ Our Waviz core library is primarily designed with modularity in mind. We have three primitive classes in our core library that you can export:
- Input
- Analyzer
- Visualizer
\ These three classes can all be used independently, if so desired. However, we have a composition class called Waviz that packages all three so you can get straight to visualizing in Javascript/HTML!
\ We also believe that a strong library should keep dependencies to a minimum. To that end, our core library is built using only Canvas and WebAudioAPI!
\ We currently support a range of inputs, from HTML
\
Plug n Play
\
Our ‘Plug n Play’ library, on the other hand, was designed with convenience in mind. The code snippet is an example of a typical code you would need to initialize our visualizer component. There is only one mandatory prop to pass in - an audio element. I would, however, strongly recommend you also pass in a canvas prop to be able to more freely control the space in which the visualizer occupies.
\ At the present, we have 25 different visualizer presets you can use - with plans to add more in the future. Each visualizer has a different set of options you can adjust, but with lesser freedom compared to creating a visualizer direct from our Core Library. \n
\
Final Thoughts
\ This has been more than just a codebase for my team and me: it’s a passion project fueled by nostalgia, curiosity, and the belief that audio deserves to be seen as much as heard. We have set out to bring that magic back, not just for ourselves, but for anyone who still believes in the power of visual sound.
And we’re just getting started.
Waviz was built to pulse and react in real time - but its potential goes beyond music. Because Waviz is powered by a flexible audio analysis and a lightweight canvas rendering, Waviz can adapt to all kinds of creative use cases. Imagine adding rhythmic visuals to a mediation app. Or using Waviz in a classroom to help students see sound.Even game devs and streamers can use Waviz for a dynamic overlay. If there’s sound, Waviz can bring it to life.
This rendering engine is built to be extended, hacked, and reimagined. Whether you’re a developer, designer, or creative thinker, we welcome your feedback, ideas, and contribution. Waviz isn’t just a tool - it’s a growing playground. And the best things happen when creative minds build together.
Together, we can bring back visualizers.
\n
Check out our GitHub Product Page here: https://github.com/Waviz-Team/Waviz
This content originally appeared on HackerNoon and was authored by hackernoon
hackernoon | Sciencx (2025-08-06T07:11:31+00:00) I Built a Way to Make Your Music Look as Good as it Sounds. Retrieved from https://www.scien.cx/2025/08/06/i-built-a-way-to-make-your-music-look-as-good-as-it-sounds/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.