Mercurial > public > bravenewsurf
diff bns_website/templates/music.html @ 51:6c7467599fa9
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 |
line wrap: on
line diff
--- a/bns_website/templates/music.html Sat Nov 12 16:43:16 2011 -0600 +++ b/bns_website/templates/music.html Sun Nov 13 17:01:36 2011 -0600 @@ -1,8 +1,126 @@ {% extends 'base.html' %} {% load core_tags %} + {% block title %}Listen{% endblock %} + +{% block custom_css %} +<link type="text/css" href="{{ STATIC_URL }}jplayer_skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" /> +{% endblock %} + +{% block custom_js %} + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> + <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.jplayer.min.js"></script> + <script type="text/javascript" src="{{ STATIC_URL }}js/jplayer.playlist.min.js"></script> + <script type="text/javascript"> + $(document).ready(function(){ + + new jPlayerPlaylist({ + jPlayer: "#jquery_jplayer_1", + cssSelectorAncestor: "#jp_container_1"}, + [ + { + title:"Cro Magnon Man", + mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3", + oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg", + poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png" + }, + { + title:"Your Face", + mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3", + oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg", + poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png" + }, + { + title:"Cyber Sonnet", + mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3", + oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg", + poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png" + }, + { + title:"Tempered Song", + mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3", + oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg" + }, + { + title:"Hidden", + mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3", + oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg" + }, + { + artist:"Eddie Vedder", + title:"Without You", + m4a:"{{ STATIC_URL }}music/1.m4a", + oga:"{{ STATIC_URL }}music/1.ogg", + mp3:"{{ STATIC_URL }}music/1.mp3" + }, + { + artist:"Johnny Flynn", + title:"Barnacled Warship", + m4a:"{{ STATIC_URL }}music/2.m4a", + oga:"{{ STATIC_URL }}music/2.ogg", + mp3:"{{ STATIC_URL }}music/2.mp3" + } + ], + { + playlistOptions: { + enableRemoveControls: true, + autoPlay: false + }, + swfPath: "{{ STATIC_URL }}js", + solution:"html, flash", + oggSupport: true, + supplied: "mp3, mp4, ogg" + }); + }); + </script> +{% endblock %} + {% block content %} {% navbar 'music' %} <h1>Listen</h1> -<p><strong>TODO</strong>: put some kind of music player here. Possibly embed a ReverbNation player, or use jPlayer.</p> +<div id="jquery_jplayer_1" class="jp-jplayer"></div> + +<div id="jp_container_1" class="jp-audio"> + <div class="jp-type-playlist"> + <div class="jp-gui jp-interface"> + <ul class="jp-controls"> + <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li> + <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li> + <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li> + <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li> + <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li> + <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li> + <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li> + <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li> + </ul> + <div class="jp-progress"> + <div class="jp-seek-bar"> + <div class="jp-play-bar"></div> + </div> + </div> + <div class="jp-volume-bar"> + <div class="jp-volume-bar-value"></div> + </div> + <div class="jp-time-holder"> + <div class="jp-current-time"></div> + <div class="jp-duration"></div> + </div> + <ul class="jp-toggles"> + <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li> + <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li> + <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li> + <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li> + </ul> + </div> + <div class="jp-playlist"> + <ul> + <li></li> + </ul> + </div> + <div class="jp-no-solution"> + <span>Update Required</span> + 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>. + </div> + </div> +</div> {% endblock %}