Scratch Virtual Piano Tutorial: Build Your Own Piano in Scratch (Music Extension)

Block Programming

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)

1. Adding the Music Extension

To add sound:

  1. Click the blue Extensions button (bottom-left).
  2. Select Music.
  3. You'll now see the Music Extension, containing multiple music blocks

The Music Extension includes:

  • play drum () for () beats
  • beat tempo
  • play note () for () beats
  • set 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

Step-by-Step:

  1. Delete Scratch Cat for a clean start.
  2. Click Paint New Sprite.
  3. Set backdrop to something lively—e.g., "Spotlight" for a stage vibe.
  4. Create your first white key: Use Rectangle tool, size ~140×40 px. Fill with white, outline black.
  5. Duplicate it until you have 8 white key sprites.
  6. Space them evenly (use "go to x/y" in paint view to align).
  7. 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.).
  8. Name your sprites logically: "WhiteKey1 (C)", "BlackKeyCSharp", etc., for easy coding.

💡 Pro Tip: Group by using suffix `.key` to quickly filter similar sprites.

A well-designed visual improves interaction. Here's a deeper dive into crafting your piano layout.

3. Coding the Keys: Blocks, Events & Notes

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 interaction

Why 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.5 beats 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] seconds

d. 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 effects

Children 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 visuals

Now 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 to" X 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] beats

Encourages 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
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

A. Instrument Selector

Add a drop-down or toggler sprite to let users swap instruments:

when this sprite clicked
next backdrop // or cycle instruments manually

Options: "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 10 and size by -10 for zoom effects.
  • Use bubble effect for sparkle responses.
  • Animate backdrop change per instrument.

D. Recording & Playback

Implement a recording feature:

  • Create lists: NoteList & TimeList.
  • Start timer on green flag and clear lists.
  • On key press:
add (note value) to [NoteList]
add (timer) to [TimeList]
  • Playback with PlayBack broadcast 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 effects

For 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.

Call to Action

  1. Don't forget to check out the full video tutorial by Kodex Academy here: Build Your Own Piano in Scratch! | Step-by-Step Music Extension Tutorial by Kodex Academy
  2. Like, comment & share the video
  3. Visit kodexacademy.com
  4. Subscribe to the Kodex Academy YouTube channel for deeper Scratch content.

Learn More with Kodex Academy

At Kodex Academy, we're passionate about helping students learn coding in creative ways. This project teaches more than Scratch—it empowers young minds to build tools that work in the real world.

Explore more:

Stay updated with new content, free tutorials, and coding challenges!