Go to Radio.co
All Collections
Sharing Your Station
Widgets
DIY Player Builder Kit

DIY Player Builder Kit

Embed customisable radio players for your website to suit your needs.
Jamie avatar
Written by Jamie
Updated over a week ago

Create custom players using the DIY player builder kit. Our player API lets you craft unique designs out of the box.

Note: The DIY player builder kit is intended for for those familiar with web development and is provided 'as-is'. Radio.co support cover is limited.

Head & Body Code

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>

Player Element

Define where you want the player to be located, by pasting in the following.

<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>

Change the options which are prefixed with data-. There are preset options our default player will display, but for a full list of options scroll down.

Working Player Examples

To get a sense of how players work, download our showcase examples.

NBC player.

There are several ways our player API can be used, so take inspiration from the working examples. And feel free to manipulate and use them in your own projects.

Player Options

Options are functionality that control how players work and look.

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

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

Automatically start playing the stream when the page loads.

data-autoplay="true|false"

Display a play and pause button on the page.

data-playbutton="true|false"

Display the volume slider on the page.

data-volumeslider="true|false"

Display the current now playing information of the station.

data-nowplaying="true|false"

Display the current streaming total elapsed time on the page.

data-elapsedtime="true|false"

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

data-showplayer="true|false"

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

data-volume="0-100"

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

data-showartwork="true|false"

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

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

Sets a custom background image behind the player.

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

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

data-volume="0-100"

Methods

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

Load the stream source into the player.

load(callback)

Play the stream.

play(<em>callback</em>)

Pause the stream.

pause(<em>callback</em>)

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

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

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

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

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

getTime(isFormatted)

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.

getStreamState()

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

getArtwork(width, height, callback, resolution)

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

volume(volume)

Immediately mute the volume of the stream.

mute()

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

isPlaying()

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

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

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

hasLoaded()

Events

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

When the audio has been loaded to the player successfully.

audioLoaded

Fired after each second passed while listening to the stream.

timeChanged

When the user plays the stream.

audioPlay

When the user pauses the stream.

audioPause

Not a valid source of stream.

invalidStream

The current playing song has changed on the station.

songChanged

No stream information was received.

streamInfoError

Working Example

Use the following as a working example to show how a player could work for you.

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