Lovelace: Mini Media Player

Share your Projects! Dashboards & Frontend
2025

Here you go!

cards:
  - cards:
      - entities:
          - height: 1
            size: 20
        type: 'custom:gap-card'
      - entity: media_player.sonos_woonkamer
        hide:
          controls: true
          icon: true
          info: true
          max_volume: 50
          min_volume: 0
          name: hide
          play_pause: true
          power: true
          progress: true
          source: true
        type: 'custom:mini-media-player'
      - entity: media_player.sonos_woonkamer
        hide:
          controls: true
          name: true
          play_pause: true
          power: true
          progress: true
          source: true
          volume: true
        info: scroll
        type: 'custom:mini-media-player'
        volume_stateless: true
      - entity: media_player.sonos_woonkamer
        hide:
          icon: true
          info: true
          mute: true
          power: true
          source: true
          volume: true
        mini-media-player-progress-height: 1px
        progress: true
        shortcuts:
          buttons:
            - data:
                entity_id: script.1560158655836
              icon: 'mdi:radio'
              id: script.turn_on
              name: SLAM!
              type: service
            - data:
                entity_id: script.1560178621235
              icon: 'mdi:radio'
              id: script.turn_on
              name: Radio 538
              type: service
            - data:
                entity_id: script.1560178774058
              icon: 'mdi:radio'
              id: script.turn_on
              name: Radio 2
              type: service
            - data:
                entity_id: script.scripts_music_turn_on
              icon: 'mdi:apple'
              id: script.turn_on
              name: Apple TV
              type: service
            - data:
                entity_id: script.scripts_power_off
              icon: 'mdi:power-standby'
              id: script.turn_on
              name: Turn OFF
              type: service
          columns: 1
        show_group_count: true
        show_progress: true
        type: 'custom:mini-media-player'
        volume_stateless: true
      - cards:
          - color_type: icon
            aspect_ratio: 2/1
            color: auto
            entity: media_player.sonos_kantoor
            show_name: true
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.sonos_office_join_unjoin
            show_state: false
            state:
              - color: '#216491'
                icon: 'mdi:speaker'
                value: playing
              - color: '#8C8C8C'
                icon: 'mdi:speaker-off'
                value: paused
              - color: '#8C8C8C'
                icon: 'mdi:speaker-off'
                value: idle
            styles:
              card:
                - height: 70px
              name:
                - font-size: 12px
            type: 'custom:button-card'
          - color_type: icon
            aspect_ratio: 3/1
            color: auto
            entity: media_player.sonos_badkamer
            show_name: true
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.sonos_badkamer_join_unjoin
            show_state: false
            state:
              - color: '#216491'
                icon: 'mdi:speaker'
                value: playing
              - color: '#8C8C8C'
                icon: 'mdi:speaker-off'
                value: paused
              - color: '#8C8C8C'
                icon: 'mdi:speaker-off'
                value: idle
            styles:
              card:
                - height: 70px
              name:
                - font-size: 12px
            type: 'custom:button-card'
          - color_type: icon
            aspect_ratio: 3/1
            color: auto
            entity: media_player.sonos_zolder
            show_name: true
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.sonos_zolder_join_unjoin
            show_state: false
            state:
              - color: '#216491'
                icon: 'mdi:speaker'
                value: playing
              - color: '#8C8C8C'
                icon: 'mdi:speaker-off'
                value: paused
              - color: '#8C8C8C'
                icon: 'mdi:speaker-off'
                value: idle
            styles:
              card:
                - height: 70px
              name:
                - font-size: 12px
            type: 'custom:button-card'
        type: horizontal-stack
    type: vertical-stack
mode: vertical
style: |
  ha-card {
    font-variant: small-caps;
    --ha-card-background: rgba(34, 34, 34, .2);
    background-repeat: no-repeat;
    background-color: rgba(50,50,50,0.3);
    background-size: 100% 68px;
    border-radius: 5px;
    }
  .card-header {
    font-size: 20px;
  }


    
type: 'custom:stack-in-card'
1 Like
2026

Thanks!

The scrips for radio? Have you extracted them from somewhere?

2027

In the script I’m calling a source. The sources are radio stations marked as favourites in the Sonos app.
I’m also setting the right volume level prior to starting the actual radio stream so it’s always on a nice background listening volume. You don’t want the Sonos to start banging your eardrums early in the morning :slight_smile:

'1560178621235':
  alias: Sonos Radio 538 Living Room
  sequence:
  - data:
      entity_id: media_player.sonos_woonkamer
      volume_level: '0.03'
    service: media_player.volume_set
  - data:
      entity_id: media_player.sonos_woonkamer
      source: 538
    service: media_player.select_source
2 Likes
2028

I’m trying to design my UI so if my Media Player is ‘on’, the button (shortcut) will be blue, if it’s ‘off’ the button will be grey.
Can you please help me with that?

Thanks.

2029

Don’t think you can do that with the shortcuts feature in the mini media player. But you can do that with the custom button card.

2030

Is anybody here who done it with the platform musiccast_yamaha? What is the path to the radio station?
i can’t get it to work… e. g. Radio>Favoriten>1LIVE doesnt work… i have a german receiver.

Here is my code:

delete

EDIT:
Here is my Solution for my Problem. It isnt compatible with musiccast_yamaha. It only works with the platform yamaha. To see the entity, the receiver has to enter in the config.yaml with platform yamaha and the ip.

Here is my Code for the Script:

