JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="playlist">
    <li><a href="http://freshly-ground.com/data/audio/sm2/20060924%20-%20Ghosts%20&%20Goblins%20Reconstructed.ogg"></a>
        Title - Artist - Tags - Anything
    </li>
    <li><a href="http://freshly-ground.com/data/audio/sm2/20060924%20-%20Ghosts%20&%20Goblins%20Reconstructed.ogg"></a>
        <a href="http://google.com">Title - Artist - Tags - Anything</a>
    </li>
</ul>

<div class="inactive-player">Title - Artist - Tags - Anything <div class="time">0:00/3:24</div> <div class="bar"><div class="pos"></div></div></div>

<div class="active-player">Title - Artist - Tags - Anything <div class="time">0:00/3:24</div> <div class="bar"><div class="pos"></div></div></div>

<div class="paused-player">Title - Artist - Tags - Anything <div class="time">0:00/3:24</div> <div class="bar"><div class="pos"></div></div></div>

<div class="inactive-player">Title - Artist - Tags - Anything <div class="time">0:00/3:24</div> <div class="bar"><div class="pos"></div></div></div>

<div class="inactive-player">Title - Artist - Tags - Anything <div class="time">0:00/3:24</div> <div class="bar"><div class="pos"></div></div></div>

CSS

body{ background-color: blue; }

.inactive-player .bar, .inactive-player .time{
    display: none
}

.active-player, .paused-player, .inactive-player{
    background-color: black;
    color:green;
width: 100%;
}

.paused-player{
    color: gray;
}

.active-player .bar, .paused-player .bar{
    border: 2px solid white;
    width: 99%;
}
.active-player .pos, .paused-player .pos{
    height: 10px;
    width: 100px;
    background-color: gray;
}

.active-player .time , .paused-player .time{
    display: inline;
    border: 1px solid yellow;
 -moz-border-radius:4px;
 -khtml-border-radius:4px;
 border-radius:4px;
}


ul.playlist li {
 /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
 position:relative;
 display:block;
 width:auto;
 font-size:1em;
 color:#666;
 border:none;
}



ul.playlist li a {
 text-decoration:none;
 font-weight:normal;
 outline:none;
 z-index:2;
}

.playlist .link{
    padding-left: 16px;
background: url('http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/image/icon_play.png') no-repeat 0 center;
    //background-image:url('http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/image/icon_play.png' no-repeat );
}

.active-player .link{
background: url('http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/image/icon_pause.png') no-repeat 0 center;
}

JavaScript

var active_player=0;

$('.playlist>li').each(function(i,v){
    var h = $(v).html();
    $(v).html('<div class="inactive-player">'+h+'<div class="time">0:00/?:??</div><div class="bar"><div class="pos"></div></div></div>');
    var link = $(v).find('a').first();
    link.attr('class', 'link');    
});

$('.playlist .bar').click(function(e){
    e.stopPropagation()
});

$('.playlist >li> div').click(function(){
    if(active_player==this){
        if($(this).attr('class')=='active-player')
        {
            $(this).attr('class', 'paused-player');
            return;
        }
    }
    else if(active_player!=0)
    {
        $(active_player).attr('class', 'inactive-player');
    }
    $(this).attr('class', 'active-player');
    active_player=this;
});


var ff = function(e){
    //if(e.button==0) return;
    //$('.time').html(e.button);
    var o = this;
    alert($(this).attr('class') + " " + e.clientX + " " + o.offsetLeft + " " + o.clientLeft);
    var l = (e.clientX-o.offsetLeft)-o.clientLeft;
    l = Math.max(0, Math.min(l, o.clientWidth));
    $('.pos').css('width', l);
};

//$('.bar').click(ff);
//$('.load').bind('mousemove', ff);
$('.bar').bind('mouseup', ff);
//$('.load').bind('mousedown', ff);