Spotify Lovelace Card

Tags: #<Tag:0x00007fd0846a67b8> #<Tag:0x00007fd0846a6448>


DISCLAIMER : This project is a private open source project and doesn’t have any connection with Spotify.

This card supports listing the users currently available devices and the users 10 top playlists on Spotify. Choose an online media player and click on a playlist to play it on the device. The component uses the Spotify Web API.



I’ve just tried your card and it was really easy to set up. Great work, thanks a lot. It’s exactly what I had been looking for :slight_smile:
Changing playlist works fine, however changing playback source works only if I restart a new playlist. I can see all my spotify connect devices in the list, but when I select one of them the playback does not switch directly to that source. It switches only once I select another playlist to play. I am not sure if this is the intended functioning.


Hey! Happy it worked. Yes changing a source doesn’t change the source. That is a good improvement. I’ll add that to the next realease.

Also I want to add chromecast devices once I figure out how to get them from the hass object.
Anyone knows how to figure out if a media_player is able to play spotify (chromecase devices supports it for sure).


I’ve tried to set up your card on my tablet dashboard. It runs fully kiosk browser. The card doesn’t load unfortunatelly. I have an error message saying custom element does not exist. Is it due to the fact that it is not transpiled as you note in yout warning on github ?


Awesome job. I made something similar as practice but your implementation looks much better than mine. I’ll probably look at your card later for ideas :sunglasses:


Yes, I think it is because it is not transpiled. Open a ticket in the repo and add your browser details with for instance
If this is popular I can add a transpiled version or you are welcome to open a PR and do it.


@bishop I added a polyfill library. Can you try with this source:[email protected]/src/spotify-card.js?


hmmm I think the problem is my tablet actually and not fully kiosk. From what I can see, both fully kiosk and chrome installed on my tablet uses the chrome engine to render website and I have chrome version 71 in both case as a browser in whatsmybrowser.
I both chrome and fully kiosk the custom card does not load. I tried to update my chrome via the playstore but it doesn’t work so there is definitelly something fishing on my tablet. Will try to investigate further.


It worked great! Thx a lot!
Can i also add my sonos speakers to your card?


If sonos are “Spotify connect” compatible they will work. Otherwise not I’m afraid.
Can you play something on and then transfer the music from the webplayer to your sonos speakers?


I finally got around to setting this up, got it authenticated but now I can’t figure out how to chose a media player. How do I go about doing that?


Tried setting this up. I get a card with a Spotify icon and “Authenticate” error/notification. I reused the client_id I already had for the HA spotify card, which works fine. I also obtained a second client_id from Spotify, no difference.

Looking through the readme, I do not understand the lines:

Make sure you edit the settings and adds the redirect URL for the tab the card is one.

Example: `https://<your public home assistant hostname>:8123/lovelace/media` .

How/where do I put this?

Thank you for your work !!!


You have to add the URL address of your site that contains the card (e.g. to your> my dashboard-> edit settings->rediect URLs.


Thank you, works!


@dkramer74 choosing a mediaplayer can only be done with online mediaplayers. Try starting spotify on a device or use the web player ( and load the card. Now these player(s) will appear. The device list on the player is using the Spotify connect api and because opening spotify on a chromecast device requires authentication I can’t initiate a chromecast playback I’m afraid.


This is now moved to


Really love this custom card, gives so much extra function, so many thanks for it :slight_smile: Great work.

A minor question, I need to re-authenticate a few times per day via the card, is there any possibility to make it more permanent or it is something that handled on backend side?


I will fix the reauthorization bug as soon as I have time. I think it is fixed by trying to auth with the old token even if the old token is expired but I need to investigate further.


Thanks for your help. Let me know if you need a helpful hand to test it.


tying to get this to work but neither the master source nor the source for my local js file will work. i still get “no card type configured”