Tonejs / Tone.js

A Web Audio framework for making interactive music in the browser.
https://tonejs.github.io
MIT License
13.51k stars 983 forks source link

Getting unexpected results when tweaking synth parameters live (ex. detune, modulation index, attack etc.) #1045

Closed michaelkolesidis closed 2 years ago

michaelkolesidis commented 2 years ago

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:

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() { console.log(this.value); 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.

Thank you very much for your help, I really appreciate your effort.

michaelkolesidis commented 2 years ago

I found a solution, I should have used the .set method for changing properties.