JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="sMP" id="player1">
  <div class="playButton"></div>
  <div class="title"></div>
</div>
<div class="sMP" id="player2">
  <div class="playButton"></div>
  <div class="title"></div>
</div>
<div class="sMP" id="player3">
  <div class="playButton"></div>
  <div class="title"></div>
</div>

CSS

body {
  background: url(http://wallpapercave.com/wp/VkyGWEi.jpg) no-repeat;
  background-size: cover;
}

.sMP {
  background: rgba(255, 255, 255, 0.5);
  color: #000;
  width: 400px;
  height: 50px;
  margin: 10px;
}

.playButton {
  background: url(https://goo.gl/3w09Yh);
  background-size: 30px 30px !important;
  width: 30px;
  height: 30px;
}

.playButton.pause {
  background: url(https://goo.gl/NP5eHi);
}

.row {
  border: 1px solid black;
  margin: 5px 0 5px 0;
}

JavaScript

$.fn.MusicPlayer = function(options) {
  var settings = $.extend({
    // These are the defaults
    title: "",
    track_URL: "",
    load_playlist: ""
  }, options);
  var audio, thisObj, playPauseBTN;
  audio = new Audio();
  thisObj = this;
  playPauseBTN = $(".playButton", thisObj);

  //Statuses Evnts
  $(audio).on("playing", function() {
    togglePlying(playPauseBTN, true);
    $(playPauseBTN).addClass("pause");
  });
  $(audio).on("pause", function() {
    togglePlying(playPauseBTN, false);
    $(playPauseBTN).removeClass("pause");
  });


  thisObj.each(function() {
    audio.src = settings.track_URL;
    $(".title", thisObj).text(settings.title);

    if (settings.load_playlist == "true") {
      $(thisObj).css("height", "140px");
      $(thisObj).append("<div class='playlist'></div>");
      $(".playlist", thisObj).append("<div class='row' data-src='https://goo.gl/li592K'>music 1</div>");
      $(".playlist", thisObj).append("<div class='row' data-src='https://goo.gl/WcwuyN'>music 2</div>");
      $(".playlist", thisObj).append("<div class='row' data-src='https://goo.gl/nLhGYL'>music 3</div>");
    }
  });


  $(playPauseBTN, thisObj).on("click tap", function() {
    manageAudio();
  });

  $(".playlist > .row", thisObj).on("click tap", function() {
    audio.src = $(this).attr("data-src");
    manageAudio();
  });


  function manageAudio() {
    if (audio.paused) {
      audio.play();
      $('.playButton.playing').click();

      $(thisObj).addClass("bekhon");
      $(".sMusicPlyaer").removeClass("nakhon ");
    } else {
      audio.pause();

      $(thisObj).addClass("nakhon");
      $(".sMusicPlyaer").removeClass("bekhon");
    }
  }
}


// Utility functions
function togglePlying(aClassName, bool) {
  $(aClassName).toggleClass("playing", bool);
}

$("#player1").MusicPlayer({
  title: "title 1",
  track_URL:...