In this project, you're going to make an instrument using Tone.js!
1. In CodePen, click on the gear next to JS and add Tone as an external script.
2. Add an event listener to your document that detects when you have pressed a key and create a callback function for it. Leave the callback function empty for now.
3. Go to the Tone.js API. Look for the synth documentation under instrument on the left. Click the link.
4. Scroll down and copy the example. Then paste it inside of your callback function. Congratulations! You just made sound!
Click this link to see what you should hear.
Don't forget to press a key to trigger the event!
5. Pass your event into the callback function. Choose a key and have the function detect that you are pressing that key. Once it does, have it play your synth. (Hint: this website will tell you what event code your callback function needs to see to detect your key.)
Click this link to play a sound when you press the "a" key.
Don't forget to press a key!
6. Use a switch statement to read multiple keys. Put three cases in your switch statement that detect three
different keys. Each key should play a different note. Go to this website
to learn about Scientific Pitch Notation. This is how the .triggerAttackRelease() method can play different notes.
Click this link to play different notes when you press the "a", "s", and "d" keys.
7. Now we need to see what keys we are pressing! Put three div tags in your HTML. Give them the same class and three
different id's. The id's should be the names of the notes you're using. Use the class to give them the same
background-color, border, and padding. Can you get them all on one line?
8. Change the color of your div tags when you press your keys. Put this in your switch statement!
9. Create an event listener that detects when you've released a key.
Have this event listener's callback function change your div tags' color to their original color.
10. Make it look nice! Put an h1 tag above your div tags
that says what keys you need to press to play your keys. Make everything centered.
Bonus) Can you create a full keyboard? Can you include all of the white keys? What about the black keys? How many keys could you fit on your keyboard?