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">
-			<input type="text" class="notation" id="new-channel" />
+		<div class="new-channel hidden" 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"]);
-	createChannel([["C3", ["F3", "G3", "A#3"]], "C3", ["D#3", "D3"], "F3"]);
+
+	newChannel.classList.remove("hidden");
+
 	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

@@ -9,14 +9,21 @@
 	margin: 64px 0;
 }
 
-input, label, button, .insert {
+.hidden {
+	display: none;
+}
+
+input,
+label,
+button,
+.insert {
 	font-size: 1.5rem;
 	font-family: monospace;
 	margin: 0 8px;
-
 }
 
-input[type='range'], .insert {
+input[type="range"],
+.insert {
 	width: 200px;
 }
 
@@ -24,12 +31,12 @@ input[type='range'], .insert {
 	margin: 0;
 }
 
-button{ 
+button {
 	border: 1px solid currentColor;
 }
 
 button#insert {
-margin-right: 140px;
+	margin-right: 140px;
 }
 
 #bpm {