Noisebox

Overview

The original ghetto blaster lab was something I hacked together at Pirata a couple of years ago. It was a simple ‘soundboard’ website that anyone could access through their web browser. When people clicked a link on the page it would play the corresponding sound clip through the music server laptop in the corner. It turned out to be great fun, but it was a faff to set up, as it needed installing on a computer before it would work.

This is its spiritual successor. It essentially does the same thing, but it all works through a browser. So, rather than having to install anything, any computer (or tablet/phone) could go to this website, and become a noisebox ‘host’. Then, any other machines can click links and make sound effects play through the host machine’s browser.

The concept is that anyone can start their own noise box ‘room’ as a ‘host’ that’ll play the noise through their speakers. Others can connect as a ‘client’ and help select tracks, which will then be played via their specific host(s).

Once a client logs in to the room, they see a list of tracks, can preview or broadcast a clip, that’ll then get queued and played on the host machine. The noise is played via the html5 audio api.

Pages

From the home page, you create a new noise box by entering a name into the form and hitting ‘go’. This will redirect you to a new page, where your machine now acts as a ‘host’. This page contains a URL, which you share with anyone you want to be able to play sounds. If you were to visit this URL from another computer (or phone) you would see the ‘client’ page. Any tracks selected on the client page are played through the host computer.

The host page isn’t really interacted with. It is usually used on a laptop or phone connected to a pair of speakers, ideally in the corner of a shared office. At the start of the day someone logs in to noise box and starts a new room, then it’s largely left alone. It displays the current track being played, the play queue, and the logs (all of these are also featured on the client page).

The client page is where most of the interactivity happens. Firstly there is the list of all tracks, sub-divided into genres. When someone clicks a link, it’ll add it to the play queue. The host machine cycles through the play queue, playing the tracks in order. The client page also contains a log of all interactions - people leaving and joining the room, people playing tracks, and also there is a ‘chat’ box so people can leave messages that are added to the log.

Technology

The site runs as a Node.js web app, using websockets for real-time communication between machines.