Yamaha DX7 and MIDI in JavaScript

Check the demo or find the source at https://github.com/mmontag/dx7-synth-js.

This Yamaha DX7 emulator is my attempt to do something cool with the Web Audio APIs. The synth responds to MIDI input (make sure your device is hooked up before you start your browser) including pitch bend, mod wheel, and aftertouch.  I've added the ability to pan the operators for stereo output (this applies to carrier operators only – the solid squares in the algorithm diagram).

I'll cover the basics here, and add some fun implementation details later.

  1. QWERTY keys melodic keyboard control
  2. Space bar panic (all notes off)
  3. Control hold down to increase QWERTY velocity
  4. Mouse wheel over knobs and sliders to increase/decrease value
  5. Click or touch and drag up/down on knobs and sliders to increase/decrease value
  6. Arrow up/down on knobs and sliders to increase/decrease value
  7. Tab moves between controls

There are some DEMO buttons up top to keep the noise going while you twiddle, plus a MIDI file selection at the bottom.

One tricky aspect of the DX7 is the 4-step envelope generator, so here are some tips. The higher the EG RATE slider, the shorter the envelope section lasts. The envelope starts at zero. The first rate slider (R1) tells you how fast the operator will approach the level of the first volume slider (L1), and so on for R2 L2, R3 L3, R4 L4. If you get stuck notes, hit space and increase your rates.

Shout out to Alva Snædís for sparking my interest in FM synthesis.

3 ResponsesLeave a Reply

  1. Ivan Zich

     /  July 18, 2016 Quote

    Hi Matt,
    Just wanted to tell you I'm huge fan of your work ! Yamaha DX-7 is impressive , this is the best Web Audio Api app I've seen so far. Trying to figure how did you create that lcd screen ? I've been planning to work on some guitar multi effects processor using web audio api and would love to have lcd screen on it.

    Thanks,
    Ivan

  2. Hi Ivan, the LCD screen is some basic drawing commands on a canvas element, except that when it didn't perform very well, I switched to using Pixi.js. I hope this code explains itself: https://github.com/mmontag/dx7-synth-js/blob/master/src/visualizer.js

  3. Ivan Zich

     /  July 19, 2016 Quote

    Thanks for sharing your knowledge and quick response !

Leave a Reply