Interactive Musical Instruments

Experimental ideas for playful musical interactions powered by MIDI.js and the Web Audio API. Play instruments or make sounds by interacting with content.

By in Playground on
Demo Code

Today we’d like to share a little musical experiment with you. The demo has a couple of playful audio interactions that allow you to play music on instruments or simply make sounds by holding the mouse pressed and move around. All of the instruments, except the last set of small instruments, can be played using this interaction. The demo is built with the powerful MIDI.js JavaScript library by Michael Deal. It allows to easily create MIDI applications for the Web and comes with tons of useful features. Note that this demo is optimized for desktop and was not properly tested on mobile devices. We hope you enjoy this little experiment!

You’ve certainly already encountered various playable instruments and audio experiments on the Web that are powered by the amazing Web Audio API. The Web Audio Demos and the Web Audio Examples are great resources for Web Audio experiments. Josh also made this demo where you can play on SVG drums, and this record shop template is also powered by the Web Audio API. Moreover, the Above & Beneath Layout Effect shows how you can couple sounds to specific “layout” states.

Attention: Super-experimental techniques at work here, ready-to-rock browsers only!

The schematically presented instruments can all be played by clicking on the interactive parts, i.e. the keys or strings. This will make the respective sound for that note. In addition, holding the mouse pressed and moving it will allow you to play sound sequences. The guitar will play back chords if you do this movement. Depending on the position, different chords will be given off. Try strumming around.

musicalinteractions_guitar

The section with the microphone (“Voice” section) will play a recorded sound. It will get louder if you move closer to the center.

musicalinteractions_mic

The small instruments will all make sounds on click and whenever you click, a different sound or chord will be played.

musicalinteractions_tiny

Just have a try on all instrument sections and make some noise 🙂

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Further Reading & Playing

References and Credits

Browser Support:
  • ChromeSupported
  • FirefoxSupported
  • Internet ExplorerSupported from version E
  • SafariSupported
  • OperaSupported

We hope you enjoy this experimental mash-up and find it useful and inspiring!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Image Layer Animations with Clip-Path

Model Texture Transition and Procedural Radial Noise using WebGL

Ideas for CSS Button Hover Animations

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 28

Comments are closed.

  7. You guys just knock it out of the park every goddamn time! It blows my mind!!! Have you guys ever considered setting up a Patreon or some other way for fans to give back? I’ll be first in the queue if you ever do. In the meantime, this is the only website I visit that I make sure to click every single ad before I leave. I know that that probably doesn’t amount to much, but it’s something I guess. Thank you so much for all your hard work and dedication to the web design and development community. You guys are an inspiration!!!

  8. Really Impressed with the animation with sounds of instruments. Keep up the Good Work

  15. Mary Lou!
    You are a real genius.
    Your work always has this particular ingenious Mary Lou style 🙂
    Love it.

  25. Mary, you’re a real creative person! thank you.
    note to others:
    always work on server environment; i had an issues with Chrome “Cross origin requests are only supported for protocol schemes” it can’t load music files ..aaand that was because i was trying to load the model in non-server environment using “File://”,, so, that’s that!

  26. Hi Mary Lou,

    Thanks for the online interaction. When it comes time for the real thing (as far as drums are concerned for now), visitors might want to check My Musical Picks.

  27. Hey Mary,

    love this so much.

    Was wondering if it would be possible to make the piano keys play on hover rather than on click?

    Want to experiment with making a grid that plays the notes on hover.

    Cheers,
    Alex

  28. Great starting point and documentation. Thanks a million.
    FYI: a couple months from now, in March 2018, the current audio setter will be removed.

    Fixed by changing 2 lines in webaudio.js
    // Line 97: source.playbackRate.value = 1; // pitch shift <– depracated
    source.playbackRate.setValueAtTime(1, 0); // pitch shift <– new setter

    // Line 100: source.gainNode.gain.value = Math.min(1.0, Math.max(-1.0, gain)); <– depracated
    source.gainNode.gain.setValueAtTime(Math.min(1.0, Math.max(-1.0, gain)), 0); // <– new setter