lukx / home-assistant-jukebox

Home-Assistant Radio Station and Stream Selector Card

Jukebox Card for Home-Assistant

This is a media player UI for Home-Assistant leveraging the potential of the excellent new Lovelace UI.

It allows you to configure a set of web radio stations (or possibly other radio media IDs such as spotify), and play them to media player entities of your choice, like chromecast or spotify connect listeners.

You can send different media to different players, which makes it usable for multi-room setups: Let your kids listen to some Frozen, while you're Jazzing in the Kitchen. Volume-Level is handled separately, too.

Screenshot

Acknowledgement

Apart from the home-assistant project, I need to say thanks to User Bob_NL who made his evergreen Chromecast Radio available to all of us in the Home-Assistant forums. This jukebox is heavily deriving from the great work of all the people in the thread.

Usage

Installation using HACS

I recommend using HACS to install and update this integration. As the jukebox card is not yet in the official repositories of HACS, follow these steps to get it running:

• (Install HACS if you have not already; look into their documentation in the link above to achieve this)
• In your Home Assistant, open the HACS panel
• Click on "Frontend" to see the list of Frontend (or "Lovelace") integrations
• On the top right of your screen, click on the three dots to see "Custom Repositories"
• in the "Custom Repositories" dialogue, paste https://github.com/lukx/home-assistant-jukebox.git in the "custom repository URL" box, and select "Lovelace" as the Category.
• Now, in the Frontend Category, search for "Jukebox" and install this module like you would install any other module.

Configuration

Find stream URLs, e.g. on Radio-Browser.info See this example setting a couple of Web radios to my two chromecast players.

Using lovlace in yaml mode

Excerpt of ui-lovelace.yaml

resources:
  - url: /hacsfiles/home-assistant-jukebox/jukebox-card.js
    type: module
views:
- name: Example
  cards:
  - type: "custom:jukebox-card"
    links:
      - url: http://streams.greenhost.nl:8080/jazz
        name: Concertzender Jazz
      - url: http://fs-insidejazz.fast-serv.com:8282/;stream.nsv
        name: Inside Jazz
      - url: http://stream.srg-ssr.ch/m/rsj/mp3_128
        name: Radio Swiss Jazz
      - url: http://stream.beachlatinoradio.com:8030/;?d=
        name: Beach Latino Radio
      - url: http://streams.calmradio.com/api/43/128/stream/;?d=
        name: Calm Radio
      - url: http://swr-swr1-bw.cast.addradio.de/swr/swr1/bw/mp3/128/stream.mp3
        name: SWR 1
      - url: http://94.23.252.14:8067/stream
        name: Nature Sounds
    entities:
      - media_player.wuerfel_wohnzimmer
      - media_player.wuerfel_kueche

Using lovelace UI

• Go to the view you want to add the card, switch it to edit mode and click + add card
• Scroll all the way down and select Manual
• Paste your config and save

Example config (note the differances from the above example):

type: "custom:jukebox-card"
links:
  - url: http://streams.greenhost.nl:8080/jazz
    name: Concertzender Jazz
  - url: http://fs-insidejazz.fast-serv.com:8282/;stream.nsv
    name: Inside Jazz
  - url: http://stream.srg-ssr.ch/m/rsj/mp3_128
    name: Radio Swiss Jazz
  - url: http://stream.beachlatinoradio.com:8030/;?d=
    name: Beach Latino Radio
  - url: http://streams.calmradio.com/api/43/128/stream/;?d=
    name: Calm Radio
  - url: http://swr-swr1-bw.cast.addradio.de/swr/swr1/bw/mp3/128/stream.mp3
    name: SWR 1
  - url: http://94.23.252.14:8067/stream
    name: Nature Sounds
entities:
  - media_player.wuerfel_wohnzimmer
  - media_player.wuerfel_kueche

home-assistant-jukebox's Issues

Power Off button?

Hello,

I can stop playback when playing with Stop button. But this does not "power off" Google device. It just goes into "Idle" state. After a while it powers off. When opening media player card, I have "Power Off" button there that will switch it off right away.

Can you add this Power button next to the Stop button?

Thank you.

Don`t work with sonos one box

Hello,
I put this settings in the cart configurations:
type: custom:jukebox-card
links:

• url: http://streams.greenhost.nl:8080/jazz
  name: Concertzender Jazz
• url: http://fs-insidejazz.fast-serv.com:8282/;stream.nsv
  name: Inside Jazz
• url: http://stream.srg-ssr.ch/m/rsj/mp3_128
  name: Radio Swiss Jazz
• url: http://stream.beachlatinoradio.com:8030/;?d=
  name: Beach Latino Radio
• url: http://streams.calmradio.com/api/43/128/stream/;?d=
  name: Calm Radio
• url: http://swr-swr1-bw.cast.addradio.de/swr/swr1/bw/mp3/128/stream.mp3
  name: SWR 1
• url: http://94.23.252.14:8067/stream
  name: Nature Sounds
  entities:
• media_player.esszimmer

It doesn`t work with sonos one box.

Stop button is greyed out

Hello,

thank you for this wonderful add-on. I have a little problem: The stopbutton is greyed out and has no function. I added a seperate button below to stop playback, so either getting the button to work or being able to remove the button completely would help me just fine.

Is this possible without breaking some other function?

How to use it with local sound card?

I am trying to use this card with USB sound card connected to Raspberry 3B+. I need some help, what I have to type in entities:?

Spotify playlist not supported

It would be great it Spotify playlist would be supported

Instances of paper-button need to be replaced with mwc-button

Paper button was removed from homeassistant in 0.88

--- \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);

Long buffering for specific radio stations

Hello,

For last few hours I am trying to debug long buffering on specific radio stations like this two:

https://scdn.nrjaudio.fm/adwz1/de/33047/mp3_128.mp3
http://live.1chi.si/vrabcek

It can take up to 20 seconds to start. If I press pause and play again as soon as station is selected it will start playing it instantly.

Same works with catt.

I am struggling with modifying function onStationSelect(e) to add some kind of delay or check if stream is in fact playing. If it would not then I would issue only play on it as suggested in pychromecast forums.

Can someone that knows a bit better JS and HA functions, give me/us a little help to solve this?

Thank you and best regards,
Andrej

Audius.co support

Add support for the distributed streaming free service Audius.co and you get a wonderful player.

In fact, you need to add support for several methods of this service and a formatted output of the results.

For example, you can find the user: curl https://audius-disco.dfw-x02.us.supercache.org/v1/users/search?query=A1ex&app_name=EXAMPLEAPP
So see his tracks: curl https://audius-disco.dfw-x02.us.supercache.org/v1/users/MV1E9/tracks?app_name=EXAMPLEAPP
To play a specific track like this: curl https://audius-disco.dfw-x02.us.supercache.org/v1/tracks/y9pAX/stream?app_name=EXAMPLEAPP
You can upload your own compositions to the service or listen to compositions of other users.

Documentation:
https://audiusproject.github.io/api-docs/#stream-track

Best regards

Icons in place of labels

It would be a good improve if custom icons would be used in place on textual textual labels

unable to save jukebox.js in sub-directory

Hi,

Great work on this custom-card! Just installed it and it works when I follow your instructions.
However all my custom Lovelace cards are in /www/custom-lovelace/
When I put the jukebox.js in this folder, the card doesn't load.
"custom element doesn't exist: jukebox-card"

resources:

• url: /local/custom-lovelace/jukebox.js
  type: module

Also : does this script support adding version info, to avoid caching issues?

resources:

• url: /local/custom-lovelace/jukebox.js?v=1 ?? Does this work
  type: module

Cheers,

Bram

Song Artist and Title under volume slider

Hello,

I have added code from Pull Request:

#20

Now I can see station name and logo on the display. I would prefer to see the song artist and title, but I understand this is not possible to have with casting.

I am now thinking other way around. If we can get the song artist and title from somewhere (scraping, etc...) and passed to HA as input_string entity, can you display it under the volume slider?

Thank you.

Top bar doesn't fit with Lovelace "Soft UI" design

As seen in the image the top corners are "too pointy" in the UI

Hiding volume control option

Hi,
It would be interresting (at least for me) to have a setting for hiding volume control...
In my setup I use Jukebox for assigning Urls to players but controlling them with mini-media-player cards...

Thx,

Request: set media player app_name

When using this card, my Chromecast audio displays "Default Media Receiver" no matter what station I'm streaming. Would it be possible to set the media player attribute app_name to the same as the stream name when a stream is played?

Feature Request: alternative name for speakers

Please allow to add a name to the player entities. I now have a list of "Living Room Speaker, Office Speaker, ...", which is too long for the header. I'd like to be able to put an alias here (which would not be used in other places in home assistant, so not using the customize functionality.

Volume slide

Hi,

Somehow since yesterday the volume slider is gone. Only mute and stop is visable

disable tab bar

On which place in the code I can disable the head on which I can switch the media players? I have only one so I want to disable it.

Install problem

I tried to install your app but got the following error.
Custom element doesn't exist: jukebox-card.
I guess there is a missing file....

Buttons not displaying in 2021.11

I didn't catch the exact version, but somewhere in the 2021.10-2021.11 updates, HA apparently changed the way icons are handled. Many of my custom cards no longer displayed icons. The ones in development issued updates, and the icons returned. Please apply whatever changes are necessary to display the icons. I'm researching the issue and will see if I can find the fix on another project that already updated.

This shows no play, pause, stop buttons displayed. Reloading lovelace and restarting HA had no affect.

Doesnt work with amazon echo media players

Validate configuration

Hi there.
I have a question.
When I put your code in the config fill everything runs fine and I can listen to all radios perfectly.
But when I try to restart my home assistant sever home assistant gives an error that comes from your code.
I will put the error code in this post.
Hopefully you can help me.
Thank you in advance.

Guide Outdated

Hello the install guide is outdated can you update it please

With my Google Home working ok, but with my Denon media player can't play.

With my Denon music not work. Show error 'can't call media_player/play_media service'