@coderline/alphatab 1.6.0-alpha.1415 → 1.6.0-alpha.1418

package/dist/alphaTab.core.mjs

@@ -1,5 +1,5 @@
 /*!
- * alphaTab v1.6.0-alpha.1415 (develop, build 1415)
+ * alphaTab v1.6.0-alpha.1418 (develop, build 1418)
  *
  * Copyright © 2025, Daniel Kuschny and Contributors, All rights reserved.
  *
@@ -1413,7 +1413,7 @@ class SyncPointData {
         this.barOccurence = 0;
         /**
          * The modified tempo at which the cursor should move (aka. the tempo played within the external audio track).
-         * This information is used together with the {@link originalTempo} to calculate how much faster/slower the
+         * This information is used together with normal tempo changes to calculate how much faster/slower the
          * cursor playback is performed to align with the audio track.
          */
         this.modifiedTempo = 0;
@@ -29070,7 +29070,7 @@ class Font {
         }
         switch (typeof v) {
             case 'undefined':
-                return null;
+                return undefined;
             case 'object': {
                 const m = v;
                 const families = m.get('families');
@@ -29150,10 +29150,13 @@ class Font {
                 return Font.withFamilyList(families, fontSize, fontStyle, fontWeight);
             }
             default:
-                return null;
+                return undefined;
         }
     }
     static toJson(font) {
+        if (!font) {
+            return undefined;
+        }
         const o = new Map();
         o.set('families', font.families);
         o.set('size', font.size);
@@ -30160,6 +30163,14 @@ class CoreSettingsSerializer {
         /*@target web*/
         o.set("fontdirectory", obj.fontDirectory);
         /*@target web*/
+        if (obj.smuflFontSources !== null) {
+            const m = new Map();
+            o.set("smuflfontsources", m);
+            for (const [k, v] of obj.smuflFontSources) {
+                m.set(k.toString(), v);
+            }
+        }
+        /*@target web*/
         o.set("file", obj.file);
         /*@target web*/
         o.set("tex", obj.tex);
@@ -30183,6 +30194,13 @@ class CoreSettingsSerializer {
                 obj.fontDirectory = v;
                 return true;
             /*@target web*/
+            case "smuflfontsources":
+                obj.smuflFontSources = new Map();
+                JsonHelper.forEach(v, (v, k) => {
+                    obj.smuflFontSources.set(JsonHelper.parseEnum(k, FontFileFormat), v);
+                });
+                return true;
+            /*@target web*/
             case "file":
                 obj.file = v;
                 return true;
@@ -30226,6 +30244,7 @@ class RenderingResourcesSerializer {
             return null;
         }
         const o = new Map();
+        o.set("smuflfont", Font.toJson(obj.smuflFont));
         o.set("copyrightfont", Font.toJson(obj.copyrightFont));
         o.set("titlefont", Font.toJson(obj.titleFont));
         o.set("subtitlefont", Font.toJson(obj.subTitleFont));
@@ -30252,6 +30271,9 @@ class RenderingResourcesSerializer {
     }
     static setProperty(obj, property, v) {
         switch (property) {
+            case "smuflfont":
+                obj.smuflFont = Font.fromJson(v);
+                return true;
             case "copyrightfont":
                 obj.copyrightFont = Font.fromJson(v);
                 return true;
@@ -34229,15 +34251,6 @@ class Html5Canvas {
         this._color = new Color(0, 0, 0, 0xff);
         this._font = new Font('Arial', 10, FontStyle.Plain);
         this._lineWidth = 0;
-        const fontElement = document.createElement('span');
-        fontElement.classList.add('at');
-        document.body.appendChild(fontElement);
-        const style = window.getComputedStyle(fontElement);
-        let family = style.fontFamily;
-        if (family.startsWith('"') || family.startsWith("'")) {
-            family = family.substr(1, family.length - 2);
-        }
-        this._musicFont = new Font(family, Number.parseFloat(style.fontSize), FontStyle.Plain);
         this._measureCanvas = document.createElement('canvas');
         this._measureCanvas.width = 10;
         this._measureCanvas.height = 10;
@@ -34252,6 +34265,7 @@ class Html5Canvas {
         return null;
     }
     beginRender(width, height) {
+        this._musicFont = this.settings.display.resources.smuflFont;
         const scale = this.settings.display.scale;
         this._canvas = document.createElement('canvas');
         this._canvas.width = (width * Environment.HighDpiFactor) | 0;
@@ -38709,7 +38723,11 @@ class SelectionInfo {
  */
 class AlphaTabApiBase {
     /**
-     * The actual player mode which is currently active (e.g. allows determining whether a backing track or the synthesizer is active).
+     * The actual player mode which is currently active.
+     * @remarks
+     * Allows determining whether a backing track or the synthesizer is active in case automatic detection is enabled.
+     * @category Properties - Player
+     * @since 1.6.0
      */
     get actualPlayerMode() {
         return this._actualPlayerMode;
@@ -43839,10 +43857,6 @@ class BrowserUiFacade {
         return this.areAllFontsLoaded();
     }
     areAllFontsLoaded() {
-        Environment.bravuraFontChecker.checkForFontAvailability();
-        if (!Environment.bravuraFontChecker.isFontLoaded) {
-            return false;
-        }
         let isAnyNotLoaded = false;
         for (const checker of this._fontCheckers.values()) {
             if (!checker.isFontLoaded) {
@@ -43879,7 +43893,6 @@ class BrowserUiFacade {
         rootElement.classList.add('alphaTab');
         this.rootContainer = new HtmlElementContainer(rootElement);
         this.areWorkersSupported = 'Worker' in window;
-        Environment.bravuraFontChecker.fontLoaded.on(this.onFontLoaded.bind(this));
         this._intersectionObserver = new IntersectionObserver(this.onElementVisibilityChanged.bind(this), {
             threshold: [0, 0.01, 1]
         });
@@ -43947,7 +43960,7 @@ class BrowserUiFacade {
             this._contents = element.element.innerHTML;
             element.element.innerHTML = '';
         }
-        this.createStyleElement(settings);
+        this.createStyleElements(settings);
         this._file = settings.core.file;
     }
     setupFontCheckers(settings) {
@@ -43973,10 +43986,15 @@ class BrowserUiFacade {
     }
     destroy() {
         this.rootContainer.element.innerHTML = '';
+        const webFont = this._webFont;
+        webFont.usages--;
+        if (webFont.usages <= 0) {
+            webFont.element.remove();
+        }
     }
     createCanvasElement() {
         const canvasElement = document.createElement('div');
-        canvasElement.className = 'at-surface';
+        canvasElement.classList.add('at-surface', `at${this._webFont.fontSuffix}`);
         canvasElement.style.fontSize = '0';
         canvasElement.style.overflow = 'hidden';
         canvasElement.style.lineHeight = '0';
@@ -44074,9 +44092,132 @@ class BrowserUiFacade {
             initialRender();
         }
     }
-    createStyleElement(settings) {
-        const elementDocument = this._api.container.element.ownerDocument;
-        Environment.createStyleElement(elementDocument, settings.core.fontDirectory);
+    createStyleElements(settings) {
+        const root = this._api.container.element.ownerDocument;
+        BrowserUiFacade.createSharedStyleElement(root);
+        // SmuFl Font Specific style
+        const smuflFontSources = settings.core.smuflFontSources ?? CoreSettings.buildDefaultSmuflFontSources(settings.core.fontDirectory);
+        // create a simple unique hash for the font source definition
+        // as data urls might be used we don't want to just use the plain strings.
+        const hash = BrowserUiFacade.cyrb53(smuflFontSources.values());
+        // reuse existing style if available
+        const registeredWebFonts = BrowserUiFacade._registeredWebFonts;
+        if (registeredWebFonts.has(hash)) {
+            const webFont = registeredWebFonts.get(hash);
+            webFont.usages++;
+            webFont.checker.fontLoaded.on(this.onFontLoaded.bind(this));
+            this._webFont = webFont;
+            return;
+        }
+        const fontSuffix = registeredWebFonts.size === 0 ? '' : String(registeredWebFonts.size);
+        const familyName = `alphaTab${fontSuffix}`;
+        const src = Array.from(smuflFontSources.entries())
+            .map(e => `url(${JSON.stringify(e[1])}) format('${BrowserUiFacade.cssFormat(e[0])}')`)
+            .join(',');
+        const css = `
+            @font-face {
+                font-display: block;
+                font-family: '${familyName}';
+                src: ${src};
+                font-weight: normal;
+                font-style: normal;
+            }
+            .at-surface.at${fontSuffix} .at {
+                font-family: '${familyName}';
+                speak: none;
+                font-style: normal;
+                font-weight: normal;
+                font-variant: normal;
+                text-transform: none;
+                line-height: 1;
+                line-height: 1;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                font-size: ${Environment.MusicFontSize}px;
+                overflow: visible !important;
+            }`;
+        const styleElement = root.createElement('style');
+        styleElement.id = `alphaTabStyle${fontSuffix}`;
+        styleElement.innerHTML = css;
+        root.getElementsByTagName('head').item(0).appendChild(styleElement);
+        const checker = new FontLoadingChecker([familyName]);
+        checker.fontLoaded.on(this.onFontLoaded.bind(this));
+        this._fontCheckers.set(familyName, checker);
+        checker.checkForFontAvailability();
+        settings.display.resources.smuflFont = new Font(familyName, Environment.MusicFontSize, FontStyle.Plain, FontWeight.Regular);
+        const webFont = {
+            element: styleElement,
+            fontSuffix,
+            usages: 1,
+            checker
+        };
+        registeredWebFonts.set(hash, webFont);
+        this._webFont = webFont;
+    }
+    static cssFormat(format) {
+        switch (format) {
+            case FontFileFormat.EmbeddedOpenType:
+                return 'embedded-opentype';
+            case FontFileFormat.Woff:
+                return 'woff';
+            case FontFileFormat.Woff2:
+                return 'woff2';
+            case FontFileFormat.OpenType:
+                return 'opentype';
+            case FontFileFormat.TrueType:
+                return 'truetype';
+            case FontFileFormat.Svg:
+                return 'svg';
+        }
+    }
+    /**
+     * cyrb53 (c) 2018 bryc (github.com/bryc)
+     * License: Public domain (or MIT if needed). Attribution appreciated.
+     * A fast and simple 53-bit string hash function with decent collision resistance.
+     * Largely inspired by MurmurHash2/3, but with a focus on speed/simplicity
+     * @param str
+     * @param seed
+     * @returns
+     */
+    static cyrb53(strings, seed = 0) {
+        let h1 = 0xdeadbeef ^ seed;
+        let h2 = 0x41c6ce57 ^ seed;
+        for (const str of strings) {
+            for (let i = 0; i < str.length; i++) {
+                const ch = str.charCodeAt(i);
+                h1 = Math.imul(h1 ^ ch, 2654435761);
+                h2 = Math.imul(h2 ^ ch, 1597334677);
+            }
+        }
+        h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
+        h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+        h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
+        h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+        return 4294967296 * (2097151 & h2) + (h1 >>> 0);
+    }
+    /**
+     * Creates the default CSS styles used across all alphaTab instances.
+     * @target web
+     * @internal
+     */
+    static createSharedStyleElement(root) {
+        let styleElement = root.getElementById('alphaTabStyle');
+        if (!styleElement) {
+            styleElement = document.createElement('style');
+            styleElement.id = 'alphaTabStyleShared';
+            const css = `
+                .at-surface * {
+                    cursor: default;
+                    vertical-align: top;
+                    overflow: visible;
+                }
+                .at-surface-svg text {
+                    dominant-baseline: central;
+                    white-space:pre;
+                }`;
+            styleElement.innerHTML = css;
+            document.getElementsByTagName('head').item(0).appendChild(styleElement);
+        }
     }
     parseTracks(tracksData) {
         if (!tracksData) {
@@ -44458,6 +44599,7 @@ class BrowserUiFacade {
         return new BackingTrackPlayer(new AudioElementBackingTrackSynthOutput(), this._api.settings.player.bufferTimeInMilliseconds);
     }
 }
+BrowserUiFacade._registeredWebFonts = new Map();
 
 /**
  * Represents the progress of any data being loaded.
@@ -60715,9 +60857,9 @@ class VersionInfo {
         print(`build date: ${VersionInfo.date}`);
     }
 }
-VersionInfo.version = '1.6.0-alpha.1415';
-VersionInfo.date = '2025-05-19T16:08:22.342Z';
-VersionInfo.commit = '459db69f8896a2ea8822ce5d49dcc824edd36521';
+VersionInfo.version = '1.6.0-alpha.1418';
+VersionInfo.date = '2025-05-21T02:08:19.492Z';
+VersionInfo.commit = '1f6342282295a9544ebc36ddd38d73d220d2caab';
 
 /**
  * A factory for custom layout engines.
@@ -60749,59 +60891,6 @@ class RenderEngineFactory {
  * @partial
  */
 class Environment {
-    /**
-     * @target web
-     * @internal
-     */
-    static createStyleElement(elementDocument, fontDirectory) {
-        let styleElement = elementDocument.getElementById('alphaTabStyle');
-        if (!styleElement) {
-            if (!fontDirectory) {
-                Logger.error('AlphaTab', 'Font directory could not be detected, cannot create style element');
-                return;
-            }
-            styleElement = elementDocument.createElement('style');
-            styleElement.id = 'alphaTabStyle';
-            const css = `
-            @font-face {
-                font-display: block;
-                font-family: 'alphaTab';
-                 src: url('${fontDirectory}Bravura.eot');
-                 src: url('${fontDirectory}Bravura.eot?#iefix') format('embedded-opentype')
-                      , url('${fontDirectory}Bravura.woff') format('woff')
-                      , url('${fontDirectory}Bravura.otf') format('opentype')
-                      , url('${fontDirectory}Bravura.svg#Bravura') format('svg');
-                 font-weight: normal;
-                 font-style: normal;
-            }
-            .at-surface * {
-                cursor: default;
-                vertical-align: top;
-                overflow: visible;
-            }
-            .at-surface-svg text {
-                dominant-baseline: central;
-                white-space:pre;
-            }
-            .at {
-                 font-family: 'alphaTab';
-                 speak: none;
-                 font-style: normal;
-                 font-weight: normal;
-                 font-variant: normal;
-                 text-transform: none;
-                 line-height: 1;
-                 line-height: 1;
-                 -webkit-font-smoothing: antialiased;
-                 -moz-osx-font-smoothing: grayscale;
-                 font-size: ${Environment.MusicFontSize}px;
-                 overflow: visible !important;
-            }`;
-            styleElement.innerHTML = css;
-            elementDocument.getElementsByTagName('head').item(0).appendChild(styleElement);
-            Environment.bravuraFontChecker.checkForFontAvailability();
-        }
-    }
     /**
      * @target web
      * @internal
@@ -60877,7 +60966,9 @@ class Environment {
         catch (e) {
         }
         // normal browser include as <script>
-        if ('document' in Environment.globalThis && document.currentScript) {
+        if ('document' in Environment.globalThis &&
+            document.currentScript &&
+            document.currentScript instanceof HTMLScriptElement) {
             return document.currentScript.src;
         }
         return null;
@@ -61355,11 +61446,6 @@ Environment.scriptFile = Environment.detectScriptFile();
  * @target web
  */
 Environment.fontDirectory = Environment.detectFontDirectory();
-/**
- * @target web
- * @internal
- */
-Environment.bravuraFontChecker = new FontLoadingChecker(['alphaTab']);
 Environment.renderEngines = Environment.createDefaultRenderEngines();
 /**
  * @internal
@@ -61370,12 +61456,58 @@ Environment.layoutEngines = Environment.createDefaultLayoutEngines();
  */
 Environment.staveProfiles = Environment.createDefaultStaveProfiles();
 
+/**
+ * Lists the known file formats for font files.
+ * @target web
+ */
+var FontFileFormat;
+(function (FontFileFormat) {
+    /**
+     * .eot
+     */
+    FontFileFormat[FontFileFormat["EmbeddedOpenType"] = 0] = "EmbeddedOpenType";
+    /**
+     * .woff
+     */
+    FontFileFormat[FontFileFormat["Woff"] = 1] = "Woff";
+    /**
+     * .woff2
+     */
+    FontFileFormat[FontFileFormat["Woff2"] = 2] = "Woff2";
+    /**
+     * .otf
+     */
+    FontFileFormat[FontFileFormat["OpenType"] = 3] = "OpenType";
+    /**
+     * .ttf
+     */
+    FontFileFormat[FontFileFormat["TrueType"] = 4] = "TrueType";
+    /**
+     * .svg
+     */
+    FontFileFormat[FontFileFormat["Svg"] = 5] = "Svg";
+})(FontFileFormat || (FontFileFormat = {}));
 /**
  * All main settings of alphaTab controlling rather general aspects of its behavior.
  * @json
  * @json_declaration
  */
 class CoreSettings {
+    /**
+     * Builds the default SMuFL font sources for the usage with alphaTab in cases
+     * where no custom {@link smuflFontSources} are provided.
+     * @param fontDirectory The {@link fontDirectory} configured.
+     * @target web
+     */
+    static buildDefaultSmuflFontSources(fontDirectory) {
+        const map = new Map();
+        // WOFF, WOFF2 and OTF should cover all our platform needs
+        const prefix = fontDirectory ?? '';
+        map.set(FontFileFormat.Woff2, `${prefix}Bravura.woff2`);
+        map.set(FontFileFormat.Woff, `${prefix}Bravura.woff`);
+        map.set(FontFileFormat.OpenType, `${prefix}Bravura.otf`);
+        return map;
+    }
     /**
      * @target web
      */
@@ -61401,12 +61533,27 @@ class CoreSettings {
          * where the Web Font files of [Bravura](https://github.com/steinbergmedia/bravura) are. Normally alphaTab expects
          * them to be in a `font` subfolder beside the script file. If this is not the case, this setting must be used to configure the path.
          * Alternatively also a global variable `ALPHATAB_FONT` can be set on the page before initializing alphaTab.
+         *
+         * Use {@link smuflFontSources} for more flexible font configuration.
          * @defaultValue `"${AlphaTabScriptFolder}/font/"`
          * @category Core - JavaScript Specific
          * @target web
          * @since 0.9.6
          */
         this.fontDirectory = null;
+        /**
+         * Defines the URLs from which to load the SMuFL compliant font files.
+         * @remarks
+         * These sources will be used to load and register the webfonts on the page so
+         * they are available for rendering the music sheet. The sources can be set to any
+         * CSS compatible URL which can be passed into `url()`.
+         * See https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#url
+         * @defaultValue Bravura files located at {@link fontDirectory} .
+         * @category Core - JavaScript Specific
+         * @target web
+         * @since 1.6.0
+         */
+        this.smuflFontSources = null;
         /**
          * The full URL to the input file to be loaded.
          * @remarks
@@ -65031,9 +65178,11 @@ const _barrel = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
     ActiveBeatsChangedEventArgs,
     AlphaSynth,
     AlphaSynthAudioWorkletOutput,
+    AlphaSynthBase,
     AlphaSynthScriptProcessorOutput,
     AlphaSynthWebAudioOutputBase,
     AlphaSynthWebWorkerApi,
+    BackingTrackSyncPoint,
     CircularSampleBuffer,
     MidiEventsPlayedEventArgs,
     PlaybackRange,
@@ -65047,4 +65196,4 @@ const _jsonbarrel = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.definePropert
     __proto__: null
 }, Symbol.toStringTag, { value: 'Module' }));
 
-export { AlphaTabApi, AlphaTabApiBase, AlphaTabError, AlphaTabErrorType, ConsoleLogger, CoreSettings, DisplaySettings, Environment, FileLoadError, FingeringMode, FormatError, ImporterSettings, LayoutMode, LogLevel, Logger, NotationElement, NotationMode, NotationSettings, PlayerMode, PlayerOutputMode, PlayerSettings, ProgressEventArgs, RenderEngineFactory, RenderingResources, ResizeEventArgs, ScrollMode, Settings, SlidePlaybackSettings, StaveProfile, SystemsLayoutMode, TabRhythmMode, VibratoPlaybackSettings, WebPlatform, _barrel$5 as exporter, _barrel$7 as importer, _barrel$6 as io, _jsonbarrel as json, VersionInfo as meta, _barrel$4 as midi, _barrel$3 as model, _barrel$1 as platform, _barrel$2 as rendering, _barrel as synth };
+export { AlphaTabApi, AlphaTabApiBase, AlphaTabError, AlphaTabErrorType, ConsoleLogger, CoreSettings, DisplaySettings, Environment, FileLoadError, FingeringMode, FontFileFormat, FormatError, ImporterSettings, LayoutMode, LogLevel, Logger, NotationElement, NotationMode, NotationSettings, PlayerMode, PlayerOutputMode, PlayerSettings, ProgressEventArgs, RenderEngineFactory, RenderingResources, ResizeEventArgs, ScrollMode, Settings, SlidePlaybackSettings, StaveProfile, SystemsLayoutMode, TabRhythmMode, VibratoPlaybackSettings, WebPlatform, _barrel$5 as exporter, _barrel$7 as importer, _barrel$6 as io, _jsonbarrel as json, VersionInfo as meta, _barrel$4 as midi, _barrel$3 as model, _barrel$1 as platform, _barrel$2 as rendering, _barrel as synth };