Interactive Musical Instruments with Javascript and Web Audio API

Interactive Musical Instruments with Javascript and Web Audio API

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

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.


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

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

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

Demo: Link

Download: GitHub

Fancy you stumbling on my piece of the internet. Bonjour!

My name is Anmol and I'm the Blogger-In-Chief of this joint & working as the Chief Technology Officer at Azoora, Inc. I'm putting up my views here trying to help creative solopreneurs, developers & designers build their business using the power of websites, apps & social media, this, is, my jam.

If you're looking to start your own online business with a professional high quality website or mobile app, just get in touch. I'd be more than happy to assist.

SKYPE | FACEBOOK | LINKEDIN | TWITTER | EMAIL

4 comments

  1. Anonymous says:

    Heya i抦 for the primary time here. I found this board and I find It truly useful & it helped me out much. I hope to provide one thing again and aid others such as you helped me.

  2. Freebies says:

    Attractive section of content. I just stumbled upon your weblog and in accession capital to assert that I get actually enjoyed account your blog posts. Anyway I will be subscribing to your feeds and even I achievement you access consistently quickly.

  3. Anonymous says:

    It’s not my first time to go to see this web site, i am visiting this website dailly and get good data from here daily.

Leave a Comment

Your email address will not be published. Required fields are marked *