Vynthesizer is a university project for the course of Sound Analysis Synthesis and Processing of the Computer Science and Engineering - Musical Acoustics master degree of the Politecnico of Milan.
It is a simple web synthesizer made of three oscillators with an amplitude envelope filter, each of them guided by one octave of the keyboard. You can either produce monophonic sounds, clicking with the mouse the key note you want, or use your computer keyboard to produce basic three note chords.
While you are playing, the sounds you produce are analyzed in real time to drive the animations on the display:
- the three circles (one for each oscillators) follow the signal's amplitude and waveform;
- behind the circles, a little spectrogram shows the spectrum of the three oscillator's sounds;
- a little yellow bar, indicates where the majority of energy of the overall signal lies.
If you are interested in the details of how this project has been realized, check this report.
The Vynthesizer can be used by simply going to this link. The app is not responsive, so use it with your PC (no tablet or smartphone).
If you prefer to run it locally, you can either:
- clone the repository, then use Node.js to start a server;
- download the public folder, then simply open the index file with an Internet browser.
Chrome is recommended (the app has been developed and tested on Chrome), other browsers present some issues.
Here is a short description of what each control does:
- Waveform: controls the oscillator's main waveform;
- Gain knob: controls the oscillator's gain, defined as the ratio between the input and output signal (e.g. a gain of 1 will not alter the oscillator's power);
- Phase knob: controls the oscillator's fundamental component phase in degrees;
- Par1, Par2, Par3 knobs: control the oscillator's first three harmonics amplitude, up to the value of the fundamental (a value of 1 means the armonic has the same amplitude as the fundamental);
- Attack and Release waveforms: control the waveforms of the Attack and Release phase of the ADSR envelope filter;
- Attack, Decay and Release knobs: control the Attack, Decay and Release time in ms (e.g. a value of 1000 means 1000 ms, or 1 second);
- Sustain knob: controls the Sustain value of the signal, as a percentage value of the maximum value of the fundamental component (e.g. a value of 2 makes the sustain level doubles the signal's fundamental amplitude).
The whole project has been inspired by @mbuccoli 's VRMusic.
Vynthesizer is mainly build upon Tone.js and p5.js, using Javascript, JQuery, HTML5 and Bootstrap 4.
For what concerns the UI, the keyboard is realized using a slightly modified version of https://github.com/openmusic/piano-keyboard (with the aid of https://github.com/WebReflection/document-register-element library for the Custom Web Components support in Firefox), while the knobs and dropdowns are realized using the following libraries: https://github.com/andrepxx/pure-knob and https://github.com/marghoobsuleman/ms-Dropdown.
The main open issues regards the support for Custom Web Components version 1. The keyboard indeed is realized with the v0 version of Custom Web Components, which is not implemented in all internet browsers (while Chrome presents a native support for it). For this reason, I used the document-register-element API to interface the keyboard, but still almost all browsers except for Chrome present some problems (especially related to the dispatching of the note on, note off events).
The best approach would probably be to update the project using the V1 version of Custom Components, and for this reason I opened a branch: if you would like to contribute, any help is really appreciated!
Other minor issues involve the difference between the sounds generated by Tone.js when the app is open with different browsers: again, Firefox presents different sounds from Chrome, on which the app has been developed and tested. These issues are known to the Tone.js developers, therefore, if you would like to contribute, check their GitHub repository.
This software is licensed under the MIT License.