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 playlist player</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" src="../../dist/add-on/jplayer.playlist.min.js"></script>
12<script type="text/javascript">
13//<![CDATA[
14$(document).ready(function(){
15
16	new jPlayerPlaylist({
17		jPlayer: "#jquery_jplayer_1",
18		cssSelectorAncestor: "#jp_container_1"
19	}, [
20		{
21			title:"Cro Magnon Man",
22			mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
23			oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
24		},
25		{
26			title:"Your Face",
27			mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
28			oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
29		},
30		{
31			title:"Cyber Sonnet",
32			mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
33			oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
34		},
35		{
36			title:"Tempered Song",
37			mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
38			oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"
39		},
40		{
41			title:"Hidden",
42			mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
43			oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
44		},
45		{
46			title:"Lentement",
47			free:true,
48			mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
49			oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg"
50		},
51		{
52			title:"Lismore",
53			mp3:"http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3",
54			oga:"http://www.jplayer.org/audio/ogg/Miaow-04-Lismore.ogg"
55		},
56		{
57			title:"The Separation",
58			mp3:"http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3",
59			oga:"http://www.jplayer.org/audio/ogg/Miaow-05-The-separation.ogg"
60		},
61		{
62			title:"Beside Me",
63			mp3:"http://www.jplayer.org/audio/mp3/Miaow-06-Beside-me.mp3",
64			oga:"http://www.jplayer.org/audio/ogg/Miaow-06-Beside-me.ogg"
65		},
66		{
67			title:"Bubble",
68			free:true,
69			mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
70			oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
71		},
72		{
73			title:"Stirring of a Fool",
74			mp3:"http://www.jplayer.org/audio/mp3/Miaow-08-Stirring-of-a-fool.mp3",
75			oga:"http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"
76		},
77		{
78			title:"Partir",
79			free: true,
80			mp3:"http://www.jplayer.org/audio/mp3/Miaow-09-Partir.mp3",
81			oga:"http://www.jplayer.org/audio/ogg/Miaow-09-Partir.ogg"
82		},
83		{
84			title:"Thin Ice",
85			mp3:"http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3",
86			oga:"http://www.jplayer.org/audio/ogg/Miaow-10-Thin-ice.ogg"
87		}
88	], {
89		swfPath: "../../dist/jplayer",
90		supplied: "oga, mp3",
91		wmode: "window",
92		useStateClassSkin: true,
93		autoBlur: false,
94		smoothPlayBar: true,
95		keyEnabled: true
96	});
97});
98//]]>
99</script>
100</head>
101<body>
102<div id="jquery_jplayer_1" class="jp-jplayer"></div>
103<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
104	<div class="jp-type-playlist">
105		<div class="jp-gui jp-interface">
106			<div class="jp-controls">
107				<button class="jp-previous" role="button" tabindex="0">previous</button>
108				<button class="jp-play" role="button" tabindex="0">play</button>
109				<button class="jp-next" role="button" tabindex="0">next</button>
110				<button class="jp-stop" role="button" tabindex="0">stop</button>
111			</div>
112			<div class="jp-progress">
113				<div class="jp-seek-bar">
114					<div class="jp-play-bar"></div>
115				</div>
116			</div>
117			<div class="jp-volume-controls">
118				<button class="jp-mute" role="button" tabindex="0">mute</button>
119				<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
120				<div class="jp-volume-bar">
121					<div class="jp-volume-bar-value"></div>
122				</div>
123			</div>
124			<div class="jp-time-holder">
125				<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
126				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
127			</div>
128			<div class="jp-toggles">
129				<button class="jp-repeat" role="button" tabindex="0">repeat</button>
130				<button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
131			</div>
132		</div>
133		<div class="jp-playlist">
134			<ul>
135				<li>&nbsp;</li>
136			</ul>
137		</div>
138		<div class="jp-no-solution">
139			<span>Update Required</span>
140			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>.
141		</div>
142	</div>
143</div>
144</body>
145
146</html>
147