panikweb_esperanzah/templates/includes/audio.html

   1 {% load soundfiles paniktags i18n %}
   2 {% if sound|is_format_available:'mp3' or sound|is_format_available:'ogg' %}
   3         <div class="audio" data-sound-id="{{ sound.id }}">
   4                 <button class="action-play"
   5                         data-player-audio="Audio-{{ sound.file.url|slugify }}"
   6                         data-player-action="playAudio"
   7                         >Écouter le podcast</button>
   8                 {% if sound|is_format_available:'ogg' %}
   9                 / <a href="{{ sound|format_url:'ogg' }}" download>Télécharger</a>
  10                 {% elif sound|is_format_available:'mp3' %}
  11                 / <a href="{{ sound|format_url:'mp3' }}" download>Télécharger</a>
  12                 {% endif %}
  13
  14                 <button class="icons icon-play-sign"
  15                         title="{% trans "Pause" %}"
  16                         data-player-audio="Audio-{{ sound.file.url|slugify }}"
  17                         data-player-action="pauseSounds"
  18                         ></button>
  19
  20         </div>
  21         {% if display_fragment_name %}
  22         <div class="fragment-name">
  23                 {{ sound.title }}
  24         </div>
  25         {% endif %}
  26         <audio
  27                 data-player='true'
  28                 class='hidden'
  29                 data-url="{% url 'episode-view' emission_slug=sound.episode.emission.slug slug=sound.episode.slug %}"
  30                 data-sound-id="{{ sound.id }}"
  31                 {% if sound.fragment and sound.title %}title="{{ sound.title }}"
  32                 {% else %}title="{{sound.episode.title}}"{% endif %}
  33                 id="Audio-{{ sound.file.url|slugify }}"
  34                 preload="{% if preload %}{{ preload }}{% else %}none{% endif %}"
  35                 controls="{% if controls %}{{ controls }}{% else %}controls{% endif%}"
  36                 >
  37                 {% if sound|is_format_available:'ogg' %}
  38                         <source src="{{ sound|format_url:'ogg' }}" type="audio/ogg">
  39                 {% endif %}
  40                 {% if sound|is_format_available:'mp3' %}
  41                         <source src="{{ sound|format_url:'mp3' }}" type="audio/mpeg">
  42                 {% endif %}
  43                 <div class="alternative padded">
  44                         <div class="info smooth">Your browser can't play audio files</div>
  45                         <strong>Download: </strong>
  46                         {% if sound|is_format_available:'ogg' %}
  47                                 <a class="icon-headphones" href="{{ sound|format_url:'ogg' }}"> ogg</a>
  48                         {% endif %}
  49                         {% if sound|is_format_available:'mp3' %}
  50                                 <a class="icon-headphones" href="{{ sound|format_url:'mp3' }}"> mp3</a>
  51                         {% endif %}
  52                 </div>
  53         </audio>
  54
  55         <div class="waveform" data-sound-id="{{ sound.id }}" data-duration="{{ sound.duration }}"
  56                 data-duration-string="{{ sound.get_duration_string }}"></div>
  57 {% else %}
  58
  59         <div class="hidden error">No sound available!</div>
  60 {% endif%}