Merge pull request #87 from spessasus/ass-support

Add support for ASS Subtitles

README.md

@@ -152,7 +152,8 @@ npm install --save spessasynth_lib
 - **Visualization of the played sequence:** with cool effects like visual pitch bend and note-on effects!
 - **Playable keyboard with various sizes:** mobile friendly!
 - **Integrated controller for the synthesizer with numerous options:** Edit instruments, controllers, and more!
-- **Lyrics support:** Karaoke!
+- **MIDI Lyrics support:** Karaoke!
+- **ASS Subtitle support:** Karaoke but fancy!
 - **Music player mode:** with support for album covers in .rmi files!
 - Mobile-friendly UI (_synthesizer performance not optimized for mobile... don't tell anyone!_)
 - **Multiple language support:** 

index.html

@@ -132,6 +132,7 @@ <h1 id='title' translate-path='locale.demoTitleMessage'>SpessaSynth: Online Demo
         <div id='sequencer_controls'></div>
     </div>
     <div class='notification_field'></div>
+    <div class='ass_renderer_field'></div>
 </div>
 
 <!-- here the magic happens ;) -->

package.json

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

src/spessasynth_lib/midi_parser/basic_midi.js

@@ -289,7 +289,7 @@ export class BasicMIDI
 /**
  * Converts ticks to time in seconds
  * @param ticks {number} time in MIDI ticks
- * @param mid {BasicMIDI} the MIDI
+ * @param mid {BasicMIDI|MidiData} the MIDI
  * @returns {number} time in seconds
  */
 export function MIDIticksToSeconds(ticks, mid)

src/spessasynth_lib/soundfont/basic_soundfont/modulator.js

@@ -187,7 +187,7 @@ export function getModSourceEnum(curveType, polarity, direction, isCC, index)
     return (curveType << 10) | (polarity << 9) | (direction << 8) | (isCC << 7) | index;
 }
 
