We started with a simple question: what could we do with chatbots that allows someone to control something physical outside of the conversation? that would be fun and will annoy our colleagues? And so the Sonos Takeover was born.
How do we make it work?
Like any good UX project we started with problems.
How do we look up songs?
How do we queue songs on a Sonos device that’s sitting in our office not visible to the internet?
Can we announce a takeover somehow?
What if someone sends us an emoji?
How many requests of Barbie Girl can we take before pulling the plug?
And then there’s the restrictions of the Facebook Messenger Bot UI. We had to learn the UI elements and reverse engineer the UX and conversation to fit around the inputs provided by the Messenger Bot.
How does it all fit together?
There’s 5 parts that connect to make the bot work: Facebook Messenger, a bot script on a server written in NodeJS, a track search script that uses the Spotify API, an internal server that the bot talks to & the Sonos Controller in the studio.
The Messenger conversation
Our bot waits patiently for someone to wake it by sending us a Facebook message and then quickly heads off to find tracks that match the users search terms and offers them back to the user. The user then selects the one they want us to hear, following which the bot channels the request into the studio. It then informs the user that the 3SL team are now ‘enjoying’ their carefully selected track in the studio.
Looking up tracks with the Spotify API
Some prankster types Rick Astley – Never Gonna Give You Up and our bot receives it. We pass that to a NodeJS script that handles talking to the Spotify API to lookup the song. Typically this returns more than one track, from which we strip out duplicates (same track on multiple albums etc) and pull out the top 3 matches based on popularity. Spotify gives us the song info including a song ID (important for later) and that gets back to the bot. The bot replies with the top 3 matches and waits for the user to pick one. They can search again if they like.
Handling a takeover request
The user is insistent on Rick Rolling us and selects the track they want us to hear. The bot receives the request and has a couple things to do.
At this point you would be forgiven for thinking that the bot knows the name of who it’s talking to, it doesn’t! So we make a separate request to Facebook for the users name.
We then send the request to another Node script running on a server in our office using a bridge to get around not having a static IP address. This script then talks the local Sonos API to announce “Sonos Takeover by [Name]” on the speakers using MacOS’s text-to-speech engine. Node then queues the song request using the song ID we got from the Spotify API earlier and plays it immediately replacing whatever we were enjoying listening to at the time.
The song is now playing and the client we’re in a meeting with is subjected to Wu-Tang Clan – Bring The Ruckus. But we want the whole world to know what good taste in music we and our friends have so we have another script that runs continuously on the server in our office, querying what song is currently playing on the Sonos and sending that to our website so any song that is currently playing is displayed on the front end. To make sure none of this is ever forgotten we stick each request in a database and provide a continuously updated playlist of all our requests.
If you want to broaden our musical horizons simply go to m.me/threestraightlines and request a track.