Mary Had a Little Synth

In this project, you're going to make an instrument using Tone.js!

Click here to view fullscreen.

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?

Click here to view an example.

8. Change the color of your div tags when you press your keys. Put this in your switch statement!

Click here to view an example.

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.

Click here to view an example.

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.

Click here to view an example.

Bonus Challenge (Advanced)

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?

Click on this example to see how it can work!