Audio player componentAvailable since EcoComposer 2.2

Beware! This component contains non standardized stylesheets rules. We hope that it will be the case in the near future. 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) :

The defaults 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>