alias: inselradio_receiver
sequence:
  - service: media_player.turn_on
    data: {}
    entity_id: media_player.yamaha_receiver
  - service: media_player.volume_set
    data:
      volume_level: '0.50'
      entity_id: media_player.yamaha_receiver
  - service: media_player.select_source
    data:
      entity_id: media_player.yamaha_receiver
      source: NET RADIO
  - service: media_player.play_media
    data:
      entity_id: media_player.yamaha_receiver
      media_content_id: Radio>Favoriten>Das Inselradio Mallorca
      media_content_type: NET RADIO
mode: restart
2031

Thanks, but how do you get the “source: 538?” Where in the app do you get the 538? Or do you debug it via NodeRed or similar?

2032

In the Sonos(S2) app, search for your favourite music station, hold down the radio station and choose “Add station to My Sonos”, or something like that (my app is in Dutch), which marks the station as favourite.

As soon as the radio station is added, it will be available as source in your media player in Home Assistant.

1 Like
2033

Very nice card, thanks to the developper Was able to install it, I can configure the player, my Marantz AV, but I’m just unable to select my server, that is just a Serviio server running in my environment which is accessible through ip address.
I’ve seen in doc:

Supported platforms

sonos
soundtouch
squeezebox2
bluesound2
snapcast2
yamaha_musiccast1
linkplay3

Ok, so my simple question, it’s trivial maybe, sorry : is it the right card for me to do that? Or did I miss a step just to configure a source like standard media server or even HA media browser? Thanks for your patience :slightly_smiling_face:

2034

Hi Folks, I’m quite new to this all and could use some help.
I downloaded the latest mini-player js and added it into config/www successfully.
But I don’t know where to add;

resources:
  - url: /local/mini-media-player-bundle.js?v=1.11.0
    type: module

For now, I placed it in the Raw Configuration Editor.
But I get this error:

Unknown type encountered: module
url: /local/mini-media-player-bundle.js?v=1.11.0 type: module

2035

You will find this in "configurations --> lovelace —> "

Click the orange plus “add resources”.

Don’t forget to remove the “url:” and “type: module” part when you paste the url. As for type just select “javascript-modul”.

1 Like
2036

Thanks a lot!

2037

Screenshot 2020-12-03 at 07.34.14
Screenshot 2020-12-03 at 07.34.14988×508 16.2 KB

When trying to click on group all I got this error:

Logger: homeassistant.components.websocket_api.http.connection
Source: core.py:1405
Integration: Home Assistant WebSocket API (documentation, issues)
First occurred: 2:25:39 PM (3 occurrences)
Last logged: 2:25:41 PM

[2844097624] must contain at least one of entity_id, area_id.
Traceback (most recent call last):
  File "/usr/local/lib/python3.8/site-packages/voluptuous/schema_builder.py", line 272, in __call__
    return self._compiled([], data)
  File "/usr/local/lib/python3.8/site-packages/voluptuous/schema_builder.py", line 817, in validate_callable
    return schema(data)
  File "/usr/src/homeassistant/homeassistant/helpers/config_validation.py", line 140, in validate
    raise vol.Invalid("must contain at least one of {}.".format(", ".join(keys)))
voluptuous.error.Invalid: must contain at least one of entity_id, area_id.

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/components/websocket_api/commands.py", line 135, in handle_call_service
    await hass.services.async_call(
  File "/usr/src/homeassistant/homeassistant/core.py", line 1405, in async_call
    processed_data = handler.schema(service_data)
  File "/usr/local/lib/python3.8/site-packages/voluptuous/validators.py", line 218, in __call__
    return self._exec((Schema(val) for val in self.validators), v)
  File "/usr/local/lib/python3.8/site-packages/voluptuous/validators.py", line 340, in _exec
    raise e if self.msg is None else AllInvalid(self.msg, path=path)
  File "/usr/local/lib/python3.8/site-packages/voluptuous/validators.py", line 336, in _exec
    v = func(v)
  File "/usr/local/lib/python3.8/site-packages/voluptuous/schema_builder.py", line 276, in __call__
    raise er.MultipleInvalid([e])
voluptuous.error.MultipleInvalid: must contain at least one of entity_id, area_id.

How to resolve that?

2039

I’m pretty new to Home Assistant. Currently I try to include the Mini Media Player card offering the ability to browse my local mp3 files, similar how it is done in the video here: https://www.home-assistant.io/blog/2020/09/17/release-115/

For now I got stuck in displaying the folder button to show up where one can click on to bring the library browser up. Can someone point me to the things I’m missing?

Thanks!

2040

Hi!

Any news on this (dynamic groups with chromecast)? It works in the Google Home app but I would love to have it working in this card :grinning:

2041

Haven’t followed the updates for a while. Has this been implemented in the mean time? Thanks!

Thanks, yeah, it’s currently not possible, I’ll add a hide option for it in the next release.

2042

Love the card, I am having one issue. For some reason, the checkboxes disappear from the multi room selection. Screenshot 2020-12-15 071752

1 Like
2043

What did you put in your configuration file exactly to make it work.
I can’t finger out how to make it works for Yamaha

2044

I done it with this introduction:
https://www.home-assistant.io/integrations/yamaha/

media_player:
  - platform: yamaha
    host: 192.168.0.10
  - platform: yamaha_musiccast
    host: 192.168.0.10
    port: 5005

It is no Problem to write the platform yamaha together with the platform musiccast_yamaha.

i hope i can help you with this

2045

I will try it soon.
Thanks for responding.