Technical Challenges and Limitations of the Embedded Player

The main technical challenge when developing the embedded player was maintaining an unbroken audio stream as the user browses the hosting website. As the user navigates from one page to the next, the audio stream is unavoidably interrupted. While we could attempt to auto-play once the page has reloaded, it will sometimes be blocked by the browser and depending on the user's connection will still result in a number of seconds of broken audio.

A number of solutions to this issue were explored however each solution introduced other downsides which we felt were more critical than an unbroken audio stream including impacts to security and accessibility.

The Solution

With no conventional method of maintaining an unbroken audio stream as the user navigates from one page to the next, it was decided the best approach was to emulate how BBC iPlayer have dealt with this issue - to alert the user that their click will stop the audio stream and presenting them with a number of options how to proceed - Open in a new tab, open in a pop out or continue to navigate away.

For <a> tags this is done automatically. If the stream is playing, the embedded player will present the user with the popup automatically.

For <button> elements and other elements which have an onclick event, a hook has been provided for you to trigger the popup if the stream is playing.

window.safelyNavigateTo( url: string ) can be used either directly as the onclick function, or in the body of your own onclick function allowing you to process any logic required before navigation or process logic which may trigger navigation conditionally.

How you can solve this issue

Ideally any website hosting the embedded player will have been developed as a Single Page Application (SPA). This means that rather than hosting a collection of webpages which can be navigated between as a traditional website, the website is hosted on a single page with content dynamically changing. The benefit here being that throughout the user's visit to the website, as they only visit one page, the audio stream is never interrupted.

How you can mitigate this issue

As we cannot interrupt onclick events in the same way as anchor tags without introducing adverse or unexpected behaviour to your website, we advise that wherever possible, navigation through your site is handled by anchor tags rather than onclick events. This will ensure that the player is able to give the user the appropriate warning and present them with the options on how they would prefer to proceed.

If you have solved this issue

If you have developed your website as a single page application, navigating within your site will not result in breaking the playback of a stream. As such you no longer need warning messages on anchor tags and buttons which would result in navigating away from the current page. In order to toggle these off, simply add the following property to your console configuration:

{
    // ... your console config
    "noNavigateAwayWarning": true
}