How to Handle Keypress Events in a React Piano Keyboard

[00:00 - 00:05] Connecting to a keyboard. In the key component we'll use on down and on up methods to handle keypress events.

[00:06 - 00:17] Let's open components key, key TSX, and create a type alias, press callback. Type press callback = a function that returns nothing.

[00:18 - 00:22] We will use this function on press event. Let's move it before the key props.

[00:23 - 00:31] And define on up, press callback and on down. Now these methods exist in key props.

[00:32 - 00:45] And we can use them in the on/mouse down and on/mouse up props for the bottom element. Scroll a bit down, get the on, down and on up from the props and pass them to the bottom.

[00:46 - 00:54] On/mouse down = on/down. On/mouse up = on/up.

[00:55 - 01:03] Openersrc components keybird, keybird TSX and update the component code. Now we want to pass on/down.

[01:04 - 01:17] It's going to be a function that we'll call play the MIDI of the current node. And on/up = on a function that we'll call stop that MIDI note.

[01:18 - 01:29] Define the keybird props that will require the play and stop functions. Expert type keybird props = an object with field loading.

[01:30 - 01:33] It's a boolean flag. It means that the instrument is still loading play.

[01:34 - 01:39] It's a function that will play an alt of type MIDI value. It's a nothing function.

[01:40 - 01:42] That returns nothing. Same with the stop.

[01:43 - 01:52] Get the props keybird props and we get loading play and stop. Use loading to pass the disabled prop to the key.

[01:53 - 02:02] Disabled = loading. Now the keybird has props that consume loading play and stop values provided by the adapter.

[02:03 - 02:17] Now we need to connect our keybird to the soundphone provider. Inside of the keybird folder create a new file with instrument TSX and here expert const keybird with instrument.

[02:18 - 02:33] That should be a functional component where we'll get the audio context using the use audio context. Get the loading play stop and load from the use sound font passing the audio context.

[02:34 - 02:41] Call the load function on mount use mount load. Let's define this hook inside of the C.

[02:42 - 02:48] Create new file. Utils = use mount = use mount TS.

[02:49 - 03:02] Here we first want to define a use effect once hook. const use effect once = a function that receives an effect of type effect callback.

[03:03 - 03:16] This is a type available in react module then we'll call use effect from react and we'll pass this effect to it and an empty dependency array. So now use effect will be called once when the hook will be mounted.

[03:17 - 03:39] Now let's define a type for an effect. It's a function that receives arguments as an array of unknown type and returns nothing. Expert const use mount here we pass in an effect and it's going to be called using the use effect once and here we call our effect.

[03:40 - 03:53] Go back to the keybird with instrument and import use mount. Now that the instrument is loaded we can return a keybird and we pass loading play and stop to this component.

[03:54 - 04:09] Now re-expert everything from with instrument go to index.ts, expert everything from with instrument. Create an index file and re-expert everything from use mount.

[04:10 - 04:31] In produce mount now go to the main component and use the keyboard with instrument instead of the basic keyboard. Now you should be able to launch the app and play some notes.