Audio player componentAvailable since EcoComposer 2.2

Audio player examples
Default SCSS values
SCSS implementation
HTML implementation

Beware! This component contains non-standardized stylesheets rules. We hope that it will be the case soon. Those are:

::-webkit-slider-runnable-track
::-webkit-slider-thumb
::-moz-range-track
::-moz-range-progress
::-moz-focus-outer
::-moz-range-thumb
::-ms-track
::-ms-fill-upper
::-ms-fill-lower
::-ms-thumb

Classical audio player examples (music from Josh Woodward) :

Crazy Glue [The Wake] from Josh Woodward

Play Pause 0:00 0:00

100 Mute Unmute

Crazy Glue [The Wake] from Josh Woodward

▶ ▌▌ 0:00 0:00

100 Mute it Unmute it

The default values are :

border : true,
title--font-weight : bold,
audio-player--background-color : 'audio-player--background-color',
audio-player--color : 'audio-player--color',
audio-player--slider--bar-background-image : 'audio-player--slider--bar-background-image',
audio-player--border : 'audio-player--border',
audio-player--buttons-color : 'audio-player--buttons-color',
audio-player--volume-slider--background-color : 'audio-player--volume-slider--background-color',
audio-player--thumb--active--background-color : 'audio-player--thumb--active--background-color',
audio-player--thumb--border : 'audio-player--thumb--border',
audio-player--thumb--border-radius : 50%,
audio-player--thumb--height : 1.5rem * theming.$font-size,
audio-player--thumb--margin-top : -7px,
audio-player--thumb--width : 1.5rem * theming.$font-size,
border-radius : 5px,
padding : 0 2rem * theming.$font-size 2rem * theming.$font-size,
print : false,
width : 41rem * theming.$font-size,
suffix : '',
themes :  (
  light : (
    default--audio-player--background-color : #fff,
    default--audio-player--border : 1px solid #444,
    default--audio-player--buttons-color : #ddd,
    default--audio-player--color : #f33,
    default--audio-player--slider--bar-background-image : linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width)),
    default--audio-player--thumb--active--background-color : #007db5,
    default--audio-player--thumb--border : 1px solid #007db5,
    default--audio-player--volume-slider--background-color : rgba(0, 125, 181, 0.6),
  ),
  dark : (
    default--audio-player--background-color : #fff,
    default--audio-player--border : 1px solid #ddd,
    default--audio-player--buttons-color : #ddd,
    default--audio-player--color : #eee,
    default--audio-player--slider--bar-background-image : linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width)),
    default--audio-player--thumb--active--background-color : #007db5,
    default--audio-player--thumb--border : 1px solid #007db5,
    default--audio-player--volume-slider--background-color : rgba(255, 255, 255, 0),
  )
)

We can implement it that way :

@include audioPlayer.init();
@include audioPlayer.create();
@include audioPlayer.create(
  (
    audio-player--thumb--border-radius : 0.3rem,
    audio-player--thumb--margin-top : -1.1rem, // 6 px + 5px(border)
    audio-player--thumb--height : 2rem,
    audio-player--thumb--width : .3rem,
    border-radius : 2rem,
    suffix : '-2',
    title--font-weight : null,
    themes : $themes
  )
);

We can implement it that way :

<div class="audio-player-2 audio-player--container flex-container suffix">
    <p class="audio-player-2 audio-player--title">
      Crazy Glue [The Wake] from
      <a href=https://www.joshwoodward.com class=audio-player--description rel="nofollow noopener">Josh Woodward</a>
    </p>
    <audio src=our/path/to/the/music class=audio-player--source preload=metadata loop data-play-state=play
           data-mute-state=unmute data-raf=null>
      Your browser does not support the <code>audio</code> element.
    </audio>

    <div class="audio-player-2 audio-player--group flex-container suffix-2">
      <label role=button for=audio-player-2-play class="ripple-2 audio-player-2 audio-player--toggle-play toggle">
        <input id=audio-player-2-play type=checkbox class="audio-player-2 toggle--checkbox"/>
        <span class="audio-player-2 audio-player--toggle--on">Play</span>
        <span class="audio-player-2 audio-player--toggle--off">Pause</span>
      </label>
      <span class="audio-player--time audio-player-2 audio-player--current-time">0:00</span>
      <input type=range class="audio-player-2 audio-player--slider audio-player--seek-slider" max=100 value=0>
      <span class="audio-player-2 audio-player--time audio-player--duration">0:00</span>
    </div>

    <div class="audio-player-2 audio-player--group flex-container suffix-2">
      <output class="audio-player-2 audio-player--volume-output">100</output>
      <input type=range class="audio-player-2 audio-player--slider audio-player--volume-slider" max=100 value=100>
      <label role=button for=audio-player-2-mute class="ripple-2 audio-player-2 audio-player--toggle-mute toggle">
        <input id=audio-player-2-mute type=checkbox class="audio-player-2 toggle--checkbox"/>
        <span class="audio-player-2 audio-player--toggle--on">Play</span>
        <span class="audio-player-2 audio-player--toggle--off">Pause</span>
      </label>
    </div>
  </div>