Play Radio Browser via Home Assistant

Play Radio Browser via Home Assistant

15 oktober 2022 9 Door Ivo

 

Radio Browser

Het zit al een tijdje in Home Assistant, maar hoe kun je deze gemakkelijk gebruiken voor je slimme speakers.
Leuk om een zender af te spelen in de browser of een andere media_player.

Maja een zender selecteren is best wat klikken, en hoe sla je het op?
Aan mijn oude radio heb ik een AudioCast gesloten en toegevoegd in Home Assistant.

Audio-cast

AudioCast

De AudioCast is vrij eenvoudig in gebruik AudioCast site (daarmee stel je je wifi in, daarna kun je de app weer verwijderen 😀)

Ik heb daarvoor een kort artikel gemaakt, zie Audiocast

Sonos

Heb je een of meerdere Sonos speakers? Die kun je ook makkelijk aansturen met de Sonos integratie.

Google Nest

Deze zijn simpel toe te voegen via Google Cast.

De Knop

Ga naar de LoveLace en maak een button en pas je media_player aan

type: button
name: NPO 1
show_name: true
show_icon: true
icon_height: 25px
icon: mdi:radio
tap_action:
  service: media_player.play_media
  action: call-service
  data:
    media_content_id: media-source://radio_browser/96126f56-0601-11e8-ae97-52543be04c81
    media_content_type: audio/mpeg
  target:
    entity_id: media_player.living_room

En het werkt, NPO1 speelt af! Maar, hoe kom je aan het media_content_id en type van je favoriete zenders?
Heb je meerdere media players in huis? Onderaan de uitleg voor meerdere players.

 

Automation

Daarvoor had ik tijdens het testen een automation voor gemaakt.

Maak een helper aan, een schakelaar.
helper

Onderstaand de Radio Browser yaml van de automation:

alias: Radio NPO1
description: ""
trigger:
  - platform: state
    entity_id:
      - input_boolean.npo1
    from: "off"
    to: "on"
condition: []
action:
  - service: media_player.play_media
    target:
      entity_id: media_player.living_room
    data:
      media_content_id: media-source://radio_browser/96126f56-0601-11e8-ae97-52543be04c81
      media_content_type: audio/mpeg
    metadata:
      title: NPO Radio 1
      thumbnail: >-
        https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/NPO_Radio_1_logo_2014.svg/640px-NPO_Radio_1_logo_2014.svg.png
      media_class: music
      children_media_class: null
      navigateIds:
        - {}
        - media_content_type: app
          media_content_id: media-source://radio_browser
        - media_content_type: music
          media_content_id: media-source://radio_browser/country/NL
mode: single

Via de Visueel editor kun je zenders selecteren en dan kijk je in de yaml voor content_id en type. De tumbnail kunnen we gebruiken voor de HACS methode.
Je kunt ook gemakkelijk eigen media selecteren om zo het juiste pad en format te krijgen.

HACS

Heb je Hacs geïnstalleerd?

zenders

Installeer de frontend button-card
Daarmee krijg je de mogelijkheid tot de type: custom:button-card

Maak knoppen met het logo van de zender. Onderstaand de code voor de Q-Music België.

name: BE
type: custom:button-card
show_entity_picture: true
entity_picture: /local/radio/Qmusic_logo.svg
tap_action:
  action: call-service
  service: media_player.play_media
  service_data:
    media_content_id: media-source://radio_browser/bbabb958-aa77-4d52-80c6-d86c9268721f
    media_content_type: audio/mpeg
    entity_id: media_player.living_room

Je kunt de logo’s zelf opslaan of een url oproepen
entity_picture: http://www.nporadio2.nl/apple-touch-icon.png

De url van het logo haal je ook weer uit de automation.
Onderstaand een lijstje met zenders welke ik heb gebruikt.

Meerdere slimme speakers

Heb je meerdere slimme speakers, dan hoef je niet voor elke speler knoppen te maken,

Input selector

Als eerste pas je de configuration.yaml aan, voeg onderstaande toe.

input_select:
  radio:
    name: Welke Radio
    options:
      - Woonkamer
      - Slaapkamer
      - Keuken
    initial: Woonkamer
    icon: mdi:radio

Sla op, en herstart Home Assistant of herlaad de yaml’s.

We maken de kaart aan  – Update radio browser december 2022

Onderstaand de gehele code welke ik gebruik bovenaan de selector, eronde de radio-knoppen welke kijkt naar de selector om de juiste media_player te selecteren. Dit kun je natuurlijk aanpassen en uitbreiden met al favoriete zenders en al je media_players! 📻

In de zender code heb ik de Keuken al toegevoegd.
Het was een kerstcadeau voor vriendin 👧 de selector pas ik later aan.

Radio browser menu

Nog een zender splitsing

Wil je de zenders nog sorteren op soort (bijvoorbeeld, NPO, Q-music en Limburgs?
Maak nog een input-selector aan. De code wordt dan zoals onderstaand.

configuration.yaml
input_select:
  radio:
    name: Welke Radio
    options:
      - Woonkamer
      - Keuken
      - Slaapkamer
    initial: Woonkamer
    icon: mdi:radio
  zenders:
    name: Welke soort zender
    options:
      - NPO
      - Q-music
      - Limburgs
    initial: NPO
    icon: mdi:radio

En zender voorbeeld, alleen zichtbaar als de selectie op Q-music staat.

type: conditional
conditions:
  - entity: input_select.zenders
    state: Q-music
card:
  type: custom:button-card
  show_entity_picture: true
  entity_picture: /local/radio/Qmusic_logo.svg
  size: 19%
  tap_action:
    action: call-service
    service: media_player.play_media
    service_data:
      media_content_id: media-source://radio_browser/674e1f9d-4686-4bc0-8fc3-7e1517ed543a
      media_content_type: audio/mpeg
      entity_id: |
        [[[
          var player = states["input_select.radio"].state;
          if ([player] == 'Woonkamer') return 'media_player.living_room';
          if ([player] == 'Keuken') return 'media_player.keuken';
          if ([player] == 'Slaapkamer') return 'media_player.nestmini9513';
        ]]]
  name: Dance

Laat weten of het jou ook is gelukt voor jouw media_player! 🎶