Metti un po di musica su spotify

Un piacevole accompagnamento musicale, mentre svolge i suoi compiti al servizio dell’efficienza domestica e della nostra comodità. Con questo package e la sua dashboard doniamo un po' di brio alla nostra casa con l’aiuto del nostro hub domotico.

Cosa vogliamo fare

Come abbiamo detto tante volte, una casa smart si prende cura di noi essendo in grado di riconoscere ed adattarsi silenziosamente alle nostre esigenze. Ma il benessere fisico passa senza dubbio alcuno anche da quello spirituale. In questo post andiamo perciò a realizzare un centro musicale interamente web, un player Radio e Spotify.

Nota Alcune delle funzionalità descritte richiedono un abbonamento Spotify Premium. Tuttavia il package è in grado di funzionare ugualmente anche con il profilo free, con le medesime limitazioni riscontrabili su qualsiasi altro dispositivo connesso a Spotify.

Cosa ci serve

Supponiamo di avere in casa almeno uno speaker integrato in Home Assistant: nel mio caso son o presenti tre dispsitivi Google Home Mini, indirizzabili singolarmente oppure in due gruppi (tutti o solo due di questi) definiti mediante app Google Home.

I componenti di Home Assitant necessari per quest progetto sono:

• Integrazioni native:
  • Spotify
  • Google Cast
• HACS (integrazioni/frontend):
  • Spotcast
  • Browser-mod
  • Layout-card
  • Button-card
  • Slider-entity-row

Rimandiamo alle guide ufficiali ed ai numerosi articoli presenti in rete su come predisporre tutto quanto necessario ad utilizzare i componenti sopra elencati.

La logica

Lo sforzo maggiore nella realizzazione di questo Music Player è stato quello profuso per la convivenza delle due anime Web-Radio e Spotify. Nella stessa dashboard infatti troviamo tutti i controlli necessari per gestire:

• gli speaker, nel nostro caso 3 dispositivi e 2 gruppi
• le sorgenti audio, ovvero stream radio e/o playlist Spotify
• la riproduzione (anche contemporanea) dalle sorgenti

L’interazione utente è realizzata mediante alcuni input_select con i quali implementiamo le selezioni di sorgente, speaker e playlist. La variazione di queste selezioni fa scattare le automazioni per l’avvio/spegnimento della riproduzione e per il controllo degli speaker.

Una serie di sensori template ci informa in ogni momento sullo stato del player, consentendoci di condizionare l’esecuzione delle automazioni e al contempo di visualizzarne le informazioni sulla dashboard.

Gli stream audio gestibili contemporaneamente sono due: interno, sia Radio sia Spotify, mediante media_player definiti in Home Assistant, ed esterno, solo Spotify, se è attiva la riproduzione su altri dispositivi non integrati.

Nota Ricordiamo che, a differenza di Alexa e di altri dispositivi come i Sonos, l’integrazione degli speaker Google in Spotify non consente di definire in modo perenne i relativi device, ma è necessario avviare la riproduzione su uno di questi per averne visibilità. Per fare questo utilizziamo il componente Spotcast. In alternativa si può lanciare la riproduzione con un comando vocale.

Integrazioni native Google Cast e Spotify

Come anticipato, l’integrazione di questi, e degli altri, componenti necessari al progetto non è spiegata in questo post, essendo semplice e ben documentata in rete.

Quello che ci interessa qui è che, ad integrazione ultimata, se tutto saràa andato correttamente, avremo a disposizione in Home Assistant le entità:

• media_player.tuoi_device: una entità per ciascuno dei dispotivi e dei gruppi Google Cast disponibili
• media_player.spotify: collegato alla riproduzione su account Spotify

Scriviamo i file yaml

Vista la numerosità delle funzionalità che vogliamo implementare, il codice da scrivere è abbastanza corposo, ma con un attento utilizzo dei template (a tutti i livelli) abbiamo provato a semplificarlo. Inoltre, per comodità, lo organizziamo su più file .yaml:

• cartella config/packages:
  • pkg_music_player: file principale del package
• cartella config/automations:
  • auto_music_player: file con le automazioni base
  • auto_music_player_playlist: file con le automazioni per selezione stream
• cartella config/lovelace-views:
  • view_music_player: implementazione interfaccia lovelace
  • popup_music_player: file con il contenuto dei popup

