JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<script src="http://jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<div id="jquery_jplayer"></div>
		<div id="jp_container">
            <a href="https://cs9-1v4.vk.me/p2/733c410fc9874e.mp3" class="track">Imagine Dragons – Round and Round</a><br />
            <a href="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3" class="track">Lismore</a><br />
            <a href="https://cs9-1v4.vk.me/p2/0f9ce3acafb0db.mp3" class="track">Imagine Dragons - Radioactive</a><br />
            
            
            <div class="demo-container">
                
                <a class="jp-play" href="#"></a>
                <a class="jp-pause" href="#">
                <a class="jp-stop" href="#"></a>
                </a>
                <div class="jp-time"><span class="jp-current-time"></span>
                    Из <span class="jp-duration"></span>
                </div>
                <a class="jp-mute" href="#"><span></span></a>
                <a class="jp-unmute" href="#"><span></span></a>
                <a class="jp-volume-bar" href="#"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></a>
                <!--<a class="jp-volume-max" href="#">Max</a>-->
                
        <span class="play-state"></span> 
        <span class="track-name">nothing</span> 
        <span class="extra-play-info transith"></span>
</div>
</div>

CSS

.demo-container {
    display:none;
    position:fixed;
    left:50%;
    width:229px;
    margin-left:-114px;
    top:10px;
    background:#fff;
	padding:0;
	font-family: "Myriad Pro Regular","Trebuchet MS";
}
.demo-container span.track-name {
    color: #CC0090;
}
.jp-play, .jp-stop, .jp-pause, .jp-mute, .jp-unmute, .arrowdown, .arrowup, .arrowleft, .arrowright, .stripes {
  width: 20px;
  height: 20px;
  border-radius: 0%;
  border: 2px solid #6179a6;
    margin-right:-1px;
    float:left;
}
/******************************************************************/
.jp-time{
    height:20px;
    width:70px;
    max-width:70px;
    line-height:20px;
    float:left;
    margin-right: 5px;
    border: 2px solid #6179a6;
    margin-left:0px;
    margin-right:-1px;
    padding:0 8px;
    font-size:12px;
}
/******************************************************************/
.jp-play:before {
  display: block;
  content: "";
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 9px solid #6179a6;
margin: 4px 0px 0px 7px;
}
/******************************************************************/
.jp-stop:before {
  background: #6179a6;
  content: "";
  display: block;
  margin: 5px 0px 0px 5px;
width: 9px;
height: 9px;
}
/******************************************************************/
.jp-pause:before {
  display: block;
  background: #6179a6;
  content: "";
  margin: 5px 0px 0px 5px;
  width: 4px;
  height: 9px;
}
.jp-pause:after {
  display: block;
  background: #6179a6;
  content: "";
  margin: -8px 0px 0px 11px;
  width: 5px;
  height: 8px;
}
/******************************************************************/
.jp-unmute:before {
    display: block;
    position: absolute;
    transform: rotate-44deg);
    content: "";
    border-right: 7px solid #6179a6;
    border-left: 7px solid transparent;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    margin: 3px 0px 0px -3px;
}
.jp-unmute:after {
   ...

JavaScript

$(document).ready(function(){

	// Local copy of jQuery selectors, for performance.
	var	my_jPlayer = $("#jquery_jplayer"),
		my_trackName = $("#jp_container .track-name"),
		my_playState = $("#jp_container .play-state"),
		my_extraPlayInfo = $("#jp_container .extra-play-info");

	// Some options
	var	opt_play_first = false, // If true, will attempt to auto-play the default track on page loads. No effect on mobile devices, like iOS.
		opt_auto_play = true, // If true, when a track is selected, it will auto-play.
        opt_text_playing = "", // Text when playing
        opt_text_selected = ""; // Text when not playing

	// A flag to capture the first track
	var first_track = true;

	// Change the time format
	$.jPlayer.timeFormat.padMin = false;
	$.jPlayer.timeFormat.padSec = false;

	// Initialize the play state text
	my_playState.text(opt_text_selected);

	// Instance jPlayer
	my_jPlayer.jPlayer({
		ready: function () {
			$("#jp_container .track-default").click();
		},
		timeupdate: function(event) {
			my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%");
		},
		play: function(event) {
			my_playState.text(opt_text_playing);
		},
		pause: function(event) {
			my_playState.text(opt_text_selected);
		},
		ended: function(event) {
			my_playState.text(opt_text_selected);
		},
		swfPath: "js",
		cssSelectorAncestor: "#jp_container",
		supplied: "mp3",
		wmode: "window"
	});

	// Create click handlers for the different tracks
	$("#jp_container .track").click(function(e) {
		my_trackName.text($(this).text());
		my_jPlayer.jPlayer("setMedia", {
			mp3: $(this).attr("href")
		});
		if((opt_play_first && first_track) || (opt_auto_play && !first_track)) {
			my_jPlayer.jPlayer("play");
		}
		first_track = false;
		$(this).blur();
		return false;
	});
    $(".track").click(function(){
    $(".demo-container").css("display", "block");
});
    $(".jp-stop").click(function(){
    $(".demo-container").css("display", "none");
});

});