jplayer example

jplayer example

by Berker Yüceer

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <!-- Example code to create a simple player using jPlayer 2.1.0 -->
    <!-- Skins are defined in CSS. Uncomment the following CSS reference and
    comment out the one below it to switch skins -->
    <!--<link href="http://jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css"
    rel="stylesheet" type="text/css" />-->
    <link href="http://jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://jplayer.org/2.1.0/js/jquery.jplayer.min.js"></script>
    <script type="text/javascript">
      /*paste or reference your JS here*/

    </script>
  </head>

  <body>
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div id="jp_container_1" class="jp-audio">
      <div class="jp-type-single">
        <div class="jp-gui jp-interface">
          <ul class="jp-controls">
            <!-- comment out any of the following <li>s to remove these buttons -->
            <li><a href="javascript:;" class="jp-play" tabindex="1">play</a>
            </li>
            <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a>
            </li>
            <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a>
            </li>
            <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>
            </li>
            <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>
            </li>
            <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a>
            </li>
          </ul>
          <!-- you can comment out any of the following <div>s too -->
          <div class="jp-progress">
            <div class="jp-seek-bar">
              <div class="jp-play-bar"></div>
            </div>
         ...

CSS

.song {
  width: 416px;
  height: 20px;
  display: block;
  border: 1px solid #3b89ad;
  border-radius: 2px 2px 2px 2px;
  padding: 2px;
  background-color: #ccc;
  color: grey;
  text-align: center;
}

JavaScript

var srcvalue = "";
var songName = "";

function play(songId) {
  srcvalue = $(songId).attr('src');
  songName = $(songId).attr('title');
  // Show the new song's title
  $(".jp-title ul li").text(songName);
  // Then add the new song
  $("#jquery_jplayer_1").jPlayer("setMedia", {
      oga: srcvalue
    }
    // Play from the begining
  ).jPlayer("playHead", 0).jPlayer("play");
}
$(document).ready(function() {
  // Get first song
  srcvalue = $(".song:first-child").attr('src');
  songName = $(".song:first-child").attr('title');
  // Then show the first song's title
  $(".jp-title ul li").text(songName);
  // Bind click event to playlist
  $(".song").each(function() {
    $(this).click(function() {
      play($(this));
    });
  });
  // Starting value
  $("#jquery_jplayer_1").jPlayer({
    ready: function(event) {
      $(this).jPlayer("setMedia", {
        oga: srcvalue
      });
    },
    supplied: "oga"
  });
});