JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<script src="https://www.googledrive.com/host/0B0erCtky7eLKTE94OWZONGY1UFk/audio.min.js"></script>
<div class="PlayerAudio"><audio preload="none" ></audio><span></span></div>

<br />
<ul>
    <li>
<u data-audio-link="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</u>
    </li>
    <li>
<u data-audio-link="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">its-all-about-the-crystalizabeths</u>
    </li>
    <li>
        asdasdasd
    </li>
    <li>
<u data-audio-link="http://kolber.github.io/audiojs/demos/mp3/06-suicidal-fantasy.mp3">suicidal-fantasy</u>
    </li>
</ul>

CSS

.playing{color:red;}
.PlayerAudio{position:fixed;top:5px;left:50%;margin-left:-200px;}

.PlayerAudio span{
	display:none;
	position:absolute;
	right:-18px;
	top:0px;
  height:14px;
  width:12px;
  border:2px solid #5a5a5a;
border-radius:0%;
background:#5a5a5a}
.PlayerAudio span:before {
  margin:6px 0 0 1px;
  content: "";
  -webkit-transform: rotate(45deg);
  width: 10px;
  border-radius: 4px;
  height: 2px;
  background: #ddd;
  position: absolute;
}
.PlayerAudio span:after {
  margin:6px 0 0 1px;
  content: "";
  -webkit-transform: rotate(135deg);
  width: 10px;
  border-radius: 4px;
  height: 2px;
  background: #ddd;
  position: absolute;
}

JavaScript

$("ul li u").click(function(){ $(".audiojs,.PlayerAudio span").css("display", "block");});

$(".PlayerAudio span").click(function(){ $(".PlayerAudio").remove();});


$(function() {
    var a = audiojs.createAll({
        trackEnded: function() { 
            var next = $('ul li.playing').next(); 
            if (!next.length) next = $('ul li').first(); 
            next.addClass('playing').siblings().removeClass('playing'); 
            audio.load($('u', next).attr('data-audio-link')); 
            audio.play(); 
        } 
     });
    var audio = a[0]; 
    first = $('ul u').attr('data-audio-link'); 
    //$('ul li').first().addClass('playing'); 
    audio.load(first); 
    $('ul li').click(function(e) { 
        e.preventDefault(); 
        $(this).addClass('playing').siblings().removeClass('playing'); 
        audio.load($('u', this).attr('data-audio-link')); 
        audio.play(); 
    }); 
    $(document).keydown(function(e) { 
        var unicode = e.charCode ? e.charCode : e.keyCode; if (unicode == 39) { 
            var next = $('li.playing').next(); 
            if (!next.length) next = $('ul li').first(); 
            next.click(); } else if (unicode == 37) { 
                var prev = $('li.playing').prev(); 
                if (!prev.length) prev = $('ul li').last(); 
                prev.click(); } else if (unicode == 32) {
                    audio.playPause(); 
                } 
    }) 
});