JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.ourdeadradio.com/blog/scripts/audiojs/audio.js"></script>
<div class="player">
    <audio preload="none"></audio><a class="songtitle" href="#"></a>
</div>

<ul>
    
    <li><a href="#" data-src="http://ourdeadradio.com/blog/wp-content/uploads/astronomyy-Things-I-d-Do-For-U-1.mp3"><img src="http://ourdeadradio.com/blog/wp-content/uploads/Messages-Image1964564276.png" width="154" height="154" title="Things I'd Do For U"/></a></li>
    
    <li><a href="#" data-src="http://ourdeadradio.com/blog/wp-content/uploads/01-Amsterdam.mp3"><img src="http://ourdeadradio.com/blog/wp-content/uploads/Messages-Image702971694.png" width="154" height="154" title="Amsterdam"/></a></li>
    
    <li><a id="tunes" class="scroll" href="#wrapper" data-src="http://ourdeadradio.com/blog/wp-content/uploads/If-Youre-My-Girl-Then-Im-Your-Man-4.mp3"><img src="http://ourdeadradio.com/blog/wp-content/uploads/Messages-Image1948220941.png" width="154" height="154" title="If You're My Girl, Then I'm Your Man" class="a"/></a></li>
    
    <a class="shufflebutton" href="#">Shuffle</a>
    
</ul>

CSS

.player {
    height: 200px;
    background-color: #ccc;
}

ul li  {
    width: 154px;
    height: 154px;
    list-style-type: none;
    margin: 10px;
}

JavaScript

$(function() { 
        // Setup the player to autoplay the next track
        var a = audiojs.createAll({
          trackEnded: function() {
          	var title = $('img', this).attr("title");
		  		$("a.songtitle").text(title);
            var next = $('li.playing').next();
            if (!next.length) next = $('ul li').first();
            next.addClass('playing').siblings().removeClass('playing');
            audio.load($('a', next).attr('data-src'));
            audio.play();
          }
        });
        
        // Load in the first track       
        var audio = a[0];
            first = $('ul a').attr('data-src');
        $('ul li').first().addClass('playing');
        var title = $('img', this).attr("title");
		  	$("a.songtitle").text(title);
        audio.load(first);

        // Load in a track on click
        $('ul li').click(function(e) {
          e.preventDefault();
          var title = $('img', this).attr("title");
		  	$("a.songtitle").text(title);
          $(this).addClass('playing').siblings().removeClass('playing');
          audio.load($('a', this).attr('data-src'));
          audio.play();
        });
        // Keyboard shortcuts
        $(document).keydown(function(e) {
          var unicode = e.charCode ? e.charCode : e.keyCode;
             // right arrow
          if (unicode == 39) {
            var next = $('li.playing').next();
            if (!next.length) next = $('ul li').first();
            next.click();
            // back arrow
          } else if (unicode == 37) {
            var prev = $('li.playing').prev();
            if (!prev.length) prev = $('ul li').last();
            prev.click();
            // spacebar
          } else if (unicode == 32) {
            audio.playPause();
          }
        })
      });