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" /><span></span></div>


<br />
<ul>
    <li>
<a class="audiostart" href="#" data-src="https://www.googledrive.com/host/0B0erCtky7eLKTE94OWZONGY1UFk/Skillet-Rise.mp3">ссылка</a>
    </li>
</ul>

CSS

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

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

JavaScript

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

$(".PlayerAudio span").click(function(){ $(".PlayerAudio").css("display", "none");});





$(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($('a', next).attr('data-src')); audio.play(); } }); var audio = a[0]; first = $('ul a').attr('data-src'); $('ul li').first().addClass('playing'); audio.load(first); $('ul li').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 == 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(); } }) });