Music Free Card en Home Assistant

Integra Music Free Card en Home Assistant para tener acceso y control de Spotify y YouTube Music, incluso con cuentas gratuitas.

Con ella podrás controlar la reproducción de la música, el volumen, lanzar Playlist, así como sincronizar la reproducción con otros dispositivos como altavoces o luces, y controlarla con un mando.

Music Free Card

Requisitos previos

Para integrar Music Free Card en Home Assistant necesitas lo siguiente:

  • Disponer de una cuenta (gratuita o premium) en Spotify y/o YouTube Music.
  • Tener un dispositivo Android (teléfono o tablet) para utilizarlo como reproductor de música. Puede ser tu teléfono habitual, la tablet que utilizas como wall panel o un teléfono viejo que tengas en un cajón. Es importante que el sistema operativo sea Android, ya que lo vamos a controlar mediante notificaciones con comandos.
  • Este dispositivo tiene que tener instaladas las aplicaciones de Home Assistant, Spotify y/o YouTube Music.
Home Assistant
Price: Free
YouTube Music
Price: Free
  • A través de la aplicación de Home Assistant del dispositivo, desde Ajustes > Aplicación Complementaria > Administrar sensores, tienes que activar el “Sensor Multimedia” y el de “Nivel de volumen de música“.
  • Tener instaladas a través de HACS las tarjetas de Mushroom Cards, Card Mod, Stack in Card y Swipe Card.

Opcionalmente puedes añadir los siguientes elementos para potenciar tu reproductor de música:

Creative pebble v3
*Algún precio puede haber cambiado desde la última revisión

Instalacion

La instalación de esta tarjeta es muy sencilla, ya que no requiere integraciones, ni creación de APIs. Sólo tienes que realizar estos 3 pasos:

  1. Primero vamos a crear un ayudante que nos va a servir para controlar el nivel de volumen en tiempo real, sin retraso de actualización de sensores. Ve a Ajustes > Dispositivos y servicios > Ayudantes y crea uno nuevo del tipo “número” y llámalo ‘music free card volume’. Asigna 0 como valor mínimo, y 15 como valor máximo (puedes ajustar este valor posteriormente si tu dispositivo tiene un valor máximo distinto), y “control deslizante” como modo de visualización. Esto creará la entidad ‘input_number.music_free_card_volume‘.
  2. El siguiente código sirve para crear la tarjeta en el panel de control. Cópialo y pégalo en un editor de texto para que hagas un par de cambios de forma cómoda.
