Photo to Virtual Instrument


I’ve taken a picture of my steelpan (caribbean steel drum) instrument. I’d like to develop a simple app that plays samples of the instrument when notes are pressed on the smartphone touchscreen.

Any ideas much appreciated.

Tony UrbanSmash

1 Like

Hi there,

This is a very cool app idea!

I’ll start by describing how to make different buttons play different notes.

  • You will need to upload your sound files to your app project.

  • You will need to add some Sound components, one for each note.

  • Set one sound file as the source for each Sound component.
    (Ordinarily I recommend only using 1 sound component in an app and changing its source, but you want as little delay as possible for an app like this!)

  • You will need to add some Buttons to the Screen, one for each note

I would recommend renaming your sound files, Sound components, and Buttons to say what note they are playing.

In your blocks, you’re just saying when [Note Button] is pressed, in [Note Sound component] call play.


You also want to match the Buttons to a background picture of your drum.
You can use Rows and Columns to arrange your Buttons.
You will also need to use margins to add extra space between your Buttons, to reflect the round shape of the drum.

You may find trying to match the position of the Buttons to matching the background image difficult - especially if you want to make an app for multiple devices iwth different Screen sizes.

If that’s the case, I would recommend making a template like this:

And adding background images to the Buttons to match the texture of a steel drum.

My recommendation is, get the app to actually play the sounds first, then worry about making it beautiful!

Best of luck :grinning: