JSFiddle - React, Tailwind, and code Playground

by shatul patil

HTML

<script src="http://www.jplayer.org/latest/js/jplayer.playlist.min.js"></script>
<script src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<div id="jp_container_1">
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div class="jp-gui ui-widget ui-widget-content ui-corner-all">
        <ul>
            <li class="jp-play ui-state-default ui-corner-all"><a href="javascript:;" class="jp-play ui-icon ui-icon-play" tabindex="1"
                title="play">play</a>
            </li>
            <li class="jp-pause ui-state-default ui-corner-all"><a href="javascript:;" class="jp-pause ui-icon ui-icon-pause" tabindex="1"
                title="pause">pause</a>
            </li>
            <li class="jp-stop ui-state-default ui-corner-all"><a href="javascript:;" class="jp-stop ui-icon ui-icon-stop" tabindex="1"
                title="stop">stop</a>
            </li>
            <li class="jp-repeat ui-state-default ui-corner-all"><a href="javascript:;" class="jp-repeat ui-icon ui-icon-refresh" tabindex="1"
                title="repeat">repeat</a>
            </li>
            <li class="jp-repeat-off ui-state-default ui-state-active ui-corner-all"><a href="javascript:;" class="jp-repeat-off ui-icon ui-icon-refresh" tabindex="1"
                title="repeat off">repeat off</a>
            </li>
            <li class="jp-mute ui-state-default ui-corner-all"><a href="javascript:;" class="jp-mute ui-icon ui-icon-volume-off" tabindex="1"
                title="mute">mute</a>
            </li>
            <li class="jp-unmute ui-state-default ui-state-active ui-corner-all"><a href="javascript:;" class="jp-unmute ui-icon ui-icon-volume-off" tabindex="1"
                title="unmute">unmute</a>
            </li>
            <li class="jp-volume-max ui-state-default ui-corner-all"><a href="javascript:;" class="jp-volume-max ui-icon ui-icon-volume-on"
                tabindex="1" title="max volume">max volume</a>
            </li>
        </ul>
...

CSS

.jp-gui {
    position:relative;
    padding:20px;
    width:628px;
}
.jp-gui.jp-no-volume {
    width:432px;
}
.jp-gui ul {
    margin:0;
    padding:0;
}
.jp-gui ul li {
    position:relative;
    float:left;
    list-style:none;
    margin:2px;
    padding:4px 0;
    cursor:pointer;
}
.jp-gui ul li a {
    margin:0 4px;
}
.jp-gui li.jp-repeat, .jp-gui li.jp-repeat-off {
    margin-left:344px;
}
.jp-gui li.jp-mute, .jp-gui li.jp-unmute {
    margin-left:20px;
}
.jp-gui li.jp-volume-max {
    margin-left:120px;
}
li.jp-pause, li.jp-repeat-off, li.jp-unmute, .jp-no-solution {
    display:none;
}
.jp-progress-slider {
    position:absolute;
    top:28px;
    left:100px;
    width:300px;
}
.jp-progress-slider .ui-slider-handle {
    cursor:pointer;
}
.jp-volume-slider {
    position:absolute;
    top:31px;
    left:508px;
    width:100px;
    height:.4em;
}
.jp-volume-slider .ui-slider-handle {
    height:.8em;
    width:.8em;
    cursor:pointer;
}
.jp-gui.jp-no-volume .jp-volume-slider {
    display:none;
}
.jp-current-time, .jp-duration {
    position:absolute;
    top:42px;
    font-size:0.8em;
    cursor:default;
}
.jp-current-time {
    left:100px;
}
.jp-duration {
    right:266px;
}
.jp-gui.jp-no-volume .jp-duration {
    right:70px;
}
.jp-clearboth {
    clear:both;
}

JavaScript

var playlist =
		[{
			title:"Tempered Song",
			mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
			oga:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.ogg",
		},
		{
			title:"Your Face",
			mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
			oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
		}];
		
	var myPlayer = $("#jquery_jplayer_1");
	var 
	jpAncestor = "#jp_container_1",
	myPlayerData,
	fixFlash_mp4, // Flag: The m4a and m4v Flash player gives some old currentTime values when changed.
	fixFlash_mp4_id, // Timeout ID used with fixFlash_mp4
	ignore_timeupdate, // Flag used with fixFlash_mp4
	myControl;

	// Instantiate the jPlayer playlist object, using the Soundcloud playlist array   
	new jPlayerPlaylist({
		jPlayer: myPlayer,
		cssSelectorAncestor: jpAncestor
	}, 
	playlist
	,
	{
		playlistOptions: {
			autoPlay: false,
			loopOnPrevious: true // For restarting the playlist after the last track
		},
		ready: function (event) {
			// Hide the volume slider on mobile browsers. ie., They have no effect.
			if (event.jPlayer.status.noVolume) {
				// Add a class and then CSS rules deal with it.
				$(".jp-gui").addClass("jp-no-volume");
			}
			// Determine if Flash is being used and the mp4 media type is supplied. BTW, Supplying both mp3 and mp4 is pointless.
			fixFlash_mp4 = event.jPlayer.flash.used && /m4a|m4v/.test(event.jPlayer.options.supplied);
		},
		timeupdate: function (event) {
			if (!ignore_timeupdate) {
				$(jpAncestor + " .jp-progress-slider").slider("value", event.jPlayer.status.currentPercentAbsolute);
			}
		},
		volumechange: function (event) {
			if (event.jPlayer.options.muted) {
				$(jpAncestor + " .jp-volume-slider").slider("value", 0);
			} else {
				$(jpAncestor + " .jp-volume-slider").slider("value", event.jPlayer.options.volume);
			}
		},
		loop: true, // Also for restarting the playlist after the last track
		swfPath: "../js",
		supplied: "mp3, m4a, oga",
		smoothPlayBar:...