Kaho Cheung: Beats in the browser

Hi, everyone, I'm Kaho. Welcome to my talk, Beats in the browser. I'll be showcasing various ways of making music with React and Next.js. Little bit about me first, I'm a software engineer at AgriWebb. We're a livestock management platform. We're based in Sydney, Australia. I'm also part of a hip-hop band, called The Herd,

Australian Hip-Hop band, and I release music under the name Unkle Ho. There we are. See if you can find me. I'm kind of tucked away in the back, there. As a musician and developer, I thought, why not combine beats into the browser? I've got a few music demos with Next.js and React, but more importantly,

I wanted to showcase how the browser can be a legitimate music platform. This is all made possible with the library that I've been building, called Reactronica. It's an audio library for React. It's a wrapper around Tone.js, inspired by React Music, by Ken Wheeler. Normally, React treats UI as a function of state, but Reactronica treats music as a function of state. I've got a live code demo,

where I'll uses Reactronica's song, track, instrument and effect components, and I'll LiveCode and play music using Fast Refresh. Just let me get set up. All right, so on our left, here, is all the code, on the right is the browser. That's where the audio's coming from. If you've got headphones, feel free to put 'em on. I've got the console showing, so you can see Fast Refresh in action.

Here we've got Reactronica, all the components, song, track, instrument, and effect. A little bit of state, here's the play button, and there's the song component in action witch is playing BPM and volume props. Inside that is a track component with some steps, and these steps are the notes that get played. Currently, it's set to a one-bar loop. Inside the track is an instrument component,

and this type of instrument is a sampler. And right now I have a drum kit. All these samples are mapped to MIDI notes. And so, right now, this is just a kick. So we'll just have a quick listen. (slow, simple beat) So let's update this, and add the snare. Add a kick. One more snare. (drum beat)

I do want to add the hat at the same time as the kick, so I'll nest this array. (drum beat) So let's just keep on adding them. (drum beat becomes more complex) Let's make it a bit more interesting, and syncopate it.

(beat is syncopated) There we go. I also like it a bit slower. So let's put it down to 100. (slower drum beat) (slower drum beat)