individual timing of beats

trying to get the beats to animate with their own tempo

by chrisfrisina

HTML

<div class="instrument" id="i1">
    this instrument would play slow &nbsp&nbsp
    <div class="measure" id="i1m1">
        <div class="beat slow" id="i1m1b1"></div>
        <div class="beat slow" id="i1m1b2"></div>
        <div class="beat slow" id="i1m1b3"></div>
    </div>
</div>
<div class="instrument" id="i2">
    this instrument would play normal 
    <div class="measure" id="i2m1">
        <div class="beat normal" id="i2m1b1"></div>
        <div class="beat normal" id="i2m1b2"></div>
    </div>
    <div class="measure" id="i2m2">
        <div class="beat normal" id="i2m2b1"></div>
        <div class="beat normal" id="i2m2b2"></div>
    </div>
</div>
<div class="instrument" id="i3">
    this instrument would play fast &nbsp&nbsp&nbsp&nbsp
    <div class="measure" id="i3m1">
        <div class="beat fast" id="i3m1b1"></div>
        <div class="beat fast" id="i3m1b2"></div>
    </div>
    <div class="measure" id="i3m2">
        <div class="beat fast" id="i3m2b1"></div>
        <div class="beat fast" id="i3m2b2"></div>
    </div>
    <div class="measure" id="i3m3">
        <div class="beat fast" id="i3m3b1"></div>
        <div class="beat fast" id="i3m3b2"></div>
    </div>
</div>

Instruments are grey |
Measures are red |
Beats are green

CSS

.instrument {
    margin: 5px;
    width: 100%;
    background-color: gray;
}
.measure {
    margin: 10px -5px 10px 5px;
    display: inline-block;
    background-color: red;
}
.beat {
    margin: 10px 10px 10px 10px;
    display: inline-block;
    height: 50px;
    background-color: green;
}
.slow {
    width: 100px;
}
.normal {
    width: 50px;
}
.fast {
    width: 25px;
}

JavaScript

//Stretch this window pane to see it linearly with time
// Let's assume that the first instrument plays for a duration of 2 seconds, the second plays for 1.6 s, and the third plays for 1.5 s. That would make the first instruments beats play at an interval of every .66s, the second instrument's beats play every .4 s, and the third instrument's beats play every .25s.
//The LCD of all instrument's beats is .01666s (60 Hz or 1/60th of a second), so it should look something like this: P meaning Play     
//    0s                            .5s                           1s                            1.5s                          2s
//    ^                             ^                             ^                             ^                             ^
//    IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
// 1: PpppppppppppppppppppppppppppppppppppppppPpppppppppppppppppppppppppppppppppppppppPppppppppppppppppppppppppppppppppppppppp
// 2: PpppppppppppppppppppppppPpppppppppppppppppppppppPpppppppppppppppppppppppPpppppppppppppppppppppppWWWWWWWWWWWWWWWWWWWWWWWW
// 3: PppppppppppppppPppppppppppppppPppppppppppppppPppppppppppppppPppppppppppppppPppppppppppppppWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW