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.
How to add this widget
- Paste this code in the head
<link rel="stylesheet" href="http://www.radiojar.com/wrappers/api-plugins/v1/css/player.css">Or
<script type="text/javascript" src="http://www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script><script> rjq('#rjp-radiojar-player').radiojar('player', { "streamName": "uf6x8w5f81ac", "enableUpdates": true, "defaultImage": "http://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>
- Go to layout>add a new gadget
- Paste the following code
<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"> <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="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. </div> </div> </div> </div></div>
EmoticonEmoticon