1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8" />
5<!-- Website Design By: www.happyworm.com -->
6<title>Demo : jPlayer as an audio player</title>
7<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
8<link href="../../dist/skin/pink.flag/css/jplayer.pink.flag.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: "Bubble",
19				mp3: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"
20			});
21		},
22		swfPath: "../../dist/jplayer",
23		supplied: "mp3",
24		wmode: "window",
25		useStateClassSkin: true,
26		autoBlur: false,
27		smoothPlayBar: true,
28		keyEnabled: true,
29		remainingDuration: true,
30		toggleDuration: true
31	});
32});
33//]]>
34</script>
35</head>
36<body>
37<div id="jquery_jplayer_1" class="jp-jplayer"></div>
38<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
39	<div class="jp-type-single">
40		<div class="jp-gui jp-interface">
41			<div class="jp-volume-controls">
42				<button class="jp-mute" role="button" tabindex="0">mute</button>
43				<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
44				<div class="jp-volume-bar">
45					<div class="jp-volume-bar-value"></div>
46				</div>
47			</div>
48			<div class="jp-controls-holder">
49				<div class="jp-controls">
50					<button class="jp-play" role="button" tabindex="0">play</button>
51					<button class="jp-stop" role="button" tabindex="0">stop</button>
52				</div>
53				<div class="jp-progress">
54					<div class="jp-seek-bar">
55						<div class="jp-play-bar"></div>
56					</div>
57				</div>
58				<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
59				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
60				<div class="jp-toggles">
61					<button class="jp-repeat" role="button" tabindex="0">repeat</button>
62				</div>
63			</div>
64		</div>
65		<div class="jp-details">
66			<div class="jp-title" aria-label="title">&nbsp;</div>
67		</div>
68		<div class="jp-no-solution">
69			<span>Update Required</span>
70			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>.
71		</div>
72	</div>
73</div>
74</body>
75
76</html>
77