dynamic sequence

2 years ago · f089b741bb
commit f089b741bb
3 changed files with 153 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Skimmer test</title>
+		<link rel="stylesheet" href="style.css" />
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.38/Tone.js"></script>
+		<script src="index.js" defer></script>
+	</head>
+	<body>
+		<button id="start">Start</button>
+		<label for="bpm">BPM</label>
+		<input type="number" name="bpm" id="bpm" min="1" max="200" value="120" />
+		<div class="new-channel">
+			<input type="text" class="notation" id="new-channel" />
+			<div class="insert">
+				<button id="insert">Add</button>
+			</div>
+		</div>
+		<div id="ui"></div>
+	</body>
+</html>
--- a/index.js
+++ b/index.js
@ -0,0 +1,81 @@
+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);
+};
--- a/style.css
+++ b/style.css
@ -0,0 +1,48 @@
+.channel {
+    display: flex;
+    align-items: center;
+}
+
+.new-channel {
+    display: flex;
+    align-items: center;
+    margin: 64px 0;
+}
+
+input, label, button, .insert {
+    font-size: 1.5rem;
+    font-family: monospace;
+    margin: 0 8px;
+
+}
+
+input[type='range'], .insert {
+    width: 200px;
+}
+
+#insert {
+    margin: 0;
+}
+
+button{ 
+    border: 1px solid currentColor;   
+}
+
+button#insert {
+margin-right: 140px;
+}
+
+#bpm {
+    border: none;
+    border-bottom: 1px solid currentColor;
+    width: 5ch;
+}
+
+.notation {
+   flex-grow: 1;
+   border: none;
+   border-bottom: 1px solid currentColor;
+   padding: 1ch; 
+   font-size: 1.5rem;
+   width: auto;
+}