Simple MP3 jPlayer image overlay

Uses an overlaid image (play and stop icons). Will jump to new track on click. Good for dynamically loaded content.

by replicateur

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
</div>

CSS

.container {
  width: 150px;
  height: 150px;
  background: url(https://s-media-cache-ak0.pinimg.com/originals/90/80/60/9080607321ab98fa3e70dd24b2513a20.gif);
  background-size: 150px 112.5px;
  background-repeat: no-repeat;
  background-position: center;
}