Elegant Karaoke with Spotify - Uibrary - The Internet's UI Design Resource

Elegant Karaoke with Spotify

Spotify has released their new Karaoke feature in a recent update and I have to say it is pretty cool. In the past Spotify has had integrations with Genius a service that allows artists to provide insight and context to their lyrics.

Although insightful the Genius integration only ever sampled small sections of lyrics and focused on storytelling rather than letting you see the whole song word for word.

In the latest update Spotify has not only released a lyric feature that highlights text as the song progresses but it has added a “Karaoke mode” that reduces vocal volume and allows you to sing over the track.

This Karaoke feature will be great to use at a party or to practice singing by yourself.

Let’s take a look at the patterns used to implement the Karaoke feature.



Discovering the lyrics feature

We see that Spotify has gone for the same pattern they used when they introduced Genius to their service. On the track detail view they have added a high contrast peaking card that lets the user know the view can be scrolled.

On the peaking card itself we see Spotify have also added a small tite “Lyrics” and a call to action button with the verb title “sing”. This button is incredibly informative and a great use of language.

Switching from lyrics to Karaoke

When we scroll and tap on the lyrics card it pops up and takes over the view full. The lyrics begin to scroll with the song as the music plays.

When we tap on the microphone icon in the bottom left we activate “Karaoke” mode. There are two important things that happen here.

The background changes color to visually represent the state has changed. The volume of the lyrics in the song are lowered.

This audio inversion allows the user to sing along to the song with essentially a backing track.

Bonus settings

The final thing I want to mention is that the “Karaoke mode” offers a setting to increase and reduce the volume of the backing track. If you want more backing vocals or less.