Step Layout 1

by Ehsan Ziya

HTML

<div class='container'>
    <div class='firstrow'>
        <div class='indic'>
            <div id='ind1'class='stepin'></div>
            <div id='ind2'class='stepin'></div>
            <div id='ind3'class='stepin'></div>
            <div id='ind4'class='stepin'></div>
            <div id='ind5'class='stepin'></div>
            <div id='ind6'class='stepin'></div>
            <div id='ind7'class='stepin'></div>
            <div id='ind8'class='stepin'></div>
            <div id='ind9'class='stepin'></div>
            <div id='ind10'class='stepin'></div>
            <div id='ind11'class='stepin'></div>
            <div id='ind12'class='stepin'></div>
            <div id='ind13'class='stepin'></div>
            <div id='ind14'class='stepin'></div>
            <div id='ind15'class='stepin'></div>
            <div id='ind16'class='stepin'></div>
        </div>
    </div>
    <div class='secondrow'>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
        <div class='step'></div>
    </div>
    <div class='thirdrow'></div>
</div>

CSS

.body {
    margin:auto;
}
.container {
    margin:auto;
    width:410px;
    height:500px;
    background: black;
    padding: 10px;
}
.firstrow {
    margin: auto;
    background:#545554;
    width: 405px;
    height: 10px;
    margin-bottom: 10px;
    padding-top:5px;
}
.stepin {
    margin: auto;
    float: left;
    margin-left: 5px;
    width: 20px;
    height: 5px;
    background: #474D4D;
}
.secondrow {
    margin: auto;
    padding-top: 5px;
    padding-left: 0px;
    background:#545554;
    width: 405px;
    height: 25px;
}
.step {
    margin: auto;
    float: left;
    margin-left: 5px;
    width: 20px;
    height: 20px;
    background: #7FA3A3;
}

JavaScript

var context = new webkitAudioContext();
var step = 0;
function metro(tempo) {

    this.count = 0;
    var that = this;
    this.isPlaying = false;
    this.tempo = tempo;

    this.start = function (func) {

        that.scr = context.createScriptProcessor(256, 0, 1);
        that.scr.connect(context.destination);
        that.isPlaying = true;


        if (that.isPlaying) {

            this.scr.onaudioprocess = function () {

                that.count = that.count + 1;
                that.speed = (60 / that.tempo) / 4;

                that.max = Math.round(172 * that.speed);
                if (that.count > that.max) {

                    that.count = 0;
                    func();

                }
            };
        }

    };
    this.stop = function () {

        that.count = 0;
        this.scr.disconnect(0);
        this.isPlaying = false;
    };
    this.change = function (newTempo) {

        that.tempo = newTempo;
    };

}
var test = function(){
    step+=1;
    if(step > 16){
        step=0;
    }
    console.log(step);
}

var met = new metro(120);

met.start(test);