So you have got your self one of our streaming packages, now how do you make this avalible to users?

Embedding your stream into a web page, or creating an online player is a very good idea. During this example i will be using one of our clients, Swindon 105.5’s online player as an example.

So firstly, its always good to give your users choice as to the player, and there for the plug-in they use to listen to your stream. It is important to remember that just because you prefer using Windows Media Player for example that everyone will have that plug-in installed for their chosen browser, there are many players so give them a choice, on Swindon 105.5’s online player when you first open the player you are given the choice of Windows Media Player or Quick-Time this option is then saved in a cookie. Which then makes further user experience much better, as repeat users (which for online radio and broadcasting in general is important) can just click and listen to your station, how they want to.

Now we get to the actual player, but of course with the web we can be much more interactive with the user, and you as a webmaster, and/or a radio station can provide information about what they are listening to, who’s on air and whats next.

As you can see on the right this is the player window, and this webmaster as kept things simple, as they should be. However some radio stations have their players clogged up with all sorts of rubbish and unrelated information where as this is clean, and to the point.

We have an easy switch player link in the corner to change your player preference, there-fore giving the user more choice.

Also we have information about the current program on air, “The Big Weekender”, we can see the show title and the presenters, which helps listeners to know who and what they listen to and form a stronger bond with the presenters and your station.

Quick Plug: You have taken a little look at Swindon 105.5’s online player so take a look at their site and have a listen!

The code:

So far i have briefly looking at what a good player might include, so design aside we will look at the code you need to embed a player into your web-page for them to listen.

So lets take a look:

<object id=”MediaPlayer” height=”45″ classid=”CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95″ standby=”Loading…” type=”application/x-oleobject” codebase=”http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112“>
<param name=”filename” value=”listen.m3u”>
<param name=”showcontrols” value=”true”>
<param name=”autostart” value=”true”>
<embed type=”application/x-mplayer2″ src=”listen.m3u” name=”MediaPlayer” height=”45″ width=”300″ showcontrols=”1″ showdisplay=”0″ showstatusbar=”0″></embed></object>

 The above code will embed a Windows Media Player into your webpage, so lets break this down and little and look at the parts which make it up and control how it behaves.

Breaking it down.

So you may have noticed that much of the code seems to do the same job, we have the <object> tag and then we have the <embed> tag within that which seems to duplicate some of the variables. This is because FireFox and Internet Explorer can have problems understanding the code, Internet Explorer likes having the <object> tag where as FireFox (and other browsers) are happy with <embed> for this reason we include both.

codebase:

Codebase which is a attribute in object provides a URL where the exe or plugin can be downloaded, so if a user does not have Windows Media Player installed this can help them find and install the required plugin.

This is not a required attribute and can be left out if desired.

filename:

This is the location of the file (or stream) you wish to play. You can use the direct source of your stream, which will be something like myradio.com:8000, however many users may wish to use playlist files instead, we will explain more about these and how you can use and build these later.

autostart:

This dictates if the stream/file should automatically play on loading or if the user should click play first.

Generally sounds should not be automatically played on websites as it can be offensive and annouying to users, however because in this context we know the user wants to listen to your stream (after all they have opened your player) it would be advised to set auto start to true.

showcontrols:

This option controls if the controls, the buttons like volume, play, stop etc should be shown to the user.

However note that in most modern browser this (along with many other attriubutes) may be ignored and not take effect.

As i mentioned because of browser differences it is important to try and make the code understandable to all browsers.

Attributes should be included in different ways, within <param> tags:

<param name=”autostart” value=”true” />

And also within the <embed> tag itself:

<embed type=”application/x-mplayer2″ src=”listen.m3u” autostart=”1″></embed>

Quick-Time:

The code for a quick-time player is almost identical to Windows Media Player with small differences most of the parameters/attributes are the same, however obviously there is a difference codebase:

CODEBASE=”http://www.apple.com/qtactivex/qtplugin.cab“

You should now be equip with the basic code you need to get your stream on you website or online player, we can go into further detail, but that’s another article.

And of course, we are always happy to help with programming and code writing for our customers, just get in contact for more information.

Please leave comments or questions below.