simplify array string

index.html

@@ -13,8 +13,8 @@
 		<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">
+		<div class="new-channel hidden" id="new-channel">
-			<input type="text" class="notation" id="new-channel" />
+			<input type="text" class="notation" />
 			<div class="insert">
 				<button id="insert">Add</button>
 			</div>

index.js

@@ -8,10 +8,9 @@ bpm.addEventListener("change", (e) => {
 const newChannel = document.getElementById("new-channel");
 const insert = document.getElementById("insert");
 insert.addEventListener("click", (e) => {
-	const newSequence = newChannel.value;
+	const newSequence = newChannel.querySelector("input[type=text]").value;
-
 	if (newSequence) {
-		createChannel(JSON.parse(newSequence));
+		createChannel(rebuildArray(newSequence));
 		newChannel.value = "";
 	}
 });
@@ -21,10 +20,13 @@ document.getElementById("start")?.addEventListener("click", async () => {
 	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"]);
+	newChannel.classList.remove("hidden");
-	createChannel([["C3", ["F3", "G3", "A#3"]], "C3", ["D#3", "D3"], "F3"]);
+
 	createChannel(["C4", null, null, "F4", null, null, null]);
+	createChannel([["C3", ["F3", "G3", "A#3"]], "C3", ["D#3", "D3"], "F3"]);
+	createChannel(["C3", ["G3", ["F3", "A#3"]], "C3", ["D#3", "D3"], "F3"]);
+	createChannel(["C3", "F3"]);
 });
 
 let createSequence = function (sequence) {
@@ -61,11 +63,11 @@ let createChannel = function (sequence) {
 	});
 
 	let notation = document.createElement("input");
-	notation.value = JSON.stringify(sequence);
+	notation.value = simplifyArray(JSON.stringify(sequence));
 	notation.classList.add("notation");
 	notation.addEventListener("change", (e) => {
 		try {
-			let newSeq = JSON.parse(e.target.value);
+			let newSeq = rebuildArray(e.target.value);
 			seq.dispose();
 			seq = new Tone.Sequence((time, note) => {
 				synth.triggerAttackRelease(note, 0.1, time);
@@ -79,3 +81,34 @@ let createChannel = function (sequence) {
 	container.appendChild(control);
 	ui.prepend(container);
 };
+
+function simplifyArray(literal) {
+	// Sorry for this
+	return literal.replaceAll('"', "").replaceAll("'", "").replaceAll(",", ", ");
+}
+
+function rebuildArray(literal) {
+	// And also for this
+	let rebuild = literal
+		.replaceAll(/\s+/gi, "")
+		.replaceAll("[", '["')
+		.replaceAll(",", '","')
+		.replaceAll("]", '"]')
+		.replaceAll('"[', "[")
+		.replaceAll(']"', "]");
+
+	let array = JSON.parse(rebuild);
+	try {
+		getAllIndexes(array, "null").forEach((index) => (array[index] = null));
+	} catch (e) {
+		console.log(e);
+	}
+	return array;
+}
+
+function getAllIndexes(arr, val) {
+	var indexes = [],
+		i;
+	for (i = 0; i < arr.length; i++) if (arr[i] === val) indexes.push(i);
+	return indexes;
+}

style.css

@@ -1,48 +1,55 @@
 .channel {
-    display: flex;
+	display: flex;
-    align-items: center;
+	align-items: center;
 }
 
 .new-channel {
-    display: flex;
+	display: flex;
-    align-items: center;
+	align-items: center;
-    margin: 64px 0;
+	margin: 64px 0;
 }
 
-input, label, button, .insert {
+.hidden {
-    font-size: 1.5rem;
+	display: none;
-    font-family: monospace;
+}
-    margin: 0 8px;
 
+input,
+label,
+button,
+.insert {
+	font-size: 1.5rem;
+	font-family: monospace;
+	margin: 0 8px;
 }
 
-input[type='range'], .insert {
+input[type="range"],
-    width: 200px;
+.insert {
+	width: 200px;
 }
 
 #insert {
-    margin: 0;
+	margin: 0;
 }
 
-button{ 
+button {
-    border: 1px solid currentColor;   
+	border: 1px solid currentColor;
 }
 
 button#insert {
-margin-right: 140px;
+	margin-right: 140px;
 }
 
 #bpm {
-    border: none;
+	border: none;
-    border-bottom: 1px solid currentColor;
+	border-bottom: 1px solid currentColor;
-    width: 5ch;
+	width: 5ch;
 }
 
 .notation {
-   flex-grow: 1;
+	flex-grow: 1;
-   border: none;
+	border: none;
-   border-bottom: 1px solid currentColor;
+	border-bottom: 1px solid currentColor;
-   padding: 1ch; 
+	padding: 1ch;
-   font-size: 1.5rem;
+	font-size: 1.5rem;
-   width: auto;
+	width: auto;
-}
+}