Hi!
Do you want an AMAZING-looking music player like this on your dashboard? This can be done in minutes and I’m going to show you how to set this up. Let’s do this!

---

⭐⭐⭐ 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

If you have smart speakers in your home, you can easily play music on those using Home Assistant. You can use Music Assistant for this, but I wanted to have something that looked a little bit sexier. In my case, I listen a lot to radio stations and I wanted to create a music player on my dashboard for every room in which I have smart speakers. It’s not only possible to play radio stations, but also playlists from Spotify for Example. Today I will focus on setting up this music player that plays your favorite radio stations. Let me know in the comments if I should also create a video to show how to set up Spotify.

But, before we start, please subscribe to my channel and smash the thumbs-up button for this video. This way, you make sure that I can keep creating these videos for you!

It’s really not that difficult to set this music player up. And even if you find it difficult, you can download the code I used in this video via the link in the description of this video below.

The topics that I will show in this video are:

1. How to install the mini media player
2. How to configure the mini media player
3. How to retrieve the data for your favorite radio station

How to install the mini media player

First, let’s install the mini media player. For this, you need to have HACS installed. If you do not have HACS installed yet, I created this easy-to-follow video on how to do that. Check it out. If HACS is installed, you are ready to install the mini media player now.

Now to install the mini media player, go to HACS. Go to front end. Go to explore and download repositories. Search for repository Mini media player. Click on Mini media player, Click on downloads, Click on download again and click reload.

Now we need to install one more thing and that is the radio browser. It should be installed by default in Home Assistant, but if it’s not, you can install it by going to Settings, then go to Devices and Services. Go to Add Integration. Search for Radio Browser. Click Radio Browser. Click Submit and click Finish.

How to configure the mini media player

The mini media player is now installed. The documentation of the mini media player can be found on this page. It has a lot of possibilities like playing from different sources, showing album and artwork information, and many more options to tweak the layout. We will set up the mini media player so that it will look like this. You will know how you can add your own radio stations after you followed this tutorial until the end. Let’s set up the media player.

To add mini media player to your dashboard, click on your dashboards. Click on the three dots in the right upper corner, Click edit dashboard, Click add cards. Search for mini media player. Click the mini media player and now you can set settings for the mini media player. The first setting is the entity and the entity is your media player in the room. In my case it is the Chromecast audio. Give your mini media player a name, for instance Harman Kardon.

Give it an icon, MDI radio, and you can also give it an image, and the image will overwrite the icon. Here is a section where you have other settings. These settings do not have much effect on radio stations, but you can group cards, you can swap the volume slider for buttons. You can toggle the power button behavior and you can change things like the artwork, for instance cover, to source, for instance full sound modes. For instance full info. For instance short, and you can replace the mute button for something else, and you can add a background, and a scale.

To add the background you need an image that you put on your Home Assistant server. I already prepared an image for that and I’m going to show you where you have to store that image so that it works in this media player. For now, just click on Save. To upload a file to your server it’s handy if you have the studio code server installed. For that go to settings, go to add-ons, go to add-on store, search for Studio code server.

Click on Studio code server, Click install, Click on show inside bar and click Start. Now go to Studio code server.

What you see here is the file structure of our Home Assistant server. And there’s one folder which is really important because that’s the folder where we are going to put our images in. And that is the www folder, so this one within this folder. We are going to create a new folder and that folder is called radio. So let’s create a new folder here and let’s call it radio.

So now I have a new folder within WWW which is called radio we are going to put our images into this folder, so I’m going to open the Explorer.

And I’ve got a background image radio background dot JPEG, and I’m going to drag it into the radio folder. So now it’s in here. So now we will be able to show this background into our mini media player. Go back to our dashboard.

Click on the three dots. Click on edit dashboards, and we click on edit in the cart. Now we are going to add the location of our background image in this card and we’re going to add that location over here. We stored our image in the www radio folder but we have to call slash local instead of slash www here and then slash radio. So that’s the radio folder and then we go to Radio background DOT jpeg which is our image file name. Now we click on Save.

And now you see that our mini media player gets a background.

How to retrieve the data for your favorite radio station in your music player

We’ve set up the general settings for our media player so that it looks nice already. Now, let’s add the radio stations that we’d like to listen to. First, let me explain how you can find the locations of the radio stations to determine what the location of our radio station is. We go to the website www.radio-browser.info.

