jPlayer Example

Audio Example

jPlayer is a jQuery plugin for playing back HTML5 audio, or using a Flash fallback. This is the audio player I have used on some eLearning courses in Minneapolis.

 

Steps to create this example:

  1. Create *.mp3 and *.ogg versions of your audio.
  2. Create an element to hold the Play and Pause buttons. It can be anything, such as a <div> or a <li>. The Play and Pause buttons are <a> tags with the class "jp-play" and "jp-pause". Your containing element must have a unique Id. For example:

<li id="jp_cntl1">

  <a href="javascript:void(0);" class="jp-play"></a>

  <a href="javascript:void(0);" class="jp-pause"></a>

</li>

 

  1. Create a "dummy" container for the player. e.g. <div id="player1" class="jp-jplayer"></div> This will not show anywhere; it is simply needed when using jPlayer in this manner.
  2. Include jQuery
  3. Include jPlayer
  4. Create code to associate the player to the play/pause buttons.
$(document).ready(function() {
	$("#player1").jPlayer( {
		swfPath: "jQuery.jPlayer.2.1.0",
		ready: function(event) {
			$(this).jPlayer("setMedia", {
 				mp3: "../assets/audio/audio1.mp3",
				oga: "../assets/audio/audio1.ogg"
 			});
 		},
 		play: function() { // To avoid both jPlayers playing together.
 			$(this).jPlayer("pauseOthers");
 		},
 		cssSelectorAncestor: "#jp_cntl1"
 	});
});

Resources for Creative Commons or public domain music