1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8" /> 5<!-- Website Design By: www.happyworm.com --> 6<title>Demo : jPlayer as a text based audio player</title> 7<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 8<script type="text/javascript" src="../../lib/jquery.min.js"></script> 9<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script> 10<script type="text/javascript"> 11//<![CDATA[ 12 13$(document).ready(function(){ 14 15 // Local copy of jQuery selectors, for performance. 16 var my_jPlayer = $("#jquery_jplayer"), 17 my_trackName = $("#jp_container .track-name"), 18 my_playState = $("#jp_container .play-state"), 19 my_extraPlayInfo = $("#jp_container .extra-play-info"); 20 21 // Some options 22 var opt_play_first = false, // If true, will attempt to auto-play the default track on page loads. No effect on mobile devices, like iOS. 23 opt_auto_play = true, // If true, when a track is selected, it will auto-play. 24 opt_text_playing = "Now playing", // Text when playing 25 opt_text_selected = "Track selected"; // Text when not playing 26 27 // A flag to capture the first track 28 var first_track = true; 29 30 // Change the time format 31 $.jPlayer.timeFormat.padMin = false; 32 $.jPlayer.timeFormat.padSec = false; 33 $.jPlayer.timeFormat.sepMin = " min "; 34 $.jPlayer.timeFormat.sepSec = " sec"; 35 36 // Initialize the play state text 37 my_playState.text(opt_text_selected); 38 39 // Instance jPlayer 40 my_jPlayer.jPlayer({ 41 ready: function () { 42 $("#jp_container .track-default").click(); 43 }, 44 timeupdate: function(event) { 45 my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%"); 46 }, 47 play: function(event) { 48 my_playState.text(opt_text_playing); 49 }, 50 pause: function(event) { 51 my_playState.text(opt_text_selected); 52 }, 53 ended: function(event) { 54 my_playState.text(opt_text_selected); 55 }, 56 swfPath: "../../dist/jplayer", 57 cssSelectorAncestor: "#jp_container", 58 supplied: "mp3", 59 wmode: "window" 60 }); 61 62 // Create click handlers for the different tracks 63 $("#jp_container .track").click(function(e) { 64 my_trackName.text($(this).text()); 65 my_jPlayer.jPlayer("setMedia", { 66 mp3: $(this).attr("href") 67 }); 68 if((opt_play_first && first_track) || (opt_auto_play && !first_track)) { 69 my_jPlayer.jPlayer("play"); 70 } 71 first_track = false; 72 $(this).blur(); 73 return false; 74 }); 75 76}); 77//]]> 78</script> 79 80<style> 81<!-- 82 83.demo-container { 84 border: 1px solid #009BE3; 85 padding:0 20px; 86 font-family: "Myriad Pro Regular","Trebuchet MS"; 87} 88 89.demo-container a, .demo-container a:link, .demo-container a:visited, .demo-container a:hover, .demo-container a:focus, .demo-container a:active { 90 color: #009BE3; 91} 92 93.demo-container ul { 94 list-style-type:none; 95 padding:0; 96 margin:1em 0; 97 width:100%; 98 overflow:hidden; 99} 100 101.demo-container ul span { 102 color: #A0A600; 103} 104 105.demo-container li { 106 float:left; 107 margin-right:1em; 108} 109 110.demo-container p span.track-name { 111 color: #CC0090; 112} 113 114--> 115</style> 116 117</head> 118<body> 119 120 <div id="jquery_jplayer"></div> 121 122 <!-- Using the cssSelectorAncestor option with the default cssSelector class names to enable control association of standard functions using built in features --> 123 124 <div id="jp_container" class="demo-container"> 125 <ul> 126 <li><span>Select a track : </span></li> 127 <li><a href="http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" class="track track-default">Cro Magnon Man</a></li> 128 <li> | </li> 129 <li><a href="http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3" class="track">The Separation</a></li> 130 <li> | </li> 131 <li><a href="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3" class="track">Lismore</a></li> 132 <li> | </li> 133 <li><a href="http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3" class="track">Thin Ice</a></li> 134 </ul> 135 <p> 136 <span class="play-state"></span> : 137 <span class="track-name">nothing</span> 138 at <span class="extra-play-info"></span> 139 of <span class="jp-duration"></span>, which is 140 <span class="jp-current-time"></span> 141 </p> 142 <ul> 143 <li><a class="jp-play" href="#">Play</a></li> 144 <li><a class="jp-pause" href="#">Pause</a></li> 145 <li><a class="jp-stop" href="#">Stop</a></li> 146 </ul> 147 <ul> 148 <li>volume :</li> 149 <li><a class="jp-mute" href="#">Mute</a></li> 150 <li><a class="jp-unmute" href="#">Unmute</a></li> 151 <li> <a class="jp-volume-bar" href="#">|<---------->|</a></li> 152 <li><a class="jp-volume-max" href="#">Max</a></li> 153 </ul> 154 </div> 155 156</body> 157 158</html> 159