// This app creates a 10-second typing test with audio recording and spectrogram visualization. // It uses the Web Audio API for recording and analyzing audio, Canvas for drawing the spectrogram, and provides a typing interface. // TailwindCSS is used for styling. /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [input, setInput] = useState(""); const [currentIndex, setCurrentIndex] = useState(0); const [timeLeft, setTimeLeft] = useState(10); const [isRecording, setIsRecording] = useState(false); const [audioData, setAudioData] = useState(null); const audioContextRef = useRef(null); const mediaRecorderRef = useRef(null); const canvasRef = useRef(null); const text = ` function quickSort(arr) { if (arr.length <= 1) { return arr; } const pivot = arr[Math.floor(arr.length / 2)]; const left = arr.filter(x => x < pivot); const middle = arr.filter(x => x === pivot); const right = arr.filter(x => x > pivot); return [...quickSort(left), ...middle, ...quickSort(right)]; } // Example usage: const unsortedArray = [64, 34, 25, 12, 22, 11, 90]; console.log(quickSort(unsortedArray)); `.trim(); useEffect(() => { if (isRecording && timeLeft > 0) { const timer = setInterval(() => setTimeLeft(t => t - 1), 1000); return () => clearInterval(timer); } }, [isRecording, timeLeft]); const startRecording = async () => { setCurrentIndex(0); setInput(""); try { console.log("Starting recording..."); const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); console.log("Got audio stream"); audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)(); const source = audioContextRef.current.createMediaStreamSource(stream); const analyzer = audioContextRef.current.createAnalyser(); source.connect(analyzer); mediaRecorderRef.current = new MediaRecorder(stream); const chunks = []; mediaRecorderRef.current.ondataavailable = e => chunks.push(e.data); mediaRecorderRef.current.onstop = async () => { console.log("Recording stopped"); const blob = new Blob(chunks, { type: 'audio/ogg; codecs=opus' }); const arrayBuffer = await blob.arrayBuffer(); setAudioData(arrayBuffer); }; mediaRecorderRef.current.start(); console.log("MediaRecorder started"); setIsRecording(true); setTimeLeft(10); setTimeout(() => { mediaRecorderRef.current.stop(); setIsRecording(false); }, 10000); } catch (error) { console.error("Error starting recording:", error); } }; useEffect(() => { if (audioData && canvasRef.current) { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); console.log("Drawing spectrogram..."); audioContext.decodeAudioData(audioData, buffer => { const data = buffer.getChannelData(0); const step = Math.ceil(data.length / canvas.width); const amp = canvas.height / 2; ctx.fillStyle = 'rgb(200, 200, 200)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.lineWidth = 1; ctx.strokeStyle = 'rgb(0, 0, 0)'; ctx.beginPath(); for (let i = 0; i < canvas.width; i++) { const min = Math.min(...data.slice(i * step, (i + 1) * step)); const max = Math.max(...data.slice(i * step, (i + 1) * step)); ctx.moveTo(i, (1 + min) * amp); ctx.lineTo(i, (1 + max) * amp); } ctx.stroke(); console.log("Spectrogram drawn"); }, error => { console.error("Error decoding audio data:", error); }); } }, [audioData]); const handleKeyDown = (e) => { if (isRecording && timeLeft > 0) { if (e.key === 'Enter' && text[currentIndex] === '\n') { setCurrentIndex(prevIndex => prevIndex + 1); setInput(prevInput => prevInput + '\n'); } else if (e.key === text[currentIndex]) { setCurrentIndex(prevIndex => prevIndex + 1); setInput(prevInput => prevInput + e.key); } } }; useEffect(() => { window.addEventListener('keydown', handleKeyDown); return () => { window.removeEventListener('keydown', handleKeyDown); }; }, [isRecording, timeLeft, currentIndex]); return (

10-Second Typing Test

          {text.split('').map((char, index) => (
            
              {char === '\n' ? '↵\n' : char}
            
          ))}

Time left: {timeLeft}s Characters typed: {currentIndex} / {text.length}

{audioData && (

Typing Spectrogram

)}

); } function client() { console.log("Client-side code running"); createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response(` 10-Second Typing Test

`, { headers: { "content-type": "text/html", }, }); } export default server;

typingTestSpectrogram