JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.51/wavesurfer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.51/plugin/wavesurfer.regions.min.js"></script>
<div id="wave">
</div>

<div id="drop">
</div>

<input type="number" id="zom"/>

CSS

#drop
{
  width:200px;
  height:80px;
  background:#202020;
}

#wave
{
  width:500px;
}

JavaScript

var drop = document.getElementById('drop');

var wav  = Object.create(WaveSurfer);

var zom = document.getElementById('zom');

var region = ;

zom.addEventListener('keyup',function(e){
	console.log(this.value);
  wav.zoom(Number(this.value));

});

wav.init({
	container : '#wave',
  waveColor:'black',
  progressColor : 'deepskyblue',
  minPxPerSec : 100,
  scrollParent : true

});

wav.on('ready',function(){
	wav.play();
});

wav.on('click',function(e){
	
  if(!onRegion())
  {
  	wav.clearRegions();
  }

})

if (wav.enableDragSelection) {
        wav.enableDragSelection({
            color: 'rgba(0, 255, 0, 0.8)'
        });
    };
    
    
wav.on('region-created',function(r){
 console.log(r);
	wav.clearRegions();
	r.loop= true;
  
  region = r;

});



wav.on('zoom',function(e){
	console.log('scroll');
  console.log(e);
  
  
});


drop.ondrop = function(e){
		wav.loadBlob(e.dataTransfer.files[0]);
    
    
	return false;   

};

drop.ondragover = function(){return false};