JSFiddle - React, Tailwind, and code Playground

by Dave Mednick

HTML

<script src="http://www.ourdeadradio.com/preview/scripts/audiojs/audio.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div class="player">
    <audio preload="none"></audio><a class="songtitle" href="#"></a>

</div>
<article>
    <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>
    </ul>
</article>
<article>
    <ul>
        <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>
    </ul>
</article>

CSS

.player {
    height: 200px;
    background-color: #ccc;
}
article {
    width: 154px;
    height: 154px;
}
article ul li {
    list-style-type: none;
}

JavaScript

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

     // Load in the first track
     var audio = a[0];
     first = $('article > ul li a').attr('data-src');
     $('article > ul li').first();
     audio.load(first);

     // Load in a track on click
     $('article > ul li').click(function (e) {
         e.preventDefault();
         var title = $('img', this).attr("title");
         $("a.songtitle").text(title);
         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 = $('article > ul li.playing').next();
             if (!next.length) next = $('article > ul li').first();
             next.click();
             // back arrow
         } else if (unicode == 37) {
             var title = $('img', this).attr("title");
             $("a.songtitle").text(title);
             var prev = $('article > ul li.playing').prev();
             if (!prev.length) prev = $('article > ul li').last();
             prev.click();
             // spacebar
         } else if (unicode == 32) {
             audio.playPause();
         }
     })
 });