Home » Blog » This AMAZING SPOTIFY Player looks AWESOME On Your Dashboard!

This AMAZING SPOTIFY Player looks AWESOME On Your Dashboard!

Hi!
Do you want this AWESOME Spotify Player on your Home Assistant dashboard? This can be done in minutes and I’m going to show you how to set this up. Let’s do this!


⭐⭐⭐ NOTE: ⭐⭐⭐

This article accompanies a YouTube video. I wrote it for people who would rather read than watch a video. In order to keep doing this, I would like to ask you to also check out the video, leave a comment under the video, give the video a thumbs up and subscribe to my YouTube channel. This means that the video is offered more often to new visitors so that they also stay informed of the latest tutorials about Home Assistant.

Thank you for your support!

Ed

Click here to watch the video

Last week, I created this video that shows how you can create an AWESOME Radio Player on your dashboard in Home Assistant. A lot of people asked me if I could show how to do the same for Spotify. So, here you have it! This video explains how to set up this AMAZING Spotify media player on your dashboard. If you combine both videos, you can create one media player that plays your favorite Radio stations and Spotify playlists on your smart speakers in your home like this! And you don’t even need to have a Spotify Premium account for this!

Yes, you hear that correctly, you can use this player with a free Spotify account! You can also use Music Assistant in Home Assistant to play music, but I wanted to have a music player that looks sexier and that I can add easily to my dashboard.

But, before we start, please subscribe to my channel and hit the thumbs-up button for this video. This way, you make sure that I can keep creating these videos for you!

It’s really not that difficult to set up this Spotify player. And even if you find it difficult, you can download the code I used in this video via the link in the description of this video below.

The topics that I will cover in this video are:

  1. How to set up Spotify in Home Assistant
  2. How to install the mini media player
  3. How to configure the mini media player
  4. How to play Spotify playlists

How to install Spotify in Home Assistant

Before we can start with the media player, we have to make sure that Spotify works in Home Assistant. I use two integrations for this. The first integration is the Spotify integration in Home Assistant. The second integration is a HACS integration called Spotcast. For this, you need to have HACS installed. If you do not have HACS installed yet, I created this easy-to-follow video on how to do that. Check it out.

Let’s start with installing the Spotify integration in Home Assistant now.

  • To install Spotify in Home Assistant go to the Spotify developers page that is on developer.spotify.com.
  • Then go to the dashboard and log in, and if you’re not having an account then sign up for a free Spotify account first.
  • And then click login.
  • Now go to create an app give the app a name. In my case Home Assistant demo.
  • Give the description.
  • Click create.
  • Now click on edit settings, and add a redirect URI.
  • Enter the following line: https://my.home-assistant.io/redirect/oauth
  • Click on Add.
  • Now scroll down.
  • Click save.
  • Now click on show client secrets and copy the client ID and client secret to a text file.
  • Now go to Home Assistant.
  • Go to settings.
  • Go to devices and services.
  • Click on ADD integration and search for Spotify.
  • Click Spotify.
  • Now give this a name, for instance my Spotify, and paste the client ID and client secrets that you copied to your text file.
  • Click Add.
  • Scroll down.
  • Click agree.
  • Click on link account, and you can select an area if you want. Let’s say office in my case.
  • Finish.

And now Spotify is installed in Home Assistant

Install Spotcast

The Spotify integration is now installed. To make it work easily with the media player, we have to install the Spotcast integration using HACS. Let’s set it up!

  • To install Spotcast, we are going to HACS.
  • Go to Integrations.
  • Go to Explore and Download Repositories
  • Search for Spotcast.
  • Click on Spotcast.
  • Click Download.
  • Click download again.
  • Now reboot Home Assistant by going to Settings, System, Restart.
  • Click Restart.

Now we have to add some code to the configuration.yaml, and for that it’s handy that we have Studio code server installed. So, if you haven’t installed that,

  • Go to Settings
  • Go to Add-ons
  • Go to Add-on Store.
  • Search for Studio code server.
  • Click Studio code server.
  • Click install.
  • Click Show on Sidebar.
  • Click Start.

Now go to Studio code server and here you see all the files that are on your Home Assistant server. Click on configuration.yaml and add the following code:

##### Spotcast settings ##################################
spotcast:
  sp_dc: !secret sp_dc
  sp_key: !secret sp_key
  country: NL #optional, added in 3.6.24

