JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio row" style="color: #FFFFFF;">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-progress" style="height: 3px; position: relative;">
<span class="jp-current-time" style="bottom: -.5em;position: absolute;background: blue;left: 1em;font-size: .8em;z-index: 1;padding: 0 .5em;border-radius: .5em;">00:12</span>
<span class="jp-duration" style="bottom: -.5em;position: absolute;background: blue;right: 1em;font-size: .8em;z-index: 1;padding: 0 .5em;border-radius: .5em;">04:11</span>
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<img class="jp_poster_0 img-responsive img-rounded pull-left" src="http://placehold.it/64x64">
<div class="col-xs-8">
<div class="jp-artist"></div>
<div class="jp-title"></div>
</div>
</div>
<div class="clearfix visible-xs"></div>
<div class="jp-controls col-xs-12 col-sm-5 fa-3x">
<div class="btn-group btn-group-justified">
<a href="javascript:;" class="btn btn-link jp-repeat"><i class="fa fa-refresh fa-2x"></i></a>
<a href="javascript:;" class="btn btn-link jp-repeat-off"><i class="fa fa-refresh fa-2x"></i></a>
<a href="javascript:;" class="btn btn-link jp-next"><i class="fa fa-fast-backward fa-2x"></i></a>
<a href="javascript:;" class="btn btn-link jp-play"><i class="fa fa-play fa-3x"></i></a>
<a href="javascript:;" class="btn...
JavaScript
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
supplied: "m4a, oga"
});
});