From 1304e5b1a83f52a1949b920165229ba8c7e683aa Mon Sep 17 00:00:00 2001
From: spessasus <95608008+spessasus@users.noreply.github.com>
Date: Tue, 19 Sep 2023 19:51:38 +0200
Subject: [PATCH] Playlist support - added multiple song support - a handful of
 fixes - updated the sequencer's wiki

---
 index.html                                    |  77 +++++++----
 src/spessasynth_lib/sequencer/sequencer.js    |  68 ++++++++--
 .../soundfont/chunk/samples.js                |   1 +
 .../synthetizer/buffer_voice/midi_channel.js  |  13 +-
 .../buffer_voice/synthesis_model.js           |   5 +-
 .../synthetizer/synthetizer.js                |  16 ++-
 src/website/css/sequencer_ui.css              |   1 -
 src/website/index.html                        |   4 +-
 src/website/main.js                           |  66 +++++----
 src/website/manager.js                        |   6 +-
 src/website/ui/icons.js                       |  14 ++
 src/website/ui/midi_keyboard.js               |   4 +
 .../ui/{ => sequencer_ui}/sequencer_ui.js     | 128 ++++++++++++------
 src/website/ui/sequencer_ui/sequi_button.js   |  13 ++
 .../ui/{ => synthesizer_ui}/synthetizer_ui.js |  12 +-
 .../ui/{ => synthesizer_ui}/synthui_meter.js  |   0
 16 files changed, 301 insertions(+), 127 deletions(-)
 rename src/website/ui/{ => sequencer_ui}/sequencer_ui.js (72%)
 create mode 100644 src/website/ui/sequencer_ui/sequi_button.js
 rename src/website/ui/{ => synthesizer_ui}/synthetizer_ui.js (97%)
 rename src/website/ui/{ => synthesizer_ui}/synthui_meter.js (100%)

diff --git a/index.html b/index.html
index 67e4232e..6ef37efb 100644
--- a/index.html
+++ b/index.html
@@ -24,11 +24,11 @@
 
     <div id="title_wrapper">
       <div id="progress_bar"></div>
-      <h1 id="title">SpessaSynth: SoundFont2 Javascript Synthetizer Online Demo</h1>
+      <h1 id="title">SpessaSynth: Online Demo</h1>
 
       <div class="midi_and_sf_controller">
-        <label id="file_upload" for='midi_file_input'> Upload the MIDI file</label>
-        <input type="file" accept=".mid" id="midi_file_input"><br/>
+        <label id="file_upload" for='midi_file_input'>Upload your MIDI files</label>
+        <input type="file" accept=".mid" id="midi_file_input" multiple><br/>
 
         <label id="sf_upload"> Upload the soundfont
           <input type="file" accept=".sf2" id="sf_file_input"><br/>
