The web browser as a musical instrument

Over the weekend we stayed with Anna’s sister Joanna, her husband Chris and their adorable new baby Lucas. Chris and I spent some of the time talking about electronic music and the internet. He’s a social media professional and a music fan but not a musician, and it was cool to hear his perspective on how people could use the web for production, not just sharing completed tracks. Then I got home and discovered the iNudge in my Delicious network feed:

Click around, it’s fun. The different colored squares on the right are all different instruments. The one on the bottom is a drum machine.

I’ve played around with a few web-based music apps, and this is by far my favorite. It’s a software version of the Tenori-On that boils the drum machine and sequencer interface down to their barest essentials. If you’ve never made electronic music before, the iNudge would be a great introduction. The software that I use for my tracks is more complex, but the core functionality is the same.

The iNudge was made by Hobnox, makers of Audiotool, a much bigger and more complex web-based music program. I find the Audiotool to be interesting and graphically attractive, but too complicated and not discoverable enough. Part of the problem is that the Audiotool emulates electronic music production hardware. That’s fine if you’re familiar with the gear it’s emulating, but it’s a mystifying bunch of knobs otherwise. Propellerheads’ Reason suffers from the same problem. It does a great job of emulating a variety of hardware devices, but as a visual metaphor for a computer program, it’s annoyingly counterfunctional. The “hardware” turns into a bunch of decorative elements that take up valuable screen real estate and attentional resources from the screen regions that actually do stuff.

The Tenori-On is a terrific visual metaphor and it translates well to the computer screen. If you’ve mastered the mouse or touchscreen, you know all you need to know. Audio software is most discoverable when it abstracts away from hardware and represents its different modules as simple boxes connected by arrows, like Max/MSP. The ideal interface for the signal chain would be a flexible network visualization tool like Omnigraffle.

Another nice feature of iNudge is the way it presents pitches to you. The adjacent rows on the grid aren’t mapped to the piano keys. They’re mapped to the D major/B minor pentatonic scale. You’re limited exclusively to that scale. You lose access to many notes, but you also can’t do anything that sounds bad. Vertically the grid limits you to straight eighth notes. As with the harmony, it restricts your choices but also prevents you from doing anything unmusical. If I were to extend the program one step more complicated, I might include a palette or pull-down menu with different rhythmic grids and scales.

Some other noteworthy music-making tools on the web:

The Daft Punk console let you remix “Harder, Faster, Better, Stronger.”

JS-909 is a drum machine in the browser.

Indaba is full-blown audio recording, mixing and editing in the browser with a social media component. I haven’t explored it too thoroughly yet, but I’m impressed by its ambition and scope.

Another in-browser audio recorder and editor I haven’t tried yet is Myna.

Ways to embed mp3s and playlists in the browser:

Facebook – when you post the URL of an mp3 file, FB automatically posts it in a neat little player.

Tumblr – same as Facebook.

Soundcloud – The best band-centric mp3 hosting and sharing service I’ve come across. Nice interface, including the option to comment on specific regions of songs.

The groovy WordPress mp3 plugin that I use throughout this blog.

Twitter with its associated third-party music add-ons like Blip.fm.

I think the merging of music-making and social media is an exciting development. Anything to bring more audience participation to the game is a good idea. If you guys can point me at some more fun tools and toys, hit the comments.

4 thoughts on “The web browser as a musical instrument

  1. Years ago now, as a way of introducing step-sequencing to my students (in digital production workshops), my better half experimented with flash to create “Sheep Beats”:
    http://sheepbeats.com

    It’s definitely on the clunky side and quite idiosyncratic, but that’s part of its charm. I’m encouraging Becca to retool it for the iPhone, or come up with something similar, perhaps also targeted to young people.

Leave a Reply