Step Sequencer 1

by Ehsan Ziya

HTML

<div id='test' value='off'>off</div>
<div id='test2' value='off'>off</div>
<div id='test3' value='off'>off</div>
<div id='test4' value='off'>off</div>

CSS

#test{
    position: absolute;
    
}
#test2{
    position: absolute;
    left: 40px;
    
}
#test3{
    position: absolute;
    left: 80px;
    
}
#test4{
    position: absolute;
    left: 120px;
    
}

JavaScript

var context = new webkitAudioContext();
var now = context.currentTime;
$('#test').val('off');
$('#test2').val('off');
$('#test3').val('off');
$('#test4').val('off');
var step1val = $('#test').val();
var step2val = $('#test2').val();
var step3val = $('#test3').val();
var step4val = $('#test4').val();
//console.log(step1val);

$('#test').click(function(){
    if(step1val === 'off'){
        $(this).val('on');
        step1val = $(this).val();
        $(this).html('on');
        
    }else if(step1val ==='on'){
        $(this).val('off');
        step1val = $(this).val();
        $(this).html('off');
        
    }
});
$('#test2').click(function(){
    if(step2val === 'off'){
        $(this).val('on');
        step2val = $(this).val();
        $(this).html('on');
        //console.log(step1val);
    }else if(step2val ==='on'){
        $(this).val('off');
        step2val = $(this).val();
        $(this).html('off');
        //console.log(step1val);
    }
});
$('#test3').click(function(){
    if(step3val === 'off'){
        $(this).val('on');
        step3val = $(this).val();
        $(this).html('on');
        //console.log(step1val);
    }else if(step3val ==='on'){
        $(this).val('off');
        step3val = $(this).val();
        $(this).html('off');
        //console.log(step1val);
    }
});
$('#test4').click(function(){
    if(step4val === 'off'){
        $(this).val('on');
        step4val = $(this).val();
        $(this).html('on');
        //console.log(step1val);
    }else if(step4val ==='on'){
        $(this).val('off');
        step4val = $(this).val();
        $(this).html('off');
        //console.log(step1val);
    }
});

var loop = function(){
    if(step1val==='on'){
        now = context.currentTime;
        var osc = context.createOscillator();
        osc.connect(context.destination);
        osc.frequency.value = 200;
        osc.start(now);
        osc.stop(now + 0.1);
    }
    if(step2val==='on'){
        now = context.currentTime;
       ...