audio-player.html

<style>
  
  .sr-only {
    position: absolute;
    left: -10000px;
    height: 1px;
    width: 1px;
  }

  :host {
    position: relative;
    font-family: var(--ui-font);
    background: var(--accent);
    padding: 16px;
    border-top: 2px solid var(--background);
    animation: player-enter .3s ease;
  }

  .container {
    overflow: hidden;
  }

  .metadata {
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    min-height: 0;

    @media (min-aspect-ratio: 1) {
      display: grid;
      grid-template-rows: auto min-content;
      justify-content: space-between;
      padding-bottom: 0;
    }

    & img {
      background: gray;
      width: 64px;
      height: 64px;
      object-fit: cover;
      display: block;
      min-height: 0;
      overflow: hidden;

      @media (min-aspect-ratio: 1) {
        width: 100%;
        height: 100%;
      }
    }

    .titles {
      flex: 1;
      min-width: 0;
      padding-left: 8px;
      @media (min-aspect-ratio: 1) {
        padding: 8px 0;
      }
    }

    & img:not([src]), & img[src=""] {
      display: none;
    }
  }

  .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 8px;
  }

  .feed.title {
    font-size: 80%;
  }

  .track {
    @media (min-aspect-ratio: 1 / 1) {
      grid-area: track;
      width: 100%;
    }

    .row {
      display: flex;
      align-items: center;
    }
  }

  .progress-container {
    height: 24px;
    background: var(--background);
    position: relative;
    flex: 1;
  }

  .progress {
    pointer-events: none;
    background: var(--foreground);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }

  hr {
    margin: 0 16px;
    border: 1px solid var(--background);
    align-self: stretch;
  }

  .time {
    font-size: .8rem;
    font-family: var(--monospace-font);

    & span {
      display: block;
    }
  }

  .controls {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: auto;
    padding-top: 12px;

    @media (min-aspect-ratio: 1 / 1) {
      grid-area: controls;
      width: 100%;
      padding-top: 0;
    }

    & button {
      display: block;
      padding: 12px 4px;
      background: var(--shaded);
      border-color: var(--background);
      border-width: 1px;
      border-style: solid;
      flex: 1;
      text-align: center;
      color: var(--foreground);
      font-size: 1.2rem;
      box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .4);
      margin: 0 3px;
    }

    .left {
      margin-left: 0;
    }

    .right {
      margin-right: 0;
    }

    & hr {
      margin: 0 3px;
    }

    .stop {
      margin-left: 40px;
      font-size: 1.5rem;
    }

    .play {
      flex: 2;

      &[data-state="paused"] .play.icon {
        display: block;
      }

      &[data-state="playing"] .pause.icon {
        display: block;
      }

      &[data-state="seeking"] .seek.icon {
        display: block;
      }
    }

    & svg {
      display: block;
      margin: auto;

      .icon {
        display: none;
      }
    }
  }

  :host(.playable) .controls button {
    background: var(--background);
  }

  :host(.disabled) {
    display: none;
    --accent: var(--border);
  }

  :host(.disabled) .controls, :host(.disabled) .progress-container {
    pointer-events: none;
    opacity: .5;
  }

  @keyframes player-enter {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @media (min-aspect-ratio: 1/1) {
    .container {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto 40px 60px;
      grid-template-areas:
        "meta"
        "track"
        "controls";
      justify-items: stretch;
      align-items: stretch;
      gap: 8px;
      height: 100%;
    }
  }
</style>
<div class="container">
  <div class="metadata">
    <img as="artwork" alt="">
    <div class="titles">
      <div class="feed title" as="title"></div>
      <div class="episode title" as="episode"></div>
    </div>
  </div>

  <div class="track">
    <div class="row">
      <div class="progress-container" as="scrubber">
        <div class="progress" as="progress"></div>
      </div>

      <hr>

      <div class="time">
        <div>
          <span class="sr-only">Current</span>
          <span as="current">0:00:00</span>
        </div>
        <div>
          <span class="sr-only">Total</span>
          <span as="duration">0:00:00</span>
        </div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button as="rewind" class="rewind left" aria-label="Skip back">
      <span>-A</span>
    </button>

    <button as="play" class="play" aria-label="Play" data-state="seeking">
      <svg role="img" alt="" width="32" height="32" viewBox="0 0 32 32" preserveAspectRatio="none">
        <path class="play icon" d="M8,4 L28,16 L8,28 Z" fill="currentColor" />
        <g class="pause icon">
          <line x1="10" x2="10" y1="4" y2="28" stroke="currentColor" stroke-width="5" />
          <line x1="22" x2="22" y1="4" y2="28" stroke="currentColor" stroke-width="5" />
        </g>
        <g class="seek icon">
          <circle cx="4" cy="16" r="4" fill="currentColor" />
          <circle cx="16" cy="16" r="4" fill="currentColor" />
          <circle cx="28" cy="16" r="4" fill="currentColor" />
        </g>
      </svg>
    </button>

    <button as="skip" class="skip right" aria-label="Skip ahead">
      <span>+A</span>
    </button>
    
    <button as="stop" class="stop round" aria-label="Stop">
      <svg width="16" height="16">
        <path stroke="currentColor" fill="none" d="M0,0 L16,16 M0,16 L16,0" stroke-width="2" />
      </svg>
    </button>
  </div>
</div>