{"id":3369,"date":"2019-12-06T17:12:00","date_gmt":"2019-12-06T17:12:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=3369"},"modified":"2019-11-29T01:22:25","modified_gmt":"2019-11-29T01:22:25","slug":"interactive-musical-instruments-with-javascript-and-web-audio-api","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/javascript\/interactive-musical-instruments-with-javascript-and-web-audio-api\/","title":{"rendered":"Interactive Musical Instruments with Javascript and Web Audio API"},"content":{"rendered":"\n

Experimental ideas for playful musical interactions powered by MIDI.js<\/strong> and the Web Audio API<\/strong>. Play instruments or make sounds by interacting with content.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The section with the microphone (\u201cVoice\u201d section) will play a recorded sound. It will get louder if you move closer to the center.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The small instruments will all make sounds on click and whenever you click, a different sound or chord will be played. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Just have a try on all instrument sections and make some noise 🙂<\/p>\n\n\n\n

Demo<\/strong>: Link<\/a><\/p>

Download<\/strong>: GitHub<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":2,"featured_media":3374,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[191,12],"tags":[192,116,87],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/Musical-Interactions.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-Sl","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3369"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3369"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3369\/revisions"}],"predecessor-version":[{"id":3375,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3369\/revisions\/3375"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3374"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}