Package

Come sempre, il nostro package avrà in testa una sezione obbligatoria di personaizzazione, nella quale andiamo a dare un nome amichevole ed una icona alle entità di seguito definite, ad esempio:

homeassistant: customize: sensor.audio_speaker_attivo: friendly_name: Speaker Attivo icon: mdi:audio-cast # altre entità ...

Come abbiamo anticipato, le interazioni utente sono realizzate mediante dei selettori, che andiamo a definire di seguito, in modo abbastanza auto-esplicativo:

# selettore sorgente audio radio_spotcast_source: name: Radio_Spotify Source options: - Radio - Spotify - Spento initial: Spento icon: mdi:apple-airplay # selettore player radio_player: name: Radio Player options: - Tutta_casa - Diffusione - Camera ... - Spento initial: Spento icon: mdi:speaker # selettore playlist spotify radio_spotcast_playlist: name: Spotify Playlist options: - Daily Mix 1 - Daily Mix 2 ... - Spento icon: mdi:spotify # selettore stream radio radio_station: name: Radio Station options: - Radio Deejay - Rai Radio 1 - Rai Radio 2 ... - Spento initial: Spento icon: mdi:radio

Sensori

Procediamo con i primi sensori template, che, rispettivamente, ci dicono in ogni momento quale speaker è in riproduzione (ovvero il suo stato assume valore playing) e quale è lo speaker selezionato dall’utente in interfaccia:

sensor: - platform: template sensors: audio_speaker_attivo: value_template: > {% if (states.media_player.diffusione.state=="playing") %} {{'media_player.diffusione'}} {% elif (states.media_player.mini_cucina.state=="playing") %} {{'media_player.mini_cucina'}} {% elif (states.media_player.mini_soggiorno.state=="playing") %} {{'media_player.mini_soggiorno'}} {% elif (states.media_player.mini_camera.state=="playing") %} {{'media_player.mini_camera'}} {% else %} {{'media_player.tutta_casa'}} {% endif %} audio_speaker_selezionato: value_template: > {% if (states.input_select.radio_player.state in ["Spento", "Tutta casa"]) %} {{'media_player.tutta_casa'}} {% elif (states.input_select.radio_player.state=="Diffusione") %} {{'media_player.diffusione'}} {% else %} media_player.mini_{{states.input_select.radio_player.state.lower()}} {% endif %}

Ugualmente, sempre mediante la stessa piattaforma template, implementiamo dei sensori binari (on/off) che ci diano informazioni sullo stato della riproduzione:

• audio_speaker_selezionato_muted indica se lo speaker selezionato è in muto
• audio_riproduzione indica se c’è una riproduzione in corso sui dispositivi integrati
• audio_spotify indica se il componente Spotify è attivo
• audio_spotify_esterno indica se l’account spotify è in uso per una riproduzione su dispotivi esterni
• audio_radio indica se la radio è in riproduzione

binary_sensor: - platform: template sensors: audio_speaker_selezionato_muted: value_template: > {{ states[states.sensor.audio_speaker_selezionato.state].attributes.is_volume_muted }} audio_riproduzione: value_template: > {{ states.media_player.mini_cucina.state=="playing" or states.media_player.mini_soggiorno.state=="playing" or states.media_player.mini_camera.state=="playing" }} audio_spotify: value_template: > {{ states.media_player.spotify.state!="idle" }} audio_spotify_esterno: value_template: > {{ states.media_player.spotify.state!="idle" and 'Mini Cucina' not in states.media_player.spotify.attributes.source_list and 'Mini Soggiorno' not in states.media_player.spotify.attributes.source_list and 'Mini Camera' not in states.media_player.spotify.attributes.source_list }} audio_radio: value_template: > {{ states.binary_sensor.audio_riproduzione.state=="on" and states.binary_sensor.audio_spotify.state=="off" }}

Automazioni

Nella sezione automation: implementiamo tutti gli automatismi alla base del funzionamento del Music Player. Viste però le dimensioni importanti, per favorirne una gestione più comoda ed ordinata, possiamo tenere le automazioni in un file separato, da posizionare insieme a tutte le automazioni in una cartella automations creata all’occorrenza. Queste automazioni saranno poi richiamate nel configuration.yaml in questo modo:

# configuration.yaml automation: !include_dir_merge_list automations

