Adding a simple web player to your website

Introduction

So you have your playout system setup and you have signed up to stream your new service with Broadcast Radio but how can your visitors to your website listen to your station?

This article briefly runs through the basics of embedding the Broadcast Radio Player into your website as well as touching on some other options to add a simple custom player for your web page.

Please note that this article only covers the basics. More advanced features such as custom controls, 'Now Playing' text and album art require custom development from an experienced web developer. We also assume you have a passing knowledge of HTML code and have access to edit your website (and embed custom HTML code).

The Broadcast Radio Player

The simplest and most effective method of adding a 'player' to your website is to use the pre-built Broadcast Radio Player that is included at no extra charge with all Broadcast Radio streaming packages.

The BR Player provide access to your live stream and allows you to customise it with your station logo, custom colour scheme and station details. If you are using Myriad Playout (4 or 5) then you can also incorporate 'Now Playing' information via OCP or the BR Encoder application. 

The BR Player also offers the option to add podcasts that will be listed directly in the player.

All Broadcast Radio streaming packages include the BR Player. To access and customise your player, visit

https://player.broadcastradio.com/

And click on the Login To My Station button.

Enter the Username  and Password that were provided when you signed up for streaming. If you cannot find the details, don't worry, just email hello@broadcastradio.com and we will be happy to resend your details.

If you want to edit the logo, colour schemes or text for your BR Player, click on the Edit button. Once you have done editing, click on the Open Broadcast Player button to open a preview.

Full details on how to use the player.broadcastradio.com portal to customise your BR Player and also how to link Myriad Playout to your BR Player are covered in the documentation attached to this article.

But for now we will assume you have setup your BR Player and are ready to embed it into your website.

Embed A Pop-up BR Player

Click on the Live Stream tab along the top of the page. This displays some stream related settings as well as the 'embed code' you can use to add the BR Player to your website.

Copy this code using <Ctrl> + C or the right click menu.

<script src='https://player.broadcastradio.com/player.js'></script>
<a class='broadcast-radio-open-player' href="JavaScript:openPlayer('https://player.broadcastradio.com/cloud-playout-demo')" data-player-url='https://player.broadcastradio.com/cloud-playout-demo' style='display: inline-block;padding:0.3125rem;background:#660066;color:#fff;margin-top:5px;margin-bottom:5px;' title='Open Player'>Open Player</a>

Here is an example of the code, but you need to copy the embed code from your own BR Player - unless you want our test player embedded on your website ;)

You will need to embed this slug of code as HTML. Some websites (like Wordpress, Wix, Duda etc) include an HTML widget that allows you to paste code into an appropriate place on your webpage. Other platforms may allow you to directly add HTML to the page. Either way, make sure you paste this code into your website and then preview the results.

What you will see on your webpage is a small button labelled 'Open Player'. When a listener clicks on this button, the BR Player will open in a 'pop-up' window:

You may wish to adjust the text, colour or style of the button that is displayed in your webpage. To do this you will need a little knowledge of HTML code to adjust the part of the embed script that 'styles' the button.

As you can see, the final section of the embed code determines the colours on the button as well as the text caption.

Embed A BR Player Directly Into Your Webpage

You may wish to display the BR Player directly embedded into your website (as opposed to a pop-up window). This has the advantage that visitors to your site can see all the information immediately. The downside is that if the visitor navigates to a different page on your website, the stream would stop (as the player is on a page, not a separate floating pop-up window).

The easiest way to embed the BR Player directly onto your website is to use an HTML feature called an iFrame which basically allows you to display content from a different location within your own page. 

To so this you will need two things:

1. The ability to add a slug of HTML to your website (just like in the pop-up example).
2. The unique URL (address) for your BR Player.

The first of these will require access to an HTML widget or some other way of adding code to your site (some platforms actually have iFrame widgets as well).

To get the URL for your BR Player, login to the player.broadcastradio.com portal and click on the Open Broadcast Player  button.

This will open a preview of your BR Player in a pop-up window. You will also see that the unique URL for your BR Player is displayed along the top of the pop-up window.

The window will not be wide enough to view the whole URL but you can click on it to select the entire location, then copy the URL using <Ctrl>+C or similar.

You can test you have it correctly by pasting into a new browser window:

This information is also in your Streaming Details document provided by Broadcast Radio when you first started streaming with us.

Now you can embed the player into your website using an iFrame. Add a HTML Widget to your web page (you will need to consult the web platform documentation to find out how) and paste in the following HTML code:

<iframe src="https://player.broadcastradio.com/cloud-playout-demo" title="BR Player" width="410" height="550"></iframe>

