1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8" /> 5<!-- Website Design By: www.happyworm.com --> 6<title>Demo : Multi instanced jPlayer audio players</title> 7<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 8<link href="../../dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" /> 9<script type="text/javascript" src="../../lib/jquery.min.js"></script> 10<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script> 11<script type="text/javascript"> 12//<![CDATA[ 13$(document).ready(function(){ 14 15 $("#jquery_jplayer_1").jPlayer({ 16 ready: function () { 17 $(this).jPlayer("setMedia", { 18 title: "Stirring of a fool", 19 m4a: "http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a", 20 oga: "http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg" 21 }); 22 }, 23 play: function() { // To avoid multiple jPlayers playing together. 24 $(this).jPlayer("pauseOthers"); 25 }, 26 swfPath: "../../js", 27 supplied: "m4a, oga", 28 wmode: "window", 29 globalVolume: true, 30 useStateClassSkin: true, 31 autoBlur: false, 32 smoothPlayBar: true, 33 keyEnabled: true 34 }); 35 36 $("#jquery_jplayer_2").jPlayer({ 37 ready: function () { 38 $(this).jPlayer("setMedia", { 39 title: "Hidden", 40 m4a: "http://www.jplayer.org/audio/m4a/Miaow-02-Hidden.m4a", 41 oga: "http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg" 42 }); 43 }, 44 play: function() { // To avoid multiple jPlayers playing together. 45 $(this).jPlayer("pauseOthers"); 46 }, 47 swfPath: "../../js", 48 supplied: "m4a, oga", 49 cssSelectorAncestor: "#jp_container_2", 50 wmode: "window", 51 globalVolume: true, 52 useStateClassSkin: true, 53 autoBlur: false, 54 smoothPlayBar: true, 55 keyEnabled: true 56 }); 57 58 $("#jquery_jplayer_3").jPlayer({ 59 ready: function () { 60 $(this).jPlayer("setMedia", { 61 title: "Bubble", 62 m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a", 63 oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg" 64 }); 65 }, 66 play: function() { // To avoid multiple jPlayers playing together. 67 $(this).jPlayer("pauseOthers"); 68 }, 69 swfPath: "../../js", 70 supplied: "m4a, oga", 71 cssSelectorAncestor: "#jp_container_3", 72 wmode: "window", 73 globalVolume: true, 74 useStateClassSkin: true, 75 autoBlur: false, 76 smoothPlayBar: true, 77 keyEnabled: true 78 }); 79}); 80//]]> 81</script> 82</head> 83<body> 84<div id="jquery_jplayer_1" class="jp-jplayer"></div> 85<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player"> 86 <div class="jp-type-single"> 87 <div class="jp-gui jp-interface"> 88 <div class="jp-controls"> 89 <button class="jp-play" role="button" tabindex="0">play</button> 90 <button class="jp-stop" role="button" tabindex="0">stop</button> 91 </div> 92 <div class="jp-progress"> 93 <div class="jp-seek-bar"> 94 <div class="jp-play-bar"></div> 95 </div> 96 </div> 97 <div class="jp-volume-controls"> 98 <button class="jp-mute" role="button" tabindex="0">mute</button> 99 <button class="jp-volume-max" role="button" tabindex="0">max volume</button> 100 <div class="jp-volume-bar"> 101 <div class="jp-volume-bar-value"></div> 102 </div> 103 </div> 104 <div class="jp-time-holder"> 105 <div class="jp-current-time" role="timer" aria-label="time"> </div> 106 <div class="jp-duration" role="timer" aria-label="duration"> </div> 107 <div class="jp-toggles"> 108 <button class="jp-repeat" role="button" tabindex="0">repeat</button> 109 </div> 110 </div> 111 </div> 112 <div class="jp-details"> 113 <div class="jp-title" aria-label="title"> </div> 114 </div> 115 <div class="jp-no-solution"> 116 <span>Update Required</span> 117 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>. 118 </div> 119 </div> 120</div> 121<div id="jquery_jplayer_2" class="jp-jplayer"></div> 122<div id="jp_container_2" class="jp-audio" role="application" aria-label="media player"> 123 <div class="jp-type-single"> 124 <div class="jp-gui jp-interface"> 125 <div class="jp-controls"> 126 <button class="jp-play" role="button" tabindex="0">play</button> 127 <button class="jp-stop" role="button" tabindex="0">stop</button> 128 </div> 129 <div class="jp-progress"> 130 <div class="jp-seek-bar"> 131 <div class="jp-play-bar"></div> 132 </div> 133 </div> 134 <div class="jp-volume-controls"> 135 <button class="jp-mute" role="button" tabindex="0">mute</button> 136 <button class="jp-volume-max" role="button" tabindex="0">max volume</button> 137 <div class="jp-volume-bar"> 138 <div class="jp-volume-bar-value"></div> 139 </div> 140 </div> 141 <div class="jp-time-holder"> 142 <div class="jp-current-time" role="timer" aria-label="time"> </div> 143 <div class="jp-duration" role="timer" aria-label="duration"> </div> 144 <div class="jp-toggles"> 145 <button class="jp-repeat" role="button" tabindex="0">repeat</button> 146 </div> 147 </div> 148 </div> 149 <div class="jp-details"> 150 <div class="jp-title" aria-label="title"> </div> 151 </div> 152 <div class="jp-no-solution"> 153 <span>Update Required</span> 154 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>. 155 </div> 156 </div> 157</div> 158<div id="jquery_jplayer_3" class="jp-jplayer"></div> 159<div id="jp_container_3" class="jp-audio" role="application" aria-label="media player"> 160 <div class="jp-type-single"> 161 <div class="jp-gui jp-interface"> 162 <div class="jp-controls"> 163 <button class="jp-play" role="button" tabindex="0">play</button> 164 <button class="jp-stop" role="button" tabindex="0">stop</button> 165 </div> 166 <div class="jp-progress"> 167 <div class="jp-seek-bar"> 168 <div class="jp-play-bar"></div> 169 </div> 170 </div> 171 <div class="jp-volume-controls"> 172 <button class="jp-mute" role="button" tabindex="0">mute</button> 173 <button class="jp-volume-max" role="button" tabindex="0">max volume</button> 174 <div class="jp-volume-bar"> 175 <div class="jp-volume-bar-value"></div> 176 </div> 177 </div> 178 <div class="jp-time-holder"> 179 <div class="jp-current-time" role="timer" aria-label="time"> </div> 180 <div class="jp-duration" role="timer" aria-label="duration"> </div> 181 <div class="jp-toggles"> 182 <button class="jp-repeat" role="button" tabindex="0">repeat</button> 183 </div> 184 </div> 185 </div> 186 <div class="jp-details"> 187 <div class="jp-title" aria-label="title"> </div> 188 </div> 189 <div class="jp-no-solution"> 190 <span>Update Required</span> 191 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>. 192 </div> 193 </div> 194</div> 195</body> 196 197</html> 198 199