HTML5 experiments

  • Started
  • Last post
  • 21 Responses
  • prophetone0

    ================================...
    909.js
    ================================...

    $(document).ready(function(){
    lowLag.init({'urlPrefix':''});
    lowLag.load(['kick.wav'],'kick...
    lowLag.load(['909snare.wav'],'sn...
    lowLag.load(['909hat.wav'],'hatC...
    lowLag.load(['909hat2.wav'],'hat...
    lowLag.load(['909ltom.wav'],'low...
    lowLag.load(['909mtom.wav'],'mid...
    lowLag.load(['909hitom.wav'],'hi...
    lowLag.load(['909clap.wav'],'cla...
    lowLag.load(['909crash.wav'],'cr...
    lowLag.load(['909ride.wav'],'rid...
    lowLag.load(['909rim.wav'],'rim...
    function kick() {lowLag.play('kick');}
    function snare() {lowLag.play('snare');}
    function hatCl() {lowLag.play('hatCl');}
    function hatOp() {lowLag.play('hatOp');}
    function low() {lowLag.play('low');}
    function mid() {lowLag.play('mid');}
    function high() {lowLag.play('high');}
    function clap() {lowLag.play('clap');}
    function crash() {lowLag.play('crash');}
    function ride() {lowLag.play('ride');}
    function rim() {lowLag.play('rim');}
    var kkseq = [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0...
    var snseq = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0...
    var hcseq = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0...
    var hoseq = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0...
    var loseq = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0...
    var mdseq = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0...
    var hiseq = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0...
    var cpseq = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0...
    var crseq = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0...
    var rdseq = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0...
    var rmseq = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0...
    n=0;
    function beat() {
    if(n<15) {
    n++
    }
    else {n=0;}

    if (kkseq[n]===1) {
    kick();
    }
    else {}
    if (snseq[n]===1) {
    snare();
    }
    else {}
    if (hcseq[n]===1) {
    hatCl();
    }
    else {}
    if (hoseq[n]===1) {
    hatOp();
    }
    else {}
    if (loseq[n]===1) {
    low();
    }
    else {}
    if (mdseq[n]===1) {
    mid();
    }
    else {}
    if (hiseq[n]===1) {
    high();
    }
    else {}
    if (cpseq[n]===1) {
    clap();
    }
    else {}
    if (crseq[n]===1) {
    crash();
    }
    else {}
    if (rdseq[n]===1) {
    ride();
    }
    else {}
    if (rmseq[n]===1) {
    rim();
    }
    else {}
    $('.p'+n.toString()).addClass('stepActive');
    $('.p'+(n-1).toString()).removeClass('stepActive');
    }

    var drums = [kkseq,snseq,hcseq,hoseq,loseq,mdseq,hiseq,cpseq,rmseq,rdseq,crseq]
    var selected = kkseq;

    $('.drumSelect').click(function(){
    $('.active').removeClass('active');
    var x = $(this).text();
    selected = drums[x];
    $(this).addClass('active');
    $('#box').attr('class','b'+x);
    });

    //change the patterns!!!!!!!
    $('.pattern').click(function(){
    var n = $(this).text();
    if (selected[n] === 0) {
    selected[n]=1;
    }
    else {
    selected[n] = 0;
    }
    var active = $('#box').attr('class');
    $(this).toggleClass('pattern'+active);
    });

    var tempo = ((60/120)/4)*1000;

    var seq
    var playback = 0;
    $('#start').click( function(){
    if (playback<1) {
    seq=self.setInterval(function...
    }

    else {}
    playback+=10;
    });

    var deg;
    var rotate;
    var drag = false;
    var newDeg;
    var noBug = false;
    $('.tempo').mousedown(function(event){
    $(this).addClass('bigger');
    drag = true;
    rotate = $('#dial').attr('style').replace(/[^-\d\.]/g, '');
    rotate.replace(/-/g,' ');
    var deg = Number(rotate.substring(2,rotate.length/2));
    var startY = event.pageY;
    var temp = $('#indicator').text();
    $('.tempo').mousemove(function(e){
    if (drag) {
    var differenceY = startY - e.pageY;
    newDeg = deg+differenceY;
    if (newDeg<20) {
    $('#indicator').text(20);
    $('#dial').attr('style','-webkit-transform:rotate(20deg); -moz-transform:rotate(20deg);');
    newDeg = 20;
    }
    else if (newDeg>220) {
    $('#indicator').text(220);
    $('#dial').attr('style','-webkit... -moz-transform:rotate(220deg...
    newDeg = 220;
    }
    else{
    $('#indicator').text(newDeg);
    $('#dial').attr('style','-webkit... -moz-transform:rotate('+newDeg...
    }
    }
    else {}
    noBug = true;
    });
    });
    $('.tempo').mouseup(function(){
    clearInterval(seq);
    if (noBug) {
    tempo = ((60/newDeg)/4)*1000;
    seq=self.setInterval(function...
    }
    else {}
    $(this).removeClass('bigger');
    drag = false;
    noBug = false;
    });

    $('#stop').click(function(){
    clearInterval(seq);
    playback=0;
    });

    });

    ================================...