Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

There are some absolutely epic Pens exploring the potential of audio and the web. I like to think I follow web stuff pretty closely, but I would never have understood the power and potential of the Web Audio API and the various libraries around it if it wasn’t for the intensely creative things CodePen users do with it.

Here’s some favorites!

Bryant Smith’s Repeater Orchestra

Load this one up over HTTPS and activate your mic (and wear headphones!) and you can make really wild soundscapes as the sound repeats back at you. Bryant used it to perform a version of Terry Riley’s “In C” at a CodePen Meetup once (on trombone!). Jake Albaugh was then inspired to make his own web audio “In C”, which is also amazing.

Jake Albaugh’s Musical Chord Progression Arpeggiator

Speaking of Jake, he makes all kinds of amazing web audio Pens. Just recently, his Bi-directional Step Sequencer was blowing minds around the ol’ office. Perhaps his most well-known, though, is the Musical Chord Progression Arpeggiator, which makes you feel like a genius musician right out of the gate.

Lutz Rosema’s Music Paint

You draw whatever you’d like with different colors (which produce different tones) and then you can play the creation. The higher or lower the line, the higher or lower the note.

Greg Hovanesyan’s The Bluesman

And speaking of Pens that make you feel like a genius musician, that’s exactly what Greg’s Pen here does:

Turn on that backing track, which plays a very basic blues shuffle, then mouse around over the notes he has prepared for you. They play fuzzy guitar notes he recorded, and are the perfect notes for the track. Any note you play sounds awesome.

David DeSandro’s Web audio keyboard

Down to the basics! It inspired some musical creations around the office when it came out. Then I think it grew up into a version with a visualizer:

It even inspired some creative uses from ~~~a real band~~~.

Landon Schropp’s Percussion

I’m a massive sucker for beat machines. Here’s a really simple example by Djordje Petrovic. And then a more fleshed out version by Landon: