Another Jukebox

Share your Projects!
1

My Media Player dashboard

hajukebox
hajukebox1200×1600 223 KB

Problem I wanted to solve.
I have a mixture of Google smart speakers and Sonos speakers dotted around the house.

The Sonos speakers don’t get used daily and don’t want them to be constantly on standby wasting power so they are connected to the mains using smart switches.

I have a ‘Sonos connect’ connected to a home theatre system, also powered on and off via a smart switch. The Home theatre system is controlled using a Logitech Elite remote control.

I wanted to make it easy for my wife (and me) to be able to select an internet radio station and send it to any of the various speakers or the home theatre system and have it automatically power on if currently powered off.

I subsequently extended it to enable the selection of specific Plex Media Server playlists in addition to internet radio stations.

I wanted the front end to be reasonably attractive and intuitive and easy to add additional sources and/or speakers.

My Solution
I tried a number of different ‘jukebox’ style options. In particular, I took some inspiration from Lukx’s Jukebox Card for Home-Assistant but felt it wasn’t ‘pretty’ enough for a high WAF.
Nothing I looked at seemed to meet all my specific requirements so I ended up building a lovelace interface of my own using several different components.

The key component is the awesomely powerful Button Card by @RomRider .

I have shamelessly copied Keith Townsends templates in his thread Fun with custom:button-card as the basis for my UI.

Speaker selection buttons
The speakers connected via a smart switch have a ‘power’ icon in the top right of the button.

If the button is ‘green’ it is connected to power and available to be switched on/off via Homeassistant.

If the button is ‘grey’ then the switch is currently not available (switched off at the mains) and requires someone to get up out of their chair and physically switch it on before HA can operate it.

Single tapping one of the speaker buttons in the speaker selection panel highlights the selected speaker.

Double tapping one of the speaker buttons will send the currently selected source to the currently selected speaker - which will automatically be powered on first if necessary and if the smart switch it is connected to is ‘available’.

Source selection buttons
Similarly, single tapping one of the radio (or music) sources will highlight the selected source.

Double tapping one of the source buttons will send the currently selected source to the currently selected speaker - which will automatically be powered on first if necessary and if the smart switch it is connected to is ‘available’.

Displaying speakers in use
Speakers currently in use (or paused) are displayed using kalkih’s mini-media-player
in an entity-filter card

Limitations

  • Plex playlists currently can’t be sent to the Sonos speakers using the plex.play_on_sonos service of the Plex Media Server integration. But the developer has told me this is in the works.

  • If I use the Radio Paradise App, for example, to cast to one of my Google speakers, the mini-media-player card displays a nice background image relevant to the music playing

    I haven’t yet managed to find a way to achieve the same effect when casting to the player from the UI

Helper Entities

1216×685 39.1 KB

Why not Google Assistant?
There are several reasons why Google Assistant doesn’t work well with my setup.

  1. In order to use one of the Sonos speakers (and yes, I can use GA to send a source to my Sonos speakers) or the home theatre system they need to be powered on first. That’s a WAF barrier. She’d have to remember the right commands to give GA in the right sequence to make it work. Ain’t gonna happen.
  2. A second reason is that - as you might be able to tell - we are fans of Radio Paradise. Earlier this year Radio Paradise stopped working via Tunein, the only option for internet radio stations using GA, so that’s a stumbling block
  3. My wife wanted to be able to easily listen to a Spanish radio station. Again, there was no way she was going to remember the right commands to give GA to make that happen. But she can press a couple of buttons!
  4. Since Google killed Google Play Music and transferred everything to the vastly inferior Youtube Music I’ve been trying to move to managing and accessing our music library locally - hence Plex. Unfortunately Plex doesn’t (yet?) play with Google Assistant.

Repository
The code for this is here https://github.com/perjury/hajukebox

2 Likes
2

Huh. If you still wanted to use Google assistant, you can set up a routine to trigger multiple things, and have it trigger something over the HA GA integration or IFTTT so Home Assistant can do the job of playing the stuff.

3

@KTibow I do in fact have routines set up (to play Radio Paradise) but you then have to be quite specific in your language to make sure you execute the right one. Again, low WAF.

1 Like
4

This looks really great! That’s exactly the way I want to manage my speaker and stations! I hope I have time to try, if I can set up your jukebox in the next days. And I hope, you will continue this project.

1 Like
5

Hi.
That looks great … but I don’t know how to insall it :smiley:
I really wanna try it with my Alexa (echo dot 3 & echo dot 4)

Thank’s

6

You need to go through several steps
Download the jukebox_scripts.yaml and put with your existing scripts
Add the ui.yaml code as button_card_templates in the dashboard configuration using the raw config editor
Put the *_select.yaml files as cards in your lovelace dashboard
Edit to meet your needs

7

Trying to get this to work and I’m not a pro with dashboards:

  • Copied the jukebox_scripts.yaml to my config folder (where all the yaml files are)
  • Created a new dashboard with ui.yamle code, it starts with:
views:
  - title: Home
button_card_templates:
  • And I paste the contents of ui.yaml under this. Then I save the new dashboard which is empty after saving, but no errors so seems ok.
  • Then I try to add the contents of music_select.yaml into a new card, and get a error:
    “Button-card template ‘container’ is missing!”

From this point I’m not sure what to do. Any help would be appreciated.