Hi! I recently bought a new Sonos system and, of course, wanted to control it via Home Assistant. It took a bit of figuring out, but I managed to get it working. I can now play my playlists and radio stations through Home Assistant on my Sonos system, and it works great! In this video, I’ll show you how I did it.

---

⭐⭐⭐ NOTE: ⭐⭐⭐

This article accompanies a YouTube video. I wrote it for people who would rather read than watch a video. To keep doing this, I want to ask you to check out the video, leave a comment under the video, give the video a thumbs up, and subscribe to my YouTube channel. This means that the video is offered more often to new visitors so that they also stay informed of the latest Home Assistant tutorials.

Thank you for your support!

Ed

Click here to watch the video

Introduction

I am going to show you in this tutorial how to integrate your Sonos system into Home Assistant. As you can see, I have created a dashboard that on the left side contains an overview of my playlists. I can also see in this section what each speaker or group is playing, and I can group my individual speakers. In the middle section, you can see the media player itself, and on the right side, I have placed shortcuts to my favorite radio stations.

Installing the Sonos Integration

To start, we are going to install the Sonos integration in Home Assistant. If you have connected your Sonos system, Home Assistant should automatically detect it. If not, you can manually add the Sonos integration via Add Integration.

As you can see, only one Sonos device is found, even though I actually have more in my house. I resolved this by restarting Home Assistant. After that, all my Sonos devices suddenly appeared in Home Assistant. So, if you also don’t see all your Sonos devices after adding the integration, restart Home Assistant.

As you can see, all three of my Sonos devices are now visible, and I can control them via Home Assistant. Each device is now recognized as a media player in Home Assistant. We could stop here, as you can already control your music on your Sonos speakers, but we want to create the dashboard I just showed, so let’s keep going.

Installing the Sonos Card

To start building the dashboard, we definitely need the Sonos Card created by Punxa Phil. You can install this with HACS. If you haven’t installed HACS yet, take a look at this video where I explain how to install HACS. For this tutorial, I will assume that you have already installed HACS.

• Go to HACS.
• Search for Sonos.
• Click on Sonos Card.
• Click Download.
• Click Download Again.
• Click Reload.

The Sonos card is now downloaded. Let’s start creating the dashboard view.

Creating the dashboard view

• Go to one of your dashboards, or create a new one. I will use an existing dashboard.
• Click the pencil in the upper right corner.
• Click the plus sign to create a new dashboard view.
• Give your view a title like Sonos.
• Select the view type Sections.
• Set the max number of sections wide to 3.
• Click Save.
• Now click on the plus sign in the new section.
• Search for Sonos.
• Click the Sonos Card.
• Disable the Player checkbox.
• We leave the rest of the general settings to default for now.
• Click the Entities tab.
• Now we can create predefined groups here, so let’s do that.
• Click Add group.
• Give your group a name.
• And, select the entities that belong to your group.
• You can also set the default volume for each speaker when they are grouped. I set them to a volume level of 15 percent.
• Click OK.
• You can add as many groups as you like. I added another group that contains all of my speakers. And again I set them to a volume level of 15 percent.
• You can create artwork overrides, but I do not do that.
• And, there’s also an option to set advanced settings, but I do not do that either.
• Click Save.
• As you can see the favorites that you defined in your Sonos App are automatically shown.
• Let’s add another section by clicking on the add section icon.
• Click the plus in the New Section that we’ve just created.
• Search the Sonos Card again and select the Sonos card.
• Now disable all the checkboxes except the Player checkbox.
• Click Save.
• Let’s delete the headings above the sections by clicking on the three dots in the upper right corner of each section and selecting Delete.
• Click Done and let’s test our dashboard so far.
• I can control the media player.
• And, I can Group and Ungroup my speakers.
• I can also select my predefined groups here.
• And, I can change the volume of each individual speaker within the group.
• As you can see the volume of all speakers is set to 15% when I switch groups, just like I configured in the Sonos Card.
• When I click on the Groups icon I can see all the groups and individual speakers and what songs they are playing.
• So, when I select one of the groups or an individual speaker I can change the music for that specific group or speaker.
• This way I can even send different songs to each individual speaker.

How to set up the radio stations for the Sonos Dashboard?

This is already working great, but there is one more thing I want to show you, namely how to create presets for radio stations for your Sonos system in Home Assistant. I have covered this before in this video, where I explain how to do it for your other media players. You can also check that video to see how to do it. But now we are going to do it for our Sonos system.

