Embedded iframe widgets

Radioplayer web player provides a great set of widgets out of the box, allowing you to display Now Playing, Schedule, On Demand information, alongside companion and video ads. However some users need a more customised player. The way to do this is to use an iframe widget. This takes up the full widget space, and can contain any content that you need. To do this, you need to pass the following properties to the player:

    "widgets": ["IF"],
    "iframeSrc": "http://www.example.com"

Don't include any other widgets, because they will not be shown.

Using iframe messaging

By default, the iframe is just displayed as-is, with any dynamic content needing to be provided by you. However you can enable iframe messaging, which means that the player sends messages to your iframe, and the iframe can in turn control the player using messages. This is performed using window.postMessage(). First you need to enable messaging:

    "widgets": ["IF"],
    "iframeSrc": "http://www.example.com",
    "enableIframeMessaging": true

You can then send and receive messages from within the iframe.

Receiving messages

Inside your iframe, you first need to register to listen for "message" events. These are received as a MessageEvent, with the MessageEvent's data property set to a PlayerMessage subclass. You can use the PlayerMessage's type property to see how to handle the incoming message.

window.addEventListener("message", function(event) {
    const message = event.data;

    switch(message.type) {
        case "nowplaying":
            //Display "now playing" info
            break;

        case "setvolume":
            //Change displayed volume
            console.log("The volume is", message.payload);
            break;

        //Etc..
        default:
            console.log("Message received", message);
    }
}

If you load this inside the player and press play you will start to receive a stream of messages from the player. The exact messages that you recieve depends on the type of stream and available metadata. Messages sent by the player can be found in the API docs under Player messages

Sending messages

Your iframe can also send messages to control the player. For example, to set the volume to full, send the message as follows:

window.parent.postMessage({ type: "requestvolume", payload: 1 }, "*");

The first argument passed to window.postMessage() should be an IframeMessage subclass.

There are message types to handle all of the transport control actions, including play, pause, seek and skip backwards and forwards. For the full list see the API docs under iframe messages