Enhancing Sampler widget with drag and drop

Posted on by

Music Blocks has always been about making music programming accessible and engaging for learners of all ages. Today, I’m excited to share a new feature that adds a level of convenience on working with audio samples in Music Blocks.

What is Sampler widget?

With sampler widget you can import sound samples (.wav) files and use them with “set instrument” block. The Sampler widget let you center the pitch of your sample so that it can be tuned. Initially we have to add sample by opening the sampler canvas and clicking the “upload sample” button.

With this new feature, you can:

  • Drag and drop audio files directly into Music blocks and it will generate a sampler widget with your audio sample preloaded in it.
  • You can further upload sample by dropping audio files to sampler canvas.
  • Integrate these samples into your project using “set instrument” block.

How does it work?

  1. Widget generation:
    • Users can select an audio file from their computer and drag it onto the Music Blocks canvas.
    • When an audio file is dropped, Music Blocks detects the sample and automatically generate the Sampler Widget.
    • Supported file format is .wav binary.
    • The widget now displays the sample’s name and it’s basic details.
  1. Upload samples:
    • User can further upload samples by dropping audio files to sampler canvas.

Demonstration:

This is the YouTube video demonstrating this feature.

Technical implementation:

For a deeper dive into the technical implementation, check out these pull requests:

Why I add this feature?

While exploring Music Blocks, I noticed that we already had the ability to upload project files using drag and drop. This sparked the idea — if users can easily add projects this way, why not extend the same functionality to sound samples?

By adding drag-and-drop support to the Sampler Widget, we:

  • Empower users to personalize their music by integrating custom samples.
  • Reduce friction by simplifying the process of adding new sounds — no need to dig through menus.
  • Inspire creativity by allowing users to experiment with combining their sounds and Music Blocks’ programming logic.

Conclusion

This journey started with a simple observation — if we could drag and drop project files, why not audio samples? It’s a small but powerful change that puts more creative control directly into users’ hands.

This feature is live on the master branch of Music Blocks.

You can connect me on Linkedin and can also checkout my Github.

Thank you for reading.