type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      {% if states('sensor.YOURDEVICE_media_session') == "unavailable" %}background: linear-gradient( rgba(67, 150, 206, 0.8), rgba(59, 190, 188, 0.6) ), black }}');
      {% elif states('sensor.YOURDEVICE_media_session') == "Playing" %}
        {% if state_attr('sensor.YOURDEVICE_media_session','playback_state_com.spotify.music') == "Playing" %}background: linear-gradient( rgba(67, 187, 206, 0.8), rgba(59, 190, 154, 0.6) ), black }}');
        {% elif state_attr('sensor.YOURDEVICE_media_session','playback_state_com.google.android.apps.youtube.music') == "Playing" %}background: linear-gradient( rgba(206, 70, 67, 0.8), rgba(190, 59, 110, 0.4) ), black }}');
        {% endif %}
      {% elif states('sensor.YOURDEVICE_media_session') == "Paused" %}
        {% if state_attr('sensor.YOURDEVICE_media_session','playback_state_com.spotify.music') == "Paused" %}background: linear-gradient( rgba(67, 187, 206, 0.8), rgba(59, 190, 154, 0.6) ), black }}');
        {% elif state_attr('sensor.YOURDEVICE_media_session','playback_state_com.google.android.apps.youtube.music') == "Paused" %}background: linear-gradient( rgba(206, 70, 67, 0.8), rgba(190, 59, 110, 0.4) ), black }}');
        {% endif %}
      {% endif %}
      background-position: center;
      background-size: 100%;
    }
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        icon: >-
          {% if states('sensor.YOURDEVICE_media_session') == "unavailable" %}
          mdi:sleep {% elif states('sensor.YOURDEVICE_media_session') == "Playing"
          %}
            {% if state_attr('sensor.YOURDEVICE_media_session','playback_state_com.spotify.music') == "Playing" %}mdi:spotify
            {% elif state_attr('sensor.YOURDEVICE_media_session','playback_state_com.google.android.apps.youtube.music') == "Playing" %}mdi:youtube
            {% endif %}
          {% elif states('sensor.YOURDEVICE_media_session') == "Paused" %}
            {% if state_attr('sensor.YOURDEVICE_media_session','playback_state_com.spotify.music') == "Paused" %}mdi:spotify
            {% elif state_attr('sensor.YOURDEVICE_media_session','playback_state_com.google.android.apps.youtube.music') == "Paused" %}mdi:youtube
            {% endif %}
          {% endif %}
        icon_color: white
        primary: >
          {% if states('sensor.YOURDEVICE_media_session') == "unavailable" %} Music
          Free Card {% elif states('sensor.YOURDEVICE_media_session') == "Playing"
          %}
            {% if state_attr('sensor.YOURDEVICE_media_session','playback_state_com.spotify.music') == "Playing" %}{{ state_attr('sensor.YOURDEVICE_media_session','title_com.spotify.music') }}
            {% elif state_attr('sensor.YOURDEVICE_media_session','playback_state_com.google.android.apps.youtube.music') == "Playing" %}{{ state_attr('sensor.YOURDEVICE_media_session','title_com.google.android.apps.youtube.music') }}
            {% endif %}
          {% elif states('sensor.YOURDEVICE_media_session') == "Paused" %}
            {% if state_attr('sensor.YOURDEVICE_media_session','playback_state_com.spotify.music') == "Paused" %}{{ state_attr('sensor.YOURDEVICE_media_session','title_com.spotify.music') }}
            {% elif state_attr('sensor.YOURDEVICE_media_session','playback_state_com.google.android.apps.youtube.music') == "Paused" %}{{ state_attr('sensor.YOURDEVICE_media_session','title_com.google.android.apps.youtube.music') }}
            {% endif %}
          {% endif %}
        secondary: >
          {% if states('sensor.YOURDEVICE_media_session') == "unavailable" %}
          Sleeping... {% elif states('sensor.YOURDEVICE_media_session') ==
          "Playing" %}
            {% if state_attr('sensor.YOURDEVICE_media_session','playback_state_com.spotify.music') == "Playing" %}{{ state_attr('sensor.YOURDEVICE_media_session','artist_com.spotify.music') }}
            {% elif state_attr('sensor.YOURDEVICE_media_session','playback_state_com.google.android.apps.youtube.music') == "Playing" %}{{ state_attr('sensor.YOURDEVICE_media_session','artist_com.google.android.apps.youtube.music') }}
            {% endif %}
          {% elif states('sensor.YOURDEVICE_media_session') == "Paused" %}
            {% if state_attr('sensor.YOURDEVICE_media_session','playback_state_com.spotify.music') == "Paused" %}{{ state_attr('sensor.YOURDEVICE_media_session','artist_com.spotify.music') }}
            {% elif state_attr('sensor.YOURDEVICE_media_session','playback_state_com.google.android.apps.youtube.music') == "Paused" %}{{ state_attr('sensor.YOURDEVICE_media_session','artist_com.google.android.apps.youtube.music') }}
            {% endif %}
          {% endif %}
        entity: sensor.YOURDEVICE_media_session
        tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              text-shadow: 1px 1px #0005;
              --card-secondary-font-size: 11px;
              --primary-text-color: white;
              --secondary-text-color: white;
              --icon-size: 35px;
              border: 0px;
              width: 220px !important;
            }
      - type: custom:swipe-card
        cards:
          - type: custom:mushroom-chips-card
            alignment: end
            card_mod:
              style: |
                ha-card {
                  --primary-text-color: white;
                }
            chips:
              - type: template
                icon: mdi:chevron-double-left
                icon_color: white
                content: Playlist
                tap_action:
                  action: none
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(255, 255, 255, 0.2) !important;
                      height: 30px!important;
                      margin-top: 15px;
                      margin-right: 12px;
                      --chip-box-shadow: 0px;
                    }

### AQUI EMPIEZA EL CÓDIGO PARA AÑADIR UNA PLAYLIST DE SPOTIFY ###

          - type: custom:mushroom-chips-card
            alignment: end
            card_mod:
              style: |
                ha-card {
                  --primary-text-color: white;
                }
            chips:
              - type: template
                icon: mdi:spotify
                icon_color: white
                content: Descubrimientos
                tap_action:
                  action: call-service
                  service: notify.mobile_app_YOURDEVICE
                  data:
                    message: command_activity
                    data:
                      tag: music_free_card
                      intent_package_name: com.spotify.music
                      intent_action: android.intent.action.VIEW
                      intent_uri: spotify:playlist:2ztVKTR3JN97nPf1jz99lI:play
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(255, 255, 255, 0.2) !important;
                      height: 30px!important;
                      margin-top: 15px;
                      margin-right: 12px;
                      --chip-box-shadow: 0px;
                      --primary-text-color: white;
                    }

