Embed a highly customisable radio player for your website out of the box, or tailor it to suit your needs. There are lots of features at your disposal via our player API, view our simple guide on how to get started below!

Note: The DIY Player kit is intended for use by persons familiar with web development and is provided 'as-is'. Radio.co support does not cover use of the DIY Player Kit.

Getting Started

getting started

Paste the following code between the <HEAD></HEAD> tags of your web page.

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script><script src="https://public.radio.co/playerapi/jquery.radiocoplayer.min.js"></script>

Paste the following code just after the closing </BODY> tag of your web page.

<script>$('.radioplayer').radiocoPlayer();</script>

The Player Element

getting started

Define where you want the player to be located. Copy the following code to where you want the player to be located:

<div class="radioplayer" data-src="<em><strong>https://streaming.radio.co/your_station/listen</strong></em>" data-autoplay="false" data-playbutton="true" data-volumeslider="true" data-elapsedtime="true" data-nowplaying="true" data-showplayer="true" data-volume="50" data-showartwork="false"></div>

You can change the options which are prefixed with a data-, with the preset options our default player will display, for a full list of options see below.

DIY Player Kit Examples

example music player nbcexample music player website

Download our project showcase folder which shows examples of different ways our API can be used within your website. Download the example projects gallery.

These files contain real working example players which can be manipulated and used in your own projects, they contain all of the code allowing you to get up and running

Player Options

The options passed to the referenced HTML element on the web page, these options control certain functionality and visibility of some elements.

data-src="https://streaming.radio.co/your_station/listen"

Your radio.co listen stream URL, required to set up the player

data-autoplay="true|false"

Automatically start playing the stream when the page loads

data-playbutton="true|false"

Display a play and pause button on the page

data-volumeslider="true|false"

Display the volume slider on the page

data-nowplaying="true|false"

Display the current now playing information of the station

data-elapsedtime="true|false"

Display the current streaming total elapsed time on the page

data-showplayer="true|false"

Show or hide the radio player from the page, use in conjunction with displaying only certain elements.

data-volume="0-100"

Set the initial volume of the stream when the page loads, requires a number between 1 and 100.

data-showartwork="true|false"

Display just the artwork of the currently playing song (use with data-showplayer='false').

data-image="path/to/image.jpg"

Changes the square image on the player to a custom image source.

data-bg="path/to/image.jpg"

Sets a custom background image behind the player.

data-volume="0-100"

Set the initial volume of the stream when the page loads, requires a number between 1 and 100.

Methods

Methods which allow further control over your player's functionality and event mechanisms.

load(callback)

Load the stream source into the player.

play(<em>callback</em>)

Play the stream.

pause(<em>callback</em>)

Pause the stream.

playToggle(<em>playCallback</em>, <em>pauseCallback</em>)

If the radio is playing this method will pause it and vice versa.

event(event, <em>callback</em>)

Listener for Radio.co player events and execute a callback function.

getTime(isFormatted)

Return the time elapsed time, add true to the parameter to format the returned time.

getStreamState()

0 → No information on the status

1 → Metadata for the stream is ready

2 → Data for the current playback position is available but not enough to play

3 → Data for the current and at least the next packet is available

4 → Enough data available to start playing

getArtwork(width, height, callback, resolution)

Get currently playing track artwork at a certain dimension and quality.

volume(volume)

If a parameter is not present this will return the volume of the player, if one is then it will set the volume. 0 (muted) - 100 (max)

mute()

Immediately mute the volume of the stream.

isPlaying()

Returns the boolean on whether the stream is currently playing or not.

event(event, <em>callback</em>)

Listen to events triggered by the player and executes a callback function when the event occurs.

hasLoaded()

Return true or false to wether the station has already been loaded previously.

Events

Events can be caught using player.event('event_name', callback) to execute the callback when the event is triggered.

audioLoaded

When the audio has been loaded to the player successfully.

timeChanged

Fired after each second passed while listening to the stream.

audioPlay

When the user plays the stream.

audioPause

When the use pauses the stream.

invalidStream

Not a valid source of stream

songChanged

The current playing song has changed on the station.

streamInfoError

No stream information was recieved

Example

var player = $('.radioplayer').radiocoplayer();
player.event('audioPlay', function(event){
 //perform action when audio is played here
});