Mercurial > public > bravenewsurf

annotate 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
rev   line source
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@51 23 mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
bob@51 24 oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
bob@51 25 poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
bob@51 26 },
bob@51 27 {
bob@51 28 title:"Your Face",
bob@51 29 mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
bob@51 30 oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
bob@51 31 poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
bob@51 32 },
bob@51 33 {
bob@51 34 title:"Cyber Sonnet",
bob@51 35 mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
bob@51 36 oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg",
bob@51 37 poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
bob@51 38 },
bob@51 39 {
bob@51 40 title:"Tempered Song",
bob@51 41 mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
bob@51 42 oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"
bob@51 43 },
bob@51 44 {
bob@51 45 title:"Hidden",
bob@51 46 mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
bob@51 47 oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
bob@51 48 },
bob@51 49 {
bob@51 50 artist:"Eddie Vedder",
bob@51 51 title:"Without You",
bob@51 52 m4a:"{{ STATIC_URL }}music/1.m4a",
bob@51 53 oga:"{{ STATIC_URL }}music/1.ogg",
bob@51 54 mp3:"{{ STATIC_URL }}music/1.mp3"
bob@51 55 },
bob@51 56 {
bob@51 57 artist:"Johnny Flynn",
bob@51 58 title:"Barnacled Warship",
bob@51 59 m4a:"{{ STATIC_URL }}music/2.m4a",
bob@51 60 oga:"{{ STATIC_URL }}music/2.ogg",
bob@51 61 mp3:"{{ STATIC_URL }}music/2.mp3"
bob@51 62 }
bob@51 63 ],
bob@51 64 {
bob@51 65 playlistOptions: {
bob@51 66 enableRemoveControls: true,
bob@51 67 autoPlay: false
bob@51 68 },
bob@51 69 swfPath: "{{ STATIC_URL }}js",
bob@51 70 solution:"html, flash",
bob@51 71 oggSupport: true,
bob@51 72 supplied: "mp3, mp4, ogg"
bob@51 73 });
bob@51 74 });
bob@51 75 </script>
bob@51 76 {% endblock %}
bob@51 77
bgneal@9 78 {% block content %}
bgneal@9 79 {% navbar 'music' %}
bgneal@9 80 <h1>Listen</h1>
bob@51 81 <div id="jquery_jplayer_1" class="jp-jplayer"></div>
bob@51 82
bob@51 83 <div id="jp_container_1" class="jp-audio">
bob@51 84 <div class="jp-type-playlist">
bob@51 85 <div class="jp-gui jp-interface">
bob@51 86 <ul class="jp-controls">
bob@51 87 <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
bob@51 88 <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
bob@51 89 <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
bob@51 90 <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
bob@51 91 <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
bob@51 92 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
bob@51 93 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
bob@51 94 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
bob@51 95 </ul>
bob@51 96 <div class="jp-progress">
bob@51 97 <div class="jp-seek-bar">
bob@51 98 <div class="jp-play-bar"></div>
bob@51 99 </div>
bob@51 100 </div>
bob@51 101 <div class="jp-volume-bar">
bob@51 102 <div class="jp-volume-bar-value"></div>
bob@51 103 </div>
bob@51 104 <div class="jp-time-holder">
bob@51 105 <div class="jp-current-time"></div>
bob@51 106 <div class="jp-duration"></div>
bob@51 107 </div>
bob@51 108 <ul class="jp-toggles">
bob@51 109 <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
bob@51 110 <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
bob@51 111 <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
bob@51 112 <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
bob@51 113 </ul>
bob@51 114 </div>
bob@51 115 <div class="jp-playlist">
bob@51 116 <ul>
bob@51 117 <li></li>
bob@51 118 </ul>
bob@51 119 </div>
bob@51 120 <div class="jp-no-solution">
bob@51 121 <span>Update Required</span>
bob@51 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>.
bob@51 123 </div>
bob@51 124 </div>
bob@51 125 </div>
bgneal@9 126 {% endblock %}