139<center>
<img src="dronelogo04.png" width="128" height="128" alt=""/>

<br>

<br>





<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<style>
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
  	margin: 0;
  	padding: 0;
  	border: 0;
  	font-size: 100%;
  	font: inherit;
  	vertical-align: baseline;
  }
	a
	{
		color: #98ff03;
		text-decoration: none; 
	}
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
  	display: block;
  }
  body {
  	line-height: 1;
  	background-color: black;
  }
  ol, ul {
  	list-style: none;
  }
  blockquote, q {
  	quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
  	content: '';
  	content: none;
  }
  table {
  	border-collapse: collapse;
  	border-spacing: 0;
  }
	.btn {
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: Arial;
  color: #98ff03;
  font-size: 20px;
  background: #000000;
  padding: 10px 20px 10px 20px;
  border: solid #98ff03 1px;
  text-decoration: none;
		width: 192px;
}

.btn:hover {
  background: #1e1e1e;
  text-decoration: none;
}
  .block
  {
    width: 4vw;
    height: 4vw;
    -webkit-box-shadow:inset 0px 0px 0px 2px black;
    -moz-box-shadow:inset 0px 0px 0px 2px  black;
    box-shadow:inset 0px 0px 0px 2px  black;
    display: inline-block;
    margin: 1px;
    /*border-radius: 4px;*/
    background-color:  black;
 
  }
  .track
  {
       font-size: 0;
    
  }
  .on0
  {
    /*background-color: white;*/
  }
  .on1
  {
    background-color: #98ff03;
  }
    
    .t1.on1
  {
    background-color:#98ff03;
    transition: background-color107.91366906475ms;
  }
    .t2.on1
  {
    background-color:#98ff03;
    transition: background-color 107.91366906475ms;
  }
  
    .t3.on1
  {
    background-color:#98ff03;
    transition: background-color 107.91366906475ms;
  }
  
    .t4.on1
  {
    background-color:#98ff03;
    transition: background-color 107.91366906475ms;
  }
  .lit
  {
    /*-webkit-box-shadow:inset 0px 0px 0px 2px  red;*/
    /*-moz-box-shadow:inset 0px 0px 0px 2px  red;*/
    /*box-shadow:inset 0px 0px 0px 2px red;*/
    /*background-color: red;*/
  }
  .t1.lit2
  {
    background-color: #e7ffc5;
    transition: background-color 107.91366906475ms;
  }
    .t2.lit2
  {
    background-color: #e7ffc5;
    transition: background-color 107.91366906475ms;
  }
  
    .t3.lit2
  {
    background-color: #e7ffc5;
    transition: background-color 107.91366906475ms;
  }
  
    .t4.lit2
  {
    background-color: #e7ffc5;
    transition: background-color 107.91366906475ms;
  }

  
  
</style>


<div id="containingDiv">
  <!--  <div class="timestuff">0</div>
  <div class="timestuff2">0</div>-->
<ul class="track tr1">
  <li class="block pad t1 p1 on0"></li>
  <li class="block pad t1 p2 on1"></li>
  <li class="block pad t1 p3 on0"></li>
  <li class="block pad t1 p4 on1"></li>
  <!---------------------------------->
  <li class="block pad t1 p5 on0"></li>
  <li class="block pad t1 p6 on1"></li>
  <li class="block pad t1 p7 on1"></li>
  <li class="block pad t1 p8 on0"></li>
  <!---------------------------------->
  <li class="block pad t1 p9 on1"></li>
  <li class="block pad t1 p10 on1"></li>
  <li class="block pad t1 p11 on0"></li>
  <li class="block pad t1 p12 on1"></li>
  <!---------------------------------->
  <li class="block pad t1 p13 on1"></li>
  <li class="block pad t1 p14 on1"></li>
  <li class="block pad t1 p15 on1"></li>
  <li class="block pad t1 p16 on1"></li>
  <!---------------------------------->
</ul>

