Custom JPlayer Skin

This is a skin for the JQuery plugin JPlayer I developed for Kansas Public Radio. It's designed to look like a display screen on a piece of professional audio equipment. You can view it live here: http://kansaspublicradio.org/KPRplayer.php?stream=1. Some credit is due to Silvia Benvenuti for his Pink Flag skin (MIT license).

Feel free to use it, modify it, and pass it on! First download these files and install on your server:

jplayer.lcd.skin.css
jplayer.lcd.skin.png
jplayer.lcd.skin.seeking.gif
jplayer-background.png

Then copy and paste this code onto your webpage.

  1. <script type="text/javascript" src="/jplayer/jquery.jplayer.min.js"></script>
  2. <script type="text/javascript" src="/jplayer/jplayer.playlist.min.js"></script>
  3. <link href='/jplayer/skin/jplayer.yellow.flag.css' rel='stylesheet' type='text/css' />
  4.  
  5. <script>
  6.         $(document).ready(function() {
  7.             var intro = {
  8.                 title: "Intro",
  9.                 mp3: "YOUR STREAM INTRO URL"
  10.             },
  11.             stream = {
  12.                 title: "YOUR STREAM NAME",
  13.                 mp3: "YOUR STREAM URL"
  14.             };
  15.  
  16.             new jPlayerPlaylist(
  17.                     {
  18.                         jPlayer: "#jquery_jplayer_1",
  19.                         cssSelectorAncestor: "#jp_container_1"
  20.                     },
  21.                     [intro, stream],
  22.                     {
  23.                         swfPath: "../js",
  24.                         supplied: "mp3",
  25.                         preload: "none",
  26.                         wmode: "window",
  27.                         keyEnabled: true
  28.                     }
  29.             );
  30.         });
  31. </script>
  32.  
  33. <div id="jp_container_1" class="jp-audio-stream">
  34.     <div class="jp-type-single">
  35.         <div class="jp-gui jp-interface">
  36.             <ul class="jp-controls">
  37.                 <li><a href="javascript:;" class="jp-play" tabindex="1">play</a>
  38.                 </li>
  39.                 <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a>
  40.                 </li>
  41.                 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>
  42.                 </li>
  43.                 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>
  44.                 </li>
  45.                 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a>
  46.                 </li>
  47.             </ul>
  48.             <div class="jp-progress" style="width: 98px; background:none;">
  49.                 <div class="jp-seek-bar">
  50.                     <div class="jp-play-bar"></div>
  51.                 </div>
  52.             </div>
  53.             <div class="jp-volume-bar">
  54.                 <div class="jp-volume-bar-value"></div>
  55.             </div>
  56.         </div>
  57.     </div>
  58.     <div class="jp-playlist">
  59.         <ul style="visibility:hidden; height: 0px;">
  60.             <!-- The method Playlist.displayPlaylist() uses this unordered list -->
  61.             <li></li>
  62.         </ul>
  63.     </div>
  64. </div>
  65. <div id="jquery_jplayer_1" class="jp-jplayer"></div>