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
It even inspired some creative uses from ~~~a real band~~~.