Hackathon: Jingle Bells Edition

Last December, we — the Development Team — got together again for our second semi-annual Hackathon of 2022.

While no one came dressed up as Santa, I can assure you that we were all in a giving mood nonetheless, so we started racking our brains to come up with a sweet surprise that could bring joy to everyone at Ambassify. God knows they earned it after this fantastic year.

So there we were, bouncing ideas off each other for a while, when suddenly we all had a common epiphany (talk about a Christmas miracle!).

Here were the two decisive thoughts that clinked together in our minds:

• “It is crucial for the well-being of a team that everyone is on the same wavelength” (as Ambassify employees are devoted to Advocacy, we, of course, always have a couple of such precepts lying there somewhere).
• “Man, it’s freezing in here, maybe we could find something to keep people warm or something.” (OK, that one might have been just me).

And so a new project was born. Don’t see it? Well, you will in a second because it’s time to present…

The Ambassify Radio

Indeed, what better way to keep people warm and on the same wavelength than by having them dance to the same music?

The idea was dead simple: to build a live radio web app where everyone could add their own songs or voice recordings.

Nothing, then, that my talented colleagues couldn’t handle. And sure enough, here’s what we managed to put together after a few hours and many pastries:

Pretty neat, right? It even comes with a groundbreaking dark mode.

Now that you’ve had an eyeful, let me walk you through the main features while giving some brief implementation details for the more curious minds among you. For the severely curious, we also provide the tech stack at the end of the tour.

Features

Adding a song or a voice recording

To request a song, we simply need to send its YouTube link, and our server will retrieve its metadata, use yt-dlp to download it, and add it to the queue.

If someone would rather share a joke instead, they can hold the ‘Record’ button and speak to their heart’s content, thanks to the MediaDevices API. Should they stutter while delivering their otherwise hilarious punchline, they can try again, as many times as it takes. Once they’re satisfied, our server will receive a Blob of the recording.

Listening to people’s requests

No, your eyes do not deceive you: our radio app lets us… listen to stuff.

With a single click of a button, we can join the party. No mean bouncer. No exorbitant fees. Nothing. 

If someone pauses their player and resumes listening later, we will re-sync their stream with our server to make sure that it remains a live experience and that no one is seen suddenly headbanging to some imaginary metal track while the rest of the gang has been enjoying a peaceful light-jazz session for the past hour.

Our streaming implementation comprises three parts:

1. The server uses VLC command lines to start a stream of the next audio file on localhost.
2. The server exposes an endpoint that uses Node.js’ built-in Stream API to pipe this stream to the outer world.
3. The web app shows an Embed Audio element whose src attribute points to that endpoint.

Requesting a skip

Is someone on the team a bit too fond of 3-hour-long yodeling mixes?

We got that covered, too, with a ‘Skip’ button!

In true democratic fashion, however, it won’t do anything until most people are fed up with it.

Tech stack

Frontend

A basic React SPA embellished with the Mantine components library. Even if you don’t care about UI libraries, you might still want to check it out because it also provides a bunch of useful hooks for all your frontend development needs.

Backend

The API was created with our very own Expressify framework, a wrapper around good old Express.js. We also cobbled together a crude data storage layer for the audio files.

What’s next?

You may think that it’s already a nice and complete app. And you’d be damn right. In fact, we all had the opportunity to play with it during our kick-off drink two weeks ago, and while I may not remember everything, I can confidently say that it was a success. There were no bumps in the road the following week either when we took it for a final test drive on Blue Monday, with everyone sharing their tried and true feel-good songs.

And if all that talk about music has given you the itch to dance, we even have a little farewell gift for you: our own curated playlist of uplifting songs.