JSFiddle - React, Tailwind, and code Playground

HTML

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



<br />
<br />
<div class="music">
    <div class="track-1">
        <a class="audiostart" href="#" data-src="https://dl.dropboxusercontent.com/s/xx0yghfmsq0dhky/Skillet%20-%20Rise.mp3?token_hash=AAEhk-UQeb7lEkRqstFiAQXnOq7WEFafaLASLlY8OyPEkA&dl=1">rise</a>
    </div>
</div>
<div class="music">
    <div class="track-1">
        <a class="audiostart" href="#" data-src=" https://dl.dropboxusercontent.com/s/bf3pyogi3heqriu/The%20Glitch%20Mob%20-%20Warrior%20Concerto.mp3?token_hash=AAEa-i9-i4I-_J3O-vioN-mV96ZUZR-ZhUMPEl1si8rRIg&dl=1">Warrior Concerto</a>
    </div>
</div>
<div class="music">
    <div class="track-1">
        <a class="audiostart" href="#" data-src="http://s3.amazonaws.com/audiojs/02-juicy-r.mp3">track</a>
    </div>
</div>

CSS

*{margin:0;padding:0;}
/*плеер*/

.PlayerAudio {
    display: none;
    position: fixed;
    top: 45px;
    left: 50%;
    margin-left: -200px;
}

.PlayerAudio span {
    display: none;
    position: absolute;
    right: -18px;
    top: 0px;
    height: 14px;
    width: 14px;
    border: 2px solid #5a5a5a;
    border-radius: 0%;
    background: #5a5a5a;
}

.PlayerAudio span:before {
    margin: 6px 0 0 2px;
    content: "";
    -webkit-transform: rotate(45deg);
    width: 10px;
    border-radius: 4px;
    height: 2px;
    background: #ddd;
    position: absolute;
}

.PlayerAudio span:after {
    margin: 6px 0 0 2px;
    content: "";
    -webkit-transform: rotate(135deg);
    width: 10px;
    border-radius: 4px;
    height: 2px;
    background: #ddd;
    position: absolute;
}

.music{margin:50px auto;}

.music a{text-decoration:none;color: rgb(0,80,200);border:1px solid #ddd;padding:5px 10px;float:left;}

.music a:hover{background:rgba(0,0,0,0.1);}

JavaScript

$(function () {
    var a = audiojs.createAll({
        trackEnded: function () {
            var next = $('.music div.playing').next();
            if (!next.length) next = $('.music div').first();
            next.addClass('playing').siblings().removeClass('playing');
            audio.load($('a', next).attr('data-src'));
            audio.play();
        }
    });
    var audio = a[0];
    first = $('.music a').attr('data-src');
    $('.music div').first().addClass('playing');
    audio.load(first);
    $('.music div').click(function (e) {
        e.preventDefault();
        $(this).addClass('playing').siblings().removeClass('playing');
        audio.load($('a', this).attr('data-src'));
        audio.play();
    });
    $(document).keydown(function (e) {
        var unicode = e.charCode ? e.charCode : e.keyCode;
        if (unicode == 40) { //Rightarrow
            var next = $('a.playing').next();
            if (!next.length) next = $('.music div').first();
            next.click();
        } else if (unicode == 38) { //Leftarrow
            var prev = $('a.playing').prev();
            if (!prev.length) prev = $('.music div').last();
            prev.click();
        } else if (unicode == 32) { //Space [(Uparrow-38,Dnarrow-40)]
            audio.playPause();
        }
    })
$(function () {
    $(".audiostart").click(function () {
        $(".audiojs,.PlayerAudio span").css("display", "block");
        $('.PlayerAudio').show();
    });
    $(".PlayerAudio span").click(function () {
        var myAudio = $(".PlayerAudio audio").get(0);
        myAudio.pause();
        myAudio.currentTime = 0;
        $(this).parent('.PlayerAudio').hide();
    });
})
});