Intro

Het leuke aan de zogenaamde slimme speakers is dat je er ook mee naar muziek kan luisteren vanuit verschillende bronnen. Door hier Home Assistant aan toe te voegen, kan je voor jezelf een leuk audio dashboard maken :)

In deze blogpost ga ik wat uitleg geven over hoe ik dit voor mezelf heb opgezet. Via de stukjes code die ik post, moet het eenvoudig zijn om een versie te maken die voldoet aan al jouw noden.

Screenshot of webradio dashboard
Webradio control center

Helpers (dropdown en tekstvak) maak ik in YAML aan, maar je kan dit ook via de UI. Waarom ik dit echter zo doe, wordt duidelijk verderop in deze blogpost.

Opzet

Dit dashboard vereist een paar onderdelen. Bv. Helpers die een keuzemenu en een tekstvak zullen voorzien, een paar scripts, en een paar Lovelace-elementen.

We gaan stap voor stap hier door lopen, met losse stukjes code. Aan het einde van deze blogpost vind je de complete code terug.

Helpers

Zoals eerder gezegd, gebruiken we zgn. Helpers om een keuzelijst en een tekstvak te voorzien. De keuzelijst vullen we aan met namen van (web)radiostations die we willen beluisteren. In het tekstvak kunnen we zelf een linkje meegeven naar bv. een YouTube filmpje.

Pas deze lijst zeker aan naar jouw eigen wensen. Het moeilijkste onderdeel hierin is het vinden van de juiste streaming URL. Soms vind je deze rechtstreeks op de site van het radiostation, andere keren moet je in de adresbalk of het netwerkverkeer van jouw browser zoeken. Er bestaan ook een aantal sites die streaming-URLs voorzien voor een hele resem aan radiostations.

Radiostation keuzelijst 

input_select:
  radio_station:
    name: 'Kies radiostation'
    icon: mdi:radio
    initial: VRT Studio Brussel
    options:
      - VRT Radio 1
      - VRT Studio Brussel
      - VRT MNM
      - VRT NWS
      - Topradio
      - Qmusic
      - VBRO
      - Willy Radio

Eigen URL tekstvak 

input_text:
  url:
    name: URL
    min: 10
    max: 255
    icon: mdi:web
    mode: text

Scripts

Spelen via keuzelijst

De code hieronder zullen we in Lovelace oproepen via een Button en zal het geselecteerde radiostation afspelen.

Je kan optioneel ook een afbeelding instellen voor het gekozen radiostation. Dit zorgt ervoor dat het Lovelace dashboard deze afbeelding weergeeft wanneer het geselecteerde station afspeelt. Dit kan bv. het logo van het radiostation zijn.

Hiervoor moet je de gewenste afbeeldingen downloaden en opslaan in (een subfolder van) /config/www/. In de code verwijzen we dan naar deze (sub)folder via /local/.

script:
  play_radio:
    alias: Webradio afspelen
    icon: mdi:play
    description: Gekozen webradio afspelen op slimme speaker
    mode: restart
    sequence:
      - service: media_player.volume_set
        data:
          entity_id: media_player.woonkamer
          volume_level: 0.10
      - service: media_player.play_media
        data:
          entity_id: media_player.woonkamer
          media_content_type: music
          media_content_id: >
            {%- set station = states('input_select.radio_station') -%}
            {% if station == "VRT Radio 1" %} http://icecast.vrtcdn.be/radio1-high.mp3
            {% elif station == "VRT Studio Brussel" %} http://icecast.vrtcdn.be/stubru-high.mp3
            {% elif station == "VRT Studio Brussel - #ikluisterbelgisch" %} http://icecast.vrtcdn.be/stubru_tgs-high.mp3
            {% elif station == "VRT MNM" %} http://icecast.vrtcdn.be/mnm-high.mp3
            {% elif station == "VRT NWS" %} http://progressive-audio.lwc.vrtcdn.be/content/fixed/11_11niws-snip_hi.mp3
            {% elif station == "Topradio" %} https://str.topradio.be/topradio.mp3
            {% elif station == "Qmusic" %} https://21293.live.streamtheworld.com/QMUSIC.mp3
            {% elif station == "VBRO" %} https://radiohuis.com/VBRO
            {% elif station == "Willy Radio" %} http://20723.live.streamtheworld.com/WILLY.mp3
            {% endif %}            
          extra:
            thumb: >
              {%- set station = states('input_select.radio_station') -%}
              {% if 'Studio Brussel' in station %}  https://<jouw_HA_URL>/local/img/logo/logo_stubru.svg
              {% elif 'MNM' in station %} https://<jouw_HA_URL>/local/img/logo/logo_mnm.svg
              {% elif 'NWS' in station %} https://<jouw_HA_URL>/local/img/logo/logo_vrtnws.svg
              {% elif station[:3] == "VRT" %} https://<jouw_HA_URL>/local/img/logo/logo_vrt.svg
              {% elif station == "Topradio" %} https://<jouw_HA_URL>/local/img/logo/logo_topradio.svg
              {% elif station == "Qmusic" %} https://<jouw_HA_URL>/local/img/logo/logo_qmusic.svg
              {% elif station == "VBRO" %} https://<jouw_HA_URL>/local/img/logo/logo_vbro.png
              {% elif station == "Willy Radio" %} https://<jouw_HA_URL>/local/img/logo/logo_willy.svg
              {% endif %}              
            stream_type: LIVE

