[{"data":1,"prerenderedAt":249},["ShallowReactive",2],{"site-settings":3,"article-why-we-built-a-stem-player-in-the-browser-and-not-in-logic":76,"blog-archive":115,"article-related-project-why-we-built-a-stem-player-in-the-browser-and-not-in-logic":206},{"global":4,"header":11,"footer":27},{"brandName":5,"brandStamp":6,"brandTagline":7,"communityUrl":8,"defaultSeoDescription":9,"defaultOgImage":10},"Useful Labs","est. 2025 · UK","Serious software, built out loud.","https:\u002F\u002Fcommunity.usefullabs.io","A product-led lab building production-grade platforms in the open — Sonic Artistes, Castora and more. A few times a year we take that same craft to a client build. Real software, shipped at product-team pace, shared honestly.",null,{"navLinks":12,"scarcityPulse":10,"showClock":25,"ctaLabel":26,"ctaUrl":8},[13,17,20,23],{"label":14,"url":15,"external":16},"Projects","\u002Fprojects",false,{"label":18,"url":19,"external":16},"Writing","\u002Fblog",{"label":21,"url":22,"external":16},"Tools","\u002Ftools",{"label":24,"url":8,"external":25},"The Hub",true,"Join the community",{"tagline":7,"aboutParagraph":28,"copyrightLine":29,"columns":30,"legalLinks":63},"A UK product lab, built in the open. Real production software, documented honestly — no hype, no highlights reel.","© Useful Labs {year} · Made in the UK with unusual patience.",[31,41,50],{"heading":14,"links":32},[33,36,39],{"label":34,"url":35,"external":25},"Sonic Artistes","https:\u002F\u002Fapp.sonicartistes.com",{"label":37,"url":38,"external":25},"Castora","https:\u002F\u002Fgetcastora.com",{"label":40,"url":15,"external":16},"Archive",{"heading":18,"links":42},[43,44,47],{"label":18,"url":19,"external":16},{"label":45,"url":46,"external":16},"RSS feed","\u002Frss.xml",{"label":48,"url":49,"external":16},"Newsletter","#newsletter",{"heading":51,"links":52},"Elsewhere",[53,54,57,60],{"label":24,"url":8,"external":25},{"label":55,"url":56,"external":25},"GitHub","https:\u002F\u002Fgithub.com\u002Fpaulwilliams-us",{"label":58,"url":59,"external":25},"X \u002F Twitter","https:\u002F\u002Fx.com",{"label":61,"url":62,"external":16},"Email","mailto:hello@usefullabs.io",[64,67,70,73],{"label":65,"url":66,"external":16},"Privacy","\u002Fprivacy",{"label":68,"url":69,"external":16},"Terms","\u002Fterms",{"label":71,"url":72,"external":16},"AI Policy","\u002Fai-policy",{"label":74,"url":75,"external":16},"Colophon","\u002Fcolophon",{"index":77,"slug":78,"title":79,"excerpt":80,"category":81,"categorySlug":83,"tags":84,"dateLabel":97,"readingLabel":98,"readingMinutes":99,"publishedIso":100,"href":101,"isFeatured":25,"relatedProjectIds":102,"featuredImage":104,"contentHtml":109,"ogImage":10,"modifiedIso":110,"author":111,"wordCount":114},"#0003","why-we-built-a-stem-player-in-the-browser-and-not-in-logic","Why we built a stem player in the browser (and not in Logic)","The brief was simple: let performers isolate and solo any instrument in a backing track, anywhere, on any device. The obvious answer was a DAW plugin. We went the other way — and the browser turned out to be the right call.",{"label":34,"tone":82},"accent","sonic-artistes",[85,88,91,94],{"name":86,"slug":87},"Cloudflare Pages","cloudflare-pages",{"name":89,"slug":90},"Offline-First","offline-first",{"name":92,"slug":93},"PocketBase","pocketbase",{"name":95,"slug":96},"Web Audio API","web-audio-api","2mo ago","3 min read",3,"2026-04-23T10:20:14","\u002Fblog\u002Fwhy-we-built-a-stem-player-in-the-browser-and-not-in-logic",[103],"multi-track-player",{"src":105,"alt":106,"width":107,"height":108},"https:\u002F\u002Foffice.usefullabs.io\u002Fassets\u002Fb45187b9-0bd7-4784-b7f3-51471b895a21","Sonic Artistes Multi-Track Player",1920,1281,"\n\u003Cp class=\"wp-block-paragraph\">The brief from Sonic Artistes was simple to describe and hard to solve. Musicians needed to rehearse with a full backing track while being able to isolate, mute, or solo any individual instrument stem — in real time, in the rehearsal room or at home, without specialist hardware.\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">The obvious route was a DAW-based solution. Ship a Logic template, or a Pro Tools session, or a standalone Mac app wrapping a commercial audio engine. Every one of those options hit the same wall: musicians don’t want to install software. They want to open a link.\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">So we built it in the browser.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Web Audio API is the quiet hero here\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">The entire stem player sits on top of the Web Audio API. Each stem is its own \u003Ccode>AudioBufferSourceNode\u003C\u002Fcode> routed through a \u003Ccode>GainNode\u003C\u002Fcode>, and the mixing UI just nudges gain values in real time. Latency is effectively zero on modern hardware. Playback speed adjusts without pitch-shifting via \u003Ccode>playbackRate\u003C\u002Fcode>. The whole audio graph is about 60 lines of code.\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">The surprise wasn’t that it worked — it was how stable it was. Across Safari, Chrome, and Firefox, on laptops, iPads, and Android phones, the same code powers the same experience. Zero framework. Zero build step. Static files on Cloudflare Pages.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Authentication is the hard bit\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">The naive approach to a streaming audio app is to drop stems in a bucket and link to them. That falls over the moment you need per-user access, revocable links, or anti-scraping.\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">We landed on PocketBase generating short-lived file tokens per request. The client asks for a song, PocketBase validates the session and returns a signed URL that lives for a minute. Stem URLs are never exposed to the frontend directly — they never even reach the browser’s network tab in a reusable form.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Offline mode wasn’t an afterthought\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">For touring environments, internet is a gamble. So the app can run entirely from a local data export using the File System Access API. The same UI code powers both the cloud-connected and fully offline experience — we just swap the data adapter at runtime.\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">That constraint shaped the architecture from day one. Every data call goes through a thin adapter layer. Swap one dependency and the whole app works without a server.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">What I’d change\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">If I were starting again I’d reach for a service worker for offline mode rather than File System Access — the API is still patchy on Safari and the UX of pointing at a local folder is awkward for non-technical users. But for the Sonic Artistes community, where most offline use happens on known devices, the current approach has held up fine.\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">The player is live at \u003Ca href=\"https:\u002F\u002Fmultitrack.sonicartistes.com\">multitrack.sonicartistes.com\u003C\u002Fa> and in daily use.\u003C\u002Fp>\n","2026-04-25T10:13:20",{"name":112,"slug":113},"Paul Williams","paul-williams",452,[116,138,147,178],{"index":117,"slug":118,"title":119,"excerpt":120,"category":121,"categorySlug":124,"tags":125,"dateLabel":129,"readingLabel":98,"readingMinutes":99,"publishedIso":130,"href":131,"isFeatured":16,"relatedProjectIds":132,"featuredImage":133},"#0004","defaults-are-decisions","Defaults are decisions","Most people never change a default. That makes the default the most powerful design decision you'll ever make — and the one most often left to chance. A short case for choosing them on purpose.",{"label":122,"tone":123},"Digital Experience","violet","digital-experience",[126],{"name":127,"slug":128},"User Experience","ux","today","2026-06-26T15:47:41","\u002Fblog\u002Fdefaults-are-decisions",[],{"src":134,"alt":135,"width":136,"height":137},"https:\u002F\u002Foffice.usefullabs.io\u002Fassets\u002F47c8520e-8f24-41ad-ab31-6d057cdb105f","Defaults Are Decisions",1672,941,{"index":77,"slug":78,"title":79,"excerpt":80,"category":139,"categorySlug":83,"tags":140,"dateLabel":97,"readingLabel":98,"readingMinutes":99,"publishedIso":100,"href":101,"isFeatured":25,"relatedProjectIds":145,"featuredImage":146},{"label":34,"tone":82},[141,142,143,144],{"name":86,"slug":87},{"name":89,"slug":90},{"name":92,"slug":93},{"name":95,"slug":96},[103],{"src":105,"alt":106,"width":107,"height":108},{"index":148,"slug":149,"title":150,"excerpt":151,"category":152,"categorySlug":154,"tags":155,"dateLabel":168,"readingLabel":169,"readingMinutes":170,"publishedIso":171,"href":172,"isFeatured":16,"relatedProjectIds":173,"featuredImage":174},"#0002","openclaw-changed-everything-then-the-security-alarms-went-off","OpenClaw: The Agentic AI Revolution Is Here (And So Are the Security Nightmares)","You have probably seen it by now. Your Twitter feed. Your YouTube recommendations. That one person in your no-code community who will not stop talking about it. OpenClaw — the AI agent that lets you message your computer like it is a colleague and watch it actually do things. “It negotiated a £3,300 discount on […]",{"label":153,"tone":123},"Claude Code","claude-code",[156,159,162,165],{"name":157,"slug":158},"AI Agents","ai-agents",{"name":160,"slug":161},"Automation","automation",{"name":163,"slug":164},"MCP","mcp",{"name":166,"slug":167},"Security","security","4mo ago","16 min read",16,"2026-02-08T13:08:02","\u002Fblog\u002Fopenclaw-changed-everything-then-the-security-alarms-went-off",[],{"src":175,"alt":176,"width":107,"height":177},"https:\u002F\u002Foffice.usefullabs.io\u002Fassets\u002F7d0de0ff-ef2d-4853-b79e-d3abc3211454","OpenClaw Article 01 Featured Image",1072,{"index":179,"slug":180,"title":181,"excerpt":182,"category":183,"categorySlug":186,"tags":187,"dateLabel":196,"readingLabel":197,"readingMinutes":198,"publishedIso":199,"href":200,"isFeatured":16,"relatedProjectIds":201,"featuredImage":202},"#0001","logic-over-hype-how-to-choose-digital-tools-without-the-noise","Logic Over Hype: How to Choose Digital Tools Without the Noise","Open YouTube right now. What do you see? Likely a grid of thumbnails featuring people making shocked faces, overlaid with text that screams: “This new AI model is INSANE,” “Next.js 16 changes EVERYTHING,” or “Use this tool to become a millionaire by Tuesday.” If you are a creator, developer, or business owner, this constant barrage […]",{"label":184,"tone":185},"General","neutral","general",[188,191,194],{"name":189,"slug":190},"Developer Advice","developer-advice",{"name":192,"slug":193},"Productivity","productivity",{"name":21,"slug":195},"tools","5mo ago","7 min read",7,"2026-01-01T22:28:25","\u002Fblog\u002Flogic-over-hype-how-to-choose-digital-tools-without-the-noise",[],{"src":203,"alt":204,"width":107,"height":205},"https:\u002F\u002Foffice.usefullabs.io\u002Fassets\u002Fd36b230a-aafe-49b5-be98-8c9570cf2523","Logic Over Hype Featured Image",1047,{"id":103,"slug":103,"name":207,"idLabel":208,"tagText":209,"description":210,"accent":211,"meta":213,"modules":223,"chips":234,"progress":239,"followLabel":242,"followHref":243,"siteUrl":244,"siteLabel":245,"status":246,"isFeatured":25,"isHeroFeatured":16,"publishedIso":247,"modifiedIso":248,"hero":-1},"Multi Track Player","03 \u002F MT","Live · rebuild in progress","A professional stem player that puts the full band in a musician's hands — giving performers and rehearsal directors precise, independent control over every instrument in a track, anywhere, on any device. Now being rebuilt as Simply Playback, a multi-tenant platform serving multiple companies from one deployment.",{"token":82,"rgb":212},"6, 182, 212",[214,217,220],{"value":215,"label":216},"Ready","Offline",{"value":218,"label":219},"API","Web Audio",{"value":221,"label":222},"Only","Invite",[224,225,226,227,228,229,230,231,232,233],"Independent stem control","Theme-based song library","Personal setlist builder","Secure authenticated streaming","Custom admin panel","Invite-only onboarding","Offline \u002F local mode","Role-based access control","Playback speed control","Zero-framework frontend",[235,236,237,92,238,95,86],"Vanilla JS","HTML","CSS","Wasabi S3",{"label":240,"percent":241},"Build progress",100,"Follow the build","\u002Fprojects\u002Fmulti-track-player","https:\u002F\u002Fmultitrack.sonicartistes.com","multitrack.sonicartistes.com","live","2026-02-24T08:50:39","2026-04-24T08:41:32",1782519037277]