Web Audio Hackday 2014

Earlier this year Jan Lehnardt, Rin, Robin, Tiffany and me started to talk about making something special for the upcoming JSConf.eu (2014). Our idea was to organize a JSFest in Berlin around the three big conferences in September (Reject.JS, CSSConf.eu and JSConf.eu) which would host a range of web-related Meetups and Events.

For more than two years I have been obsessed with writing things with the Web Audio API which is becoming more and more stable and is supported by more and more browsers. I wanted to share my enthusiasm for this API by creating a Web Audio Hackathon during JSFest. Since I never organised an event before, Tiffany, who is familiar with all the processes that are needed to create big events like JSConf.eu, joined the organiser team and we started planning very soon.

The event took place at the SoundCloud HQ in Berlin in the wonderful classroom :)

We were able to have three amazing speakers from Mozilla and Google which introduced attendees to the Web Audio API and the Web Midi API. To be honest, I was pretty stoked to have the three of them talking at the event because they have always been my Web Audio Heroes <3

Soledad Penadés gave a very insightful introduction to the Web Audio API that was suited for both beginners and more advanced users. Since most of the 30 attendees were novice users this was perfect. I especially liked her very creative way of explaining the core features of the Web Audio API as Super Powers and her description and demonstration of LFOs as spooky sounds :) The slides can be found here and a recording of her talk from a Mozilla event can be found here.

Then, Jordan Santell introduced us to the Web Audio debugging tools that he wrote for Firefox. I can still remember my first steps with the Web Audio API. My computer was making all these weird noises and my typical debugger-driven development work flow didn't work because audio is processed in its own thread and won't stop for debuggers. His tools would've made debugging much much easier! Slides

Chris Wilson did the last talk and he introduced us to the Web Midi API. It took some time to set this talk up because he took a ton of devices to showcase the capabilities of the API (as you can see on the picture underneath). It was like as if he was the secret 4th member of The Glitch Mob! His Slides are full of demos and are perfectly suitable if you want to get started with Midi on the web right away :)

After all the talks we had time for a little lunch altogether before we started the hack sessions. In addition to providing the location and drinks, SoundCloud sponsored tasty and healthy lunch snacks for all of us :)

Some groups formed during lunch and people started hacking right away. People were really focused and it was the perfect working atmosphere in the room. Sometimes there were weird noises coming from several computers when the attendees were trying out oscillators and audio parameters :) I did not really have time to work on a project on my own because I was still preparing my slides for JSConf.eu. In addition to the speakers, we also had coaches (Chris, Martin and Jan) helping the attendees with their projects. My favourite moment was when Chris Wilson was explaining details about audio, in the old fashioned way on a white board and people were gathering around him, listening closely:

After several hours of hacking it was time for the presentations! We had eight groups presenting their projects and here's the recording:

Here's a list of all the projects that were presented if you don't have the time to watch the entire video. If you are an attendee and you want your project link on here, please contact me on Twitter.

1. Jelle Akkerman (github, twitter) – NoOsc was an experiment using NoFlo, trying to build something very visual and cool, super suitable for live-acts.
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.
5. Chris Greeff (twitter, github), Nick Lockhart (twitter, github) – Beaty Bird, a Flappy Bird clone that can is controlled by various audio inputs. Super Fun! – source code (Second prize)
6. Lisa Passing (github, twitter) – One Hand Soundgame – source code (Third prize)
7. Thomas Fett (twitter, github) – Remix at once – source code (Fourth prize)
8. Evan Sonderegger (twitter, github) – Vector Scope in Web Audio API – demo page (First prize)

We had three hardware prizes that were sponsored by Mozilla (Akai LPK25, Akai LPD8, KORG nanoPAD2) and a special software price, a license for Bitwig Studio which was sponsored by Bitwig :)

Before we announced the winners, the attendees had the chance to get their hands on the amazing dinner that was provided by Google (while Martin and me were counting votes, almost starving ;)). Afterwards we still stayed in the classroom, having some drinks, talking about audio and web development. I was very excited to see another one of my Web Audio heroes popping by for the presentations: Stuart Memo <3

Post Scriptum

• Judging from the feedback from attendees, coaches and speakers it was an event that is definitely worth to be repeated in the near future :)
• One day after the Hackday in Berlin, there was the Web Music Hackday in Tokyo. We exchanged ideas when we were preparing the event and it looks like their event was a huge success and much bigger than the one in Berlin. You can see all demos and read about it in Eiji Kitamura's blog post.
• I'm looking very much forward to the very first dedicated Web Audio conference in January in Paris. If you're a web audio developer or interested in the API, you should definitely join.
• Soledad wrote a very good blog post about the event on her blog as well.
• We semi-announced an "official" Web Audio (community) logo made by Martin: