add a broadcast channel for recieving messages from clock to ensure that they hit at the same time

This commit is contained in:
Jade (Rose) Rowland 2024-02-04 17:06:28 -05:00
parent c761cd54b4
commit 0d3eaf7f9a
2 changed files with 14 additions and 11 deletions

View File

@ -2,16 +2,16 @@ function getTime(precision) {
const seconds = performance.now() / 1000;
return Math.round(seconds * precision) / precision;
}
const allPorts = [];
let numPorts = 0;
let num_cycles_at_cps_change = 0;
let num_ticks_since_cps_change = 0;
let cps = 0.5;
const duration = 0.1;
const channel = new BroadcastChannel('strudeltick');
const sendMessage = (type, payload) => {
allPorts.forEach((port) => {
port.postMessage({ type, payload });
});
channel.postMessage({ type, payload });
};
const sendTick = ({ phase, duration, time }) => {
@ -36,9 +36,10 @@ const startClock = () => {
clock.start();
started = true;
};
const stopClock = () => {
const stopClock = async () => {
console.log(numPorts);
//dont stop the clock if mutliple instances are using it...
if (!started || numClientsConnected() > 1) {
if (!started || numPorts !== 1) {
return;
}
clock.stop();
@ -51,7 +52,6 @@ const setCycle = (cycle) => {
num_cycles_at_cps_change = cycle;
};
const numClientsConnected = () => allPorts.length;
const processMessage = (message) => {
const { type, payload } = message;
@ -79,10 +79,10 @@ const processMessage = (message) => {
}
};
this.onconnect = function (e) {
self.onconnect = function (e) {
// the incoming port
const port = e.ports[0];
allPorts.push(port);
numPorts = numPorts + 1;
port.addEventListener('message', function (e) {
processMessage(e.data);
});

View File

@ -20,6 +20,8 @@ export class Cyclist {
this.worker = new SharedWorker(new URL('./clockworker.js', import.meta.url));
this.worker.port.start();
this.channel = new BroadcastChannel('strudeltick');
let worker_time_dif = 0; // time difference between audio context clock and worker clock
let weight = 0; // the amount of weight that is applied to the current average when averaging a new time dif
const maxWeight = 400;
@ -52,6 +54,7 @@ export class Cyclist {
const tickCallback = (payload) => {
const workertime = payload.time;
const time = this.getTime();
const { duration, phase, num_ticks_since_cps_change, num_cycles_at_cps_change, cps } = payload;
setTimeReference(time, workertime);
this.cps = cps;
@ -90,7 +93,7 @@ export class Cyclist {
};
// receive messages from worker clock and process them
this.worker.port.addEventListener('message', (message) => {
this.channel.onmessage = (message) => {
if (!this.started) {
return;
}
@ -101,7 +104,7 @@ export class Cyclist {
tickCallback(payload);
}
}
});
};
}
sendMessage(type, payload) {
this.worker.port.postMessage({ type, payload });