Remember to change the address in the code to our unique URL for your BR Player.

You can also adjust the title and the width / height accordingly.

The BR Player will now be embedded in your website. There are a number of other attributes associated with the iFrame which are covered by a number or websites and tutorials.

Creating A Custom Player

For most stations, using the BR Player will be the best options as it includes key items such as player controls, station logo, colour scheme, now playing information, station information and more, without the need to do any complex web development.

But some stations may wish to create a custom player for their website.

In this article we will cover creating a very basic player that can be added to your website to allow visitors to listen to your station. 

If you need anything more (now playing, custom controls etc) then we suggest you consult a web development professional or reconsider the BR Player options outlined above.

A Simple Hyperlink

Each stream has a unique address called a Stream URL (which is not the same as the BR Player URL in the previous section).

Your stations Stream URL is provided in the Stream Connection Details document you received when you signed up. If you cannot find the information you need then email hello@broadcastradio.com and we will be happy to resend you the details.

In this example the Stream URL for our test stream is:

https://streaming.broadcastradio.com:10575/cloudplayoutdemo

This is a standard web address (called an URL) and if you paste this into any web browser then the stream would start playing.

So the very simplest form of a Player you can add to your website would be a simple link to your stations Stream URL. This could be a text link, button or graphic image. Clicking on it would redirect the browser to play the stream....but this is far from ideal as it will take the listener away from your webpage so a much better option is to use the Generic HTML 5 Player that is built into all browsers.

Generic HTML5 Player

A far better option for embedding a simple player into your webpage or website is to use the generic HTML 5 player that is built into all modern web browsers. 

You will probably have seen this player (or something similar) on many webpages. This is the player that is built into Microsoft Edge but each browser actually has it's own version so the end appearance will vary a bit from device to device (and on different platforms). The key thing is the same small slog of code will work for all of them. 

This player uses the HTML5 <Audio> tag to embed an audio file or stream into a webpage. the code your need to add to your website is:

<audio controls>

   <source src="https://streaming.broadcastradio.com:10575/cloudplayoutdemo" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

Remember to change the Stream URL to the correct one for your station.

You may also with to add the 'autoplay' attribute to the <audio> tag to make your embedded player start playing automatically when people visit your webpage.

Customising The Generic HTML5 Playout

As discussed, using the generic HTML 5 audio player built into the browsers is the best way to ensure your simple player will work across virtually all all devices and platforms, without a lot of custom web development.

But that does not mean you cannot add a little customisation to the generic HTML 5 player using standard HTML code to use buttons to control the built in player. Take a look at the code below:

<style>
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<audio id="player" src="https://streaming.broadcastradio.com:10575/cloudplayoutdemo" autoplay></audio>
<div>
<button class="button" onclick="document.getElementById('player').play()">Play</button>
<button class="button" onclick="document.getElementById('player').pause()">Pause</button>
<button class="button" onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
<button class="button" onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>

This code will result in a simple series of four buttons on your webpage that can be used to control your listener experience.

When a listener clicks on the Play button, your stream will start playing (assuming you have remembered to update the Stream URL otherwise they will hear a test stream!). They can pause the stream and turn the volume up and down as well.

You can customise the buttons appearance using the <style> section of the code.

You can also alter the text caption on the buttons (or even remove buttons)  by editing the script ion the <div> tags.

Also you may notice that we have also added the Autoplay attribute in this example so that the stream will start automatically.

As with the embedded BR Player in the previous section, each of these players exists only on the player they are embedded on so if you embed a player on your homepage, if a visitor to your site clicks on a link to another page within your site (or external) then the stream will stop. For this reason we recommend that you sue a pop-up player whenever possible, particularly if your website includes multiple pages.

More Advanced Web Players

The Broadcast Radio MyStation service will be launching soon which enhances the options provided by the BR Player to offer a more engaging, flexible and responsive Web Player along with multiple options for integration with your website.

The MyStation Web Player offers advanced options including:

• No playing information
• Automatic album art
• Support for multiple stream qualities
• Recently played list
• Station schedule
• Mixcloud catch-up
• Multiple form factors (mini, traditional, full page)
• Responsive design for desktop and mobile use.

Mini Player

Traditional Player

Full Page Player

Over time we will transition BR Player customers to the new MyStation platform which will offer many more options for customising and embedding your stations Web Player.

MyStation also offers the option to power your stations website meaning you can control your stations website, web players, streams and optional iOS & Android apps all from on simple portal. 

For more information visit - https://www.broadcastradio.com/mystation