Song Artist and Title under volume slider

[thehijacker]

Hello,

I have added code from Pull Request:

#20

Now I can see station name and logo on the display. I would prefer to see the song artist and title, but I understand this is not possible to have with casting.

I am now thinking other way around. If we can get the song artist and title from somewhere (scraping, etc...) and passed to HA as input_string entity, can you display it under the volume slider?

Thank you.

[thehijacker]

Implemented this myself after struggling with javascript and getting familiar with HA functions :).

Inside the code I also have power off button next to the stop button that powers off the Casting device (#23). Also in the code is a workaround to issues play for few seconds after station is changed for stream that require more buffering and to make them start playing faster (#22).

jukebox-card_v2021_05_01_v4.zip

I have to define a custom sensor that will store the song artist + title in its state. I actually defined a rest sensor and wrote my "song parser" in PHP. It fetches json file from radio station that holds the current artist and title. After extracting this data I return to HA a json string like this:

{"radio":"radio_station_1","artist":"Janko in Metka","title":"Hudobna čarovnica"}

And my rest sensor:

sensor:
  - platform: rest
    name: "Radio Station 1"
    resource: "https://my_home_domain.com/radio_query.php?radio=radio_station_1"
    json_attributes:
      - radio
      - artist
      - title
    value_template: '{{ value_json.artist }} - {{ value_json.title }}'
    scan_interval: 86400

Scan interval is long as I do not wish to fetch song info if I am not listening to the radio. I wish to update this only when I am listening to radio.

Next I have a binary sensor that checks if any of the Google devices is playing a radio station.

binary_sensor:
  - platform: template
    sensors:
      is_live_radio_playing:
        friendly_name: "Is Live Radio Playing"
        value_template: >-
          {{ state_attr('media_player.google_living_room','media_artist') == "Live Radio" or state_attr('media_player.google_kitchen','media_artist') == "Live Radio") }}

If this sensor is on, I enable automation that every 5 seconds updates this rest sensors manually and by that refreshes the song artist and title if it changed. When this sensor goes to off, I turn_off the automation.

Here is the new card config.

type: 'custom:jukebox-card'
links:
  - url: 'http://1.1.1.1:1234/radio_1'
    logo: 'https://long_url.com/LOGO/radio_station_1.png'
    song: sensor.radio_station_1
    name: Radio station 1
entities:
  - media_player.google_living_room
  - media_player.google_kitchen

If someone else finds this useful. Code is for sure not perfect and could be written better/properly. Still learning and this was my first custom card edit.

Hats off to the original author. We are now listening to the songs on radio every day. Very quick to start playing and zero issues.