Improve autoscrolling

static/js/song-controls.js

@@ -3,18 +3,40 @@ const song = document.querySelector("iframe.song").contentWindow;
 
 // Autoscroll
 var scroll;
+var scrollTimeout = 60;
+const minTimeout = 10;
+const maxTimeout = 120;
+const scrollIncrement = 20;
+
 function pageScroll() {
 	song.scrollBy(0, 1);
-	scroll = setTimeout(pageScroll, 80);
+	scroll = setTimeout(pageScroll, scrollTimeout);
 }
 
-document.querySelector("#autoscroll").addEventListener("click", function() {
-	if (this.classList.contains("active")) {
+function updateScrollSpeed() {
+	if (controls.querySelector("#autoscroll").classList.contains("active")) {
 		clearTimeout(scroll);
-	} else {
-		pageScroll();
+		scroll = setTimeout(pageScroll, scrollTimeout);
 	}
+}
+
+controls.querySelector("#autoscroll-increase").addEventListener("click", () => {
+	scrollTimeout = Math.max(minTimeout, scrollTimeout - scrollIncrement);
+	updateScrollSpeed();
+});
+
+controls.querySelector("#autoscroll-decrease").addEventListener("click", () => {
+	scrollTimeout = Math.min(maxTimeout, scrollTimeout + scrollIncrement);
+	updateScrollSpeed();
+});
+
+controls.querySelector("#autoscroll").addEventListener("click", function() {
 	this.classList.toggle("active");
+	if (this.classList.contains("active")) {
+		pageScroll();
+	} else {
+		clearTimeout(scroll);
+	}
 });
 
 // Scaling
@@ -31,5 +53,6 @@ controls.querySelector("#font-size-increase").addEventListener("click", () => pa
 controls.querySelector("#font-size-decrease").addEventListener("click", () => pageScale(-0.1));
 controls.querySelector("#font-size-reset").addEventListener("click", () => pageScale(0));
 
+
 // Display the controls on JS-enabled browsers
 window.addEventListener("load", () => controls.classList.remove = "hidden");