<ul class="track tr2">
  <li class="block pad t2 p1 on0"></li>
  <li class="block pad t2 p2 on1"></li>
  <li class="block pad t2 p3 on0"></li>
  <li class="block pad t2 p4 on0"></li>
  <!---------------------------------->
  <li class="block pad t2 p5 on0"></li>
  <li class="block pad t2 p6 on1"></li>
  <li class="block pad t2 p7 on1"></li>
  <li class="block pad t2 p8 on1"></li>
  <!---------------------------------->
  <li class="block pad t2 p9 on0"></li>
  <li class="block pad t2 p10 on1"></li>
  <li class="block pad t2 p11 on0"></li>
  <li class="block pad t2 p12 on0"></li>
  <!---------------------------------->
  <li class="block pad t2 p13 on0"></li>
  <li class="block pad t2 p14 on1"></li>
  <li class="block pad t2 p15 on1"></li>
  <li class="block pad t2 p16 on0"></li>
  <!---------------------------------->
</ul>

<ul class="track tr3">
  <li class="block pad t3 p1 on0"></li>
  <li class="block pad t3 p2 on1"></li>
  <li class="block pad t3 p3 on1"></li>
  <li class="block pad t3 p4 on1"></li>
  <!---------------------------------->
  <li class="block pad t3 p5 on1"></li>
  <li class="block pad t3 p6 on0"></li>
  <li class="block pad t3 p7 on0"></li>
  <li class="block pad t3 p8 on0"></li>
  <!---------------------------------->
  <li class="block pad t3 p9 on0"></li>
  <li class="block pad t3 p10 on0"></li>
  <li class="block pad t3 p11 on1"></li>
  <li class="block pad t3 p12 on0"></li>
  <!---------------------------------->
  <li class="block pad t3 p13 on1"></li>
  <li class="block pad t3 p14 on1"></li>
  <li class="block pad t3 p15 on0"></li>
  <li class="block pad t3 p16 on1"></li>
  <!---------------------------------->
</ul>

<ul class="track tr4">
  <li class="block pad t4 p1 on1"></li>
  <li class="block pad t4 p2 on1"></li>
  <li class="block pad t4 p3 on1"></li>
  <li class="block pad t4 p4 on1"></li>
  <!---------------------------------->
  <li class="block pad t4 p5 on1"></li>
  <li class="block pad t4 p6 on1"></li>
  <li class="block pad t4 p7 on1"></li>
  <li class="block pad t4 p8 on1"></li>
  <!---------------------------------->
  <li class="block pad t4 p9 on0"></li>
  <li class="block pad t4 p10 on0"></li>
  <li class="block pad t4 p11 on0"></li>
  <li class="block pad t4 p12 on0"></li>
  <!---------------------------------->
  <li class="block pad t4 p13 on0"></li>
  <li class="block pad t4 p14 on1"></li>
  <li class="block pad t4 p15 on1"></li>
  <li class="block pad t4 p16 on0"></li>
  <!---------------------------------->
</ul>

</div>
<a href="."><div class="btn">
GENERATE NEW</div></a>
<a target="_blank" href="combine/139bpm_c3a57dc2.wav"><div class="btn">
DOWNLOAD</div></a>
<br><audio id="beat" autoplay controls loop>
  <source src="combine/139bpm_c3a57dc2.wav" type="audio/wav">
</audio></center>

 <script>

// Formula for finding the ms / converting bpm 1/8th notes is:

// bpm / 60 = x

// x * 1000 = ms

// $bpmnotelength = ms / 8 = 250 (if bpm was 120)

// $timedilation = $bpmnotelength / 2 //this is because the browser timeupdate only fires at 250ms intervals so you need to fire next pad estimated after first one is noticed

