At the turn of the 21st century, MP3 audio was hitting the mainstream. Certainly, the portability of these sound files was a big part of their allure. But there was also the unique side benefit of visualizing the sound on our computer screens.
Audio players such as WinAMP came with visualization plugins, making the experience of listening to our favorite tunes even more engaging. Not only could we hear the music, but we could also see it dance across our monitors as well.
Here is a collection of code snippets that bring a visual element to sound. Some are the real deal and will work with audio files, while others are merely facsimiles of the effect. Let’s crank it up!
Before we start, just a warning: Many of these snippets play sound, so adjust your speakers accordingly.
Songs on the Sun by Nelson Rodrigues
3D Tune Tiles by Carlo Alducente
Like Atari, but with Better Sound by Niklas Knaack
Start this audio visualization, and you’ll be transported into a 1980s-like video game world. The sound can be turned on and off with a click, and your trip through the portal will change direction based on your cursor position. In a word, it’s RAD!
A Simple Approximation by Octavector
Not every website needs an audio player, but the visualization effect can still be useful. For those situations, this single-div simulation is a great fit. With just a little bit of HTML, you can add some colorful movement to your project.
Cloud Music by André Mattos
Particle animation seems like the perfect tool for making sound a visual experience. And this is a prime example of its power. Push play, see the dots “light up” and move along with your cursor. This pulsating effect is bold without coming on too strong.
Liquid Audio by Ryan McKay
Here is a unique take on bringing audio to our eyes. This colorful “Inkqualizer” is fun to watch. Plus, it makes us wonder if the ink cartridges in our printer are dancing like this when we aren’t looking.
When in Doubt, Do “The Carlton” by Grzegorz Witczak
Do we really need accurate visual renderings of our favorite songs? This snippet says “no.” All we need is a great song and a pixelated Alfonso Ribeiro doing his famous “Carlton” dance. Frankly, this should fit in perfectly with every project.
The Sights of Sounds
If your website or app features audio, adding visualization to the mix can make the user experience that much better. It helps to keep eyeballs glued to your presentation and adds an element of fun. And even a simulated visual can be used to draw attention.