And as you can see, there are two codes here sp_dc and sp_key, and they are both secrets. So we have to add them in the secrets.yaml. So go to secrets.yaml.

Add these two lines sp_dc: and sp_key:. And now we have to retrieve these two values. For that we’re going to open a new incognito browser window, so we’re going to the three dots over here. Click on new incognito window and we are going to open.spotify.com.

I’m going to login.

  • Press F12 on your keyboard.
  • We’re going to application, cookies, open.spotify.com.
  • And you see that I have a sp_key here and I have an sp_dc here.
  • Copy the value of sp_dc (Ctrl-C)
  • Go back to the secrets.yaml file in Home Assistant.
  • Paste that code after sp_dc: with Ctrl-V.

We’re going to do the same for the sp_key.

  • Go back to the inspector of the browser
  • Copy the value of sp_key (Ctrl C).
  • Go back to Home Assistant.
  • Paste the key after sp_key:.
  • Save this (Ctrl-S).
  • Reboot Home Assistant once again.
  • Go back to Settings.
  • Go to System
  • Click restart, and Spotcast is now also installed.

Test if Spotify works

Now that Spotify and the Spotcast integrations are installed, let’s test if we can play a Spotify playlist through one of our smart speakers. I use a Chromecast Audio in this example, but I’ve also tested it on a Google Home Speaker. Unfortunately, I do not own an Echo myself, so I did not test this on an Amazon Echo. I believe that it’s a bit more difficult to get it to work on an Echo. Please let me know in the comments if you can get it to work on an Echo as well.

First, let me explain how you can retrieve the Spotify playlist ID and then use this playlist ID in a Home assistant service.

To test the Spotify playlist, we first need to know what the Spotify’s playlist ID is. For that, we are going to the Spotify site, so let’s go to www.spotify.com.

  • Search for one of your playlists. For instance: my favorites.
  • And now you see the code in the URL, and that is the ID of the playlist.
  • Copy that code.
  • Go back to Home Assistant.

And let’s test it by going to the developer tools.

  • Go to services, and select a service.
  • The service is spotcast.start.
  • The device name is in my case the friendly name of my media player which is Chromecast Audio. In your case it can be something different.
  • The URI is spotify:playlist: and then the number of the playlist ID that we just copied.
  • And we can for instance say play a random song.
  • And now click call service.

And our playlist starts playing, so it’s working.

How to install the mini media player

We managed to call a Spotify playlist in Home Assistant, so now it’s time to install the mini media player in Home Assistant.

  • To install the mini media player, go to HACS
  • Go to front-end
  • Go to Explore and Download Repositories
  • Search for mini media player.
  • Click mini media player.
  • Click download.
  • Click download again.
  • Click reload.
Profile Picture Ed

If my videos help you and if you want to stay up to date with my tutorials and not miss anything to increase your knowledge of Home Assistant and Smart Home, subscribe to my channel and tick the bell. It also helps if you post a comment. This way more people get notified about these videos. I need your support so that I can keep creating these videos for you.

Oh, and don’t forget to hit the thumbs up for this video. This allows me to make more tutorials for you.

By supporting me, you also support my work as a music therapist to help people with mental issues.

Thank you!

Configure the Mini Media Player for Spotify

The mini media player is now installed. The documentation of the mini media player can be found on this page. It has a lot of possibilities like playing from different sources, showing album and artwork information, and many more options to tweak the layout. We will set up the mini media player so that it will look like this. It will show the title, artists, and album information after we’ve set it up. You will know how you can add your own Spotify playlists after you followed this tutorial until the end. Let’s set up the media player.

  • Let’s set up the mini media player by going to a dashboard
  • Click on the three dots in the right upper corner
  • Click edit dashboards
  • Add a card
  • Search for mini media player
  • Here you see all kinds of options. So let’s select an entity which is your media player in the room. In my case Chromecast audio
  • Give it a name.
  • I can give it an icon, for instance mdi:music.
  • I can also give it an icon image. That image will overrule the icon.
  • I have an option to group cards, swap volume slider for buttons, toggle power button behavior. I won’t do that.
  • I want to see the artwork, and in my case, I want to see the cover.
  • Source. I can set on full. I don’t think it does much with this.
  • Sound mode. I also put it on full.
  • Info. I’ll put it on scroll
  • I’m not going to replace mute.
  • I can also add a background and a scale.