var audio = document.getElementById('beat');
 $(audio).on("canplay", function () {
        //alert(this.duration);
        
        // new way = we know the bpm so figuring out what a 16 note in miliseconds is based on bpm vs duration
        
        window.duration = Math.floor(this.duration*1000);
        window.l16 = Math.floor(duration / 8);
        window.l15 = Math.floor(duration / 4);
        window.l14 = Math.floor(duration / 2.666);
        window.l13 = Math.floor(duration / 2);
        window.l12 = Math.floor(duration / 1.6);
        window.l11 = Math.floor(duration / 1.333);
        window.l10 = Math.floor(duration / 1.1428);
        window.l9 = Math.floor(duration / 1);
        window.ld = Math.floor(l16 / 2);

        $(".timestuff2").text(duration + "l6 is:" + l16);
    });
//window.duration = audio.duration;
audio.addEventListener('timeupdate',function(){
window.currentTimeMs = Math.floor(audio.currentTime*1000);
$(".timestuff").text(currentTimeMs);

//console.log(duration);
//console.log(ld);


// console.log(l16);
// console.log(l15);
// console.log(l14);
// console.log(l13);
// console.log(l12);
// console.log(l11);
// console.log(l10);
// console.log(l9);

//I NEED TO ADD THAT CLASS THING SO IT DOESNT DOUBLE FIRE ON SLOW BPMS

//variable buffer
    var buffer = (l16 / 1500);
    console.log(buffer);
    if(this.currentTime > this.duration - buffer){
        this.currentTime = 0
        this.play()
        $(".pad").removeClass("bugfix");
    }


   if (currentTimeMs < l16 && currentTimeMs > 0) {

//add line here for if there first beat has no sounds to still trigger second sound bug fix

    
    
    if (!$(".p1").hasClass("bugfix")){
    
    $(".p1").addClass("lit");
    $(".pad").not(".p1").removeClass("lit"); 
    
    if ($(".p1").hasClass("on1"))
    {
      $(".p1.on1").addClass("lit2");
    $(".pad").not(".p1").removeClass("lit2"); 
    }
    
    
    setTimeout(
    function() 
    {
    $(".p2").addClass("lit");
    $(".pad").not(".p2").removeClass("lit"); 
        if ($(".p1").hasClass("on1"))
    {
      $(".p2.on1").addClass("lit2");
    $(".pad").not(".p2").removeClass("lit2"); 
    }
    }, ld);
    $(".p1").addClass("bugfix");
    }
    
}

if (currentTimeMs < l15 && currentTimeMs > l16) {
       
       if (!$(".p3").hasClass("bugfix")){
       
        $(".p3").addClass("lit");
        $(".pad").not(".p3").removeClass("lit"); 
        
            if ($(".p3").hasClass("on1"))
    {
      $(".p3.on1").addClass("lit2");
    $(".pad").not(".p3").removeClass("lit2"); 
    }
        
            setTimeout(
    function() 
    {
    $(".p4").addClass("lit");
    $(".pad").not(".p4").removeClass("lit"); 
        if ($(".p4").hasClass("on1"))
    {
      $(".p4.on1").addClass("lit2");
    $(".pad").not(".p4").removeClass("lit2"); 
    }
    }, ld);
    $(".p3").addClass("bugfix");
       }

}
        if (currentTimeMs < l14 && currentTimeMs > l15) {

       if (!$(".p5").hasClass("bugfix")){
    $(".p5").addClass("lit");
    $(".pad").not(".p5").removeClass("lit"); 
        if ($(".p5").hasClass("on1"))
    {
      $(".p5.on1").addClass("lit2");
    $(".pad").not(".p5").removeClass("lit2"); 
    }
        setTimeout(
    function() 
    {
    $(".p6").addClass("lit");
    $(".pad").not(".p6").removeClass("lit"); 
        if ($(".p6").hasClass("on1"))
    {
      $(".p6.on1").addClass("lit2");
    $(".pad").not(".p6").removeClass("lit2"); 
    }
    }, ld);
    $(".p5").addClass("bugfix");
       }
}
if (currentTimeMs < l13 && currentTimeMs > l14) {
  
  if (!$(".p7").hasClass("bugfix")){
  
  
        $(".p7").addClass("lit");
    $(".pad").not(".p7").removeClass("lit"); 
        if ($(".p7").hasClass("on1"))
    {
      $(".p7.on1").addClass("lit2");
    $(".pad").not(".p7").removeClass("lit2"); 
    }
        setTimeout(
    function() 
    {
    $(".p8").addClass("lit");
    $(".pad").not(".p8").removeClass("lit"); 
        if ($(".p8").hasClass("on1"))
    {
      $(".p8.on1").addClass("lit2");
    $(".pad").not(".p8").removeClass("lit2"); 
    }
    }, ld);
    $(".p7").addClass("bugfix");
  }

}
    if (currentTimeMs < l12 && currentTimeMs > l13) {
      
      if (!$(".p9").hasClass("bugfix")){
        $(".p9").addClass("lit");
    $(".pad").not(".p9").removeClass("lit");
        if ($(".p9").hasClass("on1"))
    {
      $(".p9.on1").addClass("lit2");
    $(".pad").not(".p9").removeClass("lit2"); 
    }
        setTimeout(
    function() 
    {
    $(".p10").addClass("lit");
    $(".pad").not(".p10").removeClass("lit"); 
        if ($(".p10").hasClass("on1"))
    {
      $(".p10.on1").addClass("lit2");
    $(".pad").not(".p10").removeClass("lit2"); 
    }
    }, ld);
  $(".p9").addClass("bugfix");
}

}
if (currentTimeMs < l11 && currentTimeMs > l12) {
  
  if (!$(".p11").hasClass("bugfix")){
  
        $(".p11").addClass("lit");
    $(".pad").not(".p11").removeClass("lit"); 
        if ($(".p11").hasClass("on1"))
    {
      $(".p11.on1").addClass("lit2");
    $(".pad").not(".p11").removeClass("lit2"); 
    }
        setTimeout(
    function() 
    {
    $(".p12").addClass("lit");
    $(".pad").not(".p12").removeClass("lit"); 
        if ($(".p12").hasClass("on1"))
    {
      $(".p12.on1").addClass("lit2");
    $(".pad").not(".p12").removeClass("lit2"); 
    }
    }, ld);
    $(".p11").addClass("bugfix");
  }

}    
if (currentTimeMs < l10 && currentTimeMs > l11) {
  
  if (!$(".p13").hasClass("bugfix")){
  
        $(".p13").addClass("lit");
    $(".pad").not(".p13").removeClass("lit"); 
        if ($(".p13").hasClass("on1"))
    {
      $(".p13.on1").addClass("lit2");
    $(".pad").not(".p13").removeClass("lit2"); 
    }
        setTimeout(
    function() 
    {
    $(".p14").addClass("lit");
    $(".pad").not(".p14").removeClass("lit"); 
        if ($(".p14").hasClass("on1"))
    {
      $(".p14.on1").addClass("lit2");
    $(".pad").not(".p14").removeClass("lit2"); 
    }
    }, ld);
    $(".p13").addClass("bugfix");
  }

}        
  if (currentTimeMs < l9 && currentTimeMs > l10) {
    
    if (!$(".p15").hasClass("bugfix")){
        $(".p15").addClass("lit");
    $(".pad").not(".p15").removeClass("lit");
        if ($(".p15").hasClass("on1"))
    {
      $(".p15.on1").addClass("lit2");
    $(".pad").not(".p15").removeClass("lit2"); 
    }
        setTimeout(
    function() 
    {
    $(".p16").addClass("lit");
    $(".pad").not(".p16").removeClass("lit"); 
        if ($(".p16").hasClass("on1"))
    {
      $(".p16.on1").addClass("lit2");
    $(".pad").not(".p16").removeClass("lit2"); 
    }
    }, ld);
$(".p15").addClass("bugfix");
}      
}
    
},false);


   
        
    </script>