Mikes locked sequencer

by taoist

HTML

<div id="notes">
</div>

<audio id="hat" >
  <source src="http://ie.microsoft.com/testdrive/Graphics/IEBeatz/assets/sounds/mp3/hihat.mp3" />
</audio>

<audio id="kick" >
  <source src="http://ie.microsoft.com/testdrive/Graphics/IEBeatz/assets/sounds/mp3/kickdrum.mp3" />
</audio>


<audio id="snare" >
  <source src="http://ie.microsoft.com/testdrive/Graphics/IEBeatz/assets/sounds/mp3/snare.mp3" />
</audio>

CSS

.seqdev{
    border: 1px solid black;
    font-size:30px;
    width: 100px;
    height: 100px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    text-align:center
}

JavaScript

$(function (){
    resolution=128;
    colors=['red','green','blue','orange'];
    
    Sequencer = function(notes)
    {       
         this.mcounter=0;       
         function tick()
         {
             mcounter++;
             for(var note in notes)
                 if(mcounter%(resolution/notes[note].division)==1)
                    notes[note].trigger();          
         }        
        var tickm = setInterval(tick, 600/(resolution/4));        
    }
        
    Note = function(division,audiofun){    
        this.counter = 0;
        this.division=division;
        this.audiofun=audiofun;
        this.notediv=$('<div class="seqdev" ></div>').appendTo("#notes");
        this.trigger=function(){ 
            this.counter == division ? this.counter = 1 : this.counter++;
            audiofun(this.counter);        
            this.notediv.text(this.counter);
           this.notediv.css("background-color",colors[(this.counter-1)%(colors.length+1)]);        
        }
       this.notediv.draggable();
    }  
     
    Sequencer([
         new Note(4,       
                  function(counter){counter%2==0?snare.play():kick.play();}
             ),
         new Note(8,        
                  function(counter){hat.play()}
             ),
          new Note(16,        
                  function(counter){hat.play()}
             )           
      ]);
});