Simple HTML5 audio player with playlist

by Stalk

HTML

<div id="myPlayer">
  <audio id="player"></audio>
  <div class="track" data-src="http://stream-dc1.radioparadise.com/ogg-96m">
    <div class="mini_controls"><div class="playpause"></div></div>
    <h3>Radio Paradise</h3>
  </div>
  <div class="track" data-src="http://radio.goha.ru:8000/grind.fm">
    <div class="mini_controls"><div class="playpause"></div></div>
    <h3>Grind FM</h3>
  </div>
  <div class="track" data-src="http://radio.eve-play.ru:8000/ruseveradio">
    <div class="mini_controls"><div class="playpause"></div></div>
    <h3>RusEVERadio</h3>
  </div>
</div>

CSS

#myPlayer .track {
  margin: .4em;
  padding: .2em;
  background: white;
  border: solid 1px lightgray;
}
#myPlayer .track .mini_controls {
  float: left;
  margin: 12px;
}

#myPlayer .playpause {
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: 64px;
  background-position: -1px -16px;
  background-image: url(http://simpleicon.com/wp-content/uploads/play_pause.png);
}
#myPlayer .track.active  {
   background: lightyellow;
}
#myPlayer .active .playpause {
  background-position: -33px -16px;
}

JavaScript

console.clear()
var player = $('#player')[0]
player.volume = 0.4

// autoplay
$(document).ready(function(){
  var track = $('#myPlayer .track:eq(0)')
  playThisTrack(track)
})

$('#myPlayer').on('click', '.playpause', function(){
  var track = $(this).parents('.track')
  if (track.hasClass('active')) {
    track.removeClass('active')
    player.pause()
  } else {
    playThisTrack(track)
  }
})

function playThisTrack(track){
  track.addClass('active').siblings().removeClass('active');

  player.src = track.data('src')
  player.play()
}