Spotify Custom Tile

It’s all done through Spotify’s API, so you don’t need anything installed on the device that’s displaying the dashboard. That being said, the API is pretty limited with what is considers an ‘active’ device that’s available in the API.

I’m not sure exactly what you mean by this, but yes, it’s all based on what the authenticated user has access to. So you’ll want to make sure to use the same Spotify account on your devices as well as when authenticating this Custom Tile.

The tile can control a single ‘device’ at a time, but you can switch which device you are controlling and control other devices. I find the Spotify API a bit odd though – if you open up the Spotify app, it finds all the different devices on your network including Google Cast devices, etc… but the API seems to be more limited. In my experience, most of my devices that show up as ‘Spotify Connect’ in the Spotify app, like my Onkyo AV Receiver, are always available as targets, but the various Google devices in my house don’t show up through the API. :worried:

What type of device(s) were you trying to target?

Well then I got an issue with it. I followed “easy” instructions and can’t get device list in tile if Spotify app isn’t running background. I need to have spotify app open and I have to be logged in with that same account which was used in custom tile authenticating. Otherwise tile doesn’t list any devices.
I just tested this with other pc too and it¨s behaving same way.

When I’m getting that refresh token there is an option to test device list. That does not list anything either.
I have 6 google home’s and couple of chromecasts and it only lists max 2 devices at time depending if I’m streaming with app to that particular device.
image


Device button doesn’t do anything…and if I click “play” it says:

If I open spotify app to background then I’m able to get device that I’m using at the moment.

My spotify app shows these:

If I start to stream one of those devices in spotify app:
image

Then I’m able to get that particular device to show up on tile but nothing else:

That’s just the nature of the Spotify API and is what I was linking to in the previous post:

Devices not Appearing on Device List

Connect Web API relies on local network connections to discover and interact with some devices.

For example, when:

  • A new device is added to the network
  • A device is in “sleep” mode
  • A device on the local network is currently tied to another user account, or
  • Other reasons specific to the device

As a result, some devices that appear in the Connect picker within the Spotify application may not always be visible or available on the Connect Web API Endpoints.

Their concept of “sleep” is really limiting. The only devices that I see as always available for me are things like my Onkyo AV Receiver that have the native ‘Spotify Connect’ integration. All my Google devices, my desktop, and things like PS5 only show up if they very recently played something.

Depending on what you are trying to accomplish, if your hub has a Google Cast integration, you might be able to use that as a starting point?

My plan was to create spotify tile which would allow me to choose what music to play and with what google home or chromecast device. I guess that will not happen because of all the examples listed.

Hi James, I wonder if you can help create a customer tile like this for Sonos from smartthings or Hubitat. Can you please let us know?

Hi @rog889! Have you seen the Create a Jukebox thread James put together?

You can put together some cool jukebox style dashboards with the Sonos integration for SmartThings or Hubitat:

1 Like

I’m assuming you have to have a device such as Sonos to run this and we can’t just use the app without owning a device?

Hi, I did all the procedure but I get an error message: “Spotify refresh token is not set”
Of course I have copied and pasted the refresh token provided with the procedure. Any idea of what is wrong? Thanks

Where did you enter the refresh token? You should not modify it within the developer tools… only on the instance of the tile you’ve actually added to your dashboard.

I have put the refresh token when asked after the preview and than I choose the speaker and the playlist and save that. The preview is playing perfectly (the chosen music starts as well!) but when I go to the dashboard and add the custom frame created I get the error. What am I doing wrong?

You have to edit the tile that gets added to the dashboard and add the Refresh Token there.

Thank you Josh, I missed that last part! I will test it in the next coming days but I think it’s working now

1 Like

Any update on displaying the tracks in a specific playlist instead of a bunch of playlists?

Hi James, thanks for creating this. This is awesome!

I had this installed last night and it was working wonderfully but today when I tried using it again, the token expired, so I went to get it authorized for a new refresh token. The demo loaded up fine but I cannot select any of my Amazon Echoes, even though they all show up. I get the message “No active device. Please select an available device first.”

One thing I’ve found out is that if I have pre-selected the device on my Spotify app on my PC, I can use the controls in the tile but still get the same device error message as above.

I think you’re running into the limitation of the Spotify API as noted further up in the thread. It’s really neuters the functionality of their Web API compared to their ‘app’ SDKs. :frowning:

Thank you for the reply, Josh.

I have reverted to testing out your other music player with album art with your latest update.

Thanks.

Bruce

1 Like

Is there a way to enable the Lyrics in this music player as a tile? TIA.

I don’t believe they make the lyrics available through their API. From a quick search, it looks like even Spotify is sourcing the lyrics from a third party.

Thank you very much for the information

Hi,
I made some modifications to the provided code in order to have the album art cover the entire tile:

  • Album art covers entire tile ( applied darkened filter and slight blur to improve lists readability) when playing song / device is selected.

  • When not playing / device is not selected elements stay transparent, song & artist section becomes hidden.

  • Moved the song & tittle to the left

  • Centered control buttons

  • Applied transparency to elements background ( artist/song, player controls / lists )

  • Works great in smaller tiles (3*3) or mega tile.

If someone is interested in the code PM me.

When nothing is played or no device is selected the tile stays transparent ( as there is no album cover to display ) this way it blends with your dashboard background, also the section where artist and song is becomes hidden.

Example in use with mega tile (really depends on how many tile number your dashboard is setup) I just left the first column to go back to main dashboard and the rest is used by the spotify tile.

3 Likes