How to Load Soundfont Instruments in a React App
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:07] Loading instruments dynamically. Open SRC components, keyboard, with instrument TSX.
[00:08 - 00:15] Get the instrument from the use instrument hook, const. Instrument = use instrument.
[00:16 - 00:26] Instead of use mount, use a use effect. That will absorb all the changes in load, loading, current, and instrument values.
[00:27 - 00:47] You also need to get the current instrument from the use sound font hook, current, added to the dependency array to our use effect. Inside of the use effect callback, we'll check if we are not loading and instrument does not equal the current instrument, then we'll load the given instrument.
[00:48 - 00:52] So what we did here? We got the instrument from the use instrument hook.
[00:53 - 01:09] This is the instrument that we've selected and want to load the set of sounds for. When it changes, we check if we are not loading another instrument right now, and if the new instrument is not equal to the one that we've already selected and loaded the sounds for, and then we'll load the given instrument.
[01:10 - 01:14] That's it. Now you can open the project on the browser and play with different instrument sounds.
[01:15 - 01:17] Try selecting a banjo, for example.