Add speaker selection and volume to Spotify media player card

Share your Projects!
1

I am loving the new media browser Spotify support!
I was only missing the ability to select which speaker to play a Spotify playlist on, and a tablet friendly volume control.
After a bit of tinkering this weekend, I ended up with the following:

Screen Shot 2020-09-19 at 8.06.07 pm
Screen Shot 2020-09-19 at 8.06.07 pm1150×1098 168 KB

I am using the Spotify media player card, a glance card with tap_action calling spotcast.start for each speaker, and a custom:mini-media-player card hiding all elements except volume.
So the only volume control shown is the active one. So after years of trying different solutions, I am finally able to have all the Spotify controls grouped together. Thanks to the HomeAssistant team for all of your hard work!
I’ve stolen great ideas from merveet and https://community.home-assistant.io/u/kalkih to put this together.

2 Likes
2

Would you share the code you came up with please?
This looks like something I could use.

3

An alternative to volume control might by in the custom card ‘custom:mini-media-player’. You can also use buttons for volume up-down:
volume

My configuration:

artwork: full-cover-fit
entity: media_player.keuken_lms
icon: 'mdi:spotify'
info: scroll
max_volume: 50
name: Keuken muziek
speaker_group:
  entities:
    - entity_id: media_player.keuken_lms
      name: Keuken
    - entity_id: media_player.woonkamer_lms
      name: Woonkamer
    - entity_id: media_player.werkkamer_lms
      name: Werkkamer
  platform: squeezebox
type: 'custom:mini-media-player'
volume_stateless: true
volume_step: 3
4

You can just install custom card called ‘mini media player’. That does exactly what you do, but easier and more clean. You can change source, control music and volume all within the card.

5

Here is my code - I’ve now stacked the cards in a ‘custom:vertical-stack-in-card’

cards:
  - type: media-control
    entity: media_player.spotify_zak
  - type: glance
    entities:
      - entity: media_player.dining_room_chromecast
        tap_action:
          action: call-service
          service: spotcast.start
          service_data:
            entity_id: media_player.dining_room_chromecast
      - entity: media_player.lounge_googlehome
        tap_action:
          action: call-service
          service: spotcast.start
          service_data:
            entity_id: media_player.lounge_googlehome
    state_color: true
    title: Choose speaker.....
  - type: conditional
    conditions:
      - entity: media_player.dining_room_chromecast
        state: playing
    card:
      type: 'custom:mini-media-player'
      entity: media_player.dining_room_chromecast
      hide:
        name: true
        icon: true
        info: true
        power: true
        source: true
        mute: true
        controls: true
  - type: conditional
    conditions:
      - entity: media_player.lounge_googlehome
        state: playing
    card:
      type: 'custom:mini-media-player'
      entity: media_player.lounge_googlehome
      hide:
        name: true
        icon: true
        info: true
        power: true
        source: true
        mute: true
        controls: true
title: Spotify
type: 'custom:vertical-stack-in-card'
1 Like
6

That looks great!
The reason for using 3 separate cards, was that I needed to call service spotcast.start to activate the google home speakers, and couldn’t work out how to get custom mini media player to do this. Also, I wanted a full width volume control for easy access on a wall mounted tablet.

7

You can do that by using the shortcuts option: https://github.com/kalkih/mini-media-player#shortcuts-object

Mini media player supports buttons for volume but also slider. Perhaps it’s possible to display that in full width using card-mod, but I’m not sure.

8

Brilliant - the shortcuts option was just what I was looking for - thanks!

1 Like
9

How is your current use? Can you share the changes you made?

I was inspired by the themes shared here.

Have you switched to mini media player?