Lovelace: Chromecast Radio Jukebox

Share your Projects!
Tags: #<Tag:0x00007f326868ae88>
#1

Hey everyone,

having used a derivate of the famous chromecast radio of Bob_NL, I felt that with lovelace, there could be a better way to go.

I sat down and created the media player jukebox.
It is based on the work from the mentioned thread, but easier to configure and easier to use.

  • you can manage different media content on different players
  • no more endless if/else/scripts, just configure the URLs of the streams you’d like
  • should work with other types of media, such as spotify connect (not tested)
  • easy (although certainly ideal or beautiful) design

see it in action
see it in action407×624 38 KB

I have published the code and instructions to github:

I am happy and eager to hear your feedback and experiences. Issues either here, or if you’re savvy enough, on github.

Thanks to @Bob_NL and everyone from that thread!

Lukas

14 Likes
Chromecast Radio with station and player selection
Play/ pause music in automation, only if playing
#2

I really like your project… have you in mind to support also Alexa Echo devices?
Is it possible to group the radio stations regarding type of music?

#3

Hey,
about the alexa support, i don’t see why not: As long as the device offers the media_player-Services (play_media, volume_set), it should be perfectly fine.
Grouping is something also my wife has suggested, I’ll try to come up with something :slight_smile:

#4

Hmm… i tried using echo devices, but i got no sound… and different from the google home devices the chosen radio is not highlighted in blue.
Another idea, is it possible to configure the names in the frontend, i mean adding style, colors etc.?

#5

This is neat!

Could you also provide a few examples on how to automate and maybe how to work this with a remote?

#6

Great, I was searching for a way to port Bob’s radio to lovelace-UI but this works out-of-the-box.
Now I have to find a way to put the radio stations in a pulldown list, and my mediaplayers too :smile:

#7

How you get a pulldown list of both radio stations and mediaplayers?

#8

It seems this card doesn’t work with Sonos One. I just configured two sonos one as one stereo group and added to the code, but no sound to the speakers…
Anyone else has this issue?

#9

I also had difficulty getting this to work with Sonos

#10

@lukx

Hi

A stab in the dark this, could i use this to send the radio URLs to a Yamaha Musiccast device? They show as media players within HA. Not sure how the yamaha devices operate as i havent played with them properly yet.

Cheers

#11

It works like a charm. :slight_smile: Would it be somehow possible to use a drop down list for radio stations and/or devices?

#12

nice work.
i am in the process of transferring everything over to lovelace… and also had modified the original code for the radio script.
i will try this out rather than modifying everythign for lovelace
one question… do u have an idea how one could add youtube music streams?

#13

Hey,
actually, the script is rather ignorant about what it sends… so whatever supports a media_player.play_media service call, should work. This includes spotify-enabled speakers & spotify URIs (not verified), but also youtube URIs. However, my only use case is web radio, so please do share your experience when you found the time to experiment with that!

#14

Looks like media_player.play_music doesn’t like a YouTube url… I will have e to experiment with media extractor for that I guess

#15

Your card is not working anymore after 0.88 release… this is what i get:

55

Will you fix this?

#16

Mine looks the same. :slight_smile:

#17

I hope this will be fixed asap.

#18

There are two places in jukebox.js where “paper-button” should be changed to “mwc-button”

--- \Desktop\jukebox.js	Sun Feb 24 07:50:33 2019
+++ \Homeassistant Config\www\jukebox.js	Fri Feb 22 14:32:51 2019
@@ -171,7 +171,7 @@
     }
 
     buildStationSwitch(name, url) {
-        const btn = document.createElement('paper-button');
+        const btn = document.createElement('mwc-button');
         btn.stationUrl = url;
         btn.className = 'juke-toggle';
         btn.innerText = name;
@@ -270,7 +270,7 @@
         padding: 10px 20px;
     }
     
-    paper-button.juke-toggle[raised] {
+    mwc-button.juke-toggle[raised] {
         background-color: var(--primary-color);
         color: var(--text-primary-color);
     }
@@ -288,4 +288,5 @@
     return frag;
 }
 
+
 customElements.define('jukebox-card', JukeboxCard);
1 Like
#19

Yes, thanks… it worked, but why now i get this horrible color in place of the previous?

31

How to get the names of the stations like before?

#20

Thank you. Worked fine for me after flushing the browser cache.