The Basic Radio Console

Simply plays a station

A basic web-based player for radio stations that works on many platforms and is easy to customise.

Demo Download

About

What is the Basic Radio Console?

The Basic Radio Console is a web-based console, which enables radio stations to stream using a well designed player.

Many players for radio stations are Flash based and can be unreliable. The Basic Radio Console aims to improve the design of online radio players, whilst making it easy for radio stations to customise how it looks.

Warning!

You do need some knowledge of HTML, CSS, jQuery and Facebook to set this up. This page does describe a fair bit, but it will not suit all situations.

Features

HTML5 Player

Using MediaElement.js, this player works in all modern browsers, as well as legacy browsers (including IE7!).

The script decides how best to deliver the audio to the user, but displays the same controls and style no matter what their platform.

On Air Content

A large area allows you to display dynamic content about who or what is on air.

In addition, a 'slide' area below the buttons allows for station visuals, as well as advertisements.

Social Buttons

Users can easily share your console using buttons for Facebook*, Twitter and Google+.

*Some customisation is required for the Facebook Like button to work.

Plugins/Tools included: MediaElement.js, Elusive-Icons Webfont, Cycle2


Download

By downloading the Basic Radio Console v1.0.2, you agree to the terms of licencing, as laid out on this website.

Download the Basic Radio Console v1.0.2 (5.1 MB)

Future Improvements

  • Make it easier to update the Facebook Like button
  • Find a better way to automatically update the On Air content

Customise

Stream Details

To update the stream details, find the element with the ID player (within index.html) and change the attribute src with your details (approx. line 40).

If you are unsure if your stream will work with MediaElement.js, then check the documentation on their website.

However, I have discovered that .pls sources should work.

Style via CSS & Images

To change the style of the console, find the CSS file called custom.css.

Here the main styling changes can be found.

The logo at the top of the console can be changed by updating the image img/console_logo.png or by specifying a different image on line 28 of index.html.

This image should be 310px x 55px.

Slider

In the example, the images are stored in the slides folder. However they don't even have to be on the same domain.

The slider images can be updated from line 50 onwards and should be 352px x 235px.

Further changes, such as the speed and the transition, can be made by following the documentation on the Cycle2.

On Air Content

The On Air Content space can hold information such as the presenter currently on air or what song is playing.

This information currently needs to be contained in a single file, which is on the same domain as the player.

To update what file is being read, on line 95 change the source in quotes.

It will look something like:

var url="nowplaying.html";

I am currently looking for a way to improve how this information is handled, but any suggestions are welcome.

Facebook Like Button

If you wish to use the Facebook Like Button, you will need to regenerate the button via the Facebook Developers website.

This is because the button in the example only works with the domain oliverneedham.co.uk.

The example uses the iFrame method, however you could use the HTML5 or XFBML methods, but will require more javascript code.

Popup Window Code

If you need some code to generate a popup window the right size, this is what is used for the demo on this site.

<script language="javascript">
function popUpListen() {
props=window.open('/player/', 'poppage1', 'toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=385, height=665, left=0, top=0, title=The Basic Radio Console'); }
</script>

Then whatever link you want to activate the popup should have this in: href="javascript:popUpListen()".

Stream not working in MediaElement.js?

Unfortunately MediaElement.js isn't guarenteed to work with all streams. I have personally had it running with an MP3 stream on desktop and mobile devices. However streaming specifically to Android devices can be a pain. For a detailed explanation, read this post on the LongTail Community Blog.

But there are other ways with many other HTML5 player libraries.

The VideoSWS (See What Sucks) comparison table shows you some other players that might do the job you want. The two key columns are Playlists and <audio> ready.


Licences

Free To Use Licence

The Basic Radio Console is free to use and edit, however I ask that you don't simply copy the page. I ask that all copyright notices be left in place for the additional libraries.

A link back here would be nice, otherwise feel free to use it wherever. And if you have anything awesome that you've done with it, please do let me know.

Third Party Licences

The projects included with the Basic Radio Console have their own licences.

They are listed here below, however the general gist is that you leave all copyright notices in place.

  • MediaElement.js - MIT
  • Elusive-Icons Webfont - SIL
  • Cycle2 - MIT

Examples

Are you using the Basic Radio Console at your station?

If you're using the Basic Radio Console at your station, drop me a message and I'll put you on the list. Feel free to add any comments on how you've found it and if you've got any suggestions.


Contact

If there's any way I can offer assistance or advice, feel free to get in contact using the details below.

You might also be interested in my blog posts about using WordPress for radio stations.

About Oliver Needham

I'm currently a Digital Producer in London for All In Media, working on projects like UK Radioplayer and on behalf of conferences like Radiodays Europe.

Outside of work I help run a music festival called KingsStock and volunteer at Westminster Chapel in London's Westminster.