I’m going to add the background, but for now, we are going to save this. So now I have a default player here, and now we’re first going to add a background. For that, we’re going back to Studio code server.

You see this folder www community mini media player. On www I’m going to click with my right mouse button. I’m going to say new folder and that new folder is going to be spotify.

Within that folder I’m going to place an image, and I already prepare that image.

Copy this image into this folder spotify. So now I have in www a folder Spotify and I have a file radiobackground.jpg in there. Now we’re going back to the dashboard. We’re going to click on the three dots, click edit dashboards, click edit on the cards. So I’m going to add a link to the background here. The strange thing is that I’m going to start with /local which is actually pointing to /www. So we start with /local then /spotify and then /radiobackground.jpg. Let’s save this and you see that it now has a background.

Add the Spotify Playlists to the Music Player

Now that we know how to get the Spotify Playlist IDs, let’s add the Spotify playlists to our media player. In my last video about creating a Radio player in Home Assistant, I showed that I created a script for each radio station. In this video, I am going to show you a different approach. We are not going to create scripts, but this time, we will call the Spotcast service straight from our player instead.

Now we are going to add the Spotify playlists to our media player. For that we are going to click on the cards. We’re going to show code at the top, because we have to do that in yaml. We are going to add some code over here. We’re going to start with the following code: shortcuts:

We are going to say we want to have three columns, so three and we are going to define some buttons.

Within the buttons, we are going to define some playlists. So we’re going to define the first playlist. We’re going to start with – name. Give it a name “favorites”. We are going to say the type is a service. Then we are going to give that an ID, and the ID is spotcast.start.

We are going to add some data. Within data we have a device name which is the player in my room. The friendly name is Chromecast Audio.

We’re going to add the URI just like we did in the test: spotify:playlist: and I’m going to paste playlist ID here.

I’m going to say random song is true, and I’m going to say Shuffle is true. This means that it starts with a random song and that it shuffles the whole playlist. So let’s save this, and you see I have a button favorites now. And as soon as I click that button, you will see that it will start playing one of the songs of my playlist. And you see that the background is filled with the album cover. You see the name and you see the artist. I can maker it louder, make it less loud, and I can pause, play. I can go to the next song in my list, and another song and I can also stop it. So this is how you add one playlist. Now let’s add a couple of playlists more. Let’s do that real quick. Click on show code editor.

Click on Save. And now you see I have multiple buttons here. Click done. Now I can click on one of them. That playlist will start playing, I can go to another one, I can go to the next song, and so on and so on.

If you don’t want to type the code from the screen, you can download the code that I’ve created for this video via the ko-fi link in the description below. With this, you sponsor me, and make it possible for me to keep creating these videos for you.

We can now play our Spotify playlist through the mini media player. I’ve created buttons to call playlists, but you can also create a list if that is more convenient for you. There are more options which you can do. For instance you can change the buttons into a list. So let’s go to edit dashboard. Click on edit, click on show code editor, and replace buttons with list.

If I save it now, I have a list of shortcuts that I can select instead of the buttons. I can also change this shortcuts name by clicking on edit, clicking on show code editor, go over here, down columns. And say label:  Spotify playlists… for instance. Save it, and now you see that it says Spotify playlists, and I can start a playlist by selecting that playlist from the list.

If you combine the radio player from my previous video with this Spotify player you can create something like this.

Conclusion for our Spotify Player

We can now play our Spotify playlists through the mini-media player. I’ve created buttons to call playlists, but you can also create a list if that is more convenient for you. And if you combine the radio player from my previous video with this Spotify player, you can create something like this.

I want to thank everyone who has supported me in making these videos and tutorials so far. I could never have done this without you. Thank you! You can support me through Patreon, Ko-Fi, or by joining my channel. If you also want to support me, look in the description of this video for the links. With that, you make it possible that I can continue to make these videos for you.

Oh, don’t forget to give this video a thumbs up, subscribe to my channel, and hit the notification bell.

I will see you soon!

Bye bye!

Shorts Text:

Do you want an AMAZING-looking SPOTIFY player like this on your dashboard? This can be done in minutes and I’m going to show you how to set this up. First, install the Spotify and SpotCast integrations, then install the mini media player and configure it. After that, retrieve the playlist IDs from Spotify and add the Spotify playlists to the media player. Watch the full tutorial video on YouTube to create this AWESOME Spotify player on your dashboard. Bye Bye.


,

Back to all articles