### AQUI ACABA EL CÓDIGO PARA AÑADIR UNA PLAYLIST DE SPOTIFY ###

### AQUI EMPIEZA EL CÓDIGO PARA AÑADIR UNA PLAYLIST DE YOUTUBE MUSIC ###

          - type: custom:mushroom-chips-card
            alignment: end
            card_mod:
              style: |
                ha-card {
                  --primary-text-color: white;
                }
            chips:
              - type: template
                icon: mdi:youtube
                icon_color: white
                content: Favoritos
                tap_action:
                  action: call-service
                  service: notify.mobile_app_YOURDEVICE
                  data:
                    message: command_activity
                    data:
                      tag: music_free_card
                      intent_package_name: com.google.android.apps.youtube.music
                      intent_action: android.intent.action.VIEW
                      intent_uri: >-
                        https://music.youtube.com/watch?v=9Wrlv7L_Bj8&list=PLvQZXevyQ0NCM7_jspOZRYbnelljTiQW_
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(255, 255, 255, 0.2) !important;
                      height: 30px!important;
                      margin-top: 15px;
                      margin-right: 12px;
                      --chip-box-shadow: 0px;
                      --primary-text-color: white;
                    }

### AQUI ACABA EL CÓDIGO PARA AÑADIR UNA PLAYLIST DE YOUTUBE MUSIC ###

      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            ha-card {
              margin-bottom: 10px;
              margin-left: 12px;
            }
        chips:
          - type: template
            icon: mdi:skip-previous
            icon_color: white
            card_mod:
              style: |
                ha-card {
                  background-color: black !important;
                }
            tap_action:
              action: call-service
              service: notify.mobile_app_YOURDEVICE
              data:
                message: command_media
                data:
                  tag: music_free_card
                  media_command: previous
          - type: template
            icon: mdi:play-pause
            icon_color: white
            card_mod:
              style: |
                ha-card {
                  --chip-icon-size: 30px !important;
                  {% if states('sensor.YOURDEVICE_media_session') == "unavailable" %}
                  background-color: black !important; {% elif states('sensor.YOURDEVICE_media_session') == "Playing" %}
                    {% if state_attr('sensor.YOURDEVICE_media_session','playback_state_com.spotify.music') == "Playing" %}background-color: #1ed760 !important;
                    {% elif state_attr('sensor.YOURDEVICE_media_session','playback_state_com.google.android.apps.youtube.music') == "Playing" %}background-color: #ff0000 !important;
                    {% endif %}
                  {% elif states('sensor.YOURDEVICE_media_session') == "Paused" %}
                    {% if state_attr('sensor.YOURDEVICE_media_session','playback_state_com.spotify.music') == "Paused" %}background-color: #1ed760 !important;
                    {% elif state_attr('sensor.YOURDEVICE_media_session','playback_state_com.google.android.apps.youtube.music') == "Paused" %}background-color: #ff0000 !important;
                    {% endif %}
                  {% endif %}
                }
            tap_action:
              action: call-service
              service: notify.mobile_app_YOURDEVICE
              data:
                message: command_media
                data:
                  tag: music_free_card
                  media_command: play_pause
          - type: template
            icon: mdi:skip-next
            icon_color: white
            card_mod:
              style: |
                ha-card {
                  background-color: black !important;
                }
            tap_action:
              action: call-service
              service: notify.mobile_app_YOURDEVICE
              data:
                message: command_media
                data:
                  tag: music_free_card
                  media_command: next
      - type: custom:mushroom-number-card
        icon: mdi:volume-off
        tap_action:
          action: call-service
          service: notify.mobile_app_YOURDEVICE
          data:
            message: command_volume_level
            data:
              tag: music_free_card
              media_stream: music_stream
              command: -1
        entity: input_number.music_free_card_volume
        layout: horizontal
        primary_info: none
        secondary_info: none
        icon_color: white
        card_mod:
          style:
            .: |
              :host 
              ha-card {
                border: 0px !important;
              }

              ha-card  > mushroom-card {
                margin-top: -11px;
                --icon-size: 35px !important;
               }
            mushroom-number-value-control$: |
              mushroom-slider {
                --control-height: 35px;
                {% if states('sensor.YOURDEVICE_media_session') == "unavailable" %}
                --main-color: white !important;
                {% elif states('sensor.YOURDEVICE_media_session') == "Playing" %}
                  {% if state_attr('sensor.YOURDEVICE_media_session','playback_state_com.spotify.music') == "Playing" %}
                --main-color: #1ed760 !important;
                  {% elif state_attr('sensor.YOURDEVICE_media_session','playback_state_com.google.android.apps.youtube.music') == "Playing" %}
                --main-color: red !important;
                  {% endif %}
                {% elif states('sensor.YOURDEVICE_media_session') == "Paused" %}
                  {% if state_attr('sensor.YOURDEVICE_media_session','playback_state_com.spotify.music') == "Paused" %}
                --main-color: #1ed760 !important;
                  {% elif state_attr('sensor.YOURDEVICE_media_session','playback_state_com.google.android.apps.youtube.music') == "Paused" %}
                --main-color: red !important;
                  {% endif %}
                {% endif %}
              }
  • Primero tienes que indicar el nombre del dispositivo Android donde vas a reproducir la música. Para asegurarte de que lo indicas con el formato adecuado, te recomiendo que entres en Herramientas para desarrolladores > Estados y busques alguno de los sensores que has activado. Por ejemplo, si buscas ‘media_session’ debe aparecerte un sensor llamado “sensor.NOMBRE_media_session”, donde ‘NOMBRE” es el nombre de tu dispositivo. Teniendo esto claro, utiliza la función “reemplazar” del editor de texto para sustituir todas las partes del código donde pone “YOURDEVICE” por tu “NOMBRE” (según acabas de comprobar).
  • Lo siguiente que puedes hacer es añadir todas las Playlist de Spotify y Youtube Music que quieras, para poder lanzarlas desde la propia tarjeta. En el código en incluido un ejemplo de cada tipo (entre ‘### AQUI EMPIEZA EL CÓDIGO….’ y ‘### AQUI ACABA EL CÓDIGO…’). Lo único que tienes que hacer es copiarlo y pegarlo tantas veces como listas quieras incluir.
  • Ten en cuenta que para incluir una lista de Spotify tienes que acceder a la lista desde la aplicación, hacer clic en “Compartir” y “Copiar enlace a la lista”. Pega este enlace en cualquier editor de texto. El código de la lista son los caracteres que se encuentran entre la última barra ‘/’ y la interrogación. Este es el identificador que tienes que reemplazar en el código de la tarjeta. El resto del código permanece igual.
https://open.spotify.com/playlist/2ztVKTR3JN97nPf1jz99lI?si=77800215a84943b7
intent_uri: spotify:playlist:2ztVKTR3JN97nPf1jz99lI:play
  • Para incluir una lista de Youtube Music simplemente tienes que acceder a su interfaz desde el ordenador y hacer clic sobre el botón de Play de la playlist para que empiece la reproducción. Luego solo tienes que copiar el enlace del navegador y pegarlo tal cual está en la parte correspondiente del código.
intent_uri: >-
 https://music.youtube.com/watch?v=9Wrlv7L_Bj8&list=PLvQZXevyQ0NCM7_jspOZRYbnelljTiQW_
  1. El último paso consiste en crear todas las automatizaciones correspondientes. Lo vas a hacer en menos de un minuto importando el blueprint que he creado para ello pulsando el siguiente botón.
Open your Home Assistant instance and show the blueprint import dialog with a specific blueprint pre-filled.

La configuración es bastante simple, pero básicamente tienes que indicar el dispositivo que quieres utilizar para reproducir la música, el servicio que se iniciará por defecto, los sensores que has activado y el ayudante creado para controlar el volumen.

Opcionalmente puedes indicar qué dispositivos quieres sincronizar para que se enciendan cuando se inicie la reproducción, y se apaguen cuando cacabe. Por ejemplo, un enchufe que controla unos altavoces o una tira led que se ilumina al ritmo de la música.

Controla la tarjeta desde un mando

Adicionalmente, si tienes un mando de Ikea SYMFONISK Sound remote, gen 2 integrado a través de zigbee2mqtt, puedes utilizar este otro blueprint para controlar la tarjeta desde el mando.

Open your Home Assistant instance and show the blueprint import dialog with a specific blueprint pre-filled.
Symfonisk Remote
*Algún precio puede haber cambiado desde la última revisión

Con este blueprint vas a asignarle las siguientes funciones a mando:

Mando ikea
  • Botones verdes para controlar la reproduccción (play, pause, canción anterior y siguiente)
  • Botones azules para volumen (aumentar, disminuir y mute)
  • Botón rojo para encender o apagar los dispositivos sincronizados.

¿Dudas?¿necesitas ayuda? entra aquí
Y si te ha gustado, compártelo! 🙂
Send this to a friend