<div class="hidden-audio" id="hidden-audio-<%= @episode.slug %>" style="display:none" data-episode="<%= @episode.slug %>" data-podcast="<%= @podcast.slug %>">
  <audio id="audio" data-episode="<%= @episode.slug %>" data-podcast="<%= @podcast.slug %>">
    <source src="<%= @episode.media_url %>" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
  <div id="progressBar" class="audio-player-display">
    <a href="/<%= @podcast.slug %>/<%= @episode.slug %>">
      <%= cl_image_tag(@episode.image_url || @podcast.image_url,
                       type: "fetch",
                       crop: "fill",
                       width: 420,
                       height: 420,
                       quality: "auto",
                       sign_url: true,
                       flags: "progressive",
                       fetch_format: "auto",
                       id: "episode-profile-image",
                       alt: @episode.title) %>
      <img id="animated-bars" src="<%= asset_path("animated-bars.gif") %>" alt="animated volume bars">
    </a>
    <span id="barPlayPause">
      <img class="butt play-butt" alt="play" src="<%= asset_path("playbutt.png") %>">
      <img class="butt pause-butt" alt="pause" src="<%= asset_path("pausebutt.png") %>">
    </span>
    <span id="volume">
      <span id="volumeindicator" class="volume-icon-wrapper showing">
        <span id="volbutt"><%= icon("volume", 16) %></span>
        <span class="range-wrapper">
          <input type="range" name="points" id="volumeslider" value="50" min="0" max="100" data-show-value="true">
        </span>
      </span>
      <span id="mutebutt" class="volume-icon-wrapper hidden"><%= icon("volume-mute", 16) %></span>
      <span class="speed" id="speed" data-speed=1>1x</span>
    </span>
    <span class="buffer-wrapper" id="bufferwrapper">
      <span id="buffer"></span>
      <span id="progress"></span>
      <span id="time">initializing...</span>
      <span id="closebutt">×</span>
    </span>
  </div>
</div>
