How to Load Soundfont Instruments in a React App
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
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.