Incredible Code Snippets Inspired by Music

By on CSS, Inspiration, JavaScript

The soul of a developer is painted like the wings of butterfly. It is always full of bright ideas, brilliant findings, unique solutions, marvelous tricks and pioneering experiments.

Not only do programmers solve mundane problems like creating websites or mobile applications, but they also like to relax and enjoy the enormous potential of coding. Much like artists, they love letting their imagination run wild. They improvise, thereby coming up with some extravagant concepts.

The Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets


Music and coding go hand-in-hand. How many times have you seen a developer working behind their desk with headphones on? Music has a positive impact on people, and developers are no exception. It inspires and encourages creativity.

Today, we have collected a number of fanciful solutions. From skillfully recreated pianos to bizarre music visualizers, check out what these talented developers have created.

Traditional Instruments

The developers below have worked to bring real world instruments into the virtual. These examples provide us with a way to experience familiar instruments in a whole new way.

Piano by Chris Woelk

This is a fantastic take on creating a digital version of the classic musical instrument. The skeuomorphic realization, along with the skillfully chosen sounds and tones recreate an incredible musical experience. You can use your mouse or keyboard to compose music.

Play the Xylophone by Greg Hovanesyan

Greg Hovanesyan has recreated a professional xylophone. He has even added a wooden mallet to beat the bars. Using the power of web audio API oscillator, he has managed to pull off a gamut of sounds. This gives users an opportunity to create various xylophone-like sounds. And although you want to click on the bars instead of sliding and hovering, it certainly feels realistic.

Christmas Sounds by WILDER TAYPE

This pen by Wilder Taype has a childhood vibe. It seems like we all have a small, colorful xylophone at home somewhere in the attic and this one is its digital replica. Not only can you play it but the instrument itself can play a song. And in this particular case, it is a joyful Christmas song.

Key by Romina

Key by Romina is not as sophisticated as the previous two, yet it has its charm. It is oversimplified not only regarding design and functionality but also in user experience. Nevertheless, it is a perfect example of a simple musical instrument where all the notes are present.

Music Time! by LegoMushroom / The Bluesman – You Can Play The Blues by Greg Hovanesyan

Another popular instrument among the developers is the guitar. And we have two exciting pens: Music Time! by LegoMushroom and The Bluesman – You Can Play The Blues by Greg Hovanesyan.

Although the concept of LegoMushroom does not produce any sounds and has nine strings instead of classic six, it is interesting to explore. Note that the strings have a realistic behavior: They vibrate and exude colorful notes. Also, there is a small control panel that lets you set some options. Paper.js and Web Audio API run the project.

This is another remarkable work by Greg Hovanesyan. While the last time he offered us a chance to play piano, this time he invites everyone to compose melodies on the guitar. Though the guitar illustration on the bottom has nothing to do with the composing, it certainly adds to the general atmosphere. Keys on the top generate guitar sounds. What’s more, you can also play along with the backing track.

Visualizers

Music visualization is a feature that we adored in the era of media player software. Now it is nothing special, but back then it was something incredible. Nelson Rodrigues and Zach Saucier try to remind us about that with their ultra-modern solutions.

Three.js sound visualization by Nelson Rodrigues

Nelson Rodrigues uses Three.js to show the dance of music. His sound visualization includes a 3D grid scene with columns that react on the sound and move up and down.

Prism music visualizer by Zach Saucier

Zach Saucier goes for a prism shape. His prism music visualizer includes a control center where you can set such options as the number of rectangles, border width, prism radius, color and much more. Upload your favorite track and let the prism do the Boogie-Woogie.

Electronic Music

Now for something we’re used to experimenting with on a screen: Electronic music.

Demo by Matt West

Demo by Matt West features a synthesizer pad that enables users to generate sound. All you have to do is to click and drag the mouse cursor within the grid. Matt West takes advantage of Web Audio API to bring his idea to life.

SoundCloud Mini-board by Nicholas By Design

This small drum board has nine sounds that you can mix and match to compose something dignified. Use the keyboard to generate sounds. The author also allows you to pause the process and come back later. Also, the style of the board is based on neon coloring and is incredibly funky.

JS Drum Kit by Katherine Kato

JS Drum Kit by Katherine Kato is a small but exciting project. This kit has nine popular sounds that you can use to compose a simple track. It is very playful.

Seeded Procedural Music Generator by Jake Albaugh

As the nameplate states, Jake’s concept is used to generate infinite and reproducible songs from a “seed” word that you set. The song will be presented in musical notation. You can even download a midi file. It is a truly original idea.

Musical Chord Progression Arpeggiator by Jake Albaugh

This one looks a bit overwhelming. There are so many things: Chord progression, tonic, modes, Arpeggio steps, types and styles. It seems like a control center in a spaceship. It is the most incredible music-inspired code project in our collection. Jake Albaugh has done a great job. He uses his previously created Scale Generator and Arpeggio Pattern Generator in tandem with Tone.js to bring everything to life. Amazing.

Music to Our Ears

The code is poetry. And when you have all the necessary words to compose poems with iambic tetrameter and a rhyme scheme, it is just selfish not to write one. And when you apply music, these poems can be easily transformed into musicals or operas.

It may just seem that programmers deal with nothing but the lifeless computer, so they have just lines of code and commands behind their eyes. But all of these lines and commands are instruments that, in capable hands, eventually transform into a symphony.

Like in the real world, some of those symphonies can be a huge success, while others are not. The thing is that these compositions always lure us in. Why? Because they create a unique world which we are eager to experience and explore.

Comments