Implement a Customizable Embeddable Radio Player Widget

I've found a way to make a custom player from within my application.

I've modified the embed to be able to

Emit an event containing its status such as the song title and track progress (so I can render it from my application).
Receive messages that can make it play/pause

1. Getting the Status of the Player

// Add to the embed through Public JS in the branding page of the admin panel

function radioStatus(){
  if (document.getElementsByClassName('radio-control-play-button')[0]) {
  const playState = document.getElementsByClassName('radio-control-play-button')[0].ariaLabel
  const albumArt = document.getElementsByClassName('album_art')[0].src
  const title = document.getElementsByClassName('now-playing-title')[0].innerText
  const artist = document.getElementsByClassName('now-playing-artist')[0].innerText
  const trackProgress = document.getElementsByClassName('progress-bar bg-secondary')[0].style.width
  const volumeLevel = document.querySelector('.radio-control-volume-slider .form-range').value

  return JSON.stringify(
    {    playState: playState,
         albumArt: albumArt,
         title: title,
         artist: artist,
         trackProgress: trackProgress,
         volumeLevel: volumeLevel})
  } else{
    return false
  }

};

function broadcastRadioInfo() {
 parent.postMessage(radioStatus(), "<domain of website/localhost>");
};

const intervalID = setInterval(broadcastRadioInfo, 500);
// this will cause the event to emit every 500ms

From the client I can then read the status of the radio by adding an EventListener

// Your client code

window.addEventListener("message", function(e) {
    var message = e.data;
    var origin = e.origin;
    if (origin === "https://<url-of-radio-station>" && message) {
        const radioStatus= JSON.parse(message);
});

2. Controlling the player from my application

I send messages to it from my application with an instruction object where play is a boolean representing what state you want the player to be in. if you want it to play or if you want it to stop.

document.getElementById("<id of the player iframe>").contentWindow.postMessage(
  JSON.stringify({ play: true, volume: 50 }),
  "https://<url-of-radio-station>"
);

which are in turn handled from the player by adding an event listener.

// Add to the embed through Public JS in the branding page of the admin panel

const SAFE_ORIGINS = ["https://<your-domain>", "http://<localhost-if-developing>"]

window.addEventListener('message', function(e) {
    var message = e.data;
    var origin = e.origin;
    if (SAFE_ORIGINS.includes(origin)) {
        const instructions = JSON.parse(message);
        const playState = document.getElementsByClassName('radio-control-play-button')[0].ariaLabel;
        if (playState == "Play" && instructions.play) {
            document.getElementsByClassName('radio-control-play-button')[0].click();
        } else if (playState == "Stop" && !instructions.play) {
            document.getElementsByClassName('radio-control-play-button')[0].click();
        }

        if (instructions.volume) {
            // This approach for changing the volume does not work because I believe that it changes the input value,
            // but not the state of the Vue component directly.
            const volumeSelector = document.querySelector('.radio-control-volume-slider .form-range');
            volumeSelector.value = instructions.volume;
        }
    }
});

Considerations

It's important to set the origins correctly to prevent an external site from being able to control the radio.
You can test out adding the event listeners from dev tools if you switch the context to be the iframe
We can play/pause, but I was not able to get the volume control to work.

References

Accessing cross domain iFrame contents MDN Docs for postMessage

AzuraCast / AzuraCast

Implement a Customizable Embeddable Radio Player Widget #3217

1. Getting the Status of the Player

2. Controlling the player from my application

Considerations

References