Mic Status Light

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_164":165,"_166":167},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_105":86,"_27":53,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":58,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":37,"_35":36,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","mic-status-light.ts","latestPath","fileId","3ea7be80-ad21-11f1-a86a-1607ee4eb77e","name","fileType","script","content","Claude finished the response\nThought for 35s\nGood catch — a couple of things going on:\n\n\"Floating\" over your scene: the page background is currently solid (--bg: #060504), so OBS is compositing it as an opaque dark rectangle instead of letting your stream show through. Needs background: transparent.\nDropdown/button not responding: this is almost always one of two things in OBS Browser Source — either you're not in Interact mode when clicking (mouse clicks pass through to OBS otherwise), or getUserMedia is throwing an error (permission denied / no secure context) and failing silently. Right now the page swallows that error into a tiny sublabel, so it looks \"broken\" instead of telling you what's wrong.\nI'll fix the transparency and make errors loud and visible on-screen so you can actually see what's failing.\n\nViewed 3 files, edited a file\nThat line has two id attributes on the same element (sublabel and db-readout). Browsers only honor the first one, so document.getElementById('db-readout') in the script returns null — and the animation loop tries to write to it on every single frame. That throws immediately after the mic starts, silently killing the whole script. That's almost certainly why nothing seemed to respond.\n\nEdited 3 files, viewed a file, read a file\nTwo fixes:\n\nFloating — background is now transparent, so only the orb and panel render; your stream shows through everywhere else.\nThe actual bug — the sub-label div had two id attributes on it (sublabel and db-readout). Browsers silently drop the second one, so the script's reference to it was null, which crashed the update loop the instant the mic started (or the instant you clicked Enable, in the error path). That's why clicking felt like it did nothing.\nI also made errors show up directly on the orb's text (e.g. MIC ERROR — NotAllowedError: ...) instead of failing silently, so if it still doesn't work you'll actually see why.\n\nOne OBS-specific thing worth checking regardless: clicks on a Browser Source only register while you're in Interact mode (right-click the source → Interact). If you click Enable and a small permission bar doesn't pop up asking for mic access, that's usually OBS needing you to grant it once — try again with Interact active and watch for that prompt.\n\n\nMic status light\nCode·HTML \nno mic api. this browsercontext blocks mic access\n\nThought for 14s\nThat message means navigator.mediaDevices doesn't exist at all — not a permissions issue, but a secure context issue. Chromium (which OBS's Browser Source runs on) only exposes the mic API on https:// origins or on localhost. A file opened directly via file:// doesn't qualify, so the API is simply missing.\n\nThe fix is to serve the file over localhost instead of pointing OBS at the raw file.\n\nQuickest way — pick whichever you have installed:\n\nIf you have Python:\n\ncd path\\to\\the\\folder\\with\\mic-status-light.html\npython -m http.server 8000\nIf you have Node:\n\nnpx serve . -p 8000\nThen in OBS:\n\nEdit the Browser Source\nUncheck \"Local file\"\nSet URL to http://localhost:8000/mic-status-light.html\nLeave it running in the background while you stream (the terminal window can just sit minimized)\nhttp://localhost is specifically treated as secure by Chromium even without https, so navigator.mediaDevices will exist and the Enable button will actually work.\n\nIf you'd rather not keep a terminal open every stream, the more permanent options are: turning that command into a startup script/scheduled task, or hosting the file somewhere with real HTTPS (GitHub Pages, Netlify, etc.) and pointing OBS at that URL instead. Want me to set up either of those for you?\n\nhost it on val town\n\nLoaded tools, viewed a file, used a tool\nI don't have a direct Val Town connector in this chat (no MCP tool for it, and my sandbox's network access doesn't reach val.town), so I can't create the val for you automatically — but I can give you the exact code to paste in, formatted as a Val Town HTTP val.\n\nViewed a file mic-status-light.html\nHere's the val code. Create a new HTTP val on val.town, paste this in, and it'll serve the exact same page over https:// — which fixes the secure-context problem too.\n\nCreated a file, ran a command, read a file\nTo deploy it:\n\nGo to val.town and create a new val\nChoose HTTP as the val type\nPaste in the contents of that file\nRun it — Val Town gives you a live https://yourusername-mic-status-light.web.val.run style URL\nIn OBS, point the Browser Source at that URL (not \"Local file\")\nSince it's real https://, navigator.mediaDevices will exist and the \"NO MIC API\" error goes away. Once it's live, paste the URL back here and I can fetch it to double-check it's serving correctly before you wire it into OBS.\n\n\nMic status light.val\nTS \n\nWrite a message…\n\n\nClaude is AI and can make mistakes.\nMic status light.val · TS\nconst html = String.raw`\n\n\n\nMic Status Light\n\n\n\n \n

STANDBY

-- dB

\n \n

press C for controls

\n \n

\n \n \n Input device\n \n \n \n Sensitivity threshold\n

\n \n 12\n

\n \n \n Live level\n

\n \n

\n \n\n\n \n\n`;\n \nexport default async function (req: Request): Promise {\n return new Response(html, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}","http","createdAt",["D",1789049406035],"branchVersion","branchId","b41c3508-81dd-4ef5-8892-cd6234dc0b1a","id","36491433-60f8-4518-8c15-6d2b04523a3c","obs-mic-overlay",["D",1789049318301],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","cc37ba10-6e6d-4af6-a801-9955c92d23c4","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a04ba1-c79f-7319-b4f2-7c4f3772837b","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_104":100},"org",{"_96":95,"_97":98,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",9,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","StonedSheamus","handle","displayName","Shea Stolp","avatar","https://lh3.googleusercontent.com/a/ACg8ocIWmQgR3gyoMMicg2zCAoN1c7i36qX5mf9gRIdIXm8F2mo-ig=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":160,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":161,"_80":162,"_82":163,"_84":25},"tree",[151,152],"files",[151,152],"counts",{"_141":62,"_142":138,"_143":62,"_144":145,"_146":147},"contents",[126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":135,"_32":136,"_30":137,"_129":-5,"_41":42,"_40":138,"_130":58,"_38":139,"_13":62,"_33":34,"_35":53,"_24":25,"_133":-5,"_27":140},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":25,"_38":131,"_13":132,"_33":37,"_35":36,"_24":25,"_133":-5,"_27":134},"10058f0e-ea14-46f6-94ab-44e77e3330d3","parentId","latest",["D",1789049406035],3,"label",[28],"2b691ae4-3105-4b47-a399-ca3174946606","main.ts","1e9200f6-ad21-11f1-b022-1607ee4eb77e",1,["D",1789049318341],[136],"pulls","branches","forks","envVars",{"_148":62,"_150":62},"connections",{"_148":62,"_149":62},"count","unfilledCount","emptyCount",{"_43":135,"_32":136,"_30":137,"_129":-5,"_41":42,"_40":138,"_130":58,"_38":157,"_13":62,"_33":34,"_35":53,"_24":25,"_133":-5,"_154":158,"_27":159},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":25,"_38":153,"_13":132,"_33":37,"_35":36,"_24":25,"_133":-5,"_154":155,"_27":156},["D",1789049406035],"children",[],[28],["D",1789049318341],[],[136],["D",1789049318301],{"_96":95,"_104":100},{"_96":95,"_97":98,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_123":197,"_198":199,"_200":201,"_202":25,"_203":25,"_204":25,"_205":58,"_206":-5,"_207":-7,"_208":-7,"_209":62,"_210":25,"_211":25,"_212":-5,"_213":25,"_214":25,"_215":25,"_216":-5},"ENV",{"_168":169,"_170":171,"_172":86,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v5