Loop station/Drum Machine. (React and Web Audio API)

Hey all, I’ve written a small loop station application where you can record and replay drum beats in react that uses the web audio api. It’s still a bit buggy and i definitely have some things to fix before i keep expanding on the app, but I’m at the point where I could use a bit of feedback. Accurate timing in javscript really isn’t as simple as I’d hoped, unfortunately for sounds it isn’t as simple as using setInterval to play a beep every 1s, the timing will be close, but not close enough to play a drum beat with sufficient accuracy. I used this repo as inspiration for the audio scheduling, but I’ve had to add a fair bit too it, as this is just a metronome that plays evenly spaced beats.

I basically used the Web Audio to hold some of the apps state, and just call setState({}) to force the page to update. This way I dont have to update the state and the web audio context each time i want to update something, I just update the web audio context. So certain ‘state’ of the application, isn’t actually in this.state, its in this.audio, and whenever i update relevant ‘state’ on this.audio, I force the page to update by calling this.setState({}). This isn’t behaviour i’ve seen before on a react component, however I really wasn’t sure where to put alot of the logic, i didnt want it in the component because that made the component massive, so instead I just made an object that holds all the scheduling logic, and another one that holds all the music logic and stored them on this.audio and this.manuscript respectively. Although there are still some bugs, this approach seems to be working as expecting, but i’m not sure if it’s the best way to approach building this app. any feedback would be greatly appreciated.

I also have this.transionInterval on the DrumMachine component, I could have stored the interval in the state, but that seemed kinda weird. so i just put it on ‘this’ so that i can always clear and set the interval easily. Also any feedback on how I’ve layed out all my logic would be really helpful, after a certain amount of logic, my apps start to feel a bit spaghetti code-ish, especially when i’m doing something a little bit out of the norm, like working with the web audio api in react.

Github code is here
Demo is here

tldr: I built an app that works (mainly) as i had hoped, im just wondering if how the implementation is acceptable (or if there is a more conventional way to do what I’m doing). If someone could have a look at the constructor of my DrumMachine component, this is where I’m unsure if what i’m doing is okay. Integrating the web audio api might be better suited to plain html/css/js instead of using react. any thoughts ?