Lovelace-player - Send audio from home-assistant to any browser viewing your lovelace UI


browser_mod does all this, and more, better.





Lets any browser currently viewing your lovelace interface act as an audio
receiver with a media_player interface.

Example use case: An iPad mounted to your wall as a home automation dashboard,
can now receive text-to-speech announcements from home-assistant.

Inspired by how you can use an android tablet running Fully Kiosk Browser as a media player while using it as a dashboard with floorplan (see @CCOSTAN

I decided to try implementing the same functionality for lovelace. But this one works for any html5 browser (I think, I haven’t tried all of them) on your computer or ipad as well.

This replaces the audio-card you may have seen here yesterday. By not making it a card, it will work across all lovelace views.


This is so very awesome.

I tried your player but won’t get any player id … is there anything i can do to debug? Media_player entity also doesn’t show the device id…

You could make sure you are running lovelace in yaml mode and also check your browser console log for (possibly) more info.

ha! I don’t run yaml mode … well i will run it in yaml mode and revert :slight_smile: thanks for your quick response! TOP!

Is it planned to make this work without yaml mode ?

i get this in chrome console:

Uncaught (in promise) DOMException
:8123/local/dual-thermostat/dual-thermostat.js?v=1:1 Failed to load resource: the server responded with a status of 404 (Not Found)
2af5b1c2d5fbf8c18791.chunk.js:5783 Uncaught (in promise) /local/dual-thermostat/dual-thermostat.js?v=1
lovelace-player.js:98 Uncaught TypeError: Cannot read property ‘shadowRoot’ of null
at Object.debug (lovelace-player.js:98)
at lovelace-player-config.js:8
9core-fc6fc737.js:1 WebSocket connection to ‘wss://’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
s @ core-fc6fc737.js:1
2af5b1c2d5fbf8c18791.chunk.js:5783 Uncaught (in promise) /local/dual-thermostat/dual-thermostat.js?v=1

Should work now.

Thank you!

No…it doesn’t give me any device I’d …did u fix something?

getting still:

Uncaught TypeError: Cannot read property ‘shadowRoot’ of null
at Object.debug (lovelace-player.js:98)
at lovelace-player-config.js:8

I replaced lovelace-player.js restarted hass but get those error

it’s this line>:

  document.querySelector("home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout iron-pages partial-panel-resolver").shadowRoot.querySelector("#panel ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("ha-app-layout app-header app-toolbar div[main-title]").innerHTML = "LovelacePlayer Device ID: " +_getDeviceId() + "<br/>Bound to: " + message;

Then you either didn’t get the latest version from github, or have the old version stuck in cache somehow, because that’s not what line 98 looks like.

I got the I’d now but it won’t play any sound…even not if I use it manually with the entity

It took a while longer than I had hoped, but it should be working now.

Thanks! The instructions are helpful but I’m stuck at one point… getting it to play music! :wink:

I have card-tools working…

This is the first part of my ui-lovelace.yaml file:

  - url: /local/card-tools.js?v=1
    type: js
  - url: /local/lovelace-player.js?v=6&media_player.my_floorplan_speaker=37f49eff-2c727f97
    type: js

I call media_player.play_media to media_player.my_floorplan_player (tested successfully first with a different media player [google home]) but nothing happens. I added a few console outputs to the lovelace-player.js file and it does indeed load, but it does not do anything when I call the above service.
For completeness’ sake, here’s what I added to the .js file:

    switch ( {
      case 'play_media':
      case 'media_play':
        let src =;
          audio.src = src;
        playing = true;;"playing.."); // <---- that line

but that line never shows up (whereas other lines like registered browser to ${myPlayer}, thisScript);
DO show up in the console).

The hassio logfile looks correct though:
2019-04-02 21:23:36 INFO (SyncWorker_16) [custom_components.floorplan_speaker.media_player] play_media:

Any ideas on what I need to do differently?
Thanks so much!


1 Like

Oh you brilliant person, you! Thank you. I was about ready to give up… what a stupid typographical error. When you stare at something long enough you just can’t see stuff like that. Thanks again. What a great plugin.

Nice plugin! But what do you mean with " you can add the variable getID=true to the script URL"?
I tried /local/plugins/card-tools.js?getID=true and /local/plugins/lovelace-player.js?media_player.my_floorplan_speaker=somecodegetID=true.

The first one should work. In the second case, you need to separate the variables with an ampersand

The second actually is the one that shows the pop-up! Great!

Great plugin! Unfortunately in my case it only works fine on windows based machines!?
I tried hard, but on iOS with Safari and Firefox Browser there is no sound at all. Is there anything to consider?

Oke since my update to 0.92.2 this does not work anymore.
I get
“Integration floorplan_speaker not found when trying to verify its media_player platform”.

Any idea whats the reason? I think something with the new structure of custom_components.

1 Like

When trying to use with more than one player separated by “&” only the first listed player works

url: >-

I have defined the media players as:

  - platform: floorplan_speaker
    name: my_floorplan_speaker
  - platform: floorplan_speaker
    name: my_floorplan_speaker1

Is there anything that I may have done wrong?