💻Add a little piano to music adventures to test the notes

[MarleenGilsing]

When working with a child yesterday it was very clear she didn't understand how the musical notes work as she never did anything with musical notes before. She had a lot of fun playing random notes, but she wouldn't be able to play an existing tune.

Now I've come up with an idea, but i have no clue how much work this is, so if it's really hard, please ignore this.

Would it be possible to add a little piano image to the music adventures with clickable keys with the notes written on them, so that the students can hear what "D6" or "G8" actually means?

[MarleenGilsing]

We could also link to a website that already has this like: https://www.onlinepianist.com/virtual-piano
But I don't know if we want to link to outside websites.

[AnneliesVlaar]

I like the idea, but we support 70 keys, so a little piano won't be sufficient to show all keys. You really need a large one.

With the if pressed key functionality we show an animation of the key that is pressed. Maybe we can do the same with the notes and show the note that is played on the piano. Something like this:

video-piano.mov

[MarleenGilsing]

Yes, we do support 70 keys, but when making a song (like the exercises in the adventures require) you probably have enough with 16 keys. And I think it would be nice for the students to be able to test them before running the code.

I like your animation very much too!

[Felienne]

This is a lovely idea! Maybe this could be a student project?