Lovelace: Chromecast Radio Jukebox

Is this component working with HA 0.110.3, because I would like to try it.

Has anyone been able to get this to work with Spotify playlists?

Running on HA 0.112.3 so yes, the only issues I have noted so far are that:

  1. mute and stop icons are not showing at least in Firefox


  1. HA Android App does not seem to understand js and so outputs a red box message saying: Custom element doesn’t exist: jukebox-card
1 Like

@lukx You are a gentleman and a scholar, i have been looking for a simpler way to do this for a while, i am unsure of why i missed it
Thank you

1 Like

clearing the app cache fixed the js error on my android

To fix the stop and mute buttons, you need to fix line 67 and 78 in /www/jukebox.js

const muteButton = document.createElement('ha-icon-button');
const stopButton = document.createElement('ha-icon-button')

@lukx i have a pull request submitted

1 Like

1 how do you install it?

I have problem with the lovelace card.
I put the following in an entities card but I get the following error
What should I do?

I am reviewing the open PRs on github and testing it on my setup today, re-writing later

1 Like

That’s great. Please inform us when you finish.

You need to remove the first 6 lines completely and then correct the indentation…

I was able to install the jukebox card using HACS now, which you can do as an alternative to using the method described in the Readme file.
Thanks to everybody who contributed! I am now opening a pull request to become part of the official HACS repo

Trying to install this, but keeps getting an error that my lovelace frontend that Custom element doesn’t exist: jukebox-card.

Here is what I have done:

  1. Click on
  2. Click on “Merge branch ‘master’ of
  3. Click on ‘Go to File’, takes me to
  4. Download jukebox-card.js

On it is shown that the www directory should contain these files:
|___ /configuration.yaml
|___ /www/jukebox.js
|___ /www/jukebox-card.js

So, I also download jukebox.js from

I put both of these files in www folder.

I add the resources:

  - url: /local/jukebox-card.js
    type: module
  - url: /local/jukebox.js
    Type: module

I go to my lovelace overview tab, click configure ui in upper right corner, click raw configuration editor, and add the above four lines under ‘resources:’.

Please note that in my file the other resources are shown as

  - type: module
    url: /local/slider-entity-row.js

And that I have also tried to add the two jukebox resources in a similar way. I assume/suspect that it does not matter if it either one?

And also note that in some places it is written that the resources url should be /www/, others that it should be /local/, so have also tried both of that.

And the I add under cards:

  - media_player.wuerfel_wohnzimmer
  - media_player.wuerfel_kueche
  - name: Concertzender Jazz
    url: ''
  - name: Inside Jazz
    url: ';stream.nsv'
type: 'custom:jukebox-card'

But I do get an error saying: Custom element doesn’t exist: jukebox-card.

And the same result if I use type: ‘custom:jukebox’(except of course that the error says that the jukebox doesn-t exist.

And, finally, I have tried to add the it through HACS as the author says he managed to do that. Here I am really on thin ice, but tried to link to both of the .js files as well as the hacs.json file under custom repositories, but no luck. Any suggestions are welcome.

Note that under the heading “Installation” on, it says ‘Grab a copy of jukebox.js”, but that seems to be empty.

And on the same page, the example of the ui-lovelace.yaml shows the resource as url: /local/jukebox-card.js, no mentioning of jukebox.js. And its says local instead of www, but I have also tried that in vain.

So, where do I get this all wrong?

Ok, I finally got it to work, so I thought I better answer some of my own questions.

For installing through HACS, you have to use the main github url, ie

Under resources I added (not /www/, or /local/):

  - type: module
    url: /www/community/home-assistant-jukebox/jukebox-card.js

In your ui

And under cards:

type: 'custom:jukebox-card'
  - name: DR P1
    url: ''
  - name: BBC World
    url: ''
  - media_player.stue_speaker
  - media_player.kokken_speaker

Have a wonderful day.

I tried to add the custom card through HACS but cannot find it… which is the correct link to add as a custom card into HACS?

did you fine the correct address?

can you give us the link to find it in HACS?
instructions in github page would be nice I think

No, still not…

Do you know if this could work with a non audio chromecast? I have one for my TV and I just found at a good price a chromecast audio and wondering to buy it or not

For me, it works with all media players which take a play_media command, but I have not tested a chromecast. Using sony speakers…

About HACS: I am having trouble making time to apply for a pull request to the official HACS repos. I’d appreciate if anyone could open it and let me know what the repo is missing…

I believe it will work, but I would like to have only sound. I think when I try to cast it will open my TV also which I don’t like.
Regarding the pull request I really don’t know what to do otherwise I would help you