Nel file auto_music_player_playlist.yaml implementiamo la selezione delle sorgenti audio (Radio/Spotify) e dei contenuti (stazione/playlist), che, mediante le rispettive automazioni, avviano la riproduzione:

# Selezione playlist Spotify - alias: Music_Spotify_Riproduci_playlist trigger: - platform: state entity_id: input_select.radio_spotcast_playlist condition: condition: and conditions: - condition: template value_template: > {{ is_state("input_select.radio_spotcast_source", "Spotify") }} - condition: template value_template: > {{ not is_state("input_select.radio_player", "Spento") }} - condition: template value_template: > {{ not is_state("input_select.radio_spotcast_playlist", "Spento") }} action: - delay: "00:00:05" #attesa effettiva attivazione speaker - service: spotcast.start data_template: entity_id: > {{ states['sensor.audio_speaker_selezionato'].state }} uri: > {%-if is_state("input_select.radio_spotcast_playlist", "Daily Mix 1") %} spotify:playlist:playlistuniqueidentifier {%-elif is_state("input_select.radio_spotcast_playlist", "Daily Mix 2") %} spotify:playlist:playlistuniqueidentifier ... {% endif %} random_song: true shuffle: true # Selezione stream web radio - alias: Music_Radio_Riproduci_stazione trigger: - platform: state entity_id: input_select.radio_station condition: condition: and conditions: - condition: template value_template: > {{ is_state("input_select.radio_spotcast_source", "Radio") }} - condition: template value_template: > {{ not is_state("input_select.radio_player", "Spento") }} - condition: template value_template: > {{ not is_state("input_select.radio_spotcast_playlist", "Spento") }} action: - service: media_player.play_media data_template: entity_id: > {{ states.sensor.audio_speaker_selezionato.state }} media_content_id: > {%-if is_state("input_select.radio_station", "Radio Deejay") %} //radiodeejay-lh.akamaihd.net/i/RadioDeejay_Live_1@189857/master.m3u8 {%-elif is_state("input_select.radio_station", "Rai Radio 1") %} //icestreaming.rai.it/1.mp3 {%-elif is_state("input_select.radio_station", "Rai Radio 2") %} //icestreaming.rai.it/2.mp3 ... {% else %} '' {% endif %} media_content_type: "music"

Procediamo nel file auto_music_player.yaml ad implementiamo tutte le altre funzioni basen necessarie. Durante la riproduzione è possibile cambiare il player utilizzato senza perdere la selezione della sorgente e del contenuto che si sta ascoltando:

- alias: Music_Cambia_player trigger: - platform: state entity_id: input_select.radio_player condition: > {{ not is_state("input_select.radio_player", "Spento") }} action: - service: media_player.turn_off data: entity_id: - media_player.tutta_casa - media_player.diffusione ... - delay: '00:00:01' - service: media_player.turn_on data_template: entity_id: > {{ states.sensor.audio_speaker_selezionato.state }} - delay: '00:00:01' - service: automation.trigger data_template: entity_id: > {%-if is_state("input_select.radio_spotcast_source", "Spotify") %} automation.music_spotify_riproduci_playlist {% else %} automation.music_radio_riproduci_stazione {% endif %}

A seguire è implementato lo spegnimento da interfaccia:

- alias: Music_Spegni_Musica trigger: - platform: state entity_id: input_select.radio_spotcast_source to: "Spento" condition: > {{ not is_state("input_select.radio_player", "Spento") }} action: - service: media_player.turn_off data: entity_id: - media_player.tutta_casa ... - service: input_select.select_option data: entity_id: input_select.radio_player option: 'Spento' - service: input_select.select_option data: entity_id: input_select.radio_station option: 'Spento' - service: input_select.select_option data: entity_id: input_select.radio_spotcast_playlist option: 'Spento'

Ed infine, una comoda funzione di spegnimento automatico nel caso di interruzione della riproduzione dall’esterno (ad esempio via comando vocale):

- alias: Music_Riproduzione_finita trigger: - platform: state entity_id: binary_sensor.audio_riproduzione to: "off" for: "00:01:00" #considera spento trascorso questo tempo action: - service: input_select.select_option data: entity_id: input_select.radio_spotcast_source option: "Spento"

Interfaccia: il layout della plancia

