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