Audio Player - Component

Code

Source (Nunjucks)

<div class="audio-player cluster">
  <img src="{{ data.thumb }}" alt="{{ data.alt }}" width="80" height="80" />
  <div class="audio-player__inner flow">
    <p>{{ data.title }}</p>
    <audio id="{{ data.id }}" class="audio-player__element" src="{{ data.audioSrc }}" controls></audio>
  </div>
</div>

Output

<div class="audio-player cluster">
  <img
    src="https://web-dev.imgix.net/image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png?auto=format"
    alt="CSS Podcast Cover"
    width="80"
    height="80"
  />
  <div class="audio-player__inner flow">
    <p>The CSS Podcast - 001: The Box Model</p>
    <audio
      id=""
      class="audio-player__element"
      src="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_001_v2.0.mp3"
      controls
    ></audio>
  </div>
</div>

Information

This pattern is a wrapper for a native <audio> element that improves some of the native styles and provides layout for a title and thumbnail.

Key links

Sass File