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