|
bgneal@9
|
1 {% extends 'base.html' %}
|
|
bgneal@9
|
2 {% load core_tags %}
|
|
bob@51
|
3
|
|
bgneal@9
|
4 {% block title %}Listen{% endblock %}
|
|
bob@51
|
5
|
|
bob@51
|
6 {% block custom_css %}
|
|
bob@51
|
7 <link type="text/css" href="{{ STATIC_URL }}jplayer_skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />
|
|
bob@51
|
8 {% endblock %}
|
|
bob@51
|
9
|
|
bob@51
|
10 {% block custom_js %}
|
|
bob@51
|
11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
|
|
bob@51
|
12 <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.jplayer.min.js"></script>
|
|
bob@51
|
13 <script type="text/javascript" src="{{ STATIC_URL }}js/jplayer.playlist.min.js"></script>
|
|
bob@51
|
14 <script type="text/javascript">
|
|
bob@51
|
15 $(document).ready(function(){
|
|
bob@51
|
16
|
|
bob@51
|
17 new jPlayerPlaylist({
|
|
bob@51
|
18 jPlayer: "#jquery_jplayer_1",
|
|
bob@51
|
19 cssSelectorAncestor: "#jp_container_1"},
|
|
bob@51
|
20 [
|
|
bob@51
|
21 {
|
|
bob@51
|
22 title:"Cro Magnon Man",
|
|
bob@54
|
23 mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3"
|
|
bob@51
|
24 },
|
|
bob@51
|
25 {
|
|
bob@51
|
26 title:"Your Face",
|
|
bob@54
|
27 mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3"
|
|
bob@51
|
28 },
|
|
bob@51
|
29 {
|
|
bob@51
|
30 title:"Cyber Sonnet",
|
|
bob@54
|
31 mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3"
|
|
bob@51
|
32 },
|
|
bob@51
|
33 {
|
|
bob@51
|
34 title:"Tempered Song",
|
|
bob@54
|
35 mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"
|
|
bob@51
|
36 },
|
|
bob@51
|
37 {
|
|
bob@51
|
38 title:"Hidden",
|
|
bob@54
|
39 mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3"
|
|
bob@51
|
40 },
|
|
bob@51
|
41 {
|
|
bob@51
|
42 artist:"Eddie Vedder",
|
|
bob@51
|
43 title:"Without You",
|
|
bob@51
|
44 mp3:"{{ STATIC_URL }}music/1.mp3"
|
|
bob@51
|
45 },
|
|
bob@51
|
46 {
|
|
bob@51
|
47 artist:"Johnny Flynn",
|
|
bob@51
|
48 title:"Barnacled Warship",
|
|
bob@51
|
49 mp3:"{{ STATIC_URL }}music/2.mp3"
|
|
bob@51
|
50 }
|
|
bob@51
|
51 ],
|
|
bob@51
|
52 {
|
|
bob@51
|
53 playlistOptions: {
|
|
bob@51
|
54 enableRemoveControls: true,
|
|
bob@51
|
55 autoPlay: false
|
|
bob@51
|
56 },
|
|
bob@51
|
57 swfPath: "{{ STATIC_URL }}js",
|
|
bob@51
|
58 solution:"html, flash",
|
|
bob@54
|
59 oggSupport: false,
|
|
bob@54
|
60 supplied: "mp3"
|
|
bob@51
|
61 });
|
|
bob@51
|
62 });
|
|
bob@51
|
63 </script>
|
|
bob@51
|
64 {% endblock %}
|
|
bob@51
|
65
|
|
bgneal@9
|
66 {% block content %}
|
|
bgneal@9
|
67 {% navbar 'music' %}
|
|
bgneal@9
|
68 <h1>Listen</h1>
|
|
bob@51
|
69 <div id="jquery_jplayer_1" class="jp-jplayer"></div>
|
|
bob@51
|
70
|
|
bob@51
|
71 <div id="jp_container_1" class="jp-audio">
|
|
bob@51
|
72 <div class="jp-type-playlist">
|
|
bob@51
|
73 <div class="jp-gui jp-interface">
|
|
bob@51
|
74 <ul class="jp-controls">
|
|
bob@51
|
75 <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
|
|
bob@51
|
76 <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
|
|
bob@51
|
77 <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
|
|
bob@51
|
78 <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
|
|
bob@51
|
79 <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
|
|
bob@51
|
80 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
|
|
bob@51
|
81 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
|
|
bob@51
|
82 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
|
|
bob@51
|
83 </ul>
|
|
bob@51
|
84 <div class="jp-progress">
|
|
bob@51
|
85 <div class="jp-seek-bar">
|
|
bob@51
|
86 <div class="jp-play-bar"></div>
|
|
bob@51
|
87 </div>
|
|
bob@51
|
88 </div>
|
|
bob@51
|
89 <div class="jp-volume-bar">
|
|
bob@51
|
90 <div class="jp-volume-bar-value"></div>
|
|
bob@51
|
91 </div>
|
|
bob@51
|
92 <div class="jp-time-holder">
|
|
bob@51
|
93 <div class="jp-current-time"></div>
|
|
bob@51
|
94 <div class="jp-duration"></div>
|
|
bob@51
|
95 </div>
|
|
bob@51
|
96 <ul class="jp-toggles">
|
|
bob@51
|
97 <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
|
|
bob@51
|
98 <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
|
|
bob@51
|
99 <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
|
|
bob@51
|
100 <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
|
|
bob@51
|
101 </ul>
|
|
bob@51
|
102 </div>
|
|
bob@51
|
103 <div class="jp-playlist">
|
|
bob@51
|
104 <ul>
|
|
bob@51
|
105 <li></li>
|
|
bob@51
|
106 </ul>
|
|
bob@51
|
107 </div>
|
|
bob@51
|
108 <div class="jp-no-solution">
|
|
bob@51
|
109 <span>Update Required</span>
|
|
bob@51
|
110 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>.
|
|
bob@51
|
111 </div>
|
|
bob@51
|
112 </div>
|
|
bob@51
|
113 </div>
|
|
bgneal@9
|
114 {% endblock %}
|
