Learn step-by-step how to build a colorful, interactive virtual piano using Scratch and the Music Extension. Perfect for beginners, educators, and kids ages 7+ who want to explore coding and music!
Video by Kodex Academy: 🎵Build Your Own Piano in Scratch! | Step-by-Step Music Extension Tutorial
You can watch the full tutorial on YouTube here.
Introduction: Scratch Virtual Piano Tutorial
Welcome! Today we’ll learn how to make a piano in Scratch, guiding you through a fun Scratch virtual piano tutorial, designed especially for Scratch piano project step by step learning.
Scratch is an amazing platform for block-based coding that teaches programming logic through creative projects like this one. By the end of this post, you’ll know how to build a virtual piano Scratch project, create piano keys Scratch, and even code a piano in Scratch complete with instrument selection, beats, and tempo. Ready to start?
What You’ll Learn & Why It Matters
In this tutorial, you’ll build a fully functional virtual piano Scratch coding project using:
- Scratch music extension
- Sprite design with the Paint Editor
- Event handling with “When this sprite clicked”
- Motion blocks to anchor keys
- Music blocks: setting instrument & playing notes
- Cloning & customizing code for multiple keys
By the end, you’ll have built a Scratch piano game coding project you can play, expand, or even embed in your own website. This is ideal for Scratch coding for beginners, fans of Scratch music coding tutorial, or anyone wanting to learn coding with Scratch piano.
Scratch Code – Build Your Own Piano in Scratch (Music Extension)
- Navigate to scratch.mit.edu. Log in or create an account—you’ll need to save your project.
- Click Create to start a new project.
- Remove the default Scratch Cat sprite for a blank canvas.
- Save the project naming it “Virtual Piano Scratch” or similar.
Now you’re set to jump into this Scratch piano project step by step tutorial.
1. Adding the Music Extension
To add sound:
- Click the blue Extensions button (bottom-left).
- Select Music.
- You’ll now see the Music Extension, containing multiple music blocks
The Music Extension includes:
play drum () for () beatsbeat tempoplay note () for () beatsset instrument to ()set tempo to ()- And more Scratch Wiki.
This powerful block set transforms your project into a full Scratch music coding tutorial.
2. Designing Your Piano: Costumes & Sprites
A well-designed visual improves interaction. Here’s a deeper dive into crafting your piano layout:
Step-by-Step
- Delete Scratch Cat for a clean start.
- Click Paint New Sprite.
- Set backdrop to something lively—e.g., “Spotlight” for a stage vibe.
- Create your first white key:
- Use Rectangle tool, size ~140×40 px.
- Fill with white, outline black.
- Duplicate it until you have 8 white key sprites.
- Space them evenly (use “go to x/y” in paint view to align).
- Add black keys:
- Paint another sprite as a smaller (~60×25 px), black rectangle.
- Duplicate 5 times, position them between certain white keys (e.g., between C-D, D-E, etc.).
- Name your sprites logically: “WhiteKey1 (C)”, “BlackKeyCSharp”, etc., for easy coding.
💡 Pro Tip: Group by using suffix .key to quickly filter similar sprites.
3. Coding the Keys: Blocks, Events & Notes
Transforming your static sprites into interactive piano keys involves thoughtfully combining Event, Motion, and Music blocks—let’s dive deeper!
Understand the Required Blocks
- Event: For clicking or keypress
- Motion: To anchor key position
- Music: To play sounds
- Graphic Effects: Provides visual feedback
a. Event Block: “When this sprite clicked”
This block enables each key sprite to react to mouse clicks:
when this sprite clicked
// React to user interactionWhy it’s important: It’s the main trigger—without this, clicking a sprite wouldn’t do anything.
Tip: For keyboard responders (e.g., playing notes via the “A”, “S”, “D” keys), use blocks like when key [A] pressed. This opens the door to building Scratch piano game coding features like a playable keyboard.
b. Motion Block: “go to x: [ ] y: [ ]”
Purpose: Keep your keys anchored.
go to x: [-140] y: [-50]Each key sprite stays fixed on its screen position. Why is this important?
- Prevents keys from drifting when clicked or animated.
- Allows consistent code cloning—so when you duplicate, each key’s code remains properly aligned.
💡 Pro Tip: For keyboard shortcuts, storing consistent go to positions is crucial—your code remains organized, and visuals stay neat.
c. Music Blocks: Instrument & Play Note
Setting the Instrument
Choose your instrument using:
set instrument to [Piano v]Switch it to “Electric Piano”, “Clarinet”, or even “Synth Drum” to experiment with Scratch music extension variety.
Playing the Note
play note [60] for [0.5] beats- MIDI note 60 = Middle C (C4).
- Adjust note numbers 61–67 for the octave.
- Length of
0.5beats offers nice responsiveness.
Enhancements:
- Allow faster note repetition: Use
play note __ until done. - Veil with sleep effect:
play note [60] for [0.5] beats
wait [0.1] secondsd. Effect Blocks (Visual Feedback)
Add color or size changes to visually indicate which key is pressed:
change color effect by [25]
wait [0.1] seconds
clear graphic effectsChildren love seeing keys “light up” when played! This visual component enhances engagement.
Putting it All Together: Full Script Example
when this sprite clicked
go to x: [-140] y: [-50] // Anchor position
set instrument to [Piano] // Choose piano sound
play note [60] for [0.5] beats // Play Middle C
change color effect by [25] // Visual effect feedback
wait [0.1] seconds
clear graphic effects // Reset visualsNow you have the complete routine for each key—just duplicate and tweak go to positions and note values to cover the full keyboard!
4. Coding All the Keys: Simplifying Through Cloning
Duplicate the Script for White Keys
- Use the duplicate icon to copy the sprite + script.
- Update
go toX coordinate (e.g., -105, -70…). - Change
play note [60]to 62 (D), 64 (E), etc., for the next keys.
Add the Black Keys
- Duplicate the black key sprite and script.
- Adjust the Y coordinate for the smaller black keys (typically ~20 px higher).
- Use MIDI notes 61 (C#), 63 (D#), 66 (F#), etc.
Use Broadcasts for Shared Code (Alternative Method)
For more advanced users:
- Send broadcasts like
broadcast [PlayC]when clicked. - Add listeners in a single “Sound Manager” sprite:
when I receive [PlayC]
set instrument to [Piano]
play note [60] for [0.5] beatsEncourages cleaner code organization, ideal when scaling or adding features like recording.
5. Enhancing with Keyboard Input: From Click to Typing
Replace click events with keyboard triggers:
when [A] key pressed
go to x: [-140] y: [-50]
set instrument to [Piano]
play note [60] for [0.5] beats
change color effect by [25]
wait [0.1] seconds
clear graphic effects| Piano Note | Key Press |
|---|---|
| C4 | A |
| D4 | S |
| E4 | D |
| F4 | F |
| G4 | G |
| A4 | H |
| B4 | J |
| C5 | K |
- Map A–K to white keys; W, E, T, Y, U to black keys.
- Benefits: Enables Scratch piano game coding, typing-play interactions, and paves the way for game-like Play-Along modes.
Enhancing the Virtual Piano Features
Let’s level up the piano into a full musical experience.
A. Instrument Selector
Add a drop-down or toggler sprite to let users swap instruments:
when this sprite clicked
next backdrop // or cycle instruments manuallyGender options: flyers like “Electric Piano,” “Synth,” “Marimba”.
B. Tempo & Beat Controls
Create control sprites:
- Tempo Up:
when this sprite clicked
change tempo by [10]- Tempo Down:
when this sprite clicked
change tempo by [-10]Use beat tempo block to make the tempo visible.
C. Visual Effects & Animations
Enhance visuals:
- Add
size by 10andsize by -10for zoom effects. - Use
bubble effectfor sparkle responses. - Animate backdrop change per instrument.
D. Recording & Playback
Implement a recording feature:
- Create lists:
NoteList&TimeList. - Start timer on
green flagand clear lists. - On key press:
add (note value) to [NoteList]
add (timer) to [TimeList]- Playback with
PlayBackbroadcast looping through list.
E. Chord Mode
Let keypad simulate chords:
- Define multiple notes per key.
play note (60) &
play note (64) &
play note (67)Simultaneously or quick-sequenced to simulate chords.
F. Note Training & Games
Add a “Guess the Note” or “Follow the Melody” game:
- Randomly choose a note and highlight the key.
- Wait for the user’s click, give feedback.
- Store high scores using cloud variables (if enabled).
This makes it an educational Scratch piano game coding tool.
Complete Code Samples for Virtual Piano in Scratch
Below is a fully annotated script for the C key, integrating many of the advanced features.
// C Key Interactive Script
when green flag clicked
set tempo to [120]
beat tempo
when this sprite clicked
go to x: [-140] y: [-50]
set instrument to [Piano]
play note [60] for [0.5] beats
change color effect by [25]
add [60] to [NoteList] // for recording
wait [0.1] seconds
clear graphic effectsFor black keys and other features like keyboard support, duplicate & customize accordingly.
Conclusion
You’ve built a full-featured virtual piano Scratch coding project:
- Designed colorful piano keys
- Coded interactive clicking and keyboard support
- Added effects, instrument and tempo controls
- Included recording and game-like capabilities
All in an easy-to-use, shareable Scratch file—perfect for schools, home coding projects, or your personal digital instrument.
📣 What next?
- Expand your piano with more octaves or piano switches.
- Add chord modes or multi-track recording.
- Integrate your piano into a bigger Scratch game.