-export const defaultModulators = [
+const soundFontModulators = [
     // vel to attenuation
     new Modulator({
         srcEnum: getModSourceEnum(
@@ -250,8 +250,10 @@ export const defaultModulators = [
     new Modulator({ srcEnum: 0x00DB, dest: generatorTypes.reverbEffectsSend, amt: 200, secSrcEnum: 0x0, transform: 0 }),
 
     // chorus effects to send
-    new Modulator({ srcEnum: 0x00DD, dest: generatorTypes.chorusEffectsSend, amt: 200, secSrcEnum: 0x0, transform: 0 }),
-
+    new Modulator({ srcEnum: 0x00DD, dest: generatorTypes.chorusEffectsSend, amt: 200, secSrcEnum: 0x0, transform: 0 })
+];
+
+const customModulators = [
     // custom modulators heck yeah
     // poly pressure to vibrato
     new Modulator({
@@ -321,4 +323,6 @@ export const defaultModulators = [
         secSrcEnum: 0x0, // no controller
         transform: 0
     })
-];
+];
+
+export const defaultModulators = soundFontModulators.concat(customModulators);

src/website/css/style.css

@@ -160,6 +160,35 @@ button {
     transform: translateY(-100%);
 }
 
+.ass_renderer_field {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    display: block;
+    margin: 0;
+    overflow: hidden;
+    z-index: calc(var(--top-index) + 5);
+    pointer-events: none;
+    position: fixed;
+}
+
+.ass_renderer_element {
+    margin: 0;
+    position: absolute;
+    pointer-events: none;
+    padding: 0;
+    z-index: 9999;
+    white-space: break-spaces;
+    width: max-content;
+    max-width: 100%;
+    background: rgba(0, 0, 0, 0.8);
+}
+
+.ass_renderer_element span {
+    font-family: inherit;
+    font-size: inherit;
+}
+
 @keyframes spin {
     0% {
         transform: rotate(0deg);

src/website/js/locale/locale_files/locale_en/sequencer_controller.js

@@ -9,6 +9,11 @@ export const sequencerControllerLocale = {
         noLyrics: "No lyrics available...",
         otherText: {
             title: "Other text"
+        },
+
+        subtitles: {
+            title: "Upload ASS subtitles",
+            description: "Upload your own subtitles in the (.ass) format"
         }
     }
 };

src/website/js/locale/locale_files/locale_pl/sequencer_controller.js

@@ -9,6 +9,11 @@ export const sequencerControllerLocale = {
         noLyrics: "Brak dostępnego tekstu...",
         otherText: {
             title: "Inny tekst"
+        },
+
+        subtitles: {
+            title: "Wgraj napisy ASS",
+            description: "Wgraj swoje własne napisy w formacie ASS (.ass)"
         }
     }
 };

src/website/js/manager/manager.js

@@ -269,7 +269,12 @@ class Manager
         this.playerUI = new MusicModeUI(document.getElementById("player_info"), this.localeManager);
 
         // create an UI for sequencer
-        this.seqUI = new SequencerUI(document.getElementById("sequencer_controls"), this.localeManager, this.playerUI);
+        this.seqUI = new SequencerUI(
+            document.getElementById("sequencer_controls"),
+            this.localeManager,
+            this.playerUI,
+            this.renderer
+        );
 
         // set up settings UI
         this.settingsUI = new SpessaSynthSettings(

src/website/js/sequencer_ui/lyrics.js

@@ -1,5 +1,6 @@
 import { supportedEncodings } from "../utils/encodings.js";
 import { messageTypes } from "../../../spessasynth_lib/midi_parser/midi_message.js";
+import { AssManager } from "../utils/ass_manager/ass_manager.js";
 
 const ACTUAL_FONT_SIZE = parseFloat(getComputedStyle(document.body).fontSize);
 
@@ -79,11 +80,44 @@ export function createLyrics()
     otherTextWrapper.appendChild(otherText);
     mainLyricsDiv.appendChild(otherTextWrapper);
 
+    // subtitle upload
+    this.subtitleManager = new AssManager(
+        this.seq,
+        document.getElementsByClassName("ass_renderer_field")[0],
+        this.renderer
+    );
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".ass";
+    input.id = "subtitle_upload";
+    input.classList.add("hidden");
+    mainLyricsDiv.appendChild(input);
+    input.onchange = async () =>
+    {
+        if (input.files[0] === undefined)
+        {
+            return;
+        }
+        const file = input.files[0];
+        this.subtitleManager.loadASSSubtitles(await file.text());
+        this.subtitleManager.setVisibility(true);
+        this.toggleLyrics();
+    };
+
+    const subtitleUpload = document.createElement("label");
+    subtitleUpload.htmlFor = "subtitle_upload";
+    subtitleUpload.classList.add("general_button");
+    this.locale.bindObjectProperty(subtitleUpload, "textContent", "locale.sequencerController.lyrics.subtitles.title");
+    this.locale.bindObjectProperty(subtitleUpload, "title", "locale.sequencerController.lyrics.subtitles.description");
+    mainLyricsDiv.appendChild(subtitleUpload);
+
+
     this.lyricsElement.text = {
         highlight: currentLyrics,
         gray: allLyrics,
         main: text,
-        other: otherText
+        other: otherText,
+        subtitleButton: subtitleUpload
     };
     this.lyricsElement.mainDiv = mainLyricsDiv;
     this.lyricsElement.selector = encodingSelector;

src/website/js/sequencer_ui/sequencer_ui.js

@@ -31,8 +31,9 @@ class SequencerUI
      * @param element {HTMLElement} the element to create sequi in
      * @param locale {LocaleManager}
      * @param musicMode {MusicModeUI}
+     * @param renderer {Renderer}
      */
-    constructor(element, locale, musicMode)
+    constructor(element, locale, musicMode, renderer)
     {
         this.iconColor = ICON_COLOR;
         this.iconDisabledColor = ICON_DISABLED_COLOR;
@@ -58,6 +59,7 @@ class SequencerUI
         this.currentLyrics = new Uint8Array(0);
         this.currentLyricsString = "";
         this.musicModeUI = musicMode;
+        this.renderer = renderer;
     }
 
     toggleDarkMode()
@@ -393,6 +395,7 @@ class SequencerUI
                 (this.lyricsElement.mainDiv.classList.contains("lyrics_show") ? this.iconColor : this.iconDisabledColor)
             );
         };
+        this.toggleLyrics = toggleLyrics;
         textButton.onclick = toggleLyrics;
 
         // keyboard control