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; const seconds = performance.now() / 1000;
return Math.round(seconds * precision) / precision; return Math.round(seconds * precision) / precision;
} }
const allPorts = [];
let numPorts = 0;
let num_cycles_at_cps_change = 0; let num_cycles_at_cps_change = 0;
let num_ticks_since_cps_change = 0; let num_ticks_since_cps_change = 0;
let cps = 0.5; let cps = 0.5;
const duration = 0.1; const duration = 0.1;
const channel = new BroadcastChannel('strudeltick');
const sendMessage = (type, payload) => { const sendMessage = (type, payload) => {
allPorts.forEach((port) => { channel.postMessage({ type, payload });
port.postMessage({ type, payload });
});
}; };
const sendTick = ({ phase, duration, time }) => { const sendTick = ({ phase, duration, time }) => {
@ -36,9 +36,10 @@ const startClock = () => {
clock.start(); clock.start();
started = true; started = true;
}; };
const stopClock = () => { const stopClock = async () => {
console.log(numPorts);
//dont stop the clock if mutliple instances are using it... //dont stop the clock if mutliple instances are using it...
if (!started || numClientsConnected() > 1) { if (!started || numPorts !== 1) {
return; return;
} }
clock.stop(); clock.stop();
@ -51,7 +52,6 @@ const setCycle = (cycle) => {
num_cycles_at_cps_change = cycle; num_cycles_at_cps_change = cycle;
}; };
const numClientsConnected = () => allPorts.length;
const processMessage = (message) => { const processMessage = (message) => {
const { type, payload } = message; const { type, payload } = message;
@ -79,10 +79,10 @@ const processMessage = (message) => {
} }
}; };
this.onconnect = function (e) { self.onconnect = function (e) {
// the incoming port // the incoming port
const port = e.ports[0]; const port = e.ports[0];
allPorts.push(port); numPorts = numPorts + 1;
port.addEventListener('message', function (e) { port.addEventListener('message', function (e) {
processMessage(e.data); 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 = new SharedWorker(new URL('./clockworker.js', import.meta.url));
this.worker.port.start(); this.worker.port.start();
this.channel = new BroadcastChannel('strudeltick');
let worker_time_dif = 0; // time difference between audio context clock and worker clock 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 let weight = 0; // the amount of weight that is applied to the current average when averaging a new time dif
const maxWeight = 400; const maxWeight = 400;
@ -52,6 +54,7 @@ export class Cyclist {
const tickCallback = (payload) => { const tickCallback = (payload) => {
const workertime = payload.time; const workertime = payload.time;
const time = this.getTime(); const time = this.getTime();
const { duration, phase, num_ticks_since_cps_change, num_cycles_at_cps_change, cps } = payload; const { duration, phase, num_ticks_since_cps_change, num_cycles_at_cps_change, cps } = payload;
setTimeReference(time, workertime); setTimeReference(time, workertime);
this.cps = cps; this.cps = cps;
@ -90,7 +93,7 @@ export class Cyclist {
}; };
// receive messages from worker clock and process them // receive messages from worker clock and process them
this.worker.port.addEventListener('message', (message) => { this.channel.onmessage = (message) => {
if (!this.started) { if (!this.started) {
return; return;
} }
@ -101,7 +104,7 @@ export class Cyclist {
tickCallback(payload); tickCallback(payload);
} }
} }
}); };
} }
sendMessage(type, payload) { sendMessage(type, payload) {
this.worker.port.postMessage({ type, payload }); this.worker.port.postMessage({ type, payload });