Download

By downloading the Basic Radio Console, you agree to the licence details, as laid out on this website.

Download from GitHub View code on GitHub

Future Improvements

This project is not active and there are no planned improvements.

• Update the Facebook Like button code
• Find a better way to automatically update the On Air content

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()".

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.

MIT License

The Basic Radio Console is licensed under the MIT License.

Whilst the Basic Radio Console is free to use and edit, I ask that you don't simply copy the page. All copyright notices should 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.

View license

Third Party Licenses

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

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 & MIT
• Cycle2 - MIT