Radiojar

This is an error message. Please try again. Click here to resolve.
This is just a notification. More info
This is a sucess message. Go

These are based on a customised version of jPlayer that uses HTML5 Audio on browsers that support it (e.g. Webkit-based browsers like Chrome & Safari) and falls back to a Flash-based player (still using the same an HTML/CSS user interface) on browsers that don't (e.g. Firefox, Internet Explorer). Added benefit: since most modern mobile web browsers are based on Webkit, this player will work fine on most modern smartphones. The player will detect a loss of connection and attempt reconnection to the stream.

These widgets rely on three parts to work:

The Javascript code. The main script needs to be included from radiojar.com. It includes our own version of jQuery that uses the noConflict mechanism to avoid clashing with your own website's jQuery (if present).
The HTML markup. Use the code provided, you can tweak it and add your own elements if you want as long as you keep the basic functioning parts that allow the Javascript code to work.
The CSS. A starter stylesheet file is provided here as an example. Feel free to link to it directly, or download it and tweak it to arrive at a design that matches your website's look & feel. These widgets use the Font Awesome web font (for the play/pause/mute icons) which is linked directly from Radiojar in the starter CSS.

Check out the live demos below and click to get instructions for using the code on your website.

Minimal player

Just a play button

Update Required To play the media you will need to either update your browser to a recent version or update your Flash plugin.

Show code

Live example on JSFiddle

Include our sample stylesheet, in the <head> of your page:

<link rel="stylesheet" href="//www.radiojar.com/wrappers/api-plugins/v1/css/player.css">

Or download it and tweak it to your liking.

Include the following code where you want to display the player:

<div id="rj-player">
 <div class="rjp-player-container">
  <div id="rjp-radiojar-player"></div>
  <div id="rj-player-controls" class="rj-player-controls">
   <div class="jp-gui jp-interface">
    <div class="jp-controls">
     <a href="javascript:;" style="display:block" class="jp-play" title="Play">&nbsp;<i class="icon-play"></i></a>
     <a href="javascript:;" style="display:none" class="jp-pause" title="Pause"><i class="icon-pause"></i></a>
    </div>
  </div>
  <div class="jp-no-solution">
   <span>Update Required</span>
   To play the media you will need to either update your browser to a recent version or update your <a href="//get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
   </div>
  </div>
 </div>
</div>

Include the following code just before the closing body tag. Instead of "uf6x8w5f81ac", use your station's stream name. You can find your station's stream name (streamName) in the management area of your station, select Tools and then Widgets (check out the screenshot to the right for the exact location). Set autoplay to false if you don't want the player to start playing automatically when the page has loaded.

<script type="text/javascript" src="//www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script>
<script>
 rjq('#rjp-radiojar-player').radiojar('player', {
   "streamName": "uf6x8w5f81ac",
   "autoplay":false
  });
</script>

Minimal player with mute

Play button & mute/unmute control

Update Required To play the media you will need to either update your browser to a recent version or update your Flash plugin.

Show code

Live example on JSFiddle

Include our sample stylesheet, in the <head> of your page:

<link rel="stylesheet" href="//www.radiojar.com/wrappers/api-plugins/v1/css/player.css">

Or download it and tweak it to your liking.

Include the following code where you want to display the player:

<div id="rj-player">
 <div class="rjp-player-container">
  <div id="rjp-radiojar-player"></div>
  <div id="rj-player-controls" class="rj-player-controls">
   <div class="jp-gui jp-interface">
    <div class="jp-controls">
     <a href="javascript:;" style="display:block" class="jp-play" title="Play">&nbsp;<i class="icon-play"></i></a>
     <a href="javascript:;" style="display:none" class="jp-pause" title="Pause" ><i class="icon-pause"></i></a>
     <a href="javascript:;" class="jp-mute"  style="display:block" title="Mute"><i class="icon-volume-up"></i></a>
     <a href="javascript:;" class="jp-unmute" style="display:none" title="Unmute"><i class="icon-volume-off"></i></a>
    </div>
   </div>
   <div class="jp-no-solution">
    <span>Update Required</span>
    To play the media you will need to either update your browser to a recent version or update your <a href="//get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
   </div>
  </div>
 </div>
</div>

<script type="text/javascript" src="//www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script>
<script>
 rjq('#rjp-radiojar-player').radiojar('player', {
   "streamName": "uf6x8w5f81ac",
   "autoplay":false
 });
</script>

Full Player

Display artist/track name & album art, hover on the mute button to adjust volume.

Now playing:

Artist - Song

Update Required To play the media you will need to either update your browser to a recent version or update your Flash plugin.

Please note that to accurately show track information, you will need to upload appropriately tagged MP3 files to Radiojar's media library.
You can edit all the relevant meta-data directly from the Media Library.

Show code

Live example on JSFiddle

Include our sample stylesheet, in the <head> of your page:

<link rel="stylesheet" href="//www.radiojar.com/wrappers/api-plugins/v1/css/player.css">

Or download it and tweak it to your liking.

Include the following code where you want to display the player:

<div id="rj-player">
 <div class="player-v3 player-medium">
  <div id="rj-cover">
    <a href="#"><img src=""/></a>
  </div>
  <div class="info">
   <div class="rjp-trackinfo-container">
    <h4 class="rjp-label">Now playing:</h4>
    <p id="trackInfo" class="rjp-info"></p>
   </div>
   <div class="rjp-player-container">
    <div id="rjp-radiojar-player"></div>
    <div id="rj-player-controls" class="rj-player-controls">
     <div class="jp-gui jp-interface">
      <div class="jp-controls">
       <a href="javascript:;" style="display:block" class="jp-play" title="Play">&nbsp;<i class="icon-play"></i></a>
       <a href="javascript:;" style="display:none" class="jp-pause" title="Pause"><i class="icon-pause"></i></a>
       <a href="javascript:;" style="display:block" class="jp-mute"  title="Mute"><i class="icon-volume-up"></i></a>
       <a href="javascript:;" style="display:none" class="jp-unmute" title="Unmute"><i class="icon-volume-off"></i></a>
       <div class="jp-volume-bar-wrapper">
        <div class="jp-volume-bar">
         <div class="jp-volume-bar-value"></div>
        </div>
       </div>
      </div>
     </div>
    </div>
    <div class="jp-no-solution">
     <span>Update Required</span>
     To play the media you will need to either update your browser to a recent version or update your <a href="//get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
    </div>
   </div>
  </div>
 </div>
</div>

<script type="text/javascript" src="//www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script>
<script>
 rjq('#rjp-radiojar-player').radiojar('player', {
  "streamName": "uf6x8w5f81ac",
  "enableUpdates": true,
  "defaultImage": "//www.radiojar.com/img/sample_images/Radio_Stations_Avatar_BLUE.png",
  "autoplay":false
 });
 rjq('#rjp-radiojar-player').off('rj-track-load-event');
 rjq('#rjp-radiojar-player').on('rj-track-load-event', function(event, data) {
   updateInfo(data);
   if (data.title != "" || data.artist != "") {
     rjq('.rjp-trackinfo-container').show();
     rjq('#trackInfo').html(data.artist + ' - "' + data.title + '"')
   } else {
     rjq('.rjp-trackinfo-container').hide();
   }
 });

 function updateInfo(data) {
   if (data.thumb) {
     rjq('#rj-cover').html('<a href="#"><img src="' + data.thumb + '" alt="" title="" /></a>')
   } else {
     rjq('#rj-cover').html('')
   }
 }
</script>