[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_109":110,"_111":112},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","test_account_001","name","guitar-lab","path","frontend/components/Metronome.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":38,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/test_account_001/guitar-lab/code/frontend/components/Metronome.tsx","extension","id","387594e5-798b-4910-98f1-c3634b649a38","Metronome.tsx","fileId","19b492fa-9e54-11f1-9263-1607ee4eb77e","parentId","01a02aa4-dbb8-719f-bc42-fe474015a10a","branchId","fe3da5af-30a0-482c-9cfe-bded055894d0","branchVersion",13,"latest",true,"createdAt",["D",1787421947084],"version",0,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst midiToFreq = (midi: number) => 440 * Math.pow(2, (midi - 69) / 12);\n\nexport function Metronome() {\n const [bpm, setBpm] = useState(100);\n const [timeSig, setTimeSig] = useState(4);\n const [running, setRunning] = useState(false);\n const intervalRef = useRef();\n const ctxRef = useRef();\n\n useEffect(() => {\n return () => {\n if (intervalRef.current) window.clearInterval(intervalRef.current);\n };\n }, []);\n\n const click = (accent: boolean) => {\n const ctx = ctxRef.current;\n if (!ctx) return;\n const t = ctx.currentTime;\n const osc = ctx.createOscillator();\n const gain = ctx.createGain();\n osc.type = \"square\";\n osc.frequency.value = accent ? 1600 : 1100;\n gain.gain.setValueAtTime(0.0001, t);\n gain.gain.exponentialRampToValueAtTime(0.3, t + 0.005);\n gain.gain.exponentialRampToValueAtTime(0.0001, t + 0.05);\n osc.connect(gain).connect(ctx.destination);\n osc.start(t);\n osc.stop(t + 0.06);\n };\n\n const start = () => {\n if (!ctxRef.current) ctxRef.current = new AudioContext();\n ctxRef.current.resume();\n let beat = 0;\n click(true);\n intervalRef.current = window.setInterval(() => {\n beat++;\n click(beat % timeSig === 0);\n }, (60 / bpm) * 1000);\n setRunning(true);\n };\n\n const stop = () => {\n if (intervalRef.current) window.clearInterval(intervalRef.current);\n setRunning(false);\n };\n\n const changeBpm = (v: number) => {\n setBpm(v);\n if (running) {\n // restart interval timer with new tempo\n if (intervalRef.current) window.clearInterval(intervalRef.current);\n let beat = 0;\n intervalRef.current = window.setInterval(() => {\n beat++;\n click(beat % timeSig === 0);\n }, (60 / v) * 1000);\n }\n };\n\n const formatBpm = (b: number) => {\n const mins = Math.floor(b / 60);\n const secs = b % 60;\n if (mins >= 4) return `${mins + 1} seconds per click`;\n return secs === 0 ? `${mins + 1} sec/click` : `${Math.round(60 / b * 100) / 100}s`;\n };\n\n return (\n

{bpm}

BPM — beat {formatBpm(bpm)}

\n changeBpm(Number(e.target.value))}\n className=\"w-full accent-emerald-600 mt-3\"\n />\n

\n\n

\n {[3, 4, 6].map((ts) => (\n \n ))}\n

\n\n \n {running ? \"■ Stop\" : \"▶ Start\"}\n \n

Accented click = beat one. First click happens on press.

\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","6fbe4a5a-23d4-4486-a8d2-b5b17783e6b8",["D",1787421842194],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Guitar music theory & scales site with a fretboard visualizer","imageUrl","userId","e6d51557-2988-4ce3-bf61-63d827903a6c","pinnedFileId","01a02aa4-dbb8-719f-bc43-19e2bc8208fe","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","3ebf4d50-fe40-465b-915c-bd543c8a8608","tursoName","6fbe4a5a23d44486a8d2b5b17783e6b8","tursoHostname","6fbe4a5a23d44486a8d2b5b17783e6b8-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789521640046],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_108":104},"org",{"_9":10,"_102":-5,"_103":104,"_59":60,"_105":106,"_107":44},"branch",{"_37":92,"_11":93,"_22":30,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned",22,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJabHpKOGNWSmhqcWduM3VVV0xTUGlicVprayJ9","tier","free","canRestrictVals","profileImageUrl","ctx",{"_85":-5,"_142":143,"_144":145,"_146":147,"_148":44,"_149":44,"_150":44,"_151":34,"_152":-5,"_153":-7,"_154":-7,"_155":38,"_156":44,"_157":44,"_158":-5,"_159":44,"_160":44,"_161":44,"_162":-5},"ENV",{"_113":114,"_115":116,"_117":93,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]