10-Second Typing Test

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

\n \n Start Test\n \n Time left: {timeLeft}s\n \n Characters typed: {currentIndex} / {text.length}\n \n

\n {audioData && (\n

Typing Spectrogram

\n )}\n

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

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nexport default server;","createdAt",["D",1725125703283],"version",5,"currentUserHasLiked","likeCount",1,"forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_133":134,"_135":136},"handle","ejfox","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXg0S3IwMDg3bURoN1dIUHg5TW5sSUhKRyIsImluaXRpYWxzIjoiRUYifQ","forkedVal","fileId","interval","slug","ejfox/typingTestSpectrogram","description","// This app creates a 10-second typing test with audio recording and spectrogram visualization.","versions",[146,149,153,157,160,163],{"_121":122,"_147":-5,"_119":148,"_116":114},"prId",["D",1725125703283],{"_121":150,"_147":-5,"_119":151,"_116":152},4,["D",1725125584010],"13c9115e-67bf-11ef-8b09-de64eea55b61",{"_121":154,"_147":-5,"_119":155,"_116":156},3,["D",1725125506111],"e55a828a-67be-11ef-a34e-de64eea55b61",{"_121":94,"_147":-5,"_119":158,"_116":159},["D",1725125440987],"be894e3e-67be-11ef-a281-de64eea55b61",{"_121":125,"_147":-5,"_119":161,"_116":162},["D",1725125359237],"8dcf5bf8-67be-11ef-a14c-de64eea55b61",{"_121":33,"_147":-5,"_119":164,"_116":165},["D",1725125304235],"6d069bb6-67be-11ef-abe3-de64eea55b61","recentThread","breadcrumbs","comments",[170,181],{"_116":171,"_172":173,"_119":174,"_175":-5,"_176":27,"_177":27,"_21":178},"35eaad9e-6880-11ef-a80d-de64eea55b61","body","This is a great idea for an app!",["D",1725208534144],"updatedAt","canDelete","canEdit",{"_133":179,"_135":180},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_116":182,"_172":183,"_119":184,"_175":-5,"_176":27,"_177":27,"_21":185},"8369aa36-6888-11ef-8bfa-de64eea55b61","Thanks! I really want to annotate the spikes on the visualization with the key-press but I couldn't get it to work with Townie",["D",1725212100134],{"_133":134,"_135":136},"isOwner","routes/_app.v.$handle.$name.fork",{"_97":98,"_99":100,"_98":189,"_167":-5,"_168":205,"_133":134,"_142":143,"_104":105,"_102":103,"_121":-7,"_52":53},{"_102":103,"_99":100,"_104":105,"_106":-5,"_107":-5,"_108":109,"_110":70,"_111":112,"_113":114,"_115":27,"_116":114,"_117":118,"_119":190,"_121":122,"_123":27,"_124":125,"_126":33,"_127":33,"_128":33,"_129":94,"_130":33,"_131":-5,"_21":191,"_137":-5,"_138":-5,"_139":-7,"_140":141,"_142":143,"_144":192},["D",1725125703283],{"_133":134,"_135":136},[193,195,197,199,201,203],{"_121":122,"_147":-5,"_119":194,"_116":114},["D",1725125703283],{"_121":150,"_147":-5,"_119":196,"_116":152},["D",1725125584010],{"_121":154,"_147":-5,"_119":198,"_116":156},["D",1725125506111],{"_121":94,"_147":-5,"_119":200,"_116":159},["D",1725125440987],{"_121":125,"_147":-5,"_119":202,"_116":162},["D",1725125359237],{"_121":33,"_147":-5,"_119":204,"_116":165},["D",1725125304235],[206,209],{"_116":171,"_172":173,"_119":207,"_175":-5,"_176":27,"_177":27,"_21":208},["D",1725208534144],{"_133":179,"_135":180},{"_116":182,"_172":183,"_119":210,"_175":-5,"_176":27,"_177":27,"_21":211},["D",1725212100134],{"_133":134,"_135":136},"routes/_app","actionData","errors"]