Build a Soundfont Instrument Selector in React

[00:00 - 00:14] Instrument Selector. Now let's try to update the current instrument. To be able to select an instrument, first of all we'll need a list of instruments. This list is going to be rendered inside of a select element, so we'll need to generate a list of options for this select.

[00:15 - 00:35] Let's define those options first. Inside of the SRC components, create new folder, instrument. Selector, here define a new file, options, TS. In this file, we'll define a type for an option. Type option will contain value of type, instrument, name, and label of type string.

[00:36 - 00:44] Then define the options list. Type options. List is an array of type option. Define the instrument list. Type instrument.

[00:45 - 01:03] List is an array of type instrument name. Now we can define a function normalized list. It will take instrument's list and return options list. Function normalize list receives a list of instrument and returns options list.

[01:04 - 01:27] Inside of this function, we'll map through the list and for each instrument, we 'll return an object where value is an instrument and label is instrument replace all the underscores with a space. Now we export options list by normalizing the list of instrument that we cast to instrument list.

[01:28 - 01:37] We can get the list of supported instruments from the soundphone player. Now inside of the same folder, create a new file, instrument. Selector, TSX.

[01:38 - 01:52] Define the instrument selector component. Expert const instrument. Selector, it 's a functional component that will render a select element. We'll need to pass the list of options to it. So let's get the instrument.

[01:53 - 02:03] Const instrument. Set instrument equals use instrument. So let's map through the options for each option where we take label and value.

[02:04 - 02:25] We'll return an option element with text label key that equals value and value of the option that is also equal to value. Okay, time to get the instrument and the update value function. Const instrument. Set instrument equals use instrument. Const update.

[02:26 - 02:46] Value equals a function that receives change event. We'll need only the target from it. Change event of the HTML. Select element. Inside of this function, we'll call set instrument with target value as instrument name.

[02:47 - 03:05] Now we can pass options to the select element. On change, we'll call update value. Value is going to equal instrument. Now let's style our select. Create a new file, instrument. Selector, module, CSS. Here define the instrument's class.

[03:06 - 03:18] You can copy the styles from that attached lesson. Inside of the instrument selector, import the styles from the module. And set the class of the select element, class name, two styles, instruments.

[03:19 - 03:29] Now create an index file, index.ts. Here we export everything from instrument selector. Create a new component, playground, new folder, playground.

[03:30 - 03:43] Here we create a playground component, playground.ts.x. Export, const, playground. That will render an instrument context provider with a div with class name. Playground.

[03:44 - 04:00] That will render our keyboard with instrument. And below it, it will render the instrument selector. Create an index file. Import everything from playground. Go to the main component. Instead of importing keyboard with instrument directly, we'll now use playground.

[04:01 - 04:05] Now the only thing left is to actually load the sound set for the given instrument.