Building a React Keyboard App With Custom Audio API Hooks

[00:00 - 00:11] Main AppScreen. In this lesson we'll create the main application screen with the keyboard component in it. Also, we'll cover the case when a user's browser does not support audio API and create a component with a message about it.

[00:12 - 00:30] Our main AppScreen will be in the main component. Inside the components, create new folder, main, here create new file, index, TS , inside of it we re-expert everything from main and create the main TSX, where we'll define our component. So for now, let's just mock the keyboard .

[00:31 - 00:39] Const, keyboard is a functional component that returns a fragment saying keyboard. We will define the real keyboard component later. For now, we'll need some sort of stub.

[00:40 - 01:00] Define the main component. Expert Const, main is a functional component. Here we get the audio context. Using the use audio context hook. We'll define this hook in a few seconds. In the main component we will check if we got the audio context returned, convert to a boolean audio context.

[01:01 - 01:12] Then if we got it then we return a keyboard. Otherwise, we return no audio message. Now let's define that custom hook for accessing audio. They use audio context.

[01:13 - 01:27] Inside of the components, create new folder, audio context. Provider, they're creating new file, use audio context.ts. Expert a new function, use audio context.

[01:28 - 01:56] It's gonna return audio context type, but it can also turn out to be null. So we'll use an utility type, optional. We already defined it in the types domain. We wrap an audio context. Type into it. And then we define the audio CTX, audio CTX, equals use ref access context. The access context function will actually get the audio context from the browser.

[01:57 - 02:14] And then we return audio CTX current. Import use ref from react, import the access context from audio domain. If you look at it, you will see that we try to get the audio context from the window. If it doesn't exist, then we use webkit audio context version.

[02:15 - 02:32] And in the worst case, we just return null. That means that the browser does not support any sort of audio context. Now we'll need to handle the missing audio context. Now create a new file, index.ts. And re-expert everything from use audio context.

[02:33 - 02:51] Now create a new folder, where we'll handle the missing audio context. It will be the no audio message. No audio message. Index.ts. Expert everything from no audio message. And now define that component. No audio message.ts.x.

[02:52 - 03:21] It's going to be a simple functional component that will return a div with a paragraph saying, "Sorry, it's not gonna work." And a frowning smile. And then another paragraph saying, "Seems like your browser doesn't support audio API." Now we can import missing use audio context from the audio context provider and no audio message from no audio message module.