i'm johan. i do things with computers. i'm from berlin

Tim Exile's Online Stage

This Thursday, August 18th at 19:00 CEST/UTC+2, Tim Exile will play the first official gig on his new Online Stage at … and I’m super excited about it, because Roel and me build that site for him (with the design help of Sheikh). You have to tune in! You can watch an explanation video on the site now already.

So on Thursday, Tim will plug in his laptop, midi controllers and webcam in his studio in London. When the gig starts, the website will reveal a live video stream and a chat. Tim will make music and people can watch, listen and write fancy comments. So far a normal online performance.

The thing that is really interesting is the “REC” button under the stream. All viewers can record audio in the browser and send this audio via SoundCloud to Tim. Within seconds, the new sound will turn up on Tim’s Launchpad. Tim can instantly use it, manipulated, jam with it. Also, all sent sounds can be seen and listened to on the website via the play buttons under the stream. You can literally see the new sounds dropping in. And Tim will use the sound, that you just recorded on your little island in India or wherever, instantly in his live gig. Wicked!

So how did we build the site? The stream is done via Livestream and we also use the chat widget from there. The recording functionality is largely based on recorder.js. Playback of audio is done via Soundmanager 2. Everything is glued together with jQuery. The DOM and styles are plain HTML/CSS.

To get the newest tracks from SoundCloud we use a reverse proxy. This is needed since we do the requests to Tim’s activities with a never-expiring OAuth2 token and we can’t reveal that token in the frontend. The first version we wrote used Sinatra and Thin, but this performed very badly with concurrent users. When a request hit the reverse proxy and was relayed to the SoundCloud API, the server was blocked until this request returned. Such a request can take seconds. To solve this, we switched to Goliath, which doesn’t block on I/O, but instead suspends the request using Ruby’s Fibres, until the HTTP call returns.

The whole site is deployed to Heroku on the cedar stack.

To get the samples from SoundCloud to Tim, we use a simple ruby script that polls the activities of his SoundCloud account. Whenever a new sound comes in, it is played with mplayer to a sound card. The sound card’s output is connected with a cable (!) to the input of a Reaktor patch that records incoming sounds and maps maps then to the Launchpad.

Yes, this approach appears strange but it works surprisingly well. The two problems it has tho are 1) it needs the duration of the sound to load it in Reaktor and 2) we loose the mapping between the track on SoundCloud and the audio in Reaktor. This mapping could enable awesome stuff like a back channel for displaying which samples Tim currently uses. But for now we will leave this to future iterations.

I’m super excited about the launch. I hope you will be there to see it.