Mercurial > public > bravenewsurf

comparison bns_website/templates/music.html @ 51:6c7467599fa9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
I added the jquery plugin jplayer to use for playing samples of the album. For now I just used some of the songs linked to by the jplayer demo, but I also picked a couple songs at random from my iTunes library. Rather than add them to the repository I just named them 1.mp3, 1.m4a, 1.ogg and 2.mp3, 2.m4a, 2.ogg and anybody that wants to test the player will have to add some random songs themselves. I only added the "blue monday" player skin because I personally think it looks the best of the examples they supply, but we could change that or roll our own if needed.
author Bob Mourlam <bob.mourlam@gmail.com>
date Sun, 13 Nov 2011 17:01:36 -0600
parents f2cb9b2ec552
children f8b32ce38533
comparison
equal deleted inserted replaced
50:4614ebe73263 51:6c7467599fa9
1 {% extends 'base.html' %} 1 {% extends 'base.html' %}
2 {% load core_tags %} 2 {% load core_tags %}
3
3 {% block title %}Listen{% endblock %} 4 {% block title %}Listen{% endblock %}
5
6 {% block custom_css %}
7 <link type="text/css" href="{{ STATIC_URL }}jplayer_skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />
8 {% endblock %}
9
10 {% block custom_js %}
11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
12 <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.jplayer.min.js"></script>
13 <script type="text/javascript" src="{{ STATIC_URL }}js/jplayer.playlist.min.js"></script>
14 <script type="text/javascript">
15 $(document).ready(function(){
16
17 new jPlayerPlaylist({
18 jPlayer: "#jquery_jplayer_1",
19 cssSelectorAncestor: "#jp_container_1"},
20 [
21 {
22 title:"Cro Magnon Man",
23 mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
24 oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
25 poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
26 },
27 {
28 title:"Your Face",
29 mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
30 oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
31 poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
32 },
33 {
34 title:"Cyber Sonnet",
35 mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
36 oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg",
37 poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
38 },
39 {
40 title:"Tempered Song",
41 mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
42 oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"
43 },
44 {
45 title:"Hidden",
46 mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
47 oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
48 },
49 {
50 artist:"Eddie Vedder",
51 title:"Without You",
52 m4a:"{{ STATIC_URL }}music/1.m4a",
53 oga:"{{ STATIC_URL }}music/1.ogg",
54 mp3:"{{ STATIC_URL }}music/1.mp3"
55 },
56 {
57 artist:"Johnny Flynn",
58 title:"Barnacled Warship",
59 m4a:"{{ STATIC_URL }}music/2.m4a",
60 oga:"{{ STATIC_URL }}music/2.ogg",
61 mp3:"{{ STATIC_URL }}music/2.mp3"
62 }
63 ],
64 {
65 playlistOptions: {
66 enableRemoveControls: true,
67 autoPlay: false
68 },
69 swfPath: "{{ STATIC_URL }}js",
70 solution:"html, flash",
71 oggSupport: true,
72 supplied: "mp3, mp4, ogg"
73 });
74 });
75 </script>
76 {% endblock %}
77
4 {% block content %} 78 {% block content %}
5 {% navbar 'music' %} 79 {% navbar 'music' %}
6 <h1>Listen</h1> 80 <h1>Listen</h1>
7 <p><strong>TODO</strong>: put some kind of music player here. Possibly embed a ReverbNation player, or use jPlayer.</p> 81 <div id="jquery_jplayer_1" class="jp-jplayer"></div>
82
83 <div id="jp_container_1" class="jp-audio">
84 <div class="jp-type-playlist">
85 <div class="jp-gui jp-interface">
86 <ul class="jp-controls">
87 <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
88 <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
89 <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
90 <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
91 <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
92 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
93 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
94 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
95 </ul>
96 <div class="jp-progress">
97 <div class="jp-seek-bar">
98 <div class="jp-play-bar"></div>
99 </div>
100 </div>
101 <div class="jp-volume-bar">
102 <div class="jp-volume-bar-value"></div>
103 </div>
104 <div class="jp-time-holder">
105 <div class="jp-current-time"></div>
106 <div class="jp-duration"></div>
107 </div>
108 <ul class="jp-toggles">
109 <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
110 <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
111 <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
112 <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
113 </ul>
114 </div>
115 <div class="jp-playlist">
116 <ul>
117 <li></li>
118 </ul>
119 </div>
120 <div class="jp-no-solution">
121 <span>Update Required</span>
122 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>.
123 </div>
124 </div>
125 </div>
8 {% endblock %} 126 {% endblock %}