adjustable sample rate and synth mode

spessasus · spessasus · commit 31394ddbce5e · 2026-01-29T03:38:20.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "SpessaSynth",
-    "version": "4.0.26",
+    "version": "4.0.27",
     "type": "module",
     "private": true,
     "scripts": {
diff --git a/src/website/CHANGELOG.ts b/src/website/CHANGELOG.ts
@@ -2,5 +2,6 @@
  * Note to self: make sure to update this
  */
 export const WHATS_NEW: string[] = [
-    `Support for node.js below v20 in Local Edition`
+    `Adjustable sample rate!`,
+    `Switching between Chrome and Worklet mode!`
 ] as const;
diff --git a/src/website/css/notification/toggles.css b/src/website/css/notification/toggles.css
@@ -3,6 +3,7 @@
     justify-content: space-between;
     align-items: center;
     margin: 0.5rem;
+    gap: 0.5rem;
 }
 
 .notification_switch input {
diff --git a/src/website/js/locale/locale_files/locale_en/settings/interface_settings.ts b/src/website/js/locale/locale_files/locale_en/settings/interface_settings.ts
@@ -1,17 +1,17 @@
 export const interfaceSettings = {
     title: "Interface settings",
-    
+
     toggleTheme: {
         title: "Use dark theme",
         description: "Enable the dark theme for the interface"
     },
-    
+
     selectLanguage: {
         title: "Language",
         description: "Change the program language",
         helpTranslate: "Translate SpessaSynth"
     },
-    
+
     layoutDirection: {
         title: "Layout direction",
         description: "The layout direction of the renderer and keyboard",
@@ -22,19 +22,24 @@ export const interfaceSettings = {
             rightToLeft: "Right to left"
         }
     },
-    
+
+    synthReload: {
+        chromium: "Reload in Chrome mode",
+        worklet: "Reload in Worklet mode"
+    },
+
     reminder: {
         title: "Did you know that you can hover over the settings to get more information?",
         description: "Like this one!"
     },
-    
+
     useFirefox: {
         firefox: "Firefox Web Browser",
         recommended: "is highly recommended for the best performance."
     },
-    
+
     showControls: {
         title: "Show controls",
         description: "Show the transport control buttons"
     }
-};
+};
diff --git a/src/website/js/locale/locale_files/locale_en/synthesizer_controller/synthesizer_controller.ts b/src/website/js/locale/locale_files/locale_en/synthesizer_controller/synthesizer_controller.ts
@@ -83,6 +83,13 @@ export const synthesizerControllerLocale = {
         description: "Configure the advanced settings for the synthesizer"
     },
 
+    sampleRate: {
+        title: "Sample rate",
+        description: "Change the sample rate of the synthesizer",
+        warning:
+            "Changing the sample rate requires a reload of the page. Are you sure you want to continue?"
+    },
+
     voiceCap: {
         title: "Voice cap",
         description: "The maximum amount of voices allowed to play at once"
diff --git a/src/website/js/locale/locale_files/locale_pl/settings/interface_settings.ts b/src/website/js/locale/locale_files/locale_pl/settings/interface_settings.ts
@@ -1,17 +1,17 @@
 export const interfaceSettings = {
     title: "Ustawienia interfejsu",
-    
+
     toggleTheme: {
         title: "Włącz ciemny motyw",
         description: "Włącz ciemny motyw programu"
     },
-    
+
     selectLanguage: {
         title: "Język",
         description: "Zmień język programu",
         helpTranslate: "Przetłumacz SpessaSynth"
     },
-    
+
     layoutDirection: {
         title: "Układ",
         description: "Kierunek układu wizualizacji i pianina",
@@ -22,19 +22,24 @@ export const interfaceSettings = {
             rightToLeft: "Od prawej do lewej"
         }
     },
-    
+
+    synthReload: {
+        chromium: "Przeładuj w trybie Chrome",
+        worklet: "Przeładuj w trybie Worklet"
+    },
+
     reminder: {
         title: "Czy wiedziałeś, że możesz najechać na ustawienia, aby uzyskać więcej informacji?",
         description: "Tak jak ta!"
     },
-    
+
     useFirefox: {
         firefox: "Przeglądarka firefox",
         recommended: "jest mocno zalecana dla najlepszej wydajności."
     },
-    
+
     showControls: {
         title: "Pokaż kontrolki",
         description: "Pokaż kontrolki do przewijania czasu"
     }
-};
+};
diff --git a/src/website/js/locale/locale_files/locale_pl/synthesizer_controller/synthesizer_controller.ts b/src/website/js/locale/locale_files/locale_pl/synthesizer_controller/synthesizer_controller.ts
@@ -80,6 +80,13 @@ export const synthesizerControllerLocale = {
         description: "Skonfiguruj zaawansowane ustawienia syntezatora"
     },
 
