Dashboard: Sonos card

You are absoluteley right!

@PunxsutawneyPhil : You really did great work here! Thank you so much for this great peice of code!

@thlucas But I have utter respect for finding all relevant css selectors … I don’t think I would have had the patience …

1 Like

anyway to change the thumbnail image of one of your favorites? ive tried the following but can’t seem to get anything to work

card_mod:
  style:    
    sonos-media-browser$: |
      sonos-media-browser-icons {
        ha-control-button {
          .button:nth-of-type(3) .thumbnail {
            background-image: /local/images/likedsongs.jpg;
            }
          }
        }
customThumbnail:
  Voyage: https://i.scdn.co/image/ab67706f000000027b2e7ee752dc222ff2fd466f
1 Like

I presume this will be way to complicated but thought I would ask anyway. Are they any plans or is there an option to also search for music on streaming-services such as Spotify, Bandcamp, etc? With Sonos burning their bridges and releasing an unfinished app that cannot even add songs to a queue anymore if this card would bring that option it would pretty much be a rock solid replacement for the official Sonos App.

2 Likes

REALLY LOVE this card.

I just cant figure out how to make a search track in spotify available.
all my kids have their own tablet dashboard and sonos.
And they love to serach for song.

Ideally by voice but that would be the next step.

Anyone an idea to help me in the right way.

I love this card, it’s definitely my goto for playing music on sonos. I do have one thing I cannot seem to find (not sure if it’s possible).

I’d like to add a couple buttons the the lovelace dashboard, that are not “Sonos”. Basically in my house I have a sonos port connected to an AMP. The AMP has 3 zones, and I have an IR integration to turn on the zones.

So with this current setup, I have to go to another dashboard, turn on the zone I want and then come to this one to select the music I want to play. It’s not a huge deal, but it would be cool to be able to add them directly to this dashboard.

Just add your own buttons to the dashboard. Start with the example in the using individual section cards, and add whatever buttons you need:

Duh! Thank you. Obvious and easy solution

This is an absolutely insane card. I love it.

Is there a way to create a widget on android with it? I suspect not but maybe?

I’ve installed the card and if I start music on my speakers from the Sonos app, the card updates and I can control the music. However, when I try to browse media and click Spotify, I get an unknown error. I’ve checked to make sure all the playlists have album art. If I play music through the Spotify card, everything works fine and I can see my playlists, etc but obviously can’t send this to the Sonos speakers. Any insight? I’ve pasted the log below.

Logger: homeassistant.components.websocket_api.http.connection
Source: components/spotify/browse_media.py:181
integration: Home Assistant WebSocket API (documentation, issues)
First occurred: 10:10:31 AM (5 occurrences)
Last logged: 10:54:57 AM

[547729937680] Error handling message: Unknown error (unknown_error) Greg from 182.168.1.6 (Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36)
[547487001056] Error handling message: Unknown error (unknown_error) Greg from 182.168.1.6 (Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36)
Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/components/websocket_api/decorators.py", line 27, in _handle_async_response
    await func(hass, connection, msg)
  File "/usr/src/homeassistant/homeassistant/components/media_player/__init__.py", line 1308, in websocket_browse_media
    payload = await player.async_browse_media(media_content_type, media_content_id)
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/src/homeassistant/homeassistant/components/sonos/media_player.py", line 776, in async_browse_media
    return await media_browser.async_browse_media(
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/src/homeassistant/homeassistant/components/sonos/media_browser.py", line 115, in async_browse_media
    return await spotify.async_browse_media(
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/src/homeassistant/homeassistant/components/spotify/browse_media.py", line 181, in async_browse_media
    or not isinstance(entry.runtime_data, HomeAssistantSpotifyData)
                                          ^^^^^^^^^^^^^^^^^^^^^^^^
NameError: name 'HomeAssistantSpotifyData' is not defined

Please file an issue on GitHub

Hey, how can I add “single” radio stations in my card:

Finding something in the radiocard is a little cumbersome since the offer is so big… I’d like to place a few favorites in the favorites list.

1 Like

Adding favorites can only be done in the official sonos app

I cant find how to add station from this to sonos:

Is it an option to place tiles from this below to the start faborites page? Is that an option to “develop”? Now the tile is “in the card” but just a few clicks and scrollinggggggggg further.

I’m afraid not. As I said, just add it as a favorite in the official Sonos app and it will work.

Pity… but as said I cant get “radio browser” in sonos app…

new to this card… read the first 50 or so posts, then skipped the bottom 25 posts.
Love the format and this will replace my current bulky card setup.

Was curious instead of transparency, if there was a way to make the volume and track info disappear when not in focus to show the artwork?

1 Like

Thank you so much for this card. I have a problem. If I select my file in my NAS via Media Browser, it won’t play. But if I go to the Media page of Home Assistant it works. Any suggestions?

Absolutely awesome card… thanks so much for your hard work.

One of the radio stations I listen to provides artwork, title, artist and album data via a json which I have going into sensors (via rest) which I would like to use for the relevant metadata of that stations… currently I don’t seem to be able to use sensor states to populate fields, is this something you could introduce?

@PunxsutawneyPhil

Really love this card as it simplifies building out a large media dashboard. I have one question/ask: I have a 10 zone system. I want to be able to access each individual zone without creating individual cards. I have been able to create a dashboard that would almost work if I could get support for input select helpers. This allows me to use a drop down to select a zone or the music source that I want playing Is this something that you think could be implemented. Is there a potential work around if it can be done directly?