fix timing issues in large FFTs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "SpessaSynth",
-  "version": "3.23.3",
+  "version": "3.23.4",
   "type": "module",
   "scripts": {
     "start": "node src/website/server/server.js",

src/spessasynth_lib/synthetizer/synth_event_handler.js

@@ -119,6 +119,12 @@ export class EventHandler
             "allcontrollerreset": {},
             "soundfonterror": {}
         };
+
+        /**
+         * Set to 0 to disabled, otherwise in seconds
+         * @type {number}
+         */
+        this.timeDelay = 0;
     }
 
     /**
@@ -151,7 +157,18 @@ export class EventHandler
     {
         if (this.events[name])
         {
-            Object.values(this.events[name]).forEach(ev => ev(eventData));
+            if (this.timeDelay > 0)
+            {
+                setTimeout(() =>
+                {
+                    Object.values(this.events[name]).forEach(ev => ev(eventData));
+                }, this.timeDelay * 1000);
+            }
+            else
+            {
+                console.log("instant");
+                Object.values(this.events[name]).forEach(ev => ev(eventData));
+            }
         }
     }
 }

src/website/js/manager/manager.js

@@ -144,7 +144,7 @@ class Manager
         {
             console.warn("DEBUG ENABLED! DEBUGGING ENABLED!!");
         }
-
+        
         const prePath = window.isLocalEdition ? "../../../spessasynth_lib/" : "../../spessasynth_lib/";
         this.workletPath = prePath + WORKLET_PATH;
         if (context.audioWorklet)
@@ -210,7 +210,6 @@ class Manager
             this.channelColors,
             this.synth,
             canvas,
-            this.audioDelay,
             window.SPESSASYNTH_VERSION
         );
         this.renderer.render(true);
@@ -279,7 +278,8 @@ class Manager
             this.keyboard,
             this.midHandler,
             this.playerUI,
-            this.localeManager
+            this.localeManager,
+            this.audioDelay
         );
 
         // set up drop file handler

src/website/js/renderer/channel_analysers.js

@@ -42,21 +42,7 @@ export function updateFftSize()
         const drum = this.synth.channelProperties[i].isDrum;
         const fft = drum ? this._drumAnalyserFft : this._normalAnalyserFft;
         const mul = drum ? STABILIZE_WAVEFORMS_FFT_MULTIPLIER / 2 : STABILIZE_WAVEFORMS_FFT_MULTIPLIER;
-        const fftSize = Math.min(32768, this._stabilizeWaveforms ? fft * mul : fft);
-        this.channelAnalysers[i].fftSize = fftSize;
-        if (!drum)
-        {
-            // calculate delay:
-            // 16384 fft size = 0.1 s
-            if (fftSize > 4096)
-            {
-                this.delayNode.delayTime.value = fftSize / this.synth.context.sampleRate / 2;
-            }
-            else
-            {
-                this.delayNode.delayTime.value = 0;
-            }
-        }
+        this.channelAnalysers[i].fftSize = Math.min(32768, this._stabilizeWaveforms ? fft * mul : fft);
     }
 }
 

src/website/js/renderer/compute_note_positions.js

@@ -19,7 +19,7 @@ export function computeNotePositions(renderImmediately = false)
     const fallingTime = this.noteFallingTimeMs / 1000;
     const afterTime = this.noteAfterTriggerTimeMs / 1000;
 
-    const currentSeqTime = this.seq.currentHighResolutionTime;
+    const currentSeqTime = this.seq.currentHighResolutionTime - this.timeOffset;
     const currentStartTime = currentSeqTime - afterTime;
     const fallingTimeSeconds = fallingTime + afterTime;
     const currentEndTime = currentStartTime + fallingTimeSeconds;

src/website/js/renderer/renderer.js

@@ -62,10 +62,9 @@ class Renderer
      * @param channelColors {Array<string>}
      * @param synth {Synthetizer}
      * @param canvas {HTMLCanvasElement}
-     * @param delayNode {DelayNode} used for correcting time for large fft sizes
      * @param version {string}
      */
-    constructor(channelColors, synth, canvas, delayNode, version = "")
+    constructor(channelColors, synth, canvas, version = "")
     {
         // variables
         /**
@@ -134,8 +133,8 @@ class Renderer
 
         // synth and analysers
         this.synth = synth;
-        this.delayNode = delayNode;
         this.notesOnScreen = 0;
+        this.timeOffset = 0;
 
         /**
          * @type {AnalyserNode[]}

src/website/js/settings_ui/handlers/renderer_handler.js

@@ -39,6 +39,7 @@ export function _createRendererHandler(renderer)
         renderer.normalAnalyserFft = value;
         renderer.drumAnalyserFft = Math.pow(2, Math.min(15, parseInt(rendererControls.analyserFftSlider.value) + 2));
         renderer.updateFftSize();
+        this.setTimeDelay(value);
         getSpan(rendererControls.analyserFftSlider).innerText = `${value}`;
     });
     rendererControls.analyserFftSlider.onchange = () =>

src/website/js/settings_ui/saving/load_settings.js

@@ -44,6 +44,7 @@ export async function _loadSettings()
     renderer.normalAnalyserFft = value;
     renderer.drumAnalyserFft = Math.pow(2, Math.min(15, Math.log2(value) + 2));
     renderer.updateFftSize();
+    this.setTimeDelay(value);
     getSpan(rendererControls.analyserFftSlider).innerText = `${value}`;
 
     // wave multiplier

src/website/js/settings_ui/settings.js

@@ -43,6 +43,7 @@ class SpessaSynthSettings
      * @param midiDeviceHandler {MIDIDeviceHandler}
      * @param playerInfo {MusicModeUI}
      * @param localeManager {LocaleManager}
+     * @param delayNode {DelayNode}
      */
     constructor(settingsWrapper,
                 sythui,
@@ -51,8 +52,10 @@ class SpessaSynthSettings
                 midiKeyboard,
                 midiDeviceHandler,
                 playerInfo,
-                localeManager)
+                localeManager,
+                delayNode)
     {
+        this.delay = delayNode;
         this.mode = "dark";
         this.autoKeyRange = false;
 
@@ -366,6 +369,24 @@ class SpessaSynthSettings
             }
         };
     }
+
+    setTimeDelay(fft)
+    {
+        let delayTime;
+        // calculate delay:
+        // 16384 fft size = 0.37 s
+        if (fft > 2048)
+        {
+            delayTime = fft / this.synthui.synth.context.sampleRate;
+        }
+        else
+        {
+            delayTime = 0;
+        }
+        this.delay.delayTime.value = delayTime;
+        this.renderer.timeOffset = delayTime;
+        this.synthui.synth.eventHandler.timeDelay = delayTime;
+    }
 }
 
 SpessaSynthSettings.prototype._toggleDarkMode = _toggleDarkMode;