speed control input

web-demo/index.html

@@ -65,6 +65,7 @@
 			<button id="control_backward">⬅️</button>
 			<button id="control_forward">➡️</button>
 			<button id="control_slower">⏪</button>
+			<input type="text" id="control_speed" value="1.00x"></>
 			<button id="control_faster">⏩</button>
 		</div>
 	</body>

web-demo/player.js

@@ -41,14 +41,23 @@ function elapsed() {
 	return (document.timeline.currentTime - startTime) / 1000;
 }
 
+const control_speed = document.getElementById("control_speed");
+
 var paused = false;
 var speed = 0;
-function speed_ratio(speed) {
-	if (speed < 0) {
-		return [BigInt(4) ** BigInt(-speed), BigInt(5) ** BigInt(-speed)];
+function set_speed(new_speed) {
+	speed = new_speed;
+	var speed_num = null;
+	var speed_den = null;
+	if (new_speed < 0) {
+		speed_num = BigInt(4) ** BigInt(-new_speed);
+		speed_den = BigInt(5) ** BigInt(-new_speed);
 	} else {
-		return [BigInt(5) ** BigInt(speed), BigInt(4) ** BigInt(speed)];
+		speed_num = BigInt(5) ** BigInt(new_speed);
+		speed_den = BigInt(4) ** BigInt(new_speed);
 	}
+	playback.set_scale(elapsed(), speed_num, speed_den);
+	control_speed.value = `${((5 / 4) ** new_speed).toPrecision(3)}x`;
 }
 
 // Controls
@@ -66,14 +75,25 @@ document.getElementById("control_backward").addEventListener("click", (e) => {
 	playback.seek_backward(2.0);
 });
 document.getElementById("control_slower").addEventListener("click", (e) => {
-	speed = Math.max(speed - 1, -27);
-	const [speed_num, speed_den] = speed_ratio(speed);
-	playback.set_scale(elapsed(), speed_num, speed_den);
+	set_speed(Math.max(speed - 1, -27));
+});
+const regex = new RegExp("^([^x]*)x?$");
+control_speed.addEventListener("change", (e) => {
+	const parsed = regex.exec(e.target.value);
+	if (!parsed) {
+		set_speed(0);
+		return;
+	}
+	const input = Number(parsed.at(1));
+	if (Number.isNaN(input)) {
+		set_speed(0);
+		return;
+	}
+	const rounded = Math.round(Math.log(input) / Math.log(5 / 4));
+	set_speed(Math.max(-27, Math.min(27, rounded)));
 });
 document.getElementById("control_faster").addEventListener("click", (e) => {
-	speed = Math.min(speed + 1, 27);
-	const [speed_num, speed_den] = speed_ratio(speed);
-	playback.set_scale(elapsed(), speed_num, speed_den);
+	set_speed(Math.min(speed + 1, 27));
 });
 
 // Rendering