What we're going to build
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] What we are going to build. In this part of the course, we will build a virtual piano keyboard. With a list of instruments you can use to play. We have a whole bunch of them here.
[00:08 - 00:52] You should be able to play the note using both keyboard and mouse. The complete example is located in code 03 React Piano completed. And zip the archive provided with this course, go to this folder and when you are there install the dependencies and launch the app. Yarn and yarn start. It should open the app in the browser. If it doesn't navigate to http, localhost 3000 and open it manually. In the browser at the center of the screen , you will see a keyboard with letter labels on each key and a select element below the keyboard with acoustic grand piano set as default instrument and a set of instruments to choose from. Go ahead and try it out. You will hear them musical notes played on the acoustic grand piano.