JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<audio id="player1" controls="controls">
        <source src="https://www.tutorialrepublic.com/examples/audio/birds.mp3" type="audio/mpeg">
        <source src="https://www.tutorialrepublic.com/examples/audio/birds.ogg" type="audio/ogg">
        Your browser does not support the HTML5 audio element.
        </audio>

CSS

.podcaster{
  display:inline-block;
  background-color:#999;
  color:#fff;
  width:200px;
  height:200px;
  position:relative;
  background-size:cover;
  background-position:center center;
}
.podcaster button{
  position:absolute;
  cursor: pointer;
  transition:all 0.4s;
  opacity:1;
  color:#fff;
  font-weight:bold;
  outline:none !important;
}
.podcaster .podcaster-progress{
  height:4px;
  left:10%;
  bottom:10%;
  right:10%;
  background-color:#fff;
  position:absolute;
  border-radius:2px;
}
.podcaster .podcaster-progress .podcaster-progresshandle{
  height:20px;
  width:20px;
  left:0%;
  margin-top:-8px;
  margin-left:-10px;
  background-color:#fff;
  position:absolute !important;
  border-radius:10px;
}
.podcaster .podcaster-progress .podcaster-progresshandle:hover{
  background-color:#ccc;
}
.podcaster button:hover{
  opacity:0.4;
}
.podcaster .podcaster-back{
  width:46px;
  height:46px;
  left:5%;
  top:50%;
  margin-top:-23px;
  background-color:transparent;
  border:none;
  background-size:cover;
 ...

JavaScript

function audioPlayer(jelement,options){

	// configure player
  
  var width = 180;
  var height = 180;
  var backgroundColor = '#ffcc88';
  var backgroundImage = '';
  var autoplay = false;
  var label = 'Caption Here';
  
  var seeking = false;
  
  if(options){
  
  	if(options.width){ width = options.width; }
    if(options.height){ height = options.height; }
    if(options.backgroundColor){ backgroundColor = options.backgroundColor; }
    if(options.backgroundImage){ backgroundImage = options.backgroundImage; }
  	if(options.autoplay){ autoplay = options.autoplay; }
    if(options.label){ label = options.label; }
  
  }
  
	// hide the element controls if they exist

	jelement.prop('controls',false);
  jelement.prop('autoplay',false);
  
  this.player = $('<div class="podcaster"><button class="podcaster-back">30</button><button class="podcaster-forward">30</button><button class="podcaster-play"></button><label>' + label + '</label><div class="podcaster-progress"><span class="podcaster-progresshandle"></span></div></div>');
  
  this.player.css('width',width+'px');
  this.player.css('height',height+'px');
  this.player.css('background-color',backgroundColor);
  
  if(backgroundImage){
  
  	this.player.css('background-image','url(' + backgroundImage + ')');
  
  }
  
  jelement[0].isPlaying = autoplay;
  
  var cached_this = this;
  
  var progress = this.player.find('.podcaster-progress .podcaster-progresshandle');
  
  var interval = setInterval(function(){
  
  	if(seeking){ return false; }
  	// get percentage completed
    
    var percentage = (jelement[0].currentTime/jelement[0].duration)*100;
    
    progress.css('left',percentage+'%');
  
  },100);
  
  jelement[0].onended = function(){
  
  	jelement[0].isPlaying = false;
    cached_this.player.removeClass('paused');
  	
  }
  
  
  
  progress.draggable({
    axis: "x",
    containment: "parent",
    start: function( event, ui ) {
    
    seeking = true;
    
    },
    drag: function( event, ui...