And there we can search for the radio station that we want to add to our mini media player. So I’m going to search in my case 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 add to our mini media player.

Add the radio stations to the Music Player

Now that we know how to get the ids for our radio station, let’s add the radio stations to our media player. First, we need to create a script for each radio station that we want to call in our mini-media player.

First we need to create a script for each radio station that we want to call in our mini media player. To create a script, go to settings. Go to automations and scenes. Go to Scripts. Click on Add Script. We’re going to give this script a name: Media: Play KINK DNA. We are going to give it an icon: MDI play. We leave the mode on single and then we go to sequence and click on Add action. We’re going to choose call service and the service is media_player.play_media. Make sure you select media_player.play_media and not media_player.media_play!

The target is our media player in the room. In my case it is Chromecast audio and the content ID is as follows. It starts with media source colon slash slash radio underscore browser. And then we’re going to add the number that we found on radio browser.info. So we go to Radio browser.info, copy this number, copy go back to home assistance paste it over here.

Content type is music and we’re going to say Enqueue as play now and clear queue. I’m going to click on Save script.

And now you can already test the script by going to the three dots over here and click on run script. And then you should hear the radio starts playing.

So I’m going to create scripts for every radio station that I want to show in my mini media player.

I created a script for each radio station, so now it’s time to call these scripts from our mini media player.

So here are all my scripts. And to call these scripts from the media player, go back to the dashboard. Click on the three dots in the upper right corner. Click on edit dashboards, and click on edit in the cards. And now we are going to show code editor, and we are going to add shortcuts to our scripts in here. For that, we go to this line. Add a new line, and we start with the line as shortcuts colon. Then we do one indentation by clicking on the tab. We say columns, let’s say three.

And then we are going to Define buttons.

And within buttons we are going to say the type of the button is a script.

The name is in my case KINK DNA. The ID of the script is: script Dot media player play KINK DNA. So if I save this you see that I already have one button to play my radio KINK DNA. So if I click this, the radio starts playing.

I can put it on pause, I can put it on play, I can mute it, I can demute it, I can make it louder, or turn the volume down, and turn it off. So now we’re going to add the other shortcuts by clicking on edit, clicking on show code editor. I’m going to copy this code.

I’m going to paste that code over here and I’m going to change it with the data for the other radio station so let’s do that real quick.

Now we created all the shortcuts, so click on Save and now you see all the buttons for all the radio stations. So I can start my radio station by clicking on a button.

I can switch to another radio station, or switch to another radio station. And so on, and so on.

Create background images for the buttons

Our media player now works, but I don’t really like the buttons, so let’s add a background image to each button.

I already prepared some backgrounds for the shortcut buttons, so let’s go to Studio code server and open the Explorer again. And now copy all the backgrounds to the radio folder. So all the backgrounds are now in the radio folder. Now go back to your dashboard. Click again on the three dots in the right upper corner. Click add the dashboards and click edit on the media player card. Now click on show code editor. And now we are going to remove the name and add a different line of code here. That line is cover colon. Again we are going to point to slash local which actually is slash www, slash radio. Then the name of our background for the button. so in this case I can underscore KINK underscore DNA Dot gif.

Let’s save this to see how it works. And now you see that I have a background for my button here. And actually it animates because it’s a gif. Let’s do the same for all the other buttons. So go back to edit. Go back to show code editor, and let’s real quick change all the names into covers. So I changed all the names to covers. Let’s click on Save, and see what happens. And now you see that all the buttons have a nice background and I can still click on every button to play the radio.

So, that’s nice. Click done. And your radio player is ready.

If you don’t want to type the code from the screen, you can download the code that I’ve created for this video via the ko-fi link in the description below. With this, you sponsor me, and make it possible for me to keep creating these videos for you.

Conclusion

So, now you can create your own radio media player for each room in your house. The mini media player has more options. Check the documentation of the mini media player for that.
I want to thank everyone who has supported me in making these videos and tutorials so far. I could never have done this without you. Thank you! You can support me through Patreon, Ko-Fi, or by joining my channel. If you also want to support me, look in the description of this video for the links. With that, you make it possible that I can continue to make these videos for you.

Oh, don’t forget to give this video a thumbs up, subscribe to my channel, and hit the notification bell.

I will see you soon!

Bye bye!