Hi everyone,
I’ve managed to make a drumbeat player, but it seems to be slightly slipping out of time.
I thought that was being handled by the tick, but maybe I’m getting that wrong.
I think the problem is with the duration:
const duration = ((msSec-myInterval) / convertBPM) /subDivision;
EDIT: I’ve updated the code below, it works well, but I’m still trying to sort how to sync it to delta time and make it run steady.
//AUDIO CHANNELS
//MEtronome
let metronome1
let metronome1i
let metronome1and
let metronome1a
//CH1
let beat1channel1
let beat1ichannel1
let beat1andchannel1
let beat1achannel1
let beat2channel1
let beat2ichannel1
let beat2andchannel1
let beat2achannel1
let beat3channel1
let beat3ichannel1
let beat3andchannel1
let beat3achannel1
let beat4channel1
let beat4ichannel1
let beat4andchannel1
let beat4achannel1
//CH2
let beat1channel2
let beat1ichannel2
let beat1andchannel2
let beat1achannel2
let beat2channel2
let beat2ichannel2
let beat2andchannel2
let beat2achannel2
let beat3channel2
let beat3ichannel2
let beat3andchannel2
let beat3achannel2
let beat4channel2
let beat4ichannel2
let beat4andchannel2
let beat4achannel2
//CH3
let beat1channel3
let beat1ichannel3
let beat1andchannel3
let beat1achannel3
let beat2channel3
let beat2ichannel3
let beat2andchannel3
let beat2achannel3
let beat3channel3
let beat3ichannel3
let beat3andchannel3
let beat3achannel3
let beat4channel3
let beat4ichannel3
let beat4andchannel3
let beat4achannel3
let met = 0
let meti = 0
let metand = 0
let meta = 0
$w.onReady( function () {
/////Audio URLs////////
let hat = “https://static.wixstatic.com/mp3/64b87f_85c77ad0b6ce4bd384bc182705053911.mp3”;
let snare = “https://static.wixstatic.com/mp3/64b87f_25ad00d580784af78478075e86dca749.mp3”;
let kick = “https://static.wixstatic.com/mp3/64b87f_fdc41ba8174644d7907f8ddedc82d396.mp3”;
let ohat = “https://static.wixstatic.com/mp3/64b87f_b463c569cc6b4d5e91c2953c2d781624.mp3”;
///////Digital Metronome////////
//let met = “https://static.wixstatic.com/mp3/64b87f_91f30a88859045189311661c5ad3bc1c.mp3”;
//let meti = “https://static.wixstatic.com/mp3/64b87f_123f1cb91d924fa29fac521e490e8741.mp3”;
//let metand = “https://static.wixstatic.com/mp3/64b87f_e0dc2bd603244baf8637371b8aa5f0cf.mp3”;
//let meta = “https://static.wixstatic.com/mp3/64b87f_a79bc7a7afb54d4ba7cc499d7fc83345.mp3”;
/////Default loading Beat///// Quarter notes
//Ch1//
beat1channel1 = hat;
beat1ichannel1 = 0;
beat1andchannel1 = 0;
beat1achannel1 = 0;
beat2channel1 = hat;
beat2ichannel1 = 0;
beat2andchannel1 = 0;
beat2achannel1 = 0;
beat3channel1 = hat;
beat3ichannel1 = 0;
beat3andchannel1 = 0;
beat3achannel1 = 0;
beat4channel1 = hat;
beat4ichannel1 = 0;
beat4andchannel1 = 0;
beat4achannel1 = 0;
//Ch2//
beat1channel2 = kick;
beat1ichannel2 = 0;
beat1andchannel2 = 0;
beat1achannel2 = 0;
beat2channel2 = 0;
beat2ichannel2 = 0;
beat2andchannel2 = 0;
beat2achannel2 = 0;
beat3channel2 = snare;
beat3ichannel2 = 0;
beat3andchannel2 = 0;
beat3achannel2 = 0;
beat4channel2 = 0;
beat4ichannel2 = 0;
beat4andchannel2 = 0;
beat4achannel2 = 0;
//Ch3//
beat1channel3 = 0;
beat1ichannel3 = 0;
beat1andchannel3 = 0;
beat1achannel3 = 0;
beat2channel3 = 0;
beat2ichannel3 = 0;
beat2andchannel3 = 0;
beat2achannel3 = 0;
beat3channel3 = 0;
beat3ichannel3 = 0;
beat3andchannel3 = 0;
beat3achannel3 = 0;
beat4channel3 = 0;
beat4ichannel3 = 0;
beat4andchannel3 = 0;
beat4achannel3 = 0;
/////metronome
metronome1 = met;
metronome1i = meti;
metronome1and = metand;
metronome1a = meta;
})
///////Sync for steady time////////
var lastUpdate = Date.now();
var myInterval = setInterval(tick, 0);
var dt;
function tick() {
var now = Date.now();
dt = now - lastUpdate;
lastUpdate = now;
// console.log(myInterval);
}
////
let playing = “No”;
let subDivision = 1;
let timesig = 2;
let startNum = 1;
let endNum = 16;
let msSec = 1000;
var playingNow;
let bpm = 120
let convertBPM = bpm / 60;
//console.log(convertBPM);
//const duration = (msSec-myInterval) / convertBPM; // 1000 milliseconds 494 is 120
//const duration = 1000;
//console.log(duration);
export function start_click(event) {
console.log(convertBPM);
const duration = ((msSec-myInterval) / convertBPM) /subDivision; // 1000 milliseconds 494 is 120 quarternotes
//const duration = 1000;
console.log(duration);
/////////////////////////////////Quarter Beat/////////////
if (playing === “No” && subDivision === 1){
playing = “Yes”
playingNow = setInterval( function countUp(){
if (startNum === 1)
{$w(‘#text28’).text = “1”;
$w(“#html1”).postMessage(beat1channel1);
$w(“#html1”).postMessage(beat1channel2);
$w(“#html1”).postMessage(beat1channel3);
$w(“#html1”).postMessage(metronome1);
////graphics
$w(“#beat4on”).hide();
$w(“#beat4off”).show();
$w(“#beat1on”).show();
$w(“#beat1off”).hide();
startNum = 2;}
else if (startNum === 2)
{$w(‘#text28’).text = “2”;
$w(“#html1”).postMessage(beat2channel1);
$w(“#html1”).postMessage(beat2channel2);
$w(“#html1”).postMessage(beat2channel3);
$w(“#html1”).postMessage(metronome1);
////graphics
$w(“#beat1on”).hide();
$w(“#beat1off”).show();
$w(“#beat2on”).show();
$w(“#beat2off”).hide();
startNum = 3;}
else if (startNum === 3)
{$w(‘#text28’).text = “3”;
$w(“#html1”).postMessage(beat3channel1);
$w(“#html1”).postMessage(beat3channel2);
$w(“#html1”).postMessage(beat3channel3);
$w(“#html1”).postMessage(metronome1);
////graphics
$w(“#beat2on”).hide();
$w(“#beat2off”).show();
$w(“#beat3on”).show();
$w(“#beat3off”).hide();
startNum = 4;}
else if (startNum === 4)
{$w(‘#text28’).text = “4”;
$w(“#html1”).postMessage(beat4channel1);
$w(“#html1”).postMessage(beat4channel2);
$w(“#html1”).postMessage(beat4channel3);
$w(“#html1”).postMessage(metronome1);
////graphics
$w(“#beat3on”).hide();
$w(“#beat3off”).show();
$w(“#beat4on”).show();
$w(“#beat4off”).hide();
startNum = 1;}
}, duration);
}
/////////////Quarter Beat End////////////////
/////////////////////////////////Eighth Beat/////////////
else if (playing === “No” && subDivision === 2){
playing = “Yes”
playingNow = setInterval( function countUp(){
if (startNum === 1)
{$w(‘#text28’).text = “1”;
$w(“#html1”).postMessage(beat1channel1);
$w(“#html1”).postMessage(beat1channel2);
$w(“#html1”).postMessage(beat1channel3);
$w(“#html1”).postMessage(metronome1);
////graphics
$w(“#beat4andon”).hide();
$w(“#beat4andoff”).show();
$w(“#beat1on”).show();
$w(“#beat1off”).hide();
startNum = 1.5;}
else if (startNum === 1.5)
{$w(‘#text28’).text = “1 and”;
$w(“#html1”).postMessage(beat1andchannel1);
$w(“#html1”).postMessage(beat1andchannel2);
$w(“#html1”).postMessage(beat1andchannel3);
$w(“#html1”).postMessage(metronome1and);
////graphics
$w(“#beat1on”).hide();
$w(“#beat1off”).show();
$w(“#beat1andon”).show();
$w(“#beat1andoff”).hide();
startNum = 2;}
else if (startNum === 2)
{$w(‘#text28’).text = “2”;
$w(“#html1”).postMessage(beat2channel1);
$w(“#html1”).postMessage(beat2channel2);
$w(“#html1”).postMessage(beat2channel3);
$w(“#html1”).postMessage(metronome1);
////graphics
$w(“#beat1andon”).hide();
$w(“#beat1andoff”).show();
$w(“#beat2on”).show();
$w(“#beat2off”).hide();
startNum = 2.5;}
else if (startNum === 2.5)
{$w(‘#text28’).text = “2 and”;
$w(“#html1”).postMessage(beat2andchannel1);
$w(“#html1”).postMessage(beat2andchannel2);
$w(“#html1”).postMessage(beat2andchannel3);
$w(“#html1”).postMessage(metronome1and);
////graphics
$w(“#beat2on”).hide();
$w(“#beat2off”).show();
$w(“#beat2andon”).show();
$w(“#beat2andoff”).hide();
startNum = 3;}
else if (startNum === 3)
{$w(‘#text28’).text = “3”;
$w(“#html1”).postMessage(beat3channel1);
$w(“#html1”).postMessage(beat3channel2);
$w(“#html1”).postMessage(beat3channel3);
$w(“#html1”).postMessage(metronome1);
////graphics
$w(“#beat2andon”).hide();
$w(“#beat2andoff”).show();
$w(“#beat3on”).show();
$w(“#beat3off”).hide();
startNum = 3.5;}
else if (startNum === 3.5)
{$w(‘#text28’).text = “3 and”;
$w(“#html1”).postMessage(beat3andchannel1);
$w(“#html1”).postMessage(beat3andchannel2);
$w(“#html1”).postMessage(beat3andchannel3);
$w(“#html1”).postMessage(metronome1and);
////graphics
$w(“#beat3on”).hide();
$w(“#beat3off”).show();
$w(“#beat3andon”).show();
$w(“#beat3andoff”).hide();
startNum = 4;}
else if (startNum === 4)
{$w(‘#text28’).text = “4”;
$w(“#html1”).postMessage(beat4channel1);
$w(“#html1”).postMessage(beat4channel2);
$w(“#html1”).postMessage(beat4channel3);
$w(“#html1”).postMessage(metronome1);
////graphics
$w(“#beat3andon”).hide();
$w(“#beat3andoff”).show();
$w(“#beat4on”).show();
$w(“#beat4off”).hide();
startNum = 4.5;}
else if (startNum === 4.5)
{$w(‘#text28’).text = “4 and”;
$w(“#html1”).postMessage(beat4andchannel1);
$w(“#html1”).postMessage(beat4andchannel2);
$w(“#html1”).postMessage(beat4andchannel3);
$w(“#html1”).postMessage(metronome1and);
////graphics
$w(“#beat4on”).hide();
$w(“#beat4off”).show();
$w(“#beat4andon”).show();
$w(“#beat4andoff”).hide();
startNum = 1;}
}, duration);
}
/////////////Eighth Beat End////////////////
/////////////////////////////////Sixteenth Beat/////////////
else if (playing === “No” && subDivision === 4){
playing = “Yes”
playingNow = setInterval( function countUp(){
if (startNum === 1)
{$w(‘#text28’).text = “1”;
$w(“#html1”).postMessage(beat1channel1);
$w(“#html1”).postMessage(beat1channel2);
$w(“#html1”).postMessage(beat1channel3);
$w(“#html1”).postMessage(metronome1);
////graphics
$w(“#beat4aon”).hide();
$w(“#beat4aoff”).show();
$w(“#beat1on”).show();
$w(“#beat1off”).hide();
startNum = 1.25;}
else if (startNum === 1.25)
{$w(‘#text28’).text = “1 i”;
$w(“#html1”).postMessage(beat1ichannel1);
$w(“#html1”).postMessage(beat1ichannel2);
$w(“#html1”).postMessage(beat1ichannel3);
$w(“#html1”).postMessage(metronome1i);
////graphics
$w(“#beat1on”).hide();
$w(“#beat1off”).show();
$w(“#beat1ion”).show();
$w(“#beat1ioff”).hide();
startNum = 1.5;}
else if (startNum === 1.5)
{$w(‘#text28’).text = “1 i and”;
$w(“#html1”).postMessage(beat1andchannel1);
$w(“#html1”).postMessage(beat1andchannel2);
$w(“#html1”).postMessage(beat1andchannel3);
$w(“#html1”).postMessage(metronome1and);
////graphics
$w(“#beat1ion”).hide();
$w(“#beat1ioff”).show();
$w(“#beat1andon”).show();
$w(“#beat1andoff”).hide();
startNum = 1.75;}
else if (startNum === 1.75)
{$w(‘#text28’).text = “1 i and a “;
$w(”#html1”).postMessage(beat1achannel1);
$w(“#html1”).postMessage(beat1achannel2);
$w(“#html1”).postMessage(beat1achannel3);
$w(“#html1”).postMessage(metronome1a);
////graphics
$w(“#beat1andon”).hide();
$w(“#beat1andoff”).show();
$w(“#beat1aon”).show();
$w(“#beat1aoff”).hide();
startNum = 2;}
else if (startNum === 2)
{$w(‘#text28’).text = “2”;
$w(“#html1”).postMessage(beat2channel1);
$w(“#html1”).postMessage(beat2channel2);
$w(“#html1”).postMessage(beat2channel3);
$w(“#html1”).postMessage(metronome1);
////graphics
$w(“#beat1aon”).hide();
$w(“#beat1aoff”).show();
$w(“#beat2on”).show();
$w(“#beat2off”).hide();
startNum = 2.25;}
else if (startNum === 2.25)
{$w(‘#text28’).text = “2 i”;
$w(“#html1”).postMessage(beat2ichannel1);
$w(“#html1”).postMessage(beat2ichannel2);
$w(“#html1”).postMessage(beat2ichannel3);
$w(“#html1”).postMessage(metronome1i);
////graphics
$w(“#beat2on”).hide();
$w(“#beat2off”).show();
$w(“#beat2ion”).show();
$w(“#beat2ioff”).hide();
startNum = 2.5;}
else if (startNum === 2.5)
{$w(‘#text28’).text = “2 i and”;
$w(“#html1”).postMessage(beat2andchannel1);
$w(“#html1”).postMessage(beat2andchannel2);
$w(“#html1”).postMessage(beat2andchannel3);
$w(“#html1”).postMessage(metronome1and);
////graphics
$w(“#beat2ion”).hide();
$w(“#beat2ioff”).show();
$w(“#beat2andon”).show();
$w(“#beat2andoff”).hide();
startNum = 2.75;}
else if (startNum === 2.75)
{$w(‘#text28’).text = “2 i and a”;
$w(“#html1”).postMessage(beat2achannel1);
$w(“#html1”).postMessage(beat2achannel2);
$w(“#html1”).postMessage(beat2achannel3);
$w(“#html1”).postMessage(metronome1a);
////graphics
$w(“#beat2andon”).hide();
$w(“#beat2andoff”).show();
$w(“#beat2aon”).show();
$w(“#beat2aoff”).hide();
startNum = 3;}
else if (startNum === 3)
{$w(‘#text28’).text = “3”;
$w(“#html1”).postMessage(beat3channel1);
$w(“#html1”).postMessage(beat3channel2);
$w(“#html1”).postMessage(beat3channel3);
$w(“#html1”).postMessage(metronome1);
////graphics
$w(“#beat2aon”).hide();
$w(“#beat2aoff”).show();
$w(“#beat3on”).show();
$w(“#beat3off”).hide();
startNum = 3.25;}
else if (startNum === 3.25)
{$w(‘#text28’).text = “3 i”;
$w(“#html1”).postMessage(beat3ichannel1);
$w(“#html1”).postMessage(beat3ichannel2);
$w(“#html1”).postMessage(beat3ichannel3);
$w(“#html1”).postMessage(metronome1i);
////graphics
$w(“#beat3on”).hide();
$w(“#beat3off”).show();
$w(“#beat3ion”).show();
$w(“#beat3ioff”).hide();
startNum = 3.5;}
else if (startNum === 3.5)
{$w(‘#text28’).text = “3 i and”;
$w(“#html1”).postMessage(beat3andchannel1);
$w(“#html1”).postMessage(beat3andchannel2);
$w(“#html1”).postMessage(beat3andchannel3);
$w(“#html1”).postMessage(metronome1and);
////graphics
$w(“#beat3ion”).hide();
$w(“#beat3ioff”).show();
$w(“#beat3andon”).show();
$w(“#beat3andoff”).hide();
startNum = 3.75;}
else if (startNum === 3.75)
{$w(‘#text28’).text = “3 i and a”;
$w(“#html1”).postMessage(beat3achannel1);
$w(“#html1”).postMessage(beat3achannel2);
$w(“#html1”).postMessage(beat3achannel3);
$w(“#html1”).postMessage(metronome1a);
////graphics
$w(“#beat3andon”).hide();
$w(“#beat3andoff”).show();
$w(“#beat3aon”).show();
$w(“#beat3aoff”).hide();
startNum = 4;}
else if (startNum === 4)
{$w(‘#text28’).text = “4”;
$w(“#html1”).postMessage(beat4channel1);
$w(“#html1”).postMessage(beat4channel2);
$w(“#html1”).postMessage(beat4channel3);
$w(“#html1”).postMessage(metronome1);
////graphics
$w(“#beat3aon”).hide();
$w(“#beat3aoff”).show();
$w(“#beat4on”).show();
$w(“#beat4off”).hide();
startNum = 4.25;}
else if (startNum === 4.25)
{$w(‘#text28’).text = “4 i”;
$w(“#html1”).postMessage(beat4ichannel1);
$w(“#html1”).postMessage(beat4ichannel2);
$w(“#html1”).postMessage(beat4ichannel3);
$w(“#html1”).postMessage(metronome1i);
////graphics
$w(“#beat4on”).hide();
$w(“#beat4off”).show();
$w(“#beat4ion”).show();
$w(“#beat4ioff”).hide();
startNum = 4.5;}
else if (startNum === 4.5)
{$w(‘#text28’).text = “4 i and”;
$w(“#html1”).postMessage(beat4andchannel1);
$w(“#html1”).postMessage(beat4andchannel2);
$w(“#html1”).postMessage(beat4andchannel3);
$w(“#html1”).postMessage(metronome1and);
////graphics
$w(“#beat4ion”).hide();
$w(“#beat4ioff”).show();
$w(“#beat4andon”).show();
$w(“#beat4andoff”).hide();
startNum = 4.75;}
else if (startNum === 4.75)
{$w(‘#text28’).text = “4 i and a”;
$w(“#html1”).postMessage(beat4achannel1);
$w(“#html1”).postMessage(beat4achannel2);
$w(“#html1”).postMessage(beat4achannel3);
$w(“#html1”).postMessage(metronome1a);
////graphics
$w(“#beat4andon”).hide();
$w(“#beat4andoff”).show();
$w(“#beat4aon”).show();
$w(“#beat4aoff”).hide();
startNum = 1;}
}, duration);
}
/////////////Sixteenth Beat End////////////////
}
export function stop_click(event) {
playing = “No”
clearInterval(playingNow);
startNum = 1;
$w(‘#text28’).text = “1”;
////graphics
$w(“#beat1on”).show();
$w(“#beat1off”).hide();
$w(“#beat2on”).hide();
$w(“#beat2off”).show();
$w(“#beat3on”).hide();
$w(“#beat3off”).show();
$w(“#beat4on”).hide();
$w(“#beat4off”).show();
}
////////////////////change tempo///////////////////////////
export function eightybpm_click(event) {
$w(“#bpmDisplay”).text = “BPM: 80”;
bpm = 80;
convertBPM = bpm / 60;
stopBeat();
start_click();
}
export function hundredbpm_click(event) {
$w(“#bpmDisplay”).text = “BPM: 100”;
bpm = 100;
convertBPM = bpm / 60;
stopBeat();
start_click();
}
export function hundredtwentybpm_click(event) {
$w(“#bpmDisplay”).text = “BPM: 120”;
bpm = 120;
convertBPM = bpm / 60;
stopBeat();
start_click();
}
function stopBeat (event) {
playing = “No”
clearInterval(playingNow);
startNum = 1;
$w(‘#text28’).text = “1”;
////graphics
$w(“#beat1on”).show();
$w(“#beat1off”).hide();
$w(“#beat2on”).hide();
$w(“#beat2off”).show();
$w(“#beat3on”).hide();
$w(“#beat3off”).show();
$w(“#beat4on”).hide();
$w(“#beat4off”).show();
//start_click(event)
}
export function turnMetOn_click(event) {
met = “https://static.wixstatic.com/mp3/64b87f_91f30a88859045189311661c5ad3bc1c.mp3”;
meti = “https://static.wixstatic.com/mp3/64b87f_123f1cb91d924fa29fac521e490e8741.mp3”;
metand = “https://static.wixstatic.com/mp3/64b87f_e0dc2bd603244baf8637371b8aa5f0cf.mp3”;
meta = “https://static.wixstatic.com/mp3/64b87f_a79bc7a7afb54d4ba7cc499d7fc83345.mp3”;
metronome1 = met;
metronome1i = meti;
metronome1and = metand;
metronome1a = meta;
$w(‘#turnMetOn’).hide();
$w(‘#turnMetOff’).show();
}
export function turnMetOff_click(event) {
met = 0;
meti = 0;
metand = 0;
meta = 0;
metronome1 = met;
metronome1i = meti;
metronome1and = metand;
metronome1a = meta;
$w(‘#turnMetOn’).show();
$w(‘#turnMetOff’).hide();
}
export function quarterSubDiv_click(event) {
subDivision = 1;
stopBeat();
$w(‘#beat1ioff’).hide();
$w(‘#beat1andoff’).hide();
$w(‘#beat1aoff’).hide();
$w(‘#beat2ioff’).hide();
$w(‘#beat2andoff’).hide();
$w(‘#beat2aoff’).hide();
$w(‘#beat3ioff’).hide();
$w(‘#beat3andoff’).hide();
$w(‘#beat3aoff’).hide();
$w(‘#beat4ioff’).hide();
$w(‘#beat4andoff’).hide();
$w(‘#beat4aoff’).hide();
$w(‘#quarterSubDiv’).disable();
$w(‘#eighthSubDiv’).enable();
$w(‘#sixteenSubDiv’).enable();
//start_click();
}
export function eighthSubDiv_click(event) {
subDivision = 2;
stopBeat();
$w(‘#beat1ioff’).hide();
$w(‘#beat1andoff’).show();
$w(‘#beat1aoff’).hide();
$w(‘#beat2ioff’).hide();
$w(‘#beat2andoff’).show();
$w(‘#beat2aoff’).hide();
$w(‘#beat3ioff’).hide();
$w(‘#beat3andoff’).show();
$w(‘#beat3aoff’).hide();
$w(‘#beat4ioff’).hide();
$w(‘#beat4andoff’).show();
$w(‘#beat4aoff’).hide();
$w(‘#quarterSubDiv’).enable();
$w(‘#eighthSubDiv’).disable();
$w(‘#sixteenSubDiv’).enable();
//start_click();
}
export function sixteenSubDiv_click(event) {
subDivision = 4;
stopBeat();
$w(‘#beat1ioff’).show();
$w(‘#beat1andoff’).show();
$w(‘#beat1aoff’).show();
$w(‘#beat2ioff’).show();
$w(‘#beat2andoff’).show();
$w(‘#beat2aoff’).show();
$w(‘#beat3ioff’).show();
$w(‘#beat3andoff’).show();
$w(‘#beat3aoff’).show();
$w(‘#beat4ioff’).show();
$w(‘#beat4andoff’).show();
$w(‘#beat4aoff’).show();
$w(‘#quarterSubDiv’).enable();
$w(‘#eighthSubDiv’).enable();
$w(‘#sixteenSubDiv’).disable();
//start_click();
}