Spelen via eigen URL

Om zelfgekozen media af te spelen, hebben we de media_extractor integratie nodig. Dit gebruikt youtube_dl in de achtergrond om de juiste audiostream uit de aangeleverde bron te halen. Zo haalt deze bv. de audiotrack uit een YouTube-filmpje.

media_extractor:

script:
  play_media_url:
    alias: Eigen URL afspelen
    mode: single
    icon: mdi:music-box-multiple-outline
    sequence:
      - service: media_player.media_stop
        target:
          entity_id: media_player.woonkamer
      - service: media_player.volume_set
        data:
          entity_id: media_player.woonkamer
          volume_level: 0.10
      - service: media_extractor.play_media
        data:
          media_content_type: MUSIC
          media_content_id: "{{ states('input_text.url') }}"
        target:
          entity_id: media_player.woonkamer

Lovelace Dashboard

Dit dashboard kan je indelen zoals je zelf wilt.

Ik maak gebruik van de Mini Media Player custom card om weer te geven wat m’n slimme speaker afspeelt. Deze kan je eenvoudig via HACS installeren.

type: vertical-stack
cards:
  - type: custom:mini-media-player
    group: false
    artwork: cover
    source: full
    sound_mode: full
    info: short
    name: Living Room
    idle_view:
      when_idle: true
    entity: media_player.woonkamer
  - type: entities
    entities:
      - entity: input_select.radio_station
        name: station
      - entity: script.play_radio
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.play_radio
  - type: entities
    entities:
      - entity: input_text.url
        name: URL
      - entity: script.play_media_url
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.play_media_url
        icon: mdi:play

Volledige code

Alle code die je nodig hebt om mijn dashboard na te bootsen vind je hieronder terug.

Je zal zien dat de reden dat ik alles in YAML heb gedaan is omdat ik mijn config hebt opgesplitst en gebruik maak van zgn. packages. Zo kan ik alle relevante en bij elkaar horende code groeperen in een config bestandje, wat het makkelijk terug te vinden maakt.

Wil je geen gebruik maken van packages, moet je gewoon de code in de juiste config bestanden zetten (bv. scripts.yaml). Helpers en scripts kan je ook via de UI aanmaken.

configuration.yaml

homeassistant:
  packages: !include_dir_merge_named packages/

# Deze zet ik in config.yaml omdat het iets algemeen is
media_extractor:

packages/mediaplayers/media_url.yaml

---
# Play custom audio stream on smart speaker(s)
#
# https://www.home-assistant.io/integrations/media_extractor/
# https://www.home-assistant.io/integrations/input_text/
#
media_url:
  script:
    play_media_url:
      alias: Play media from URL
      mode: single
      icon: mdi:music-box-multiple-outline
      sequence:
        - service: media_player.media_stop
          target:
            entity_id: media_player.woonkamer
        - service: media_player.volume_set
          data:
            entity_id: media_player.woonkamer
            volume_level: 0.10
        - service: media_extractor.play_media
          data:
            media_content_type: MUSIC
            media_content_id: "{{ states('input_text.url') }}"
          target:
            entity_id: media_player.woonkamer
  
  input_text:
    url:
      name: URL
      min: 10
      max: 255
      icon: mdi:web
      mode: text

packages/mediaplayers/webradio.yaml

---
# Play webradio on smart speaker(s)
#
# Based on https://community.home-assistant.io/t/chromecast-radio-with-station-and-player-selection/12732
#
# https://www.home-assistant.io/integrations/media_player
# https://www.home-assistant.io/integrations/input_select/
#
webradio:
  script:
    play_radio:
      alias: Play radio
      icon: mdi:play
      description: Play web radio on Chromecast
      mode: restart
      sequence:
        - service: media_player.volume_set
          data:
            entity_id: media_player.woonkamer
            volume_level: 0.10
        - service: media_player.play_media
          data:
            entity_id: media_player.woonkamer
            media_content_type: music
            media_content_id: >
              {%- set station = states('input_select.radio_station') -%}
              {% if station == "VRT Radio 1" %} http://icecast.vrtcdn.be/radio1-high.mp3
              {% elif station == "VRT Studio Brussel" %} http://icecast.vrtcdn.be/stubru-high.mp3
              {% elif station == "VRT Studio Brussel - #ikluisterbelgisch" %} http://icecast.vrtcdn.be/stubru_tgs-high.mp3
              {% elif station == "VRT MNM" %} http://icecast.vrtcdn.be/mnm-high.mp3
              {% elif station == "VRT NWS" %} http://progressive-audio.lwc.vrtcdn.be/content/fixed/11_11niws-snip_hi.mp3
              {% elif station == "Topradio" %} https://str.topradio.be/topradio.mp3
              {% elif station == "Qmusic" %} https://21293.live.streamtheworld.com/QMUSIC.mp3
              {% elif station == "VBRO" %} https://radiohuis.com/VBRO
              {% elif station == "Willy Radio" %} http://20723.live.streamtheworld.com/WILLY.mp3
              {% endif %}              
            extra:
              thumb: >
                {%- set station = states('input_select.radio_station') -%}
                {% if 'Studio Brussel' in station %}  https://<my_homeassistant>/local/img/logo/logo_stubru.svg
                {% elif 'MNM' in station %} https://<my_homeassistant>/local/img/logo/logo_mnm.svg
                {% elif 'NWS' in station %} https://<my_homeassistant>/local/img/logo/logo_vrtnws.svg
                {% elif station[:3] == "VRT" %} https://<my_homeassistant>/local/img/logo/logo_vrt.svg
                {% elif station == "Topradio" %} https://<my_homeassistant>/local/img/logo/logo_topradio.svg
                {% elif station == "Qmusic" %} https://<my_homeassistant>/local/img/logo/logo_qmusic.svg
                {% elif station == "VBRO" %} https://<my_homeassistant>/local/img/logo/logo_vbro.png
                {% elif station == "Willy Radio" %} https://<my_homeassistant>/local/img/logo/logo_willy.svg
                {% endif %}                
              stream_type: LIVE
  
  input_select:
    radio_station:
      name: 'Kies radiostation'
      icon: mdi:radio
      initial: VRT Studio Brussel
      options:
        - VRT Radio 1
        - VRT Studio Brussel
        - "VRT Studio Brussel - #ikluisterbelgisch"
        - VRT MNM
        - VRT NWS
        - Topradio
        - Qmusic
        - Topradio
        - VBRO
        - Willy Radio

Lovelace dashboard

Nieuwe Manual card toevoegen en deze code plakken:

type: vertical-stack
cards:
  - type: custom:mini-media-player
    group: false
    artwork: cover
    source: full
    sound_mode: full
    info: short
    name: Living Room
    idle_view:
      when_idle: true
    entity: media_player.woonkamer
  - type: entities
    entities:
      - entity: input_select.radio_station
        name: station
      - entity: script.play_radio
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.play_radio
  - type: entities
    entities:
      - entity: input_text.url
        name: URL
      - entity: script.play_media_url
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.play_media_url
        icon: mdi:play

Veel plezier met het luisteren naar jouw favoriete radiozenders op jouw slimme speakers!

Vul deze code bv. aan met een dropdown waarin je kan kiezen welke speaker de stream moet afspelen. Of maak een Automation die jouw favoriete zender afspeelt terwijl je ontbijt.