I've always wanted to work on a project involving music, since it has always
been such a huge part of my life. Interestingly, all most people needed was
the first two seconds of the opening drum riff to recognise Careless Whisper
by George Michael, one of my favourite songs.
There is something about song identification that makes an interesting pasttime my friends have always enjoyed. I wanted to capture that quick-paced and fun atmosphere associated with guessing songs while comparing music preferences.
Whisperify is an interactive way to learn about your favourite songs on
Spotify. It chooses 10 songs from your top tracks or a playlist, generates a
quiz, and plays you 5-second snippets, or 'whispers', of each song. You then
get time to guess the song and get scored on your speed and accuracy.
I was really excited about working on this project, as it was my first full-stack personal project. Although I still have plans for many features, it was amazing to see that everyone was also as excited about Whisperify. Over 2000 users tried it out in the first 24 hours it was made public!
Try Whisperify here, or view the code.
Many music quizzes can be found via a Google search, but they are all either no longer live, or apps that allow you to only guess pop songs. There was definitely a gap for a music quiz application that generates customized quizzes.
With that said, the problem statement is:
How do we build a personalized music quiz that gives users interesting insight into their listening habits?
To get that information, I would need integration with existing music services. Luckily, Spotify has a very comprehensive API that would provide this custom information. I chose Angular, Node, and MongoDB for my frontend, backend, and database respectively.
Angular provides structure for a project of this size, and the Express library in Node is the ideal server choice for calls to the database and APIs. The database would store scores from players to let them know how they performed against others. The final architecture is an Angular app served via NodeJS on Vercel, a serverless hosting service.
One of my main concerns was to provide an app that was fun and easy to use while being challenging. To do so, I did user segmentation, and decided on the following categories.
I decided on an autofill input after some research. It isn't as easy as
having multiple choice options, but players also don't have to completely
recall the song title. A user's score would be based on their correct
guesses, along with the time they took to make that guess.
This meant that casual users could focus on guessing their songs correctly, while more proficient users can aim for a perfect score, capturing the thrill of song guessing.
In the design and branding, I aimed to clearly convey the relation between Whisperify and Spotify. The first part, Whisper, is a nod to the motivation behind the app: George Michael's Careless Whisper.
The overall branding of Whisperify was kept concise. The main typeface, Circular Std, is very similar to Spotify's brand image to provide visitors with a familiar first impression. Open Sans is my personal favourite for content. The endless waves on the bottom provide some animation to the page and were meant to be soundwaves.
The colors had an overall dark theme with a blue accent color. I experimented with yellow and blue to find the most suitable colour. Yellow was too distracting especially with the oscillating waves, so blue was chosen to be the primary colour. Green was used on Spotify-related components on the page, like the login button, add playlist, etc.
I deployed Whisperify at the end of January 2020, and then shared a link to
the app to r/spotify, the Reddit community for Spotify users. It was really
well received and I received great feedback on future features. Over 2000
users tried it within 24 hours of the post!
The main comment I received was the fact that a user's top songs weren't always their favourite music, depending on how they use Spotify. To remedy that, I added a feature to quiz yourself on any of your Spotify playlists! This led to the release of v1.1.
Over the next couple months, Whisperify would be shared on various social media platforms, including a large Spotify community on VK that drove a spike in users from Russia, and even reaching the front page of Reddit on one occasion!
Looking back, I definitely should have implemented features that helped user retention earlier to take advantage of the organic growth.
Using suggestions from the Reddit comments, I started working on v1.2. More
control over the quizzes was the main request, so I implemented an options
panel that allows you to change the time limits, and exclude artists. This
was important especially for users whose top songs had been contaminated.
Multiple choice was another popular request, with many users drawing a parallel between Whisperify and iQuiz for the iPod. The addition of multiple choice meant two things, the need to revamp the scoring system, and the ability to make shareable quizzes.
For the scoring system, I added much quicker points decay and a max score that depends on your quiz options. Multiple choice would allow you to get a lower max score than the default answer method, longer whispers meant a lower score too. Along with that, streaks were added to introduce more variability.
Shareable quizzes were a fun implementation. A database object is generated with a random id containing the exact settings and songs in the quiz. Players can then share that link with anyone to challenge them on the exact same quiz.
With 1.2 released, I posted an update on r/spotify and was pinned by the mods!
After adding the ability for me to generate custom quizzes based on albums
and users, the quiz aspect of Whisperify was almost complete. So, I started
working on the other main plan I had for the project: Whisperify Analysis.
With so many users, Whisperify now has a large enough dataset to provide interesting stats. Whisperify Analysis provides that insight through plotting the Spotify audio features of different demographics. The data includes users from all countries Spotify is available, 16 personalities, all Spotify albums, and playlists. The latter two are done through wrapping a sequence of Spotify API calls.
I chose to display it in a radar chart format and a dot plot format, allowing users to choose their preferences. Radar charts are a very visually pleasing way to compare data, although it can get cluttered. I added a multi-radar layout to solve that.
With that done, I can now explore two of the most interesting Spotify
features to me. The first is the Spotify Year In Review, which provides
insight into your listening activity throughout the year.
Through Analysis, I want to allow all Spotify users to generate a Year In Review image at any time. Using data from the Spotify API and some HTML canvas magic, I was able to recreate the Spotify duotone look, while also integrating the user's audio features into the image.
Visit Whisperify Analysis to generate your custom image!