I've been working on a Tone.js synthesizer project for some time now.
For the record I will include the links: Repo Deployment (it is still under development as I am stuck with this issue)
I have encountered a serious issue that I couldn't manage to solve. I use the PolySynth with an FMSynth, but I've had the same issue with all the other synth types that I tried.
Whenever I am trying to tweak the parameters of the synth live (ex. detune, modulation index, amplitude envelope etc.) I get unexpected behaviour:
Most of the times, when I change the value of a parameter, it works at once, thus the sound gets modifidied according to the change I made, but the sound is then stuck to the first modified value, even if I keep changing the value of the parameter.
Then sometimes I get the modified sound every second time I play a note on the synth. One time I get the modified sound and then next time the original sound without any modification, then the modified sound again and so on.
Somestimes it works, but I am still stuck on the first modification.
Sometimes it works randomly, after playing some notes first.
Sometimes it works at once, but then some specific notes produce the unmodified original sound, regardless of my modification (and still the synth stops responding to any further parameter changes).
This is happening with every parameter but volume: volume works as intended every time.
Let's use Modulation index as an example (the same happens with detune, harmonicity and attack - those are the parameters I've implemented for the time being). Originally, I use NexusUI components, but for this I wil be using a regular HTML slider (to prove that NexusUI is not the problem). It can be found in the deployment website I provided and in the repo. This is my code:
In the main JavaScript file, I create the synth and send it to destination:
const synth = new Tone.PolySynth(Tone.FMSynth).toDestination();
In the HTML file I create a simple slider:
<input type="range" min="0" max="300" value="0" class="slider" id="mod-index">
And everytime the dial moves I change the modulation index value accordingly:
let modulationIndexSlider = document.getElementById("mod-index");
modulationIndexSlider.oninput = function() {
synth.options.modulationIndex = this.value
}
As you can see I am setting the new modulation index value using:
synth.options.modulationIndex = this.value
I follow the exact same approach for the other parameters,ex.
synth.options.harmonicity = this.value
synth.options.envelope.attack = this.value
and so on.
I am using Tone.js 14.8.37 using CDN, Chrome 98-99 on Ubuntu.
Thanks a lot to anyone who might ofer some help :-)
P.S. I have also opened an issue upon this matter, that can be found here
With the Tone.js instruments, use the .set method for changing properties. You can change multiple properties at the same time, like this:
synth.set({
harmonicity: 10,
envelope: {
attack: 0.001,
},
});
In the case of volume, it is a Param, so it can be changed directly via volume.value.