mediagoblin/templates/mediagoblin/media_displays/audio.html

   1 {#
   2 # GNU MediaGoblin -- federated, autonomous media hosting
   3 # Copyright (C) 2011, 2012 MediaGoblin contributors.  See AUTHORS.
   4 #
   5 # This program is free software: you can redistribute it and/or modify
   6 # it under the terms of the GNU Affero General Public License as published by
   7 # the Free Software Foundation, either version 3 of the License, or
   8 # (at your option) any later version.
   9 #
  10 # This program is distributed in the hope that it will be useful,
  11 # but WITHOUT ANY WARRANTY; without even the implied warranty of
  12 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13 # GNU Affero General Public License for more details.
  14 #
  15 # You should have received a copy of the GNU Affero General Public License
  16 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
  17 #}
  18
  19 {% extends 'mediagoblin/user_pages/media.html' %}
  20
  21 {% block mediagoblin_head %}
  22     {{ super() }}
  23     <link rel="stylesheet" type="text/css" href="{{ request.staticdirect('/css/audio.css') }}" />
  24     <script type="text/javascript" src="{{ request.staticdirect(
  25         '/js/audio.js') }}"></script>
  26 {% endblock %}
  27
  28 {% block mediagoblin_media %}
  29   <div class="media_other_container">
  30     <div class="audio-media">
  31       {% if 'spectrogram' in media.media_files %}
  32         <div class="audio-spectrogram">
  33           <div class="playhead"></div>
  34           <div class="buffered-indicators"></div>
  35           <div class="seekbar"></div>
  36           <button class="audio-control-play-pause paused" aria-label="Play">▶</button>
  37           <div class="audio-currentTime" aria-label="current time">00:00</div>
  38           <input type="range" class="audio-volume" value="1" min="0" max="1" step="0.001" aria-label="volume" />
  39           <img src="{{ request.app.public_store.file_url(
  40                         media.media_files.spectrogram) }}"
  41                alt="Spectrogram" />
  42         </div>
  43       {% endif %}
  44       <audio class="audio-player" controls="controls"
  45              preload="metadata">
  46         <source src="{{ request.app.public_store.file_url(
  47                          media.media_files.webm_audio) }}" type="audio/webm; codecs=vorbis" />
  48         <div class="no_html5">
  49           {%- trans -%}Sorry, this audio will not work because
  50           your web browser does not support HTML5
  51           audio.{%- endtrans -%}<br/>
  52           {%- trans -%}You can get a modern web browser that
  53           can play the audio at <a href="http://getfirefox.com">
  54             http://getfirefox.com</a>!{%- endtrans -%}
  55         </div>
  56       </audio>
  57     </div>
  58   </div>
  59 {% endblock %}
  60
  61 {% block mediagoblin_sidebar %}
  62   <h3>{% trans %}Download{% endtrans %}</h3>
  63   <ul>
  64     {% if 'original' in media.media_files %}
  65       <li><a href="{{ request.app.public_store.file_url(
  66                        media.media_files.original) }}">{% trans %}Original file{% endtrans %}</a>
  67     {% endif %}
  68     <li><a href="{{ request.app.public_store.file_url(
  69                      media.media_files.webm_audio) }}">{% trans %}WebM file (Vorbis codec){% endtrans %}</a>
  70   </ul>
  71 {% endblock %}