mirror of
https://github.com/bspeice/speice.io
synced 2024-12-22 16:48:10 -05:00
1 line
10 KiB
JavaScript
1 line
10 KiB
JavaScript
|
"use strict";(self.webpackChunkspeice_io=self.webpackChunkspeice_io||[]).push([["5644"],{74092:function(e,t,n){n.r(t),n.d(t,{assets:function(){return l},contentTitle:function(){return r},default:function(){return u},frontMatter:function(){return s},metadata:function(){return i},toc:function(){return c}});var i=n(74729),a=n(85893),o=n(50065);let s={slug:"2011/11/webpack-industrial-complex",title:"The webpack industrial complex",date:new Date("2022-11-20T12:00:00.000Z"),authors:["bspeice"],tags:[]},r=void 0,l={authorsImageUrls:[void 0]},c=[{value:"Starting strong",id:"starting-strong",level:2},{value:"Continuing on",id:"continuing-on",level:2},{value:"Floundering about",id:"floundering-about",level:2},{value:"Learning and reflecting",id:"learning-and-reflecting",level:2}];function d(e){let t={a:"a",code:"code",h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.p,{children:'This started because I wanted to build a synthesizer. Setting a goal of "digital DX7" was ambitious, but I needed something unrelated to the day job. Beyond that, working with audio seemed like a good challenge. I enjoy performance-focused code, and performance problems in audio are conspicuous. Building a web project was an obvious choice because of the web audio API documentation and independence from a large Digital Audio Workstation (DAW).'}),"\n",(0,a.jsx)(t.p,{children:"The project was soon derailed trying to sort out technical issues unrelated to the original purpose. Finding a resolution was a frustrating journey, and it's still not clear whether those problems were my fault. As a result, I'm writing this to try making sense of it, as a case study/reference material, and to salvage something from the process."}),"\n",(0,a.jsx)(t.h2,{id:"starting-strong",children:"Starting strong"}),"\n",(0,a.jsx)(t.p,{children:'The sole starting requirement was to write everything in TypeScript. Not because of project scale, but because guardrails help with unfamiliar territory. Keeping that in mind, the first question was: how does one start a new project? All I actually need is "compile TypeScript, show it in a browser."'}),"\n",(0,a.jsxs)(t.p,{children:["Create React App (CRA) came to the rescue and the rest of that evening was a joy. My TypeScript/JavaScript skills were rusty, but the online documentation was helpful. I had never understood the appeal of JSX (why put a DOM in JavaScript?) until it made connecting an ",(0,a.jsx)(t.code,{children:"onEvent"})," handler and a function easy."]}),"\n",(0,a.jsx)(t.p,{children:'Some quick dimensional analysis later and there was a sine wave oscillator playing A=440 through the speakers. I specifically remember thinking "modern browsers are magical."'}),"\n",(0,a.jsx)(t.h2,{id:"continuing-on",children:"Continuing on"}),"\n",(0,a.jsx)(t.p,{children:'Now comes the first mistake: I began to worry about "scale" before encountering an actual problem. Rather than rendering audio in the main thread, why not use audio worklets and render in a background thread instead?'}),"\n",(0,a.jsxs)(t.p,{children:["The first sign something was amiss came from the TypeScript compiler errors showing the audio worklet API ",(0,a.jsx)(t.a,{href:"https://github.com/microsoft/TypeScript/issues/28308",children:"was missing"}),". After searching out Github issues and (unsuccessfully) tweaking the ",(0,a.jsx)(t.code,{children:".tsconfig"})," settings, I settled on installing a package and moving on."]}),"\n",(0,a.jsxs)(t.p,{children:['The next problem came from actually using the API. Worklets must load from separate "modules," but it wasn\'t clear how to guarantee the worklet code stayed separate from the application. I saw recommendations to use ',(0,a.jsx)(t.code,{children:"new URL(<local path>, import.meta.url)"})," and it worked! Well, kind of:"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"Browser error",src:n(44328).Z+"",width:"1279",height:"143"})}),"\n",(0,a.jsxs)(t.p,{children:["That file has the audio processor code, so why does it get served with ",(0,a.jsx
|