Implement the poly/mono button (#196)

spessasus · web-flow · commit e260db451444 · 2026-01-31T03:41:07.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/website/css/synthesizer_ui/synthesizer_ui.css b/src/website/css/synthesizer_ui/synthesizer_ui.css
@@ -108,11 +108,16 @@
     min-width: var(--voice-meter-height);
 }
 
+.mute_button pre {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
 .mute_button_light * {
     color: black;
 }
 
-.mute_button svg {
+.mute_button > * {
     transition: transform 0.2s ease;
 }
 
@@ -125,7 +130,7 @@
     cursor: pointer;
 }
 
-.mute_button:hover svg {
+.mute_button:hover > * {
     transform: scale(1.1) rotate(5deg);
 }
 
diff --git a/src/website/js/locale/locale_files/locale_en/synthesizer_controller/channel_controller.ts b/src/website/js/locale/locale_files/locale_en/synthesizer_controller/channel_controller.ts
@@ -123,5 +123,9 @@ export const channelControllerLocale = {
 
     drumToggleButton: {
         description: "Toggle drums on channel {0}"
+    },
+
+    polyMonoButton: {
+        description: `Toggle poly/mono mode on channel {0}`
     }
 };
diff --git a/src/website/js/locale/locale_files/locale_pl/synthesizer_controller/channel_controller.ts b/src/website/js/locale/locale_files/locale_pl/synthesizer_controller/channel_controller.ts
@@ -121,5 +121,9 @@ export const channelControllerLocale = {
 
     drumToggleButton: {
         description: "Przełącz perkusję na kanale {0}"
+    },
+
+    polyMonoButton: {
+        description: `Przełącz tryb poly/mono na kanale {0}`
     }
 };
diff --git a/src/website/js/manager/export_audio/export_audio.ts b/src/website/js/manager/export_audio/export_audio.ts
@@ -98,6 +98,7 @@ export async function renderAndExportAudioData(
         separateChannels,
         loopCount,
         preserveSynthParams: true,
+        sequencerID: 0,
         enableEffects: !separateChannels,
         progressCallback: (progress, stage) => {
             if (stage === 0) {
diff --git a/src/website/js/manager/export_audio/export_dls.ts b/src/website/js/manager/export_audio/export_dls.ts
@@ -119,6 +119,7 @@ export function _exportDLS(this: Manager) {
                         bankID: this.soundBankID,
                         trim: trimmed,
                         writeEmbeddedSoundBank: true,
+                        sequencerID: 0,
                         progressFunction: (p) => {
                             const progress = p.sampleIndex / p.sampleCount;
                             progressDiv.style.width = `${progress * 100}%`;
diff --git a/src/website/js/manager/export_audio/export_rmidi.ts b/src/website/js/manager/export_audio/export_rmidi.ts
@@ -279,6 +279,7 @@ export function _exportRMIDI(this: Manager) {
                         trim: true,
                         writeEmbeddedSoundBank: true,
                         format: "sf2",
+                        sequencerID: 0,
                         decompress: false,
                         writeDefaultModulators: true,
                         writeExtendedLimits: true,
diff --git a/src/website/js/manager/export_audio/export_soundfont.ts b/src/website/js/manager/export_audio/export_soundfont.ts
@@ -147,7 +147,8 @@ export function exportAndSaveSF2(this: Manager) {
                                 const progress = p.sampleIndex / p.sampleCount;
                                 progressDiv.style.width = `${progress * 100}%`;
                                 detailMessage.textContent = `${exportingMessage} ${Math.floor(progress * 100)}%`;
-                            }
+                            },
+                            sequencerID: 0
                         }
                     );
                     this.seq?.play();
diff --git a/src/website/js/manager/manager.ts b/src/website/js/manager/manager.ts
@@ -206,7 +206,8 @@ export class Manager {
         const sf = await writeDLS.call(this, {
             trim: false,
             bankID: "main",
-            writeEmbeddedSoundBank: false
+            writeEmbeddedSoundBank: false,
+            sequencerID: 0
         });
         this.saveBlob(new Blob([sf.binary]), sf.fileName);
     }
diff --git a/src/website/js/sequencer_ui/sequencer_ui.ts b/src/website/js/sequencer_ui/sequencer_ui.ts
@@ -708,7 +708,7 @@ export class SequencerUI {
         // Media session
         this.silencePlayer = new Audio();
         // Default
-        this.silencePlayer.loop = true;
+        this.silencePlayer.loop = false;
         if (navigator.mediaSession) {
             // Silent audio element for media session to show up
 
@@ -828,11 +828,9 @@ export class SequencerUI {
         if (loop) {
             this.seq.loopCount = Infinity;
             this.enableIcon(this.loopButton);
-            this.silencePlayer.loop = true;
         } else {
             this.seq.loopCount = 0;
             this.disableIcon(this.loopButton);
-            this.silencePlayer.loop = false;
         }
     }
 
@@ -924,7 +922,8 @@ export class SequencerUI {
             this.seq.playbackRate = this.silencePlayer.playbackRate;
         }
         if (this.silencePlayer.loop != this.seq.loopCount > 0) {
-            this.setLoopState(this.silencePlayer.loop);
+            // Causes issues by looping the audio, triggering a user seek too early
+            this.silencePlayer.loop = false;
         }
     }
 
diff --git a/src/website/js/synthesizer_ui/methods/set_event_listeners.ts b/src/website/js/synthesizer_ui/methods/set_event_listeners.ts
@@ -1,5 +1,6 @@
 import { getDrumsSvg, getNoteSvg } from "../../utils/icons.js";
-import type { ControllerGroupType, SynthetizerUI } from "../synthetizer_ui.ts";
+import { type ControllerGroupType, MONO_ON, POLY_ON, type SynthetizerUI } from "../synthetizer_ui.ts";
+import { midiControllers } from "spessasynth_core";
 
 /**
  * @this {SynthetizerUI}
@@ -40,6 +41,13 @@ export function setEventListeners(this: SynthetizerUI) {
             if (con === undefined) {
                 return;
             }
+            if (controller === midiControllers.monoModeOn) {
+                con.polyMonoButton.setAttribute("isPoly", "false");
+                con.polyMonoButton.innerHTML = MONO_ON;
+            } else if (controller === midiControllers.polyModeOn) {
+                con.polyMonoButton.setAttribute("isPoly", "true");
+                con.polyMonoButton.innerHTML = POLY_ON;
+            }
             const meter = con.controllerMeters[controller];
             if (meter !== undefined) {
                 meter.update(value);
diff --git a/src/website/js/synthesizer_ui/synthetizer_ui.ts b/src/website/js/synthesizer_ui/synthetizer_ui.ts
@@ -37,6 +37,9 @@ import { showAdvancedConfiguration } from "./methods/advanced_configuration.ts";
 import { Selector } from "./methods/synthui_selector.ts";
 import type { Synthesizer } from "../utils/synthesizer.ts";
 
+export const MONO_ON = "<pre style='color: red;'>M</pre>";
+export const POLY_ON = "<pre>P</pre>";
+
 export const LOCALE_PATH = "locale.synthesizerController.";
 export type ControllerGroupType =
     | "effects"
@@ -54,6 +57,7 @@ export interface ChannelController {
     drumsToggle: HTMLDivElement;
     soloButton: HTMLDivElement;
     muteButton: HTMLDivElement;
+    polyMonoButton: HTMLDivElement;
     isHidingLocked: boolean;
 }
 
@@ -312,6 +316,22 @@ export class SynthetizerUI {
                     // Mute/solo
                     channel.soloButton.innerHTML = getEmptyMicSvg(ICON_SIZE);
                     channel.muteButton.innerHTML = getVolumeSvg(ICON_SIZE);
+
+                    // Poly/mono
+                    {
+                        this.synth.lockController(
+                            number,
+                            midiControllers.polyModeOn,
+                            false
+                        );
+                        this.synth.lockController(
+                            number,
+                            midiControllers.monoModeOn,
+                            false
+                        );
+                        channel.polyMonoButton.innerHTML = POLY_ON;
+                    }
+
                     this.synth.muteChannel(number, false);
                 });
                 this.soloChannels.clear();
@@ -1267,6 +1287,59 @@ export class SynthetizerUI {
         };
         controller.appendChild(drumsToggle);
 
+        // Poly/mono button
+        const polyMonoButton = document.createElement("div");
+        polyMonoButton.innerHTML = POLY_ON;
+        this.locale.bindObjectProperty(
+            polyMonoButton,
+            "title",
+            LOCALE_PATH + "channelController.polyMonoButton.description",
+            [channelNumber + 1]
+        );
+        polyMonoButton.classList.add("controller_element");
+        polyMonoButton.classList.add("mute_button");
+        polyMonoButton.setAttribute("isPoly", "false");
+        polyMonoButton.onclick = () => {
+            this.synth.lockController(
+                channelNumber,
+                midiControllers.polyModeOn,
+                false
+            );
+            this.synth.lockController(
+                channelNumber,
+                midiControllers.monoModeOn,
+                false
+            );
+            const isPoly = polyMonoButton.getAttribute("isPoly") === "true";
+            if (isPoly) {
+                this.synth.controllerChange(
+                    channelNumber,
+                    midiControllers.monoModeOn,
+                    0
+                );
+                polyMonoButton.innerHTML = MONO_ON;
+            } else {
+                this.synth.controllerChange(
+                    channelNumber,
+                    midiControllers.polyModeOn,
+                    0
+                );
+                polyMonoButton.innerHTML = POLY_ON;
+            }
+            this.synth.lockController(
+                channelNumber,
+                midiControllers.polyModeOn,
+                true
+            );
+            this.synth.lockController(
+                channelNumber,
+                midiControllers.monoModeOn,
+                true
+            );
+            polyMonoButton.setAttribute("isPoly", (!isPoly).toString());
+        };
+        controller.appendChild(polyMonoButton);
+
         return {
             controller,
             isHidingLocked: false,
@@ -1275,6 +1348,7 @@ export class SynthetizerUI {
             transpose,
             soloButton,
             muteButton,
+            polyMonoButton,
             preset: presetSelector,
             controllerMeters,
             pitchWheel

Original file line number	Diff line number	Diff line change
`@@ -108,11 +108,16 @@`
`108`	`108`	`min-width: var(--voice-meter-height);`
`109`	`109`	`}`
`110`	`110`
	`111`	`+.mute_button pre {`
	`112`	`+ font-size: 1.5rem;`
	`113`	`+ font-weight: bold;`
	`114`	`+}`
	`115`	`+`
`111`	`116`	`.mute_button_light * {`
`112`	`117`	`color: black;`
`113`	`118`	`}`
`114`	`119`
`115`		`-.mute_button svg {`
	`120`	`+.mute_button > * {`
`116`	`121`	`transition: transform 0.2s ease;`
`117`	`122`	`}`
`118`	`123`
`@@ -125,7 +130,7 @@`
`125`	`130`	`cursor: pointer;`
`126`	`131`	`}`
`127`	`132`
`128`		`-.mute_button:hover svg {`
	`133`	`+.mute_button:hover > * {`
`129`	`134`	`transform: scale(1.1) rotate(5deg);`
`130`	`135`	`}`
`131`	`136`
Original file line number	Diff line number	Diff line change
`@@ -123,5 +123,9 @@ export const channelControllerLocale = {`
`123`	`123`
`124`	`124`	`drumToggleButton: {`
`125`	`125`	`description: "Toggle drums on channel {0}"`
	`126`	`+ },`
	`127`	`+`
	`128`	`+ polyMonoButton: {`
	`129`	+ description: `Toggle poly/mono mode on channel {0}`
`126`	`130`	`}`
`127`	`131`	`};`
Original file line number	Diff line number	Diff line change
`@@ -121,5 +121,9 @@ export const channelControllerLocale = {`
`121`	`121`
`122`	`122`	`drumToggleButton: {`
`123`	`123`	`description: "Przełącz perkusję na kanale {0}"`
	`124`	`+ },`
	`125`	`+`
	`126`	`+ polyMonoButton: {`
	`127`	+ description: `Przełącz tryb poly/mono na kanale {0}`
`124`	`128`	`}`
`125`	`129`	`};`
Original file line number	Diff line number	Diff line change
`@@ -708,7 +708,7 @@ export class SequencerUI {`
`708`	`708`	`// Media session`
`709`	`709`	`this.silencePlayer = new Audio();`
`710`	`710`	`// Default`
`711`		`- this.silencePlayer.loop = true;`
	`711`	`+ this.silencePlayer.loop = false;`
`712`	`712`	`if (navigator.mediaSession) {`
`713`	`713`	`// Silent audio element for media session to show up`
`714`	`714`
`@@ -828,11 +828,9 @@ export class SequencerUI {`
`828`	`828`	`if (loop) {`
`829`	`829`	`this.seq.loopCount = Infinity;`
`830`	`830`	`this.enableIcon(this.loopButton);`
`831`		`- this.silencePlayer.loop = true;`
`832`	`831`	`} else {`
`833`	`832`	`this.seq.loopCount = 0;`
`834`	`833`	`this.disableIcon(this.loopButton);`
`835`		`- this.silencePlayer.loop = false;`
`836`	`834`	`}`
`837`	`835`	`}`
`838`	`836`
`@@ -924,7 +922,8 @@ export class SequencerUI {`
`924`	`922`	`this.seq.playbackRate = this.silencePlayer.playbackRate;`
`925`	`923`	`}`
`926`	`924`	`if (this.silencePlayer.loop != this.seq.loopCount > 0) {`
`927`		`- this.setLoopState(this.silencePlayer.loop);`
	`925`	`+ // Causes issues by looping the audio, triggering a user seek too early`
	`926`	`+ this.silencePlayer.loop = false;`
`928`	`927`	`}`
`929`	`928`	`}`
`930`	`929`