One of the coolest features of Scratch is its ability to play sounds from a large sound library, as well as make your own sounds. To take a dive into this functionality, we will be learning how to make a keyboard-controlled piano in Scratch that can play the song “Twinkle Twinkle Little Star.” Once you have mastered the basics, you will be able to create more complex programs to play more advanced songs. For reference, here is the project we will be creating today.
For live expert guidance learning Scratch coding, enroll your child in an award-winning Scratch class designed by experts from Google, Stanford, and MIT.
How To Make A Piano In Scratch Coding
We've covered how to create music in Scratch before. Today, creating a piano in Scratch will be a relatively simple project that you can eventually scale up to create more complicated works. Let’s get coding!
1. Create A New Project And Add Backdrop
First, we need to set up our coding workspace. Navigate to Scratch and click Create to start a new project. Clean up your stage by deleting the default cat sprite (click the trash can icon on the sprite's thumbnail).
Next, let's select a fitting backdrop. Click the Choose a Backdrop button in the bottom right corner of the screen. We recommend selecting Concert from the music category, but feel free to choose any background that fits your style!
Quick-Reference Project Checklist
- Step 1: Create a new project and pick a backdrop
- Step 2: Add or paint your piano keyboard sprite
- Step 3: Load sound notes (A, C, D, E, F, G) into your project
- Step 4: Code keys to trigger each note's sound
- Step 5: Import and code the interactive music guide
Want to fast-track your coding journey and build more amazing games? Join our live, expert-led Scratch Ninja class to learn advanced animation, game design, and logic!
2. Load in the Piano
To play the piano in Scratch, we need a piano keyboard sprite. Since Scratch does not have a multi-key piano instrument sprite by default, you can easily create or upload your own. Here are your two best options:
- Option A: Paint Your Own (Recommended): Hover over the Choose a Sprite button in the bottom right corner and select the paintbrush tool (Paint). Use the rectangle tool to draw a series of adjacent white rectangles representing the piano keys. You can also paint smaller black rectangles overlapping the tops of the white keys for a realistic keyboard look!
- Option B: Upload a Sprite: If you have a piano image (PNG format with a transparent background) saved on your computer, hover over Choose a Sprite and click Upload Sprite at the top of the menu to import it.
Once your keyboard sprite is loaded, name it "Piano" in the sprite properties box so your workspace stays organized.
3. Resize and Move the Piano
When the piano image loads in, it will be quite large, and probably not in the exact spot we would like it to be. Resize the piano by changing the “size” field to 70 (or another size of your choosing), and click and drag the piano to put it in the top center of your screen. Refer to the image above to know what the end product should look like.
4. Load in the Notes
The song that our program will be playing is “Twinkle Twinkle Little Star”. The notes used to play this song are A, C, D, E, F, and G. For our piano to work, we will need to load these notes into our program. In the top left of the window, click “sounds.” Then, click “Choose a Sound,” which will open the Scratch sound library. In the search bar, type in “A Piano” and click on the sound that appears. The sound will load in, but don’t do anything with it just yet. Instead, click on the “Choose a sound” button again and repeat this process for “C piano,” “D piano,” “E piano,” “F piano,” and “G piano.” When you are finished, your sound panel should have all 6 notes loaded in. Finally, click “Code” to return to the coding screen.
5. Program the Notes
Now that these 6 notes are imported, we can code them into our program. To be able to play the piano in Scratch, we need to write our program so that these notes will play when certain keys are pressed. We can accomplish this with two different types of blocks:
- When key pressed: This block makes is to that, when the designated key is pressed, the code below will activate
- Start sound: This block, when activated, will play the specified sound.
When you are ready, go ahead and add the code in the image above to your program, mapping 1 to A, 2 to C, 3 to D, 4 to E, 5 to F, and 6 to G. When you are finished, you should be able to press these numbers on your keyboard and hear the associated notes.
6. Download the Music Guide
At this point, you can play individual notes! However, our project will be much more interactive if we add an on-screen guide that teaches the user how to play "Twinkle Twinkle Little Star" step-by-step.
To build this guide, we will use a custom "Notes" sprite. Download our pre-made sprite file containing the visual note prompts here: Download Music Guide Sprite. Once downloaded, hover over Choose a Sprite in Scratch, select Upload Sprite, and upload the file.
If you cannot access the download or want to cross-reference the sequence, here is the complete 42-note key-press sequence for "Twinkle Twinkle Little Star" mapped to our keys:
| Song Verse | Key Sequence (Press on Keyboard) |
|---|---|
| Twinkle, twinkle, little star, | 2, 2, 6, 6, A, A, 6 |
| How I wonder what you are! | 5, 5, 4, 4, 3, 3, 2 |
| Up above the world so high, | 6, 6, 5, 5, 4, 4, 3 |
| Like a diamond in the sky. | 6, 6, 5, 5, 4, 4, 3 |
| Twinkle, twinkle, little star, | 2, 2, 6, 6, A, A, 6 |
| How I wonder what you are! | 5, 5, 4, 4, 3, 3, 2 |
7. Program the Notes Sprite
If you take a closer look at the “Notes” sprite, you will notice that it has 42 costumes which, in order, tell the keys you need to press in order to play “Twinkle Twinkle Little Star.” There are two blocks of code we need to add so that this music guide functions correctly:
- Firstly, when the green flag is clicked, we want this sprite to reset to its first costume, or the first note. This allows the user to reset the program whenever they wish.
- In addition, when any key is pressed, we want the sprite to go to its next costume to display the next note. It would be great if the notes would flash when they are played to show that the button has been pressed. We can accomplish this by changing the brightness to 100, waiting .1 seconds, and then clearing the effect. Once you understand the code in the image above, add it to your program.
Interactive Piano Scratch Extension Alternative
Want to expand your project and play even more songs? Instead of loading individual sound files for every note, you can use Scratch's built-in Music Extension! Click the blue Add Extension button in the bottom-left corner of the editor, then select Music. This unlocks powerful green blocks like "play note (60) for (0.25) beats" and "set instrument to (Piano)". This is a great next step for young programmers who want to build a fully chromatic keyboard!
Play Your Piano In Scratch
If you have followed along up until this point, you should now have a functional piano in Scratch with a guide to play “Twinkle Twinkle Little Star.” Now that the basics are complete, feel free to continue to improve the program! Perhaps you could add a celebration at the end of the song if the user plays it correctly, or maybe you could add a red indicator to show when the wrong note is played. You also may make an option at the beginning to decide which type of instrument the user wants to play, and update the program accordingly. Whatever you decide to do, the program is now yours to improve!
Enjoy Making Music With Your Scratch Piano
We hope you enjoyed this tutorial and were able to create a functioning piano in Scratch. If you’re ready for another Scratch tutorial, check out How To Make Falling Snow in Scratch. If your student would like to learn more about Scratch coding with a live teacher and other students, check out our online Scratch classes, including our popular Game Building class. They can even earn a certificate. Thanks for reading, and happy coding!
Written by Matt Schofield, an educator and avid coder. After studying Spanish at the University of Pennsylvania, Matt began teaching English as a second language to elementary students in Baltimore. In addition to his full-time teaching position, Matt enjoys teaching computer science in the evenings and weekends with Create & Learn.
