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.
- QWERTY keys melodic keyboard control
- Space bar panic (all notes off)
- Control hold down to increase QWERTY velocity
- Mouse wheel over knobs and sliders to increase/decrease value
- Click or touch and drag up/down on knobs and sliders to increase/decrease value
- Arrow up/down on knobs and sliders to increase/decrease value
- 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.
Ivan Zich
/ July 18, 2016 QuoteHi 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
Matt
/ July 18, 2016 QuoteHi 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
Ivan Zich
/ July 19, 2016 QuoteThanks for sharing your knowledge and quick response !
Oliver Larkin
/ July 14, 2017 Quotenice work! check this out for another dx 7 and casio cz in a webpage
http://www.webaudiomodules.org
Taro Ktkun
/ February 18, 2024 QuoteHello.
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