Passiamo adesso a disegnare l’interfaccia del nostro Music Player che sarà una pagina del nostro Home Assistant. Per impostare il layout della dashboard usiamo la custom:layout-card, con la quale organizziamo le card in tre aree, lasciando una riga in alto come spazio vuoto regolabile all’occorrenza:

• header con tutti i pulsanti di controllo
• panel1 per il controllo dei device disponibili
• panel2 con le info sulla riproduzione in corso

- type: custom:layout-card layout_type: custom:grid-layout layout: grid-template-columns: auto 450px 400px auto grid-template-rows: 5px 80px 400px grid-gap: 5px grid-template-areas: | ". . . ." "header header header header" ". panel1 panel2 ." cards: # Pulsanti di controllo - type: horizontal-stack view_layout: grid-area: header cards: ... # Controllo singoli players - type: custom:stack-in-card mode: vertical view_layout: grid-area: panel1 cards: ... # Pannello riproduzione - type: custom:stack-in-card view_layout: grid-area: panel2 mode: vertical cards: ...

Interfaccia: i pulsanti di controllo

Sfuttiamo il meccanismo dei template a corredo della custom:button-card per modellare i pulsanti della nostra interfaccia, in modo da riutilizzare la maggior parte di codice possibile, andando a snellire la definizione della pagina stessa. Partiamo con i template dei pulsanti di selezione delle stazioni radio, con o senza logo:

# Pulsante stazione radio solo nome radio_preset: variables: var_name: "Radio Name" var_option: "" entity: input_select.radio_station name: '[[[ return variables.var_name ]]]' show_name: true show_icon: false tap_action: action: call-service service: input_select.select_option service_data: entity_id: input_select.radio_station option: '[[[ return variables.var_option=="" ? variables.var_name : variables.var_option ]]]' styles: card: [height: 40px] name: - font-size: 10pt - color: > [[[ if (entity.state==variables.var_name || entity.state==variables.var_option) return 'lime' return '' ]]] # Pulsante stazione radio con aggiunta del logo radio_preset_logo: template: ['radio_preset'] layout: icon_name entity_picture: > [[[ var logo='' var selected=(variables.var_option=='' ? variables.var_name : variables.var_option) if (selected=="Radio Deejay") logo='RadioDeejay.png' else if (selected=="Rai Radio 1") logo='RaiRadio1.png' else if (selected=="Rai Radio 2") logo='RaiRadio2.png' ... else logo='RadioWWW.png' return '/local/radio/60X37/' + logo ]]]

Continuiamo con il template per il generico pulsante, che ne definisce l’estetica di base:

radio_button: color_type: icon color: var(--paper-card-background-color) show_name: false styles: card: [border-radius: 50%, height: 60px, width: 60px]

Il template del pulsante per la selezione di una voce nei vari selettori, ne specifica il comportamento, ovvero l’azione eseguita ed il conseguente aspetto assunto:

radio_button_select: template: ['radio_button'] variables: value_select: "Spento" color_selected: "lime" color_unselected: "" tap_action: action: call-service service: input_select.select_option service_data: entity_id: '[[[ return entity.entity_id ]]]' option: '[[[ return variables.value_select ]]]' styles: icon: - size: 100% - color: > [[[ if (entity.state==variables.value_select) return variables.color_selected else return variables.color_unselected ]]]

Infine il template per i pulsanti di seek dei contenuti:

radio_seek_button: template: ['radio_button'] variables: var_dir: "next" color: var(--paper-card-background-color) icon: > [[[ return 'mdi:skip-' + variables.var_dir ]]] tap_action: action: call-service service: > [[[ return 'input_select.select_' + variables.var_dir ]]] service_data: entity_id: input_select.radio_station

Siamo pronti quindi ad istanziare la nostra pulsantiera, usando i template sopra definiti. Ad esempio i pulsanti di selezione della sorgente e dello speaker, da inserire nella pila orizzontale di area header :

# Esempio selezione sorgente - type: custom:button-card template: radio_button_select variables: value_select: "Radio" icon: mdi:radio entity: input_select.radio_spotcast_source # Esempio selezione player - type: custom:button-card template: radio_player_select variables: value_select: "Tutta_casa" icon: mdi:home entity: input_select.radio_player

Questi esempi vanno applicati a tutte le possibili opzioni dei nostri selettori, quindi per le tre sorgenti e per ciascuno speaker.

