Added internal midi clock hook using a web worker

Author: nicorobo

package-lock.json

@@ -23,14 +23,15 @@
 		"uniqid": "^5.0.3"
 	},
 	"devDependencies": {
-		"react": "^16.8.6",
-		"webpack": "^4.29.6",
 		"@babel/cli": "^7.2.3",
 		"@babel/core": "^7.4.0",
 		"@babel/plugin-proposal-object-rest-spread": "^7.4.0",
 		"@babel/preset-env": "^7.4.2",
 		"babel-loader": "^8.0.5",
-		"webpack-cli": "^3.3.0"
+		"react": "^16.8.6",
+		"webpack": "^4.29.6",
+		"webpack-cli": "^3.3.0",
+		"worker-loader": "^2.0.0"
 	},
 	"repository": {
 		"type": "git",

package.json

@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+import Worker from './clock.worker';
+
+// Look into terminating worker when component is unmounted
+const worker = new Worker();
+
+export const useInternalMIDIClock = (output, division = 24, initialTempo = 120) => {
+	const [step, setStep] = useState(0);
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [tempo, setTempo] = useState(initialTempo);
+
+	// Use closure to keep track of steps
+	const handleClockMessage = () => {
+		let steps = 0;
+		return () => {
+			if (output) output.send([0xf8]);
+			steps++;
+			if (division === 1) setStep(steps);
+			else if (steps % division === 0) setStep(Math.floor(steps / division));
+		};
+	};
+
+	useEffect(() => {
+		if (isPlaying) {
+			const listener = handleClockMessage();
+			worker.addEventListener('message', listener);
+			if (output) output.send([0xfa]);
+			worker.postMessage({ type: 'start', tempo });
+			return () => {
+				worker.removeEventListener('message', listener);
+				if (output) output.send([0xfc]);
+				worker.postMessage({ type: 'stop' });
+				setStep(0);
+			};
+		}
+	}, [isPlaying]);
+
+	useEffect(() => {
+		worker.postMessage({ type: 'setTempo', tempo });
+	}, [tempo]);
+
+	return [step, isPlaying, setIsPlaying, setTempo];
+};

src/clock.js

@@ -0,0 +1,31 @@
+let timeoutId = 0;
+let tempo = 120;
+let startTime = 0;
+let tick = 0;
+onmessage = (e) => {
+	switch (e.data.type) {
+		case 'start':
+			startTime = performance.now();
+			tick = 0;
+			postMessage(0);
+			tick++;
+			timeoutId = setTimeout(function step() {
+				postMessage(0);
+				tick++;
+				timeoutId = setTimeout(step, timeToWait(performance.now()));
+			}, timeToWait(performance.now()));
+			break;
+		case 'setTempo':
+			tick = 0;
+			startTime = performance.now();
+			tempo = e.data.tempo;
+			break;
+		case 'stop':
+			clearTimeout(timeoutId);
+			break;
+		default:
+			break;
+	}
+};
+
+const timeToWait = (now) => (1000 / ((tempo / 60) * 24)) * tick - (now - startTime);

src/clock.worker.js

@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react';
+import { useInternalMIDIClock } from './clock';
 import uniqid from 'uniqid';
 
+export { useInternalMIDIClock };
 export const useMIDI = () => {
 	const [connections, changeConnections] = useState({
 		inputs: [],

src/index.js

@@ -19,6 +19,15 @@ module.exports = {
 					},
 				},
 			},
+			{
+				test: /\.worker\.js$/,
+				use: {
+					loader: 'worker-loader',
+					options: {
+						inline: true,
+					},
+				},
+			},
 		],
 	},
 	externals: {