$0.00 0

YOUR CART
Checkout

SUBTOTAL
DISCOUNT
TOTAL
Checkout
For the most "geeky" of us, here is an excellent article showing how to create...

For the most “geeky” of us, here is an excellent article showing how to create browser-based audio applications controlled by MIDI hardware.

Creating Browser-Based Audio Applications Controlled by MIDI Hardware

Creating Browser-Based Audio Applications Controlled by MIDI Hardware

Article by Stéphane P. Péricart

While the Web Audio API is increasing in popularity, especially among HTML5 game developers, the Web MIDI API is still little known among frontend developers. A big part of this probably has to do with its current lack of support and accessible documentation; the Web MIDI API is currently only supported in Google Chrome, granted that you enable a special flag for it. Browser manufacturers currently put little emphasis on this API, as it is planned to be part of ES7 standard.

Designed in the early 80’s by several music industry representatives, MIDI (short for Musical Instrument Digital Interface), is a standard communication protocol for electronic music devices. Even though other protocols, such as OSC, have been developed since then; thirty years later, MIDI is still the de-facto communication protocol for audio hardware manufacturers. You will be hard-pressed to find a modern music producer that does not own at least one MIDI device in his studio.

With the fast development and adoption of the Web Audio API, we can now start building browser-based applications that bridge the gap between the cloud and the physical world. Not only does the Web MIDI API allows us to build synthesizers and audio effects, but we can even start building browser-based DAW (Digital Audio Workstation) similar in feature and performance to their current flash-based counterparts (check out Audiotool, for example).

In this MIDI tutorial, I will guide you through the basics of the Web MIDI API, and we will build a simple monosynth that you will be able to play with your favorite MIDI device. The full source code is available here, and you can test the live demo directly. If you do not own a MIDI device, you can still follow this tutorial by checking out the ‘keyboard’ branch of the GitHub repository, which enables basic support for your computer keyboard, so you can play notes and change octaves. This is also the version that is available as the live demo. However, due to limitations of the computer hardware, velocity and detune are both disabled whenever you use your computer keyboard to control the synthesizer. Please refer to the readme file on GitHub to read about the key/note mapping.

More informations :

RECENT ARTICLES

Waveform Loaded
Waveform Played
×
PLAYLIST
Clear all
WISHLISTS
Create an account to use wishlists
×
SAVE TUTORIALS
Create an account to save tutorials
×
FOLLOW YOUR FAVORITES
Follow your favourite labels, formats and genre's and ADSR will show what's new in those on your next visit.
×
  • Create product wishlist
  • Save your favorite tutorials
  • Regular discounts and exclusives
  • Never miss a sound! Follow your favorite labels.
Sign up to My ADSR to ensure you're ahead of the pack. Save your favorite content and be notified of new content. You'll never miss a thing!
Create your account now!
CREATE ACCOUNT
Sign up to My ADSR to ensure you're ahead of the pack. Save your favorite content and be notified of new content. You'll never miss a thing!
  • Get 7 days all ADSR courses free
  • Create product wishlist
  • Save your favorite tutorials
  • Regular discounts and exclusives
Create your account now!
SIGN IN
adsrsounds.com login Video streaming login
Remember me
Forgot your password?
DON'T HAVE AN ADSR ACCOUNT?
Create your account
FORGOT PASSWORD

Send info
  1. Enter your email address
  2. Click "Send info"
  3. Check your inbox for an activation link
  4. Visit activation link and enter set new password
Sign in
DON'T HAVE AN ADSR ACCOUNT?
Create your account