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 for sparking my interest in FM synthesis.

5 Comments
by  /  January 4, 2016  /  Posted in: Music, Web

5 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. Matt

     /  July 18, 2016 Quote

    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 !

  4. Oliver Larkin

     /  July 14, 2017 Quote

    nice work! check this out for another dx 7 and casio cz in a webpage

    http://www.webaudiomodules.org

  5. Taro Ktkun

     /  February 18, 2024 Quote

    Hello.
    I was very impressed with the web version of dx7. The reason is that it was easy to select tones and easy to operate. I am visually impaired and cannot use high-performance software such as dexed. The reason is that the appearance is also imitated to DX7, so it cannot be read aloud with a screen reader. However, this module was relatively easy to use.
    That's why I asked you. I want to use this module locally. The reason is that you can read dx7's syx and easily add new tones. I looked at the git source code and found that the js file runs based on the syx file, and I was able to confirm the existence of the syx file. I thought it would be easier to add new sounds by compiling it locally and running it in the local environment. I was able to clone from git and compile bundle.js with webpack, but due to Chrome's permissions, I can't run it from the local environment. To be precise, the html is displayed, but the tone selection and midi keyboard are not displayed, and java does not work. Please let me know if there is a better way to run it locally.

    Thank you for reading.

    PC environment
    os windows 11
    Reading software nvda
    jaba, webpack
    python 3.11

Leave a Reply