add a broadcast channel for recieving messages from clock to ensure that they hit at the same time
This commit is contained in:
parent
c761cd54b4
commit
0d3eaf7f9a
2 changed files with 14 additions and 11 deletions
|
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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 });
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue