Sound Painter | HTML5 Music Puzzle Game

Sound Painter is a colorful HTML5 music puzzle game for kids. Players paint dots on a grid to make music: the height of a dot is the pitch and its color is the instrument. Listen to a short melody, paint it back, and earn up to 3 stars. A Free Paint mode lets kids compose their own tunes.

Everything runs in the browser with plain HTML, CSS and JavaScript. Sounds are generated live with the Web Audio API, so the package has no audio files, no libraries and no external requests.

Features

40 levels that teach music words such as ascending, rest, chord and tempo Free Paint mode with a 16-step grid, 3 scales (Pentatonic, Major, Minor) and tempo from 60 to 160 4 instruments: Piano, Bass, Bell and Pluck 3-star rating with a short music lesson after every level Listen, Hint, Undo, Clear and Check tools Touch, mouse and keyboard controls Colorful studio-style design with an animated mascot, glowing notes and level tiles Responsive layout for phones, tablets and desktops, portrait and landscape Progress and Free Paint songs are saved in the browser (localStorage) Works offline after the first visit and can be added to a phone home screen No frameworks, no libraries, no ads, no tracking, nothing loaded from the internet Readable, commented, non-minified code

Perfect For

Kids’ game websites and educational portals Music learning and early-years education sites Mobile app wrappers (Capacitor / Cordova) Portals that embed HTML5 games in an iframe Anyone who wants a ready-to-publish casual music game

What’s Included

Complete game source code (HTML, CSS, JavaScript) Interface icons, app icons, favicon and web manifest Offline service worker and a small build tool to regenerate it Full documentation (install, hosting, editing levels, scales and instruments, rebranding, troubleshooting, FAQ)

Requirements

Any static web host, no database and no PHP needed A modern browser: Chrome, Edge, Firefox or Safari HTTPS is recommended (needed for offline mode and “add to home screen”) Node.js is optional, only to regenerate the offline cache after edits

Easy to customize: change levels, scales, instruments, colors, icons, mascot and name in a few minutes.