First, let me explain how you can find the locations of the radio stations to determine the location of our radio station. We go to the website www.radio-browser.info.

Here we can search for the radio station that we want to play using the Sonos speakers. I’m going to search for KINK DNA.

And here is the radio station, and if I click on it in the URL, you see this part of the URL, and that part is what we need to create our shortcut.

Make sure you have the Radio Browser integration installed in Home Assistant. You can check this in Settings > Devices and Services. If the radio browser integration is not yet installed, then click on Add Integration, search for Radio Browser, and install the Radio Browser integration.

To make the shortcuts as nice as I have made them, we need two more HACS cards: the custom button card and the card-mod card. So, we will install those first.

• Go back to HACS.
• Search for button.
• Select the button card.
• Click Download.
• Click Download Again.
• Click Reload.
• Go back to the HACS overview.
• Search for card-mod.
• Click Download.
• Click Download again.
• Click Reload.

The custom button card and card-mod are now installed. We can now continue setting up the shortcuts to our radio stations.

For each radio station, you need an image that we will display in the shortcut button. For the radio station Kink DNA, I downloaded an image and placed it on my Home Assistant server. You can do this in several ways, but the easiest way is to install Studio Code Server or File Editor via the Add-ons in Home Assistant. If you haven’t installed those yet, go to Settings > Add-ons and search for Studio Code Server or File Manager in the Add-On store and install one of them first. Then, open Studio Code Server or File Editor and create a folder named “radio” under the “www” folder. Next, drag your desired radio images into that folder. We will call upon these images later in the custom button cards. Let’s go ahead and create those now!

For that, go back to the Sonos view we just created.

• Click the pencil in the upper right corner.
• Click the add section icon.
• Click the plus within the new section.
• Search for the grid card.
• Set the number of columns to two.
• Disable “Render cards as squares”.
• Search for button and select the Custom: Button-Card.
• Add this code.
• You can select any of your Sonos Media Players. The Sonos card will override this.
• Please note that the custom button card still makes use of the call-service action. This will probably keep working, but since Home Assistant version 2024.10 this action has been replaced. It might be that in the future the action will be media_player.play_media and that the service line will not be needed anymore. When I made this video, the custom button card had not yet been updated to the new notation format of Home Assistant.
• This line is particularly important because it contains the link to the radio browser website like I mentioned before.
• And look at this line that points to the image on your Home Assistant server. As you can see it points to the url /local/radio while the actual folder on the Home Assistant server is /www/radio. This is important to know that you use /local/radio and not /www/radio otherwise the image will not be shown.
• I think the rest of the variables are self-explanatory.

You can either type the code from the screen for free, or, if you’d like to support me, you can buy me a coffee and download the code in return via the link in the video’s description.

Now let’s create another radio station shortcut.

• Click on the Plus sign.
• Search for “button” and select the custom button card.
• Enter the code for your second radio station.
• The only differences are the media-content_id, the entity+picture, and the Name.
• Click Save.

As you can see, both buttons now have different heights. To give them both the same height, we will use the card-mod that we installed earlier via HACS.

• Click the pencil within the section.
• Add the following code.
• Here we specify that the card must be at least 200 pixels wide and 100 pixels high.
• Repeat this for the second card.
• Click Save.

I repeated this process for all the radio stations I regularly listen to, so I now have a nice overview with shortcuts for all the radio stations.

Now, let’s remove the heading because I don’t need any headings for this view.

• Click the three dots in the heading card.
• Select Delete.
• And click Delete.
• Click Done.

Our Sonos dashboard is now ready. When I click on a radio station, that station will play on the Sonos speakers that are active in the player in the middle.

Awesome! We can now control our Sonos system in Home Assistant. I have a tablet hanging in my kitchen that I use to control this. Personally, I use this dashboard the most. I hope this video has helped you set up your own media player dashboard. You can easily modify this so it also works for your other speakers using the Maxi Media Player, which is also created by Punxa Phil.

Thank you for watching. If my videos save you time, consider becoming my sponsor, just like these people have. For the price of a cup of coffee per month, you ensure that I can keep making these videos. Thank you very much. The links to Patreon, Ko-Fi, and how to become a member of my channel are in the description of this video.

And, don’t forget to give this video a thumbs up and subscribe to my channel if you haven’t done so already. I’ll see you soon in my next video!

Bye Bye!

#Sonos #HomeAssistant #Dashboard #SmartHome #HomeAutomation #TechTips