JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="player" data-src="https://goo.gl/aBJE48">
  <div class="playBtn"></div>
  <div class="title">Track 1</div>
</div>

<div class="player" data-src="https://goo.gl/4arvDT">
  <div class="playBtn"></div>
  <div class="title">Track 2</div>
</div>

CSS

div.player {
  width: 200px;
  height: 50px;
  border: 1px dashed #999;
  margin: 5px;
}

div.player > .playBtn {
  background: url(https://goo.gl/xOkUZm) no-repeat;
  width: 48px;
  height: 48px;
  float: left;
}

div.player > .title {
  line-height: 50px;
  margin-left: 60px;
}

JavaScript

(function($) {

  var audio, src;
  audio = new Audio();

  $(".playBtn").on("click", function() {
  	audio.src = $(this).parent().attr("data-src");
    if (audio.paused) {
      audio.play();
      $(this).css("background", "url(https://goo.gl/w4q23U) no-repeat");
    } else {
      audio.pause();
      $(this).css("background", "url(https://goo.gl/xOkUZm) no-repeat");
    }
  })

}(jQuery));