JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="sMusicPlyaer" id="player2">
  <div class="upperSec">
    <div class="leftSide">
      <div class="title">Oni Ke Fekre Fardashe</div>
      <div class="artist">Amir Tataloo</div>
    </div>
    <div class="rightSide">
      <div>
        <input id="box-1" name="trigger" type="radio" checked>
        <div class="repeat"></div>
        <div class="shuffle"></div>
        <div class="volume"></div>
      </div>
      <div>
        <input id="box-2" name="trigger" type="radio">
        <div class="facebook"></div>
        <div class="twitter"></div>
        <div class="mail"></div>
      </div>
      <div>
        <input id="box-3" name="trigger" type="radio">
        <div class="apple"></div>
        <div class="amazon"></div>
        <div class="dl"></div>
        <div class="extraPurch"></div>
      </div>

    </div>
  </div>
  <div class="lowerSec">
    <div class="playButton"></div>
    <div class="seekbar">
      <div class="curT">00:00</div>
      <div class="dueT">00:00</div>
      <div class="bar">
        <div class="buffer"></div>
        <div class="played">
          <div class="handle"></div>
        </div>
      </div>
    </div>
    <div class="panel">
      <label for="box-2" class="share"></label>
      <label for="box-3" class="resource"></label>
      <label for="box-1" class="settings"></label>
    </div>
  </div>
</div>

<div class="sMusicPlyaer" id="player1">
  <div class="upperSec">
    <div class="leftSide">
      <div class="title">Oni Ke Fekre Fardashe</div>
      <div class="artist">Amir Tataloo</div>
    </div>
    <div class="rightSide">
      <div>
        <input id="box-1" name="trigger" type="radio" checked>
        <div class="repeat"></div>
        <div class="shuffle"></div>
        <div class="volume"></div>
      </div>
      <div>
        <input id="box-2" name="trigger" type="radio">
        <div class="facebook"></div>
        <div class="twitter"></div>
        <div class="mail"></div>
      </div>
      <div>
   ...

CSS

@import 'https://fonts.googleapis.com/css?family=Pathway+Gothic+One';
body {
  background: url(http://wallpapercave.com/wp/VkyGWEi.jpg) no-repeat;
  background-size: cover;
}

.sMusicPlyaer {
  background: rgba(255, 255, 255, 0.5);
  color: #000;
  width: 400px;
  height: 100px;
  font-family: 'Pathway Gothic One', sans-serif;
}

.sMusicPlyaer > .upperSec {
  width: 100%;
  height: 50px;
  border: 1px dashed rgba(0, 0, 0, 0.3);
}

.sMusicPlyaer > .lowerSec {
  height: 50px
}


/** END **/


/** UPPER SECTION **/

.sMusicPlyaer > .upperSec > div {
  height: 100%;
  float: left;
}

.sMusicPlyaer > .upperSec > .leftSide {
  width: 55%;
}

.sMusicPlyaer > .upperSec > .rightSide {
  width: 45%;
  position: relative;
}


/** END **/


/** UPPER SECTION >> LEFT SIDE **/

.sMusicPlyaer > .upperSec > .leftSide > div {
  padding-left: 5px;
}

.sMusicPlyaer > .upperSec > .leftSide > .title {
  font-size: 20px;
}

.sMusicPlyaer > .upperSec > .leftSide > .artist {
  font-size: 15px;
  padding-top: 2px;
}


/** END **/


/** UPPER SECTION >> RIGHT SIDE **/

.sMusicPlyaer > .upperSec > .rightSide > div div {
  width: 24px;
  height: 24px;
  float: right;
  margin: 13px 9px 0 0;
  background-repeat: no-repeat;
  background-position: center;
}

.sMusicPlyaer > .upperSec > .rightSide > div > .volume {
  background-image: url(https://dl.dropboxusercontent.com/u/33538012/sMusicPlayerIcon/volume24.png);
}

.sMusicPlyaer > .upperSec > .rightSide > div > .repeat {
  background-image: url(https://dl.dropboxusercontent.com/u/33538012/sMusicPlayerIcon/repeat24.png);
}

.sMusicPlyaer > .upperSec > .rightSide > div > .shuffle {
  background-image: url(https://dl.dropboxusercontent.com/u/33538012/sMusicPlayerIcon/shuffle24.png);
}

.sMusicPlyaer > .upperSec > .rightSide > div > .facebook {
  background-image: url(https://dl.dropboxusercontent.com/u/33538012/sMusicPlayerIcon/facebook24.png);
}

.sMusicPlyaer > .upperSec > .rightSide > div > .twitter {
  background-image:...

JavaScript

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

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

    this.on("click tap", playPauseBTN, function() {
        if (audio.paused) {
            audio.play();
            $('.playButton.playing').click();

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

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


    thisObj.each(function() {
        audio.src = settings.track_URL;
    })
}


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

$("#player2").MusicPlayer({
  track_URL: "https://rjmediamusic.com/media/mp3/mp3-256/Alireza-JJ-Sijal-Nassim-Ki-Khoobe-Ki-Bad-(Ft-Behzad-Leito-Sami-Low-AFX).mp3"
});

$("#player1").MusicPlayer({
  track_URL: "http://myst729.qiniudn.com/within-temptation_pale.mp3"
});