+    sampleRate: {
+        title: "Częstotliwość próbkowania",
+        description: "Zmień częstotliwość próbkowania syntezatora",
+        warning:
+            "Zmiana częstotliwości próbkowania wymaga przeładowania strony. Czy na pewno chcesz kontynuować?"
+    },
+
     voiceCap: {
         title: "Limit głosów",
         description: "Maksymalna ilość głosów mogąca grać jednocześnie"
diff --git a/src/website/js/main/demo_main.ts b/src/website/js/main/demo_main.ts
@@ -11,12 +11,12 @@ import { WHATS_NEW } from "../../CHANGELOG.js";
 import type { LocaleCode } from "../locale/locale_files/locale_list.ts";
 import type { MIDIFile } from "../utils/drop_file_handler.ts";
 import { DEFAULT_SAVED_SETTINGS, type SavedSettings } from "../../server/saved_settings.ts";
+import { readSampleRateParam } from "../utils/sample_rate_param.ts";
 
 /**
  * Demo_main.js
  * purpose: main script for the demo, loads the soundfont and passes it to the manager.js
  */
-const SAMPLE_RATE = 44100;
 const SF_NAME = "GeneralUserGS.sf3";
 
 const titleMessage = document.getElementById("title")!;
@@ -152,7 +152,7 @@ async function demoInit(initLocale: LocaleCode) {
     const localeManager = new LocaleManager(initLocale);
     try {
         context = new AudioContext({
-            sampleRate: SAMPLE_RATE
+            sampleRate: readSampleRateParam()
         });
     } catch (e) {
         changeIcon(getExclamationSvg(256));
diff --git a/src/website/js/main/local_main.ts b/src/website/js/main/local_main.ts
@@ -7,6 +7,7 @@ import { LocaleManager } from "../locale/locale_manager.js";
 import { SpessaSynthLogging } from "spessasynth_core";
 import type { LocaleCode } from "../locale/locale_files/locale_list.ts";
 import type { SavedSettings } from "../../server/saved_settings.ts";
+import { readSampleRateParam } from "../utils/sample_rate_param.ts";
 
 declare global {
     interface Window {
@@ -23,7 +24,6 @@ declare global {
  * Local_main.js
  * purpose: main script for the local edition, loads the soundfont and passes it to the manager.js, reloads soundfonts when needed and saves the settings
  */
-const SAMPLE_RATE = 44100;
 
 SpessaSynthLogging(true, true, true);
 const titleMessage = document.getElementById("title")!;
@@ -45,7 +45,7 @@ const r = await (await fetch("/getversion")).text();
 window.SPESSASYNTH_VERSION = r;
 
 let soundBankBufferCurrent: ArrayBuffer | undefined = undefined;
-const context = new AudioContext({ sampleRate: SAMPLE_RATE });
+const context = new AudioContext({ sampleRate: readSampleRateParam() });
 
 let titleString = "TITLE STRING";
 
diff --git a/src/website/js/manager/export_audio/export_audio.ts b/src/website/js/manager/export_audio/export_audio.ts
@@ -1,8 +1,4 @@
-import {
-    closeNotification,
-    type NotificationContent,
-    showNotification
-} from "../../notification/notification.js";
+import { closeNotification, type NotificationContent, showNotification } from "../../notification/notification.js";
 import { audioBufferToWav } from "spessasynth_lib";
 import { formatTime } from "../../utils/other.js";
 import { consoleColors } from "../../utils/console_colors.js";
@@ -307,7 +303,7 @@ export function showAudioExportMenu(this: Manager) {
             type: "input",
             translatePathTitle: wavPath + "sampleRate",
             attributes: {
-                value: "44100",
+                value: this.synth!.context.sampleRate.toString(),
                 type: "number",
                 "sample-rate": "1"
             }
diff --git a/src/website/js/manager/manager.ts b/src/website/js/manager/manager.ts
@@ -47,7 +47,7 @@ export class Manager {
     public enableDebug;
     public readonly ready;
     public readonly localeManager;
-    public readonly workerMode = "chrome" in window;
+    public readonly workerMode;
     public synth?: Synthesizer;
     public seq?: Sequencer;
     public readonly showExportMenu = showExportMenu.bind(this);
@@ -105,6 +105,14 @@ export class Manager {
         this.isExporting = false;
         this.sBankBuffer = sfBuffer;
 
+        const urlParams = new URLSearchParams(window.location.search);
+        const mode = urlParams.get("mode");
+        if (mode) {
+            this.workerMode = mode === "chromium";
+        } else {
+            this.workerMode = "chrome" in window;
+        }
+
         this.audioDelay = new DelayNode(context, {
             delayTime: 0
         });
diff --git a/src/website/js/settings_ui/handlers/interface_handler.ts b/src/website/js/settings_ui/handlers/interface_handler.ts
@@ -1,6 +1,7 @@
 import type { SpessaSynthSettings } from "../settings.ts";
 import type { localeList } from "../../locale/locale_files/locale_list.ts";
 import type { LayoutType } from "../../../server/saved_settings.ts";
+import { WorkerSynthesizer } from "spessasynth_lib";
 
 /**
  * @this {SpessaSynthSettings}
@@ -20,13 +21,13 @@ export function _createInterfaceSettingsHandler(this: SpessaSynthSettings) {
         option.textContent = locale.localeName;
         select.appendChild(option);
     }
-    select.value = this.locale.localeCode;
+    select.value = this.locale.localeCode || "en";
     select.onchange = () => {
         if (select.value === "help-translate") {
             window.open(
                 "https://github.com/spessasus/SpessaSynth/blob/master/src/website/js/locale/locale_files/README.md"
             );
-            select.value = this.locale.localeCode;
+            select.value = this.locale.localeCode || "en";
             return;
         }
         this.locale.changeGlobalLocale(select.value as keyof typeof localeList);
@@ -53,6 +54,27 @@ export function _createInterfaceSettingsHandler(this: SpessaSynthSettings) {
                 .classList.add("hidden");
         }
     };
+
+    // Reload synth
+    const anchor = document.getElementById("reload_synth") as HTMLAnchorElement;
+    const url = new URL(window.location.href);
+    if (this.synth instanceof WorkerSynthesizer) {
+        this.locale.bindObjectProperty(
+            anchor,
+            "textContent",
+            "locale.settings.interfaceSettings.synthReload.worklet"
+        );
+        url.searchParams.set("mode", "worklet");
+    } else {
+        this.locale.bindObjectProperty(
+            anchor,
+            "textContent",
+            "locale.settings.interfaceSettings.synthReload.chromium"
+        );
+        url.searchParams.set("mode", "chromium");
+    }
+
+    anchor.href = url.toString();
 }
 
 export function _changeLayout(this: SpessaSynthSettings, layout: LayoutType) {
diff --git a/src/website/js/settings_ui/settings_html.ts b/src/website/js/settings_ui/settings_html.ts
@@ -181,9 +181,11 @@ export const settingsHtml = `
             <option value='right' translate-path='locale.settings.interfaceSettings.layoutDirection.values.rightToLeft'></option>
         </select>
         
-        <h3><a href='https://github.com/spessasus/SpessaSynth/wiki/How-To-Use-App' target='_blank' translate-path-title='locale.synthesizerController.helpButton'></a></h3>
+        
+        <h3><a id='reload_synth'></></h3>
         
         <h4 class='hover_reminder' translate-path-title='locale.settings.interfaceSettings.reminder'></h4>
+        <h4><a href='https://github.com/spessasus/SpessaSynth/wiki/How-To-Use-App' target='_blank' translate-path-title='locale.synthesizerController.helpButton'></a></h4>
     </div>
 </div>
 `;
diff --git a/src/website/js/synthesizer_ui/methods/advanced_configuration.ts b/src/website/js/synthesizer_ui/methods/advanced_configuration.ts
@@ -52,6 +52,70 @@ export function showAdvancedConfiguration(this: SynthetizerUI) {
                 }
             },
 
+            {
+                type: "input",
+                translatePathTitle: LOCALE_PATH + "sampleRate",
+                listeners: {
+                    change: (e) => {
+                        const rate =
+                            parseInt((e.target as HTMLInputElement).value) ||
+                            44100;
+                        const n = showNotification(
+                            this.locale.getLocaleString(
+                                "locale.warnings.warning"
+                            ),
+                            [
+                                {
+                                    type: "text",
+                                    textContent: this.locale.getLocaleString(
+                                        LOCALE_PATH + "sampleRate.warning"
+                                    )
+                                },
+                                {
+                                    type: "button",
+                                    textContent:
+                                        this.locale.getLocaleString(
+                                            "locale.yes"
+                                        ),
+                                    listeners: {
+                                        click: () => {
+                                            const url = new URL(
+                                                window.location.href
+                                            );
+                                            url.searchParams.set(
+                                                "samplerate",
+                                                rate.toString()
+                                            );
+                                            window.location.replace(url);
+                                        }
+                                    }
+                                },
+                                {
+                                    type: "button",
+                                    textContent:
+                                        this.locale.getLocaleString(
+                                            "locale.no"
+                                        ),
+                                    listeners: {
+                                        click: () => {
+                                            closeNotification(n.id);
+                                        }
+                                    }
+                                }
+                            ],
+                            999999,
+                            true
+                        );
+                    }
+                },
+                attributes: {
+                    type: "number",
+                    min: "1",
+                    max: "1000",
+                    value: this.synth.context.sampleRate.toString()
+                }
+            },
+
             {
                 type: "input",
                 translatePathTitle: LOCALE_PATH + "voiceCap",
diff --git a/src/website/js/utils/sample_rate_param.ts b/src/website/js/utils/sample_rate_param.ts
@@ -0,0 +1,10 @@
+const SAMPLE_RATE = 44100;
+
+export function readSampleRateParam() {
+    const params = new URLSearchParams(window.location.search);
+    const rate = params.get("samplerate");
+    if (rate) {
+        return parseInt(rate) || SAMPLE_RATE;
+    }
+    return SAMPLE_RATE;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "SpessaSynth",`
`3`		`- "version": "4.0.26",`
	`3`	`+ "version": "4.0.27",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"private": true,`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`justify-content: space-between;`
`4`	`4`	`align-items: center;`
`5`	`5`	`margin: 0.5rem;`
	`6`	`+ gap: 0.5rem;`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`.notification_switch input {`