JSFiddle - React, Tailwind, and code Playground

by Ehsan Ziya

HTML

<div id='text'>
   Section 5.3.1 - Using Set Interval For Timing<br> 
   Changing the window size will effect the interval  time
</div>
<div id='test'></div>

CSS

#test{
    font-family : arial;
    font-size: 200px;
    
}
#text{
    font-family:arial;
    font-size: 20px;
}

JavaScript

var context = new webkitAudioContext();
var step = 0;
var id = setInterval(function () {
    var osc = context.createOscillator();
    var now = context.currentTime;
    osc.connect(context.destination);
    osc.frequency.value = 440;
    osc.start(now);
    osc.stop(now + 0.1);
    step += 1;
    
    $('#test').html(step);
    if(step === 4){
        step = 0;
        osc.frequency.value = 880;
    }


}, 500); // callback every 500ms

clearInterval(id);