@@ -114,6 +114,7 @@ <h1 id="title">SpessaSynth: SoundFont2 Javascript Synthetizer Online Demo</h1>
   }
 
   document.getElementById("bundled_sf").onclick = () => {
+    titleMessage.innerText = "Downloading SoundFont...";
     fetchFont("soundfonts/GeneralUser_GS.sf2", percent => titleMessage.innerText = `Downloading SF2: ${percent}%`).then(arr => {
       try {
         window.soundFontParser = new SoundFont2(arr);
@@ -132,6 +133,7 @@ <h1 id="title">SpessaSynth: SoundFont2 Javascript Synthetizer Online Demo</h1>
 
   /**
    * @param midiFile {File}
+   * @returns {Promise<MIDI>}
    */
   async function parseMidi(midiFile)
   {
@@ -149,32 +151,51 @@ <h1 id="title">SpessaSynth: SoundFont2 Javascript Synthetizer Online Demo</h1>
   }
 
   /**
-   * @param midiFile {File}
+   * @param midiFiles {FileList}
    */
-  function startMidi(midiFile)
+  async function startMidi(midiFiles)
   {
-    titleMessage.innerText = `Parsing ${midiFile.name}`;
-    document.getElementById("file_upload").innerText = midiFile.name;
-    parseMidi(midiFile).then(parsedMidi => {
-      if(parsedMidi.midiName.trim().length > 0)
-      {
-        titleMessage.style.fontStyle = "italic";
-        titleMessage.innerText = parsedMidi.midiName;
-      }
-      else
-      {
-        titleMessage.innerText = TITLE;
-      }
+    titleMessage.innerText = `Parsing ${midiFiles[0].name}`;
+    let fName;
+    if(midiFiles[0].name.length > 20)
+    {
+      fName = midiFiles[0].name.substring(0, 21) + "...";
+    }
+    else
+    {
+      fName = midiFiles[0].name;
+    }
+    if(midiFiles.length > 1)
+    {
+      fName += ` and ${midiFiles.length - 1} others`;
+    }
+    document.getElementById("file_upload").innerText = fName;
+    /**
+     * @type {MIDI[]}
+     */
+    const parsed = [];
+    for (let i = 0; i < midiFiles.length; i++) {
+      titleMessage.innerText = `Parsing ${midiFiles[i].name}`;
+      parsed.push(await parseMidi(midiFiles[i]));
+    }
+    titleMessage.style.fontStyle = "italic";
+    if(parsed[0].midiName.trim().length > 0)
+    {
+      titleMessage.innerText = parsed[0].midiName.trim();
+    }
+    else
+    {
+      titleMessage.innerText = midiFiles[0].name;
+    }
 
-      if(manager.seq)
-      {
-        manager.seq.loadNewSequence(parsedMidi);
-        manager.seq.currentTime = 0;
-      }
-      else {
-        manager.play(parsedMidi);
-      }
-    });
+    if(manager.seq)
+    {
+      manager.seq.loadNewSongList(parsed);
+      manager.seq.currentTime = 0;
+    }
+    else {
+      manager.play(parsed);
+    }
   }
 
   /**
@@ -221,7 +242,7 @@ <h1 id="title">SpessaSynth: SoundFont2 Javascript Synthetizer Online Demo</h1>
     sfInput.onchange = undefined;
     if(fileInput.files[0])
     {
-      startMidi(fileInput.files[0]);
+      startMidi(fileInput.files);
     }
     else
     {
@@ -229,7 +250,7 @@ <h1 id="title">SpessaSynth: SoundFont2 Javascript Synthetizer Online Demo</h1>
       fileInput.onchange = e => {
         if(e.target.files[0])
         {
-          startMidi(fileInput.files[0]);
+          startMidi(fileInput.files);
         }
       }
     }
diff --git a/src/spessasynth_lib/sequencer/sequencer.js b/src/spessasynth_lib/sequencer/sequencer.js
index 7c9fc1a8..858df160 100644
--- a/src/spessasynth_lib/sequencer/sequencer.js
+++ b/src/spessasynth_lib/sequencer/sequencer.js
@@ -9,11 +9,11 @@ const MAX_NOTEONS_PER_S = 200;
 
 export class Sequencer {
     /**
-     * Creates a new Midi sequencer for playing back MIDI file
-     * @param parsedMidi {MIDI} The parsed midi
+     * Creates a new Midi sequencer for playing back MIDI files
+     * @param parsedMidis {MIDI[]} List of the parsed midi
      * @param synth {Synthetizer} synth to send events to
      */
-    constructor(parsedMidi, synth)
+    constructor(parsedMidis, synth)
     {
         this.ignoreEvents = false;
         this.synth = synth;
@@ -34,7 +34,7 @@ export class Sequencer {
          * Absolute playback startTime, bases on the synth's time
          * @type {number}
          */
-        this.absoluteStartTime = this.synth.currentTime;
+        this.absoluteStartTime = this.now;
 
         /**
          * Controls the playback's rate
@@ -57,7 +57,39 @@ export class Sequencer {
 
         this.noteOnsPerS = 0;
 
-        this.loadNewSequence(parsedMidi);
+        this.loadNewSongList(parsedMidis);
+    }
+
+    /**
+     * @param parsedMidis {MIDI[]}
+     */
+    loadNewSongList(parsedMidis)
+    {
+        this.songs = parsedMidis;
+        this.songIndex = 0;
+        this.loadNewSequence(this.songs[this.songIndex]);
+    }
+
+    nextSong()
+    {
+        this.songIndex++;
+        this.songIndex %= this.songs.length;
+        this.loadNewSequence(this.songs[this.songIndex]);
+    }
+
+    previousSong()
+    {
+        this.songIndex--;
+        if(this.songIndex < 0)
+        {
+            this.songIndex = this.songs.length - 1;
+        }
+        this.loadNewSequence(this.songs[this.songIndex]);
+    }
+
+    get now()
+    {
+        return performance.now() / 1000
     }
 
     /**
@@ -70,7 +102,7 @@ export class Sequencer {
         {
             return this.pausedTime;
         }
-        return (this.synth.currentTime - this.absoluteStartTime) * this.playbackRate;
+        return (this.now - this.absoluteStartTime) * this.playbackRate;
     }
 
     set currentTime(time)
@@ -87,7 +119,7 @@ export class Sequencer {
         this.playingNotes = [];
         this.pausedTime = undefined;
         this._playTo(time);
-        this.absoluteStartTime = this.synth.currentTime - time / this.playbackRate;
+        this.absoluteStartTime = this.now - time / this.playbackRate;
         this.play();
         if(this.renderer)
         {
@@ -117,6 +149,7 @@ export class Sequencer {
      */
     loadNewSequence(parsedMidi)
     {
+        this.stop();
         if (!parsedMidi.tracks) {
             throw "No tracks supplied!";
         }
@@ -146,6 +179,7 @@ export class Sequencer {
         }
 
         this.synth.resetControllers();
+        this.play(true);
     }
 
     calculateNoteTimes()
@@ -401,7 +435,7 @@ export class Sequencer {
         if(this.paused)
         {
             // adjust the start time
-            this.absoluteStartTime = this.synth.currentTime - this.pausedTime;
+            this.absoluteStartTime = this.now - this.pausedTime;
             this.pausedTime = undefined;
         }
 
@@ -423,7 +457,7 @@ export class Sequencer {
         this.playingNotes = [];
         this.pausedTime = undefined;
         this._playTo(0, ticks);
-        this.absoluteStartTime = this.synth.currentTime - this.playedTime / this.playbackRate;
+        this.absoluteStartTime = this.now - this.playedTime / this.playbackRate;
         this.play();
         if(this.renderer)
         {
@@ -448,7 +482,8 @@ export class Sequencer {
             return;
         }
         let event = this.events[this.eventIndex];
-        while(this.playedTime <= this.currentTime)
+        let current = this.currentTime
+        while(this.playedTime <= current)
         {
             this._processEvent(event);
             ++this.eventIndex;
@@ -459,10 +494,19 @@ export class Sequencer {
                 this.setTimeTicks(this.midiData.loop.start);
                 return;
             }
-
-            if(this.eventIndex >= this.events.length)
+            else if(this.eventIndex >= this.events.length || current > this.duration)
             {
                 this.pause();
+                // if(this.loop) {
+                //     this.setTimeTicks(this.midiData.loop.start);
+                // }
+                // else
+                // {
+                    if(this.songs.length > 1)
+                    {
+                        this.nextSong();
+                    }
+                // }
                 return;
             }
 
diff --git a/src/spessasynth_lib/soundfont/chunk/samples.js b/src/spessasynth_lib/soundfont/chunk/samples.js
index 788737e1..a9aae910 100644
--- a/src/spessasynth_lib/soundfont/chunk/samples.js
+++ b/src/spessasynth_lib/soundfont/chunk/samples.js
@@ -150,6 +150,7 @@ export class Sample {
         this.indexRatio = 1;
         this.sampleDataArray = smplArr;
         this.sampleLengthSeconds = this.sampleLength / (this.sampleRate * 2);
+        this.loopAllowed = this.sampleLoopStartIndex !== this.sampleLoopEndIndex;
 
         if (this.sampleLength < 1 || this.sampleName.substring(0, 3).toLowerCase() === "eos") {
             return;
diff --git a/src/spessasynth_lib/synthetizer/buffer_voice/midi_channel.js b/src/spessasynth_lib/synthetizer/buffer_voice/midi_channel.js
index 04fb0dd8..ce059edd 100644
--- a/src/spessasynth_lib/synthetizer/buffer_voice/midi_channel.js
+++ b/src/spessasynth_lib/synthetizer/buffer_voice/midi_channel.js
@@ -2,6 +2,7 @@ import {Voice} from "./voice.js";
 import {Preset} from "../../soundfont/chunk/presets.js";
 import { consoleColors } from '../../utils/other.js'
 import { midiControllers } from '../../midi_parser/midi_message.js'
+import { DEFAULT_GAIN } from '../synthetizer.js'
 
 const CHANNEL_LOUDNESS = 0.5;
 
@@ -123,8 +124,8 @@ export class MidiChannel {
                 break;
 
             case midiControllers.lsbForControl7MainVolume:
-                let nevVol = (this.channelVolume << 7) | value;
-                this.setVolume(nevVol);
+                let nevVol = ((this.channelVolume & 0x7f) << 7) | value;
+                this.setVolume(nevVol / 128);
                 break;
 
             case midiControllers.sustainPedal:
@@ -142,8 +143,8 @@ export class MidiChannel {
                 break;
 
             case midiControllers.lsbForControl11ExpressionController:
-                const expression = (this.channelExpression << 7) | value;
-                this.setExpression(expression)
+                const expression = ((this.channelExpression & 0x7f) << 7) | value;
+                this.setExpression(expression / 16384)
                 break;
 
             case midiControllers.effects3Depth:
@@ -230,6 +231,7 @@ export class MidiChannel {
 
     setExpression(val)
     {
+        val = Math.min(1, val);
         this.channelExpression = val;
         this.gainController.gain.value = this.getGain();
     }
@@ -326,6 +328,7 @@ export class MidiChannel {
     }
 
     setVolume(volume) {
+        volume = Math.min(127, volume);
         this.channelVolume = volume / 127;
         this.gainController.gain.value = this.getGain();
     }
@@ -546,7 +549,7 @@ export class MidiChannel {
         this.channelTuningRatio = 1;
         this.channelPitchBendRange = 2;
         this.holdPedal = false;
-        this.gainController.gain.value = 1;
+        this.gainController.gain.value = this.getGain();
         this.chorusController.gain.value = 0;
         this.panner.pan.value = 0;
         this.pitchBend = 0;
diff --git a/src/spessasynth_lib/synthetizer/buffer_voice/synthesis_model.js b/src/spessasynth_lib/synthetizer/buffer_voice/synthesis_model.js
index dd19f563..06fe0a32 100644
--- a/src/spessasynth_lib/synthetizer/buffer_voice/synthesis_model.js
+++ b/src/spessasynth_lib/synthetizer/buffer_voice/synthesis_model.js
@@ -29,14 +29,15 @@ export class SynthesisModel
         WAVETABLE OSCILLATOR
         ====================
          */
+        const loop = this.looping !== 0 && sample.loopAllowed;
         this.wavetableOscillator = new AudioBufferSourceNode(context, {
             buffer: sample.getAudioBuffer(context, offsets.start, offsets.end),
             playbackRate: synthesisOptions.getPlaybackRate() * tuningRatio,
-            loop: this.looping !== 0
+            loop: loop
         });
 
         // set up loop
-        if (this.looping !== 0)
+        if (loop)
         {
             // lsI / (sr * 2)
             const loopStartIndex = sample.sampleLoopStartIndex
diff --git a/src/spessasynth_lib/synthetizer/synthetizer.js b/src/spessasynth_lib/synthetizer/synthetizer.js
index df3b6eeb..fe9e3c9d 100644
--- a/src/spessasynth_lib/synthetizer/synthetizer.js
+++ b/src/spessasynth_lib/synthetizer/synthetizer.js
@@ -6,7 +6,7 @@ import { midiControllers } from '../midi_parser/midi_message.js'
 import { WorkletChannel } from './worklet_channel/worklet_channel.js'
 
 // i mean come on
-const VOICES_CAP = 1000;
+const VOICES_CAP = 2137;
 
 export const DEFAULT_GAIN = 0.5;
 export const DEFAULT_PERCUSSION = 9;
@@ -386,8 +386,16 @@ export class Synthetizer {
                 // main volume
                 if (messageData[2] === 0x04 && messageData[3] === 0x01)
                 {
-                    const vol = messageData[5] << 7 | messageData[4];
-                    this.volumeController.gain.value = vol / 16383;
+                    if(messageData[4])
+                    {
+                        const vol = messageData[5] << 7 | messageData[4];
+                        this.volumeController.gain.value = vol / 16384 * DEFAULT_GAIN;
+                    }
+                    else
+                    {
+                        const vol = messageData[5];
+                        this.volumeController.gain.value = vol / 127 * DEFAULT_GAIN;
+                    }
                 }
                 break;
 
@@ -448,7 +456,7 @@ export class Synthetizer {
                 if(messageData[2] === 0x16 && messageData[3] === 0x12 && messageData[4] === 0x10)
                 {
                     // this is a roland master volume message
-                    this.volumeController.gain.value = messageData[7] / 100;
+                    this.volumeController.gain.value = messageData[7] / 100 * DEFAULT_GAIN;
                     console.log(`%cRoland Master Volume control set to: %c${messageData[7]}%c via: %c${arrayToHexString(messageData)}`,
                         consoleColors.info,
                         consoleColors.value,
diff --git a/src/website/css/sequencer_ui.css b/src/website/css/sequencer_ui.css
index d4651a28..5c7880d7 100644
--- a/src/website/css/sequencer_ui.css
+++ b/src/website/css/sequencer_ui.css
@@ -41,7 +41,6 @@
 
 #sequencer_controls .control_buttons:hover{
     cursor: pointer;
-    filter: brightness(1.5);
 }
 
 #sequencer_controls #note_progress_background
diff --git a/src/website/index.html b/src/website/index.html
index c751e4eb..b09942fa 100644
--- a/src/website/index.html
+++ b/src/website/index.html
@@ -20,8 +20,8 @@
         <div id="progress_bar"></div>
         <h1 id="title">SpessaSynth: SoundFont2 Javascript Synthetizer</h1>
         <div class="midi_and_sf_controller">
-          <label id="file_upload" for='midi_file_input'> Upload a MIDI file</label>
-            <input type="file" accept=".mid" id="midi_file_input"><br/>
+          <label id="file_upload" for='midi_file_input'>Upload your MIDI files</label>
+            <input type="file" accept=".mid" id="midi_file_input" multiple><br/>
 
           <select id="sf_selector"></select>
         </div>
diff --git a/src/website/main.js b/src/website/main.js
index 793994f8..4939369f 100644
--- a/src/website/main.js
+++ b/src/website/main.js
@@ -72,41 +72,61 @@ async function fetchFont(fileName, callback)
 }
 
 /**
- * @param midiFile {File}
+ * @param midiFiles {FileList}
  */
-function startMidi(midiFile)
+async function startMidi(midiFiles)
 {
-    let fName = "";
-    if(midiFile.name.length > 20)
+    let fName;
+    if(midiFiles[0].name.length > 20)
     {
-        fName = midiFile.name.substring(0, 21) + "...";
+        fName = midiFiles[0].name.substring(0, 21) + "...";
     }
     else
     {
-        fName = midiFile.name;
+        fName = midiFiles[0].name;
+    }
+    if(midiFiles.length > 1)
+    {
+        fName += ` and ${midiFiles.length - 1} others`;
     }
-    titleMessage.innerText = `Parsing ${fName}`;
     document.getElementById("file_upload").innerText = fName;
-    parseMidi(midiFile).then(parsedMidi => {
-        if(parsedMidi.midiName.trim().length > 0)
+    /**
+     * @type {MIDI[]}
+     */
+    const parsed = [];
+
+    /**
+     * @type {string[]}
+     */
+    const titles = [];
+    for (let i = 0; i < midiFiles.length; i++) {
+        titleMessage.innerText = `Parsing ${midiFiles[i].name}`;
+        parsed.push(await parseMidi(midiFiles[i]));
+
+        let title;
+        if(parsed[i].midiName.trim().length > 0)
         {
-            titleMessage.style.fontStyle = "italic";
-            titleMessage.innerText = parsedMidi.midiName;
+            title = parsed[i].midiName.trim();
         }
         else
         {
-            titleMessage.innerText = TITLE;
+            title = midiFiles[i].name;
         }
+        titles.push(title);
+    }
+    titleMessage.style.fontStyle = "italic";
+    document.title = titles[0];
+    titleMessage.innerText = titles[0]
 
-        if(manager.seq)
-        {
-            manager.seq.loadNewSequence(parsedMidi);
-            manager.seq.currentTime = 0;
-        }
-        else {
-            manager.play(parsedMidi);
-        }
-    });
+    if(manager.seq)
+    {
+        manager.seq.loadNewSongList(parsed);
+
+    }
+    else {
+        manager.play(parsed);
+    }
+    manager.seqUI.setSongTitles(titles);
 }
 
 /**
@@ -224,7 +244,7 @@ fetch("soundfonts").then(async r => {
 
     // start midi if already uploaded
     if(fileInput.files[0]) {
-        startMidi(fileInput.files[0]);
+        await startMidi(fileInput.files);
     }
 
     // and add the event listener
@@ -232,6 +252,6 @@ fetch("soundfonts").then(async r => {
         if (!fileInput.files[0]) {
             return;
         }
-        startMidi(fileInput.files[0]);
+        startMidi(fileInput.files);
     };
 })
\ No newline at end of file
diff --git a/src/website/manager.js b/src/website/manager.js
index 1cc6ebd4..4d60fa50 100644
--- a/src/website/manager.js
+++ b/src/website/manager.js
@@ -5,8 +5,8 @@ import {Sequencer} from "../spessasynth_lib/sequencer/sequencer.js";
 import {MIDI} from "../spessasynth_lib/midi_parser/midi_loader.js";
 
 import {SoundFont2} from "../spessasynth_lib/soundfont/soundfont_parser.js";
-import {SequencerUI} from "./ui/sequencer_ui.js";
-import {SynthetizerUI} from "./ui/synthetizer_ui.js";
+import {SequencerUI} from "./ui/sequencer_ui/sequencer_ui.js";
+import {SynthetizerUI} from "./ui/synthesizer_ui/synthetizer_ui.js";
 import { MIDIDeviceHandler } from '../spessasynth_lib/midi_handler/midi_handler.js'
 import { WebMidiLinkHandler } from '../spessasynth_lib/midi_handler/web_midi_link.js'
 
@@ -117,7 +117,7 @@ export class Manager {
 
     /**
      * starts playing and rendering the midi file
-     * @param parsedMidi {MIDI}
+     * @param parsedMidi {MIDI[]}
      */
     play(parsedMidi)
     {
diff --git a/src/website/ui/icons.js b/src/website/ui/icons.js
index 11e43d58..c868b725 100644
--- a/src/website/ui/icons.js
+++ b/src/website/ui/icons.js
@@ -51,4 +51,18 @@ export function getTextSvg(size)
     return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-text-center" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
 </svg>`;
+}
+
+export function getForwardSvg(size)
+{
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-skip-end-fill" viewBox="0 0 16 16">
+  <path d="M12.5 4a.5.5 0 0 0-1 0v3.248L5.233 3.612C4.693 3.3 4 3.678 4 4.308v7.384c0 .63.692 1.01 1.233.697L11.5 8.753V12a.5.5 0 0 0 1 0V4z"/>
+</svg>`;
+}
+
+export function getBackwardSvg(size)
+{
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-skip-start-fill" viewBox="0 0 16 16">
+  <path d="M4 4a.5.5 0 0 1 1 0v3.248l6.267-3.636c.54-.313 1.232.066 1.232.696v7.384c0 .63-.692 1.01-1.232.697L5 8.753V12a.5.5 0 0 1-1 0V4z"/>
+</svg>`;
 }
\ No newline at end of file
diff --git a/src/website/ui/midi_keyboard.js b/src/website/ui/midi_keyboard.js
index e9c2879a..234804cf 100644
--- a/src/website/ui/midi_keyboard.js
+++ b/src/website/ui/midi_keyboard.js
@@ -281,6 +281,10 @@ export class MidiKeyboard
          * @type {string[]}
          */
         let pressedColors = this.keyColors[midiNote];
+        if(!pressedColors)
+        {
+            return;
+        }
         if(pressedColors.length > 1) {
             pressedColors.pop();
             key.style.background = pressedColors[pressedColors.length - 1];
diff --git a/src/website/ui/sequencer_ui.js b/src/website/ui/sequencer_ui/sequencer_ui.js
similarity index 72%
rename from src/website/ui/sequencer_ui.js
rename to src/website/ui/sequencer_ui/sequencer_ui.js
index 2bbf599f..9cadc741 100644
--- a/src/website/ui/sequencer_ui.js
+++ b/src/website/ui/sequencer_ui/sequencer_ui.js
@@ -1,7 +1,8 @@
-import {Sequencer} from "../../spessasynth_lib/sequencer/sequencer.js";
-import { formatTime, supportedEncodings } from '../../spessasynth_lib/utils/other.js'
-import { getLoopSvg, getPauseSvg, getPlaySvg, getTextSvg } from './icons.js';
-import { messageTypes } from '../../spessasynth_lib/midi_parser/midi_message.js'
+import {Sequencer} from "../../../spessasynth_lib/sequencer/sequencer.js";
+import { formatTime, supportedEncodings } from '../../../spessasynth_lib/utils/other.js'
+import { getBackwardSvg, getForwardSvg, getLoopSvg, getPauseSvg, getPlaySvg, getTextSvg } from '../icons.js'
+import { messageTypes } from '../../../spessasynth_lib/midi_parser/midi_message.js'
+import { getSeqUIButton } from './sequi_button.js'
 
 const ICON_SIZE = 32;
 
@@ -21,6 +22,18 @@ export class SequencerUI{
         this.encoder = new TextEncoder(this.encoding);
         this.text = "";
         this.rawText = [];
+        this.titles = [""];
+        this.titleIndex = 0;
+    }
+
+
+    /**
+     * @param songTitles {string[]}
+     */
+    setSongTitles(songTitles)
+    {
+        this.titles = songTitles;
+        this.titleIndex = 0;
     }
 
     /**
@@ -104,12 +117,16 @@ export class SequencerUI{
         // main div
         const mainLyricsDiv  = document.createElement("div");
         mainLyricsDiv.classList.add("lyrics");
+
+
         // title
         const lyricsTitle = document.createElement("h2");
         lyricsTitle.innerText = "Decoded Text";
         lyricsTitle.classList.add("lyrics_title");
         mainLyricsDiv.appendChild(lyricsTitle);
         this.lyricsElement.title = lyricsTitle;
+
+
         // encoding selector
         const encodingSelector = document.createElement("select");
         supportedEncodings.forEach(encoding => {
@@ -122,38 +139,39 @@ export class SequencerUI{
         encodingSelector.onchange = () => this.changeEncoding(encodingSelector.value);
         encodingSelector.classList.add("lyrics_selector");
         mainLyricsDiv.appendChild(encodingSelector);
+
+
         // the actual text
         const text = document.createElement("p");
         text.classList.add("lyrics_text");
         mainLyricsDiv.appendChild(text);
         this.lyricsElement.text = text;
-
         this.lyricsElement.mainDiv = mainLyricsDiv;
-
         this.controls.appendChild(mainLyricsDiv);
-
         setInterval(() => {
             if(this.lyricsElement.text.innerText !== this.text) this.lyricsElement.text.innerText = this.text;
         }, 100);
 
+
         // background bar
         const progressBarBg = document.createElement("div");
         progressBarBg.id = "note_progress_background";
 
+
         // foreground bar
         this.progressBar = document.createElement("div");
         this.progressBar.id = "note_progress";
         this.progressBar.min = (0).toString();
         this.progressBar.max =  this.seq.duration.toString();
 
+
         // control buttons
         const controlsDiv = document.createElement("div");
 
+
         // play pause
-        const playPauseButton = document.createElement("div");
-        playPauseButton.classList.add("control_buttons");
-        playPauseButton.title = "Play/pause";
-        playPauseButton.innerHTML = getPauseSvg(ICON_SIZE);
+        const playPauseButton = getSeqUIButton("Play/Pause",
+            getPauseSvg(ICON_SIZE));
         const togglePlayback = () => {
             if(this.seq.paused)
             {
@@ -168,11 +186,20 @@ export class SequencerUI{
         }
         playPauseButton.onclick = togglePlayback;
 
+
+        // previous song button
+        const previousSongButton = getSeqUIButton("Previous song",
+        getBackwardSvg(ICON_SIZE));
+        previousSongButton.onclick = () => this.seq.previousSong();
+
+        // next song button
+        const nextSongButton = getSeqUIButton("Next song",
+            getForwardSvg(ICON_SIZE));
+        nextSongButton.onclick = () => this.seq.nextSong();
+
         // loop button
-        const loopButton = document.createElement("div");
-        loopButton.classList.add("control_buttons");
-        loopButton.title = "Loop";
-        loopButton.innerHTML = getLoopSvg(ICON_SIZE);
+        const loopButton = getSeqUIButton("Loop this",
+            getLoopSvg(ICON_SIZE))
         const toggleLoop = () => {
             if(this.seq.loop)
             {
@@ -190,11 +217,10 @@ export class SequencerUI{
         }
         loopButton.onclick = toggleLoop;
 
+
         // show text button
-        const textButton = document.createElement("div");
-        textButton.classList.add("control_buttons");
-        textButton.title = "Show lyrics";
-        textButton.innerHTML = getTextSvg(ICON_SIZE);
+        const textButton = getSeqUIButton("Show lyrics",
+            getTextSvg(ICON_SIZE));
         textButton.firstElementChild.setAttribute("fill", ICON_DISABLED); // defaults to disabled
         const toggleLyrics = () => {
             this.lyricsElement.mainDiv.classList.toggle("lyrics_show");
@@ -225,11 +251,14 @@ export class SequencerUI{
                     break;
             }
         })
-        controlsDiv.appendChild(playPauseButton);
-        controlsDiv.appendChild(loopButton);
-        controlsDiv.appendChild(textButton);
 
         // add everything
+        controlsDiv.appendChild(previousSongButton); // |<
+        controlsDiv.appendChild(loopButton);         // ()
+        controlsDiv.appendChild(playPauseButton);    // ||
+        controlsDiv.appendChild(textButton);         // ==
+        controlsDiv.appendChild(nextSongButton);     // >|
+
         this.controls.appendChild(progressBarBg);
         this.controls.appendChild(this.progressBar);
         this.controls.appendChild(this.progressTime);
@@ -238,28 +267,40 @@ export class SequencerUI{
         // add number and arrow controls
         document.addEventListener("keydown", e => {
 
-            if(e.key.toLowerCase() === "arrowleft")
-            {
-                e.preventDefault();
-                this.seq.currentTime -= 5;
-                playPauseButton.innerHTML = getPauseSvg(ICON_SIZE);
-            }
-            else if(e.key.toLowerCase() === "arrowright")
+            switch (e.key.toLowerCase())
             {
-                e.preventDefault();
-                this.seq.currentTime += 5;
-                playPauseButton.innerHTML = getPauseSvg(ICON_SIZE);
-            }
+                case "arrowleft":
+                    e.preventDefault();
+                    this.seq.currentTime -= 5;
+                    playPauseButton.innerHTML = getPauseSvg(ICON_SIZE);
+                    break;
 
-            if(!isNaN(parseFloat(e.key)))
-            {
-                e.preventDefault();
-                const num = parseInt(e.key);
-                if(0 <= num && num <= 9)
-                {
-                    this.seq.currentTime = this.seq.duration * (num / 10);
+                case "arrowright":
+                    e.preventDefault();
+                    this.seq.currentTime += 5;
                     playPauseButton.innerHTML = getPauseSvg(ICON_SIZE);
-                }
+                    break;
+
+                case "[":
+                    this.seq.previousSong();
+                    break;
+
+                case "]":
+                    this.seq.nextSong();
+                    break;
+
+                default:
+                    if(!isNaN(parseFloat(e.key)))
+                    {
+                        e.preventDefault();
+                        const num = parseInt(e.key);
+                        if(0 <= num && num <= 9)
+                        {
+                            this.seq.currentTime = this.seq.duration * (num / 10);
+                            playPauseButton.innerHTML = getPauseSvg(ICON_SIZE);
+                        }
+                    }
+                    break;
             }
         })
     }
@@ -270,6 +311,11 @@ export class SequencerUI{
             const time = formatTime(this.seq.currentTime);
             const total = formatTime(this.seq.duration);
             this.progressTime.innerText = `${time.time} / ${total.time}`;
+            if(this.seq.songIndex !== this.titleIndex)
+            {
+                document.getElementById("title").innerText = this.titles[this.seq.songIndex];
+                this.titleIndex = this.seq.songIndex;
+            }
         }, 100);
     }
 }
\ No newline at end of file
diff --git a/src/website/ui/sequencer_ui/sequi_button.js b/src/website/ui/sequencer_ui/sequi_button.js
new file mode 100644
index 00000000..9e86c0d6
--- /dev/null
+++ b/src/website/ui/sequencer_ui/sequi_button.js
@@ -0,0 +1,13 @@
+/**
+ * @param title {string}
+ * @param html {string} use carefully!
+ * @returns {HTMLDivElement}
+ */
+export function getSeqUIButton(title, html)
+{
+    const button = document.createElement("div");
+    button.classList.add("control_buttons");
+    button.title = title;
+    button.innerHTML = html;
+    return button;
+}
\ No newline at end of file
diff --git a/src/website/ui/synthetizer_ui.js b/src/website/ui/synthesizer_ui/synthetizer_ui.js
similarity index 97%
rename from src/website/ui/synthetizer_ui.js
rename to src/website/ui/synthesizer_ui/synthetizer_ui.js
index fb5afd81..3125b4f5 100644
--- a/src/website/ui/synthetizer_ui.js
+++ b/src/website/ui/synthesizer_ui/synthetizer_ui.js
@@ -1,10 +1,10 @@
-import { DEFAULT_GAIN, Synthetizer } from '../../spessasynth_lib/synthetizer/synthetizer.js'
-import {MidiChannel} from "../../spessasynth_lib/synthetizer/buffer_voice/midi_channel.js";
-import { getLoopSvg } from './icons.js';
-import { ShiftableByteArray } from '../../spessasynth_lib/utils/shiftable_array.js';
+import { DEFAULT_GAIN, Synthetizer } from '../../../spessasynth_lib/synthetizer/synthetizer.js'
+import {MidiChannel} from "../../../spessasynth_lib/synthetizer/buffer_voice/midi_channel.js";
+import { getLoopSvg } from '../icons.js';
+import { ShiftableByteArray } from '../../../spessasynth_lib/utils/shiftable_array.js';
 import { Meter } from './synthui_meter.js'
-import { midiPatchNames } from '../../spessasynth_lib/utils/other.js'
-import { midiControllers } from '../../spessasynth_lib/midi_parser/midi_message.js'
+import { midiPatchNames } from '../../../spessasynth_lib/utils/other.js'
+import { midiControllers } from '../../../spessasynth_lib/midi_parser/midi_message.js'
 
 const MAX_VOICE_METER = 400;
 export class SynthetizerUI
diff --git a/src/website/ui/synthui_meter.js b/src/website/ui/synthesizer_ui/synthui_meter.js
similarity index 100%
rename from src/website/ui/synthui_meter.js
rename to src/website/ui/synthesizer_ui/synthui_meter.js