podcast-player.html

<template>
  <style scoped>
  .podcast-player {
    display: flex;
    width:100%;
    align-items: center;
    justify-contents: space-between;
    flex-wrap: nowrap;
    font-family: sans-serif;
    font-size: 12px;
    line-height: 15px;

  }

  .podcast-player > button,
  .podcast-player > span,
  .podcast-player > progress {
    margin-right: 0.5em;
  }

  .podcast-player button:last-of-type {
    margin-right: 0;
  }

  .podcast-player progress {
    flex:1;
    cursor: pointer;
  }

  .podcast-player button {
    -webkit-appearance: none;
    font-size: 15px;
    min-width: 26px;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    background-color: transparent;
  }

  .podcast-player button svg {
    width: 0.8em;
    height: 0.8em;
  }

  /* Speed */
  .podcast-player .button-speed {
    font-size: 12px;
    min-width: 3em;
  }

  .podcast-player .button-speed:after {
    content: 'x';
  }

  /* Play/Pause */
  .button-play .pause {
    display: none;
  }
  .is-playing .button-play .pause {
    display: inline;
  }
  .is-playing .button-play .play {
    display: none;
  }
  /* Mute/Unmute */
  .button-mute .muted {
    display: none;
  }
  .is-muted .button-mute .muted {
    display: inline;
  }
  .is-muted .button-mute .unmuted {
    display: none;
  }
  </style>
  <svg style="display: none;">
    <symbol id="icon-play" viewBox="0 0 32 32">
      <path fill="currentColor" d="M4 4 L28 16 L4 28 z "></path>
    </symbol>
    <symbol id="icon-pause" viewBox="0 0 32 32">
      <path d="M4 4 H12 V28 H4 z M20 4 H28 V28 H20 z "></path>
    </symbol>
    <symbol id="icon-rewind" viewBox="0 0 32 32">
      <path d="M4 4 H8 V14 L28 4 V28 L8 18 V28 H4 z "></path>
    </symbol>
    <symbol id="icon-speaker-unmuted" viewBox="0 0 32 32">
      <path d="M2 12 L8 12 L16 6 L16 26 L8 20 L2 20 z M32 16 A16 16 0 0 1 27.25 27.375 L25.25 25.25 A13 13 0 0 0 29 16 A13 13 0 0 0 25.25 6.75 L27.25 4.625 A16 16 0 0 1 32 16 M25 16 A9 9 0 0 1 22.375 22.375 L20.25 20.25 A6 6 0 0 0 22 16 A6 6 0 0 0 20.25 11.75 L22.375 9.625 A9 9 0 0 1 25 16  "></path>
    </symbol>
    <symbol id="icon-speaker-muted" viewBox="0 0 32 32">
      <path d="M2 12 L8 12 L16 6 L16 26 L8 20 L2 20 z  "></path>
    </symbol>
  </svg>
  <audio src=""></audio>
  <div class="podcast-player">
    <button class="button-play" aria-label="Play">
      <svg class="play"><use xlink:href="#icon-play"></use></svg>
      <svg class="pause"><use xlink:href="#icon-pause"></use></svg>
    </button>
    <button class="button-rewind" aria-label="Rewind">
      <svg><use xlink:href="#icon-rewind"></use></svg>
    </button>
    <span class="currenttime time">00:00</span>
    <progress class="progress-meter" value="0"></progress>
    <span class="duration time">00:00</span>
    <button class="button-speed">1</button>
    <button class="button-mute" aria-label="Mute">
      <svg class="unmuted"><use xlink:href="#icon-speaker-unmuted"></use></svg>
      <svg class="muted"><use xlink:href="#icon-speaker-muted"></use></svg>
    </button>
  </div>
</template>
<script>
var owner = document._currentScript.ownerDocument;
var tmpl = owner.querySelector('template');
var proto = Object.create(HTMLElement.prototype);

proto.createdCallback = function() {
  var player = this;
  var clone = document.importNode(tmpl.content, true);
  player.appendChild(clone);

  // HTMLAudioElement
  var audio = player.querySelector('audio');

  // TODO: There's probably a more "{{templatey}}" way to do this.
  audio.src = player.getAttribute('src');

  // Buttons
  var play = player.querySelector('.button-play');
  var rewind = player.querySelector('.button-rewind');
  var mute = player.querySelector('.button-mute');
  var speed = player.querySelector('.button-speed');

  // Progress Meter
  var progress = player.querySelector('.progress-meter');
  var currentTime = player.querySelector('.currenttime');
  var duration = player.querySelector('.duration');

  // Speed Variables
  var speeds = [ 1, 1.5, 2, 2.5, 3 ]
  var currentSpeedIdx = 0;

  // Seconds to Timestamp
  var toHHMMSS = function ( totalsecs ) {
    var sec_num = parseInt(totalsecs, 10); // don't forget the second param
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours   < 10) {hours   = "0"+hours; }
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}

    hours = hours > 0 ? hours + ':' : '';
    minutes = minutes + ':';

    var time = hours+minutes+seconds;
    return time;
  }

  // Get total duration when available
  audio.addEventListener('loadedmetadata', function(){
    progress.setAttribute('max', Math.floor(audio.duration));
    duration.textContent  = toHHMMSS(audio.duration);
  });

  // When time updates, update progress meter and currentTime
  audio.addEventListener('timeupdate', function(){
    progress.setAttribute('value', audio.currentTime);
    currentTime.textContent  = toHHMMSS(audio.currentTime);
  });

  // Playback toggle
  play.addEventListener('click', function(){
    if(audio.paused) {
      audio.play();
    } else {
      audio.pause();
    }
    player.classList.toggle('is-playing');
  });

  // Mute toggle
  mute.addEventListener('click', function(){
    if(audio.muted) {
      audio.muted = false;
    } else {
      audio.muted = true;
    }
    player.classList.toggle('is-muted');
  });

  // Rewind player 30s
  rewind.addEventListener('click', function(){
    audio.currentTime -= 30;
  }, false);

  // Increment playbackRate by .5x
  speed.addEventListener('click', function(){
    currentSpeedIdx = currentSpeedIdx + 1 < speeds.length ? currentSpeedIdx + 1 : 0;
    audio.playbackRate = speeds[currentSpeedIdx];
    this.textContent  = speeds[currentSpeedIdx];
    return true;
  }, false);

  // Seek to audio position
  progress.addEventListener('click', function(e){
    audio.currentTime = Math.floor(audio.duration) * (e.offsetX / e.target.offsetWidth);
  }, false);

}

document.registerElement('podcast-player', { prototype: proto });
</script>