Designing Your Web Player

Modified on Tue, 24 Sep at 12:52 PM

Quick Links

Embedding your Web Player

Launch Player button code options

Customisable Broadcast Radio Player

Introduction

In this initial section we will look at how to set the default Web Player design and feature options that will be used for your web player on the broadcast.radio microsite, full broadcast.radio websites and also to be embedded on 3rd party websites via the embed code.

Player Settings

You can setup your Web Player to include the information you want to be displayed on your station website, microsite or 3^rd party sites. To access the Web Player settings click on Settings > Station Settings > Player.

Logos

The Logos section allows you to set specific images for your player. These will override the defaults in Station Settings. The options are:

Logo – Use this logo on your player. If you do not upload a logo here, the station default logo will be used.
Default Background – This image will appear (blurred) on the background of the player. Once ‘Now Playing’ information is enabled, if Album Art for a song is displayed, the background image is also updated to show a blurred version of the album art.

Style

You can use the options in the Styles section to define the look of your web player as well as which features to enable.

The options are outlined below.

Layouts

The first thing to do is choose the overall layout for your web player. There are four options to choose from.

Tabbed

Vertical player with the options displayed as tabs along the bottom.

Full Page

In this mode, all the enabled options appear in the Player as a continuous ‘responsive’ page. The layout will be determined automatically by the height and width of the container the Player is in.

Narrow player.

Wide Player

Player Only

This simplified player only shows the Now Playing information as well as the Play icon, no additional features.

Expanding Player

This dynamic player starts in a compact state but can be expanded to show more information and features by clicking on it.

Collapsed State

Expanded state

Feature Options

Once you have selected the Layout of Web Player, you can set the display options as well as what features to include.

Custom Colour Scheme – Allows you to set the background, text and highlight colours for your player.

Show Album Art – Automatically show album art (if possible) based on Now Playing information.
Show Now Playing – Displays most recent Now Playing information. You can customise the colours for this section of your player.
Show Recently Played X Songs – Player shows a list of the X most recently played Songs.
Show Contact Button – Player includes a simple contact form that is emailed to the address setup in the Social settings.
Show MixCloud – Shows a list of most recently uploaded content to your MixCloud account.
Show Schedule – Display the station Schedule as setup in the Schedule Section (see Content). You can also specify how much of the schedule to include with this option.
Enable AutoPplay – Player start playing immediately (restricted by some browsers).
Expand Automatically – Only available on the Expanding Player – Extends to full view when a listener clicks play.
Click on Save.

Please note that this saved Web Player design will be used by both the Microsites and full broadcast.radio Websites.

Embedding your Web Player

The Embed section helps you to embed your Web Player on 3rd part websites. Please note that if you have opted for a full broadcast.radio website then the Web player will be included in the design by default and so you will not need to embed it manually.

Select the Layout mode you want (Tabbed, Full Page, Player Only, Expanding).
Select the options as described in previous section.
Select Widget Size from the options.

The Player preview on the page will change as you select different widget sizes. Please note Mini is only available in Player Only and Expanding Layout Modes.

Click in the Embed Code Section to copy the code. This is the code that should be added to your website.

On your website, select the option to add a HTML widget or section and then paste this code into the HTML code section.

Launch Player button code options

The alternative to embedding a player is to add a Link to the page that will launch a player in a pop-up window or a new tab.

Select link style:
1. Popup – Opens a popup window.
2. New Tab – Opens a separate browser tab.
3. Get Link – Direct link to your player.
Click on the ‘code’ section to copy this code.
Paste this into an HTML widget or section on your website

Alternatively you can click the Use Hyperlink that will generate a standard hyperlink URL for the player that can be used for any clickable text or graphic on your site just like any other link.

Customisable Broadcast Radio Player

All the settings outlined above allow you to change the default Web Player configuration whenever the Web Player is used on a Microsite, BR Website or 3rd part website. So even if you have embedded the code for the player on a 3rd party website, changes you make to the Web player will be reflected when listeners launch the player.

But sometimes you want to design a different Web Player that will not be effected by future changes to the default player. A good example is if you have a screen in your reception and want a player to be displayed on there, you may need a different design to the default Web Player.

The design and feature options for the Customisable Broadcast Radio Player are largely the same as the the options outlined above, the difference is that the design and feature choices are stored within the embed code (not in the broadcast.radio database) so the custom design is used instead of the default design whenever that embed code is triggered.