Multiple Audio Players

index.pug

// jade: compressed

ul.audio-players
  li
    .audio-player.js-audio-player
      button.audio-player__control.js-control
        .audio-player__control-icon
      h4.audio-player__title Audio Clip One
      audio(preload='auto')
        source(src='http://pd.npr.org/anon.npr-mp3/npr/codeswitch/2016/08/20160803_codeswitch_11b.mp3')
      img.audio-player__cover(src='https://unsplash.it/g/300?image=29')
      video(preload='auto', loop)
        source(src='https://dl.dropboxusercontent.com/u/5185018/audio-waves.mp4', type='video/mp4')
  li
    .audio-player.js-audio-player
      button.audio-player__control.js-control
        .audio-player__control-icon
      h3.audio-player__title Audio Clip Two
      audio(preload='auto')
        source(src='http://pd.npr.org/anon.npr-mp3/npr/ama/2016/06/20160607_ama_bandbonus.mp3')
      img.audio-player__cover(src='https://unsplash.it/g/300/?image=48')
      video(preload='auto', loop)
        source(src='https://dl.dropboxusercontent.com/u/5185018/audio-waves.mp4', type='video/mp4')
  li
    .audio-player.js-audio-player
      button.audio-player__control.js-control
        .audio-player__control-icon
      h3.audio-player__title Audio Clip Three
      audio(preload='auto')
        source(src='http://pd.npr.org/anon.npr-mp3/npr/pchh/2016/08/20160801_pchh_mtv.mp3')
      img.audio-player__cover(src='https://unsplash.it/g/300/?image=43')
      video(preload='auto', loop)
        source(src='https://dl.dropboxusercontent.com/u/5185018/audio-waves.mp4', type='video/mp4')

multiple-audio-players.markdown

Multiple Audio Players

Simple audio player with cover image and pseudo audio visualiser. Prevents multiple players from playing at the same time.

A Pen by Vaishal on CodePen.

License.

script.js

var $player = $('.js-audio-player')
  , $playbackClass = 'is-playing'
  , $fadeDuration = 500

$player.each(function(index) {
  var $this = $(this)
    , id = 'audio-player-' + index

  $this.attr('id', id)

  $this.find('.js-control')[0].addEventListener('click', function() {
    resetPlayback(id)
    playback($this, $this.find('audio'), $this.find('video'))
  })
  
  // Reset state once audio has finished playing
  $this.find('audio')[0].addEventListener('ended', function() {
    resetPlayback()
  })
})

function playback($player, $audio, $video) {
  if ($audio[0].paused) {
    $audio[0].play()
    $video[0].play()
    $audio.animate({ volume: 1 }, $fadeDuration)
    $player.addClass($playbackClass)
  } else {
    $audio.animate({ volume: 0 }, $fadeDuration, function() {
      $audio[0].pause()
      $video[0].pause()
    })
    $player.removeClass($playbackClass)
  }
}

function resetPlayback(id) {
  $player.each(function() {
    var $this = $(this)

    if ($this.attr('id') !== id) {
      $this.find('audio').animate({ volume: 0 }, $fadeDuration, function() {
        $(this)[0].pause()
        $this.find('video')[0].pause()
      })
      $this.removeClass($playbackClass)
    }
  })
}

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.stylus

$color--white = #fff
$color--purple = #7726e4
$color--grey = #1d1f20

*
*:before
*:after
  box-sizing border-box

html
body
  height 100%
  
body
  font-family sans-serif
  background $color--grey
  padding 0
  margin 0
  display flex
  justify-content center
  align-items center

img
video
  max-width 100%
  height auto

.audio-player
  position relative
  width 100%
  height 0
  text-align center
  padding-bottom 100%
  background-color $color--purple

  video
    opacity 0
    transition opacity 300ms
    will-change opacity

  &:focus
  &:hover
  &.is-playing
    .audio-player__cover
      opacity 0.35

    .audio-player__title
      opacity 1
      transform translateY(0)

    .audio-player__control-icon
      transform scale(1.15)

  &.is-playing
    .audio-player__cover
      opacity 0

    video
      opacity 1

    .audio-player__control-icon
      &:before
        transform translateY(0)

      &:after
        transform translateY(50px)

.audio-player__cover
  position absolute
  top 0
  bottom 0
  left 0
  right 0
  transition opacity 350ms
  will-change opacity

.audio-player__title
  position absolute
  color $color--white
  font-size 22px
  font-weight 500
  left 10px
  right 10px
  bottom 0
  top 50%
  padding-top 50px
  transform translateY(-5%)
  z-index 10
  opacity 0
  transition all 300ms
  will-change transform, opacity

.audio-player__control
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  width 100%
  z-index 20
  border none
  background none
  cursor pointer

  &:focus
    outline none

.audio-player__control-icon
  position absolute
  width 65px
  height 65px
  border-radius 50%
  border 3px solid $color--white
  top 0
  right 0
  bottom 0
  left 0
  margin auto
  overflow hidden
  transition all 250ms ease-out
  transform scale(1)
  will-change transform

  &::after
  &::before
    transition all 200ms
    will-change transform
    content ''
    position absolute
    top 0
    right 0
    left 0
    bottom 0
    margin auto

  &::after
    // play icon
    left 5px
    width 0
    height 0
    border-top 16px solid transparent
    border-bottom 16px solid transparent
    border-left 20px solid $color--white
    transform translateY(0)

  &::before
    // pause icon
    width 15px
    height 30px
    border-right 6px solid $color--white
    border-left 6px solid $color--white
    transform translateY(-50px)
    
.audio-players
  list-style none
  margin 0
  padding 0
  text-align center
  
  li
    display inline-block
    vertical-align top
    max-width 300px
    margin 20px