jPlayer

HTML5 Audio & Video for jQuery

a project by happyworm

Step 6 : Add the jPlayer audio interface HTML

You now add the interface, which will be styled using the class definitions from the jPlayer skin.

You will notice that there are 2 id attributes set in the structure. The id of these elements are important for associating jPlayer with the interface and for defining the jPlayer <div>.

The id jquery_jplayer_1 defines the jPlayer <div>, which is the unique id I chose to use in this guide. All commands to jPlayer are issued through this id, by using the jQuery css selector:
$("#jquery_jplayer_1")

The id jp_container_1 is the default id of the jPlayer cssSelectorAncestor option, so we do not need to set the option later.

You should note that the class names are also used by jPlayer. The class names of these elements are important for associating jPlayer with the interface. The classes used are the default class names of the jPlayer cssSelector option, so we do not need to set the option later.

The cssSelectorAncestor is combined with the cssSelector for each jPlayer method that is controlled by the interface. See jPlayer's Predefined CSS Selectors for more details.

Note that each skin has its own unique HTML structure.

To create the Blue Monday skin interface, add the following to the <body> of your HTML: 

<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">
          <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>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
        <div class="jp-time-holder">
          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
          <ul class="jp-toggles">
            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
          </ul>
        </div>
      </div>
      <div class="jp-title">
        <ul>
          <li>Bubble</li>
        </ul>
      </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>
</body>

And you will create the interface below on your page, which will look broken because jPlayer has not hidden some of the elements. With the current Blue Monday CSS and HTML, you cannot simply display:none the pause and other buttons that need to be hidden, otherwise jQuery does not use the correct display type when showing the element again.
You can get this to work though if you really need it to by refactoring the HTML and CSS so that the display type of these control elements is left as the default.

The interface below will not do much more than handle the mouse rollover states. If you click on the controls it will do nothing, because of the javascript:; used as the link.

In the next step you will associate jPlayer with the interface you just created.

previous step | next step

Notes:

The size of the jPlayer <div> is defined by the jPlayer({size}) constructor option, which defaults to zero size when only audio formats are supplied. The background color of the jPlayer <div> is defined by the jPlayer({backgroundColor}) constructor option.

jPlayer media can have a poster image dispayed, which also works for audio. This guide does not use this feature.

Generally, the jPlayer <div> for audio can be outside the interface structure. If your page shows and hides areas of the page, we recommend you place the jPlayer <div> at the root of the <body>, outside of any structures that are being hidden. Hiding the jPlayer <div> will cause the Flash to be effectively removed from the page. Showing it again will reset the Flash and jPlayer will attempt to recover by re-configuring the Flash to the current status and then generate a flashreset event.