skimmer/index.js

const ui = document.getElementById("ui");

const bpm = document.getElementById("bpm");
bpm.addEventListener("change", (e) => {
	Tone.Transport.bpm.value = e.target.value;
});

const newChannel = document.getElementById("new-channel");
const insert = document.getElementById("insert");
insert.addEventListener("click", (e) => {
	const newSequence = newChannel.value;

	if (newSequence) {
		createChannel(JSON.parse(newSequence));
		newChannel.value = "";
	}
});

document.getElementById("start")?.addEventListener("click", async () => {
	await Tone.start();
	console.log("Audio is ready");

	Tone.Transport.bpm.value = bpm.value;
	createChannel(["C3", "F3"]);
	createChannel(["C3", ["G3", ["F3", "A#3"]], "C3", ["D#3", "D3"], "F3"]);
	createChannel([["C3", ["F3", "G3", "A#3"]], "C3", ["D#3", "D3"], "F3"]);
	createChannel(["C4", null, null, "F4", null, null, null]);
});

let createSequence = function (sequence) {
	const synth = new Tone.Synth();
	const seq = new Tone.Sequence((time, note) => {
		synth.triggerAttackRelease(note, 0.1, time);
	}, sequence).start(0);
	Tone.Transport.start();
	return synth;
};

let createChannel = function (sequence) {
	const channel = new Tone.Channel().toDestination();

	const synth = new Tone.Synth();
	let seq = new Tone.Sequence((time, note) => {
		synth.triggerAttackRelease(note, 0.1, time);
	}, sequence).start(0);
	Tone.Transport.start();

	synth.connect(channel);

	let container = document.createElement("div");
	container.classList.add("channel");

	let control = document.createElement("input");
	control.setAttribute("type", "range");
	control.value = 0;
	control.setAttribute("min", -48);
	control.setAttribute("max", 6);

	control.addEventListener("change", (e) => {
		channel.volume.value = e.target.value;
	});

	let notation = document.createElement("input");
	notation.value = JSON.stringify(sequence);
	notation.classList.add("notation");
	notation.addEventListener("change", (e) => {
		try {
			let newSeq = JSON.parse(e.target.value);
			seq.dispose();
			seq = new Tone.Sequence((time, note) => {
				synth.triggerAttackRelease(note, 0.1, time);
			}, newSeq).start(0);
		} catch (e) {
			console.warn(e);
		}
	});

	container.appendChild(notation);
	container.appendChild(control);
	ui.prepend(container);
};