Interfaccia: la gestione della riproduzione

Nell’area panel1 posizioniamo i controlli dei singoli speaker per agire, durante la riproduzione, singolarmente su ognuno di essi. Allo scopo, utilizziamo una card entities nella quale includiamo tante righe custom:slider-entity-raw quanti sono i dispotivi/gruppi da gestire. Dividiamo i gruppi dai dispositivi con un elemento di tipo divider e lo stesso facciamo tra gli speaker fisici ed il media_player.spotify che posizioniamo in fondo alla lista. Con quest’ultimo potremo controllare in ogni momento la riproduzione (se attiva) sul nostro account Spotify.

# controllo volume singoli players - type: custom:stack-in-card mode: vertical view_layout: grid-area: panel1 cards: - type: entities entities: - type: custom:slider-entity-row entity: media_player.tutta_casa icon: mdi:home name: Tutta casa hide_state: false state_color: true ... - type: divider - type: 'custom:mini-media-player' entity: media_player.spotify name: Spotify artwork: material

Nel pannello panel2 (a destra) andiamo a visualizzare le informazioni di riproduzione. Per far questo usiamo card di tipo conditional con i vari contenuti, la cui visibilità è legata allo stato dei sensori che abbiamo definito in precedenza.

Ad esempio, il pannello di riproduzione della Radio mostra il nome ed il logo della radio on-air con i pulsanti per passare alle stazioni precedente/successiva nella lista:

# pannello RADIO playing - type: conditional conditions: - entity: input_select.radio_spotcast_source state: "Radio" card: type: custom:stack-in-card cards: - type: custom:button-card show_name: false show_label: false show_icon: true icon: mdi:music show_entity_picture: > [[[ if (states['binary_sensor.audio_riproduzione'].state=='off') return "false" else return "true" ]]] size: 90 entity_picture: > [[[ return '/local/radio/' + states['sensor.radio_preset_logo'].state ]]] styles: card: [height: 339px, background: transparent] entity_picture: [height: 98%, width: 98%] tap_action: action: fire-dom-event browser_mod: command: popup title: Elenco stazioni radio large: true hide_header: false deviceID: - this card: !include popup_radio_spotcast.yaml # Seek Radio - type: custom:stack-in-card mode: horizontal cards: # Previous station - type: custom:button-card template: radio_seek_button variables: var_dir: "previous" # On-air station - type: custom:button-card color_type: card color: var(--paper-card-background-color) show_icon: false name: "Riproduzione" show_label: true label: > [[[ return states['input_select.radio_station'].state ]]] tap_action: action: fire-dom-event browser_mod: command: popup title: Elenco stazioni radio large: true hide_header: false deviceID: - this card: !include popup_radio_spotcast.yaml styles: label: - color: lime card: - height: 60px # Next station - type: custom:button-card template: radio_seek_button variables: var_dir: "next"

Ultimo tassello: il popup con le stazioni radio o le playlist Spotify. Utilizziamo il componente browser_mod per attivare il popup, per il cui contenuto usiamo invece una card conditional che mostra le stazioni radio o le playlist in base alla selezione dell’utente:

# POPUP Content type: custom:state-switch entity: input_select.radio_spotcast_source states: Spotify: ... Radio: ...

Nel caso in cui si stia ascoltando la Radio, il popup contiene tanti pulsanti con template radio_preset_logo definito in precedenza, quanti sono i canali radio disponibili, ad esempio:

type: custom:layout-card layout_type: custom:horizontal-layout layout: width: 190 max_cols: 5 cards: - type: custom:button-card template: ['radio_preset_logo'] variables: var_name: "Deejay Suona Italia" var_option: "Radio Deejay Suona Italia" ...

Se invece è selezionato Spotify, il popup mostra l’elenco delle playlist disponibili:

type: custom:select-list-card entity: input_select.radio_spotcast_playlist title: Spotify playlist icon: 'mdi:playlist-music' max_options: 10 scroll_to_selected: true truncate: true

Risultato finale

Il codice completo è disponibile qui.

Il risultato finale è mostrato in questo breve video:

Enjoy!

Come inserire una propria canzone su Spotify?

Come funziona Spotify gratuito?

Come trasferire musica da YouTube a Spotify?

Come inserire una canzone nella playlist?