How to read reactive state from imperative contexts (audio/music)

tl;dr: is there any major DO NOT guideline around (constantly!) reading reactive states from functions (callbacks) that don´t need the reactivity? Will it create "tracking" "dependencies" or any other resources that won´t get actually used or not get properly disposed? Context: I am trying to build a fun little audio app using Solid and Tone.js In the visual UI part of the app I am accessing signals and stores containing things like "musical notes". The usual
But on the audio part of the app I am reading parts of this same state on "musical time", via the Tone.js scheduler which is a sort of setTimeout / requestAnimationFrame API that works on a pausable musical timeline. The below simplified snippet - runs on the scheduled invocations from Tone.js - consumes AND updates signals, memos, computations
const tick = (currentTime: number) => {
const measures = getMeasures(); // computation that uses stores/signals
const time = getCurrentTime(measures); // bars, beets, 16ths e.g.: 12:4:2
if (!measure) {
stop(); // updates several signals and stores
}
else {
setTime(time); // updates a signal
instruments.forEach(instrument => instrument(time)); // also consume signals
}
}
const tick = (currentTime: number) => {
const measures = getMeasures(); // computation that uses stores/signals
const time = getCurrentTime(measures); // bars, beets, 16ths e.g.: 12:4:2
if (!measure) {
stop(); // updates several signals and stores
}
else {
setTime(time); // updates a signal
instruments.forEach(instrument => instrument(time)); // also consume signals
}
}
I still don´t understand the 🪄 magic behind Solid´s reactivity (and calling it magic means I will probably never will 😅 ) so things like tracking, parents, owners and "re-run" are scaring me a bit. ❓ Am I running into a wall here by calling isPlaying() volume() and the likes on hundreds of different little time sensitive closures () => .... 😱 ? Please pardon the noobness. And if you like music/audio things don´t hesitate to reach out 🎵
12 Replies
thetarnav
thetarnav13mo ago
❓ Am I running into a wall here by calling isPlaying() volume() and the likes on hundreds of different little time sensitive closures () => .... 😱 ?
is this in a tracking scope or a raf loop? if the scope isn't tracking, signal access won't do any additional work besides giving you the current value and if the scope is tracking, a signal instance will have to be pushed into the sources array or the current listener, which shouldn't be too expensive either
bigmistqke
bigmistqke13mo ago
GitHub
GitHub - bigmistqke/tr8ck: An online tracker/sequencer/daw ⚡ by sol...
An online tracker/sequencer/daw ⚡ by solidjs and faust - GitHub - bigmistqke/tr8ck: An online tracker/sequencer/daw ⚡ by solidjs and faust
Unknown User
Unknown User13mo ago
Message Not Public
Sign In & Join Server To View
bigmistqke
bigmistqke13mo ago
nice! did not know about gridsound looks cool!! for me it was just a lil experiment w dsp and trackers, probably not gonna continue on it or anything. was a fun month 🙂 found this dsp-language called Faust that you can compile to wasm from the client https://github.com/grame-cncm/faust2webaudio pretty fun stuff if u wanna code ur own fx/synthesizers.
bigmistqke
bigmistqke13mo ago
saw some other audio-projects pass by in this discord, p.ex https://tahti.studio/ is build w solid (close-sourced tho, so is a bit of a bummer)
tahti
a groovebox for the browser
bigmistqke
bigmistqke13mo ago
if u have some updates on ur project lmk always curious to web-audio and solid
Unknown User
Unknown User13mo ago
Message Not Public
Sign In & Join Server To View
andrezero
andrezero13mo ago
Thank you! Doubling down on my approach and having a really good time right now 😸 @bigmistqke and @adoublef great resources, great projects! Tahti is cool as well and their solid knobs - real solid knobs, pun intended - is open source https://github.com/tahti-studio/solid-knobs The main focus of my project is TIME My main use case is building the ultimate metronome for musical practice. So far, I have built an alternative Transport service to Tone so that I can have a timeline as you have on your typical DAW with tempo and signature changes (Tone doesn't allow this as it recalculates your current position once you change signature). It's going amazingly well thanks to the simplicity of Solid @bigmistqke your squencer is cool af 😎 great UI there
Unknown User
Unknown User13mo ago
Message Not Public
Sign In & Join Server To View
bigmistqke
bigmistqke13mo ago
tysm! nice scope!
I still don´t understand the 🪄 magic behind Solid´s reactivity (and calling it magic means I will probably never will 😅 ) so things like tracking, parents, owners and "re-run" are scaring me a bit.
bigmistqke
bigmistqke13mo ago
this is a really great article that cleared a lot of things up for me regarding ownership
Want results from more Discord servers?
Add your server
More Posts
How to handle auto scrolling in a chat app when new message comes in?So this is an example what i currently have ```jsx const App = () => { const [messages, setMessageHow to get `onMount` to be called on the client for a server-rendered siteI've set up a new project using `solid-start` with `solid-start-aws`. Running `npm run build` createReactivity with normal functionsI try the following: `doubleCount` is using `createMemo` while `tripleCount` is a normal anonymous fSolid-js design system CSS troubleshootingI have a design-system I am building out using Kobalte. However, when I export the components none oHow to throw an Error on an unknown route?I define the content for each route like so: ```jsx return ( <Routes> <Route path={'/foo'} eleJoining SolidJS Vite app with a rest api as single appHello, I'm building a simple front end with the default SolidJS+Vite template. I call this the clienHow to make a sticky navbar change color when it has reached the top? Like in solidjs homepageI think I should use this https://github.com/solidjs-community/solid-primitives/tree/main/packages/iHow to detect env in `createServerData`Hey there, during development I like to run `npm run dev` on my site, so I can render it locally in Uncaught ReferenceError: _$HY is not definedSo, I'm trying to change my site to server side rendering. The site runs locally when run via `yarn createResource swallows error?I noticed errors get swallowed when I use `createResource`. Here is some simplified example code: ``