Berlin Web Audio Hack Day 2014

As with the Extensible Web Summit, we wrote some notes collaboratively. Here are the notes for the Web Audio Hackday!

We started the day with me being late because I took a series of badly timed bad decisions and that ended up in me taking the wrong untergrund lines. In short: I don’t know how to metro in Berlin in the mornings and I’m still so sorry.

I finally arrived to Soundcloud’s offices, and it was cool that Jan was still doing the presentations, so Tiffany gave me a giant glass of water and I almost drank it all while they finished. Then I set up my computer and proceeded to give my talk/workshop!

It was an improved and revised version of the beta-talk I gave at Mozilla London past past week:


Note to self: maybe remove red banners behind me if wearing a red shirt, so as not to blend with them

Sadly it wasn’t recorded and I didn’t screencast it either, so you’ll have to make do with the slides and the code for the slides (which includes the examples). Or maybe wait until I maybe run this workshop again (which I have already been asked to do!)

Jordan Santell and the Web Audio Editor in Firefox Devtools

Then Jordan (of dancer.js and component.fm fame) talked about the fancy new Web Audio Editor which is one of the latest tools to join the Firefox Devtools collection of awesome—and it just appeared in Firefox Stable (32) so you don’t even need to run Beta, Aurora or Nightly to use it! (I talked a bit about it already).

You can use the editor to visualise the audio graph, change values of the nodes and also detect if you have a memory leak when allocating nodes (which is something that is part of the normal workflow of working with Web Audio).

There was a nice plug to Are We Dubstep Yet?, the minisite I am building to keep track of bugs in the Web Audio Editor. Yay plugs!

are we dubstep yet?

Jordan’s slides are here. You can also watch his JSConf talk where he introduced an early version of the tools!

Chris Wilson and the Web MIDI API

Finally the mighty Chris Wilson explained how the Web MIDI API works and made some demos using a few and assorted MIDI devices he had brought with him: a keyboard, pads, a DJ deck controller…!

It’s interesting that most of the development of the Web MIDI implementation seems to be happening in Japan, so they are super original in their examples.

Chris’ slides on Web MIDI and other audio in general slides.

Hacking + Hacks!

I think we had lunch then… and then it was HACK TIME! But before actually getting started, some people pitched their idea to see if someone else wanted to collaborate with them and hack together. I think that was a really neat idea 🙂

Myself, I spent the hack time…

  • reconnecting with old acquaintances
  • answering questions! but very few of them and none of them were the usual “but why doesn’t my oscillator start anymore?” but more interesting ones, so that was cool!
  • asking questions! to Chris mostly–one cannot ask questions to a spec editor in person every day!
  • and even started a hack which I didn’t finish: visualising custom periodic waves for use with an Oscillator Node, given the harmonics array. I gave myself the idea while I was doing the workshop, which is a terrible thing to do to myself, as I was distracting myself and wanted to hack on that instead of finishing the workshop. My brain probably hates itself, or me in general.

Also this was really cool:

I’m always super aware that weird sounds might be coming out of any of the devices in my desk when I’m testing web audio stuff, so it was fun to see I’m not the only one feeling that way 😀

After hack time, the hacks were presented:

These are the people that submitted a hack, in the same order they appear in the video. Not all of them have published their hack code so if you are one of those, please do and write a comment so I can update this post!

  1. Jelle Akkerman (github, twitter) – NoOsc was an experiment using NoFlo, trying to build something very visual and cool, super suitable for live-acts. I really liked the idea!
  2. Guillaume Marty (github, twitter) – a BPM detection algorithm, using the OfflineAudioContext
  3. Erik Woitschig (twitter) – Using SoundCloud as sample database
  4. Daniel Roth, Jonathan Lundin (twitter, github), Felix Niklas (twitter, github) – Oscillator reacting to mobile phone gyroscope – it sounded really nice and I liked that the same code worked even in iPads. Yay Web Audio!
  5. Chris Greeff (twittergithub), Nick Lockhart (twitterhttps://github.com/N1ck) – Beaty Bird – source code (Second prize)
  6. Lisa Passing (githubtwitter) – One Hand Soundgame – source code (Third prize)
  7. Thomas Fett (twittergithub) – Remix at once – source code (Fourth prize)
  8. Evan Sonderegger (twittergithub) – Vector Scope in Web Audio API (First prize)

The hardware prizes were sponsored by Mozilla. And the software prizes by Bitwig.

The unofficial/community Web Audio logo

We also publicised a thing that Martin Holzhauer had worked on: the unofficial/community Web Audio logo!

Web Audio logo

Here’s the SVG. Many thanks to Martin for putting it all together!

As far as we know there is/was not an official logo. I totally love this one as it kind of matches the various JS* aesthetics and it is immediately understandable–most of the W3C api icons are just too fancy for anyone to grasp what they actually mean. Sure they look cool, but they do not work as a logo from a purely functional perspective.

And now, what?

Well, the Web Audio Conference is next January in Paris. They’re still accepting submissions for papers until next month, so why don’t you go and submit something? 🙂

Hopefully see you there!