Components

Audio

An <audio> element requires an .mp3 file as its <source>. If the browser does not support the native <audio> element or .mp3 file format, the JavaScript polyfill will be loaded, in order to provide the functionality to that browser.

Single audio embed

A single embed <audio> element can be embedded within the content area or the right column.

JavaScript class: .js-mediaelementplayer

Example music sourced from: http://www.bensound.com.

<audio controls
       class="js-mediaelementplayer"
       style="width:100%;"
       width="100%">
  <source src="/kss-assets/audio/audio.mp3" type="audio/mp3">
</audio>

Audio playlist

An HTML5 <audio> playlist. The JavaScript plugin will load the first track from the playlist dynamically to the <audio> <source> element.

If however, you add the is-active class to the track, as seen in the example below, then the JavaScript plugin will load that track to the audio player instead.

The is-active class is not compulsory.

JavaScript class: .js-audio-playlist and .js-mediaelementplayer

Table Caption
Track	Mins:Secs
Acoustic breeze	2:37
Sunny	2:20
Piano moment	1:50
House	4:19
Dubstep	2:04

Example mp3 files sourced from http://www.bensound.com.

<div class="c-audio-playlist js-audio-playlist">
  <audio controls
         class="js-mediaelementplayer c-audio-playlist__audio"
         style="width:100%;"
         width="100%">
    <source src="" type="audio/mp3">
  </audio>
  <table class="c-table c-table--striped c-audio-playlist__playlist">
    <caption>Table Caption</caption>
    <tbody>
    <tr>
      <th>Track</th>
      <th style="width: 20%">Mins:Secs</th>
    </tr>
    <tr>
      <td data-th="Track"><a class="c-audio-playlist__track" href="/kss-assets/audio/audio.mp3">Acoustic breeze</a></td>
      <td data-th="Mins:Secs">2:37</td>
    </tr>
    <tr>
      <td data-th="Track"><a class="c-audio-playlist__track" href="/kss-assets/audio/02-sunny.mp3">Sunny</td>
      <td data-th="Mins:Secs">2:20</td>
    </tr>
    <tr>
      <td data-th="Track"><a class="c-audio-playlist__track" href="/kss-assets/audio/03-pianomoment.mp3">Piano moment</a></td>
      <td data-th="Mins:Secs">1:50</td>
    </tr>
    <tr>
      <td data-th="Track"><a class="c-audio-playlist__track is-active" href="/kss-assets/audio/04-house.mp3">House</a></td>
      <td data-th="Mins:Secs">4:19</td>
    </tr>
    <tr>
      <td data-th="Track"><a class="c-audio-playlist__track" href="/kss-assets/audio/05-dubstep.mp3">Dubstep</a></td>
      <td data-th="Mins:Secs">2:04</td>
    </tr>
    </tbody>
  </table>
  <div class="c-audio-playlist__caption">
    <p class="c-audio-playlist__caption-text">Example mp3 files sourced from <a href="http://www.bensound.com">http://www.bensound.com</a>.</p>
  </div>
</div>