@coderline/alphatab 1.6.0-alpha.1416 → 1.6.0-alpha.1420

package/dist/alphaTab.js

@@ -1,5 +1,5 @@
 /*!
- * alphaTab v1.6.0-alpha.1416 (develop, build 1416)
+ * alphaTab v1.6.0-alpha.1420 (develop, build 1420)
  *
  * Copyright © 2025, Daniel Kuschny and Contributors, All rights reserved.
  *
@@ -14318,13 +14318,6 @@
      * @json_strict
      */
     class BackingTrack {
-        constructor() {
-            /**
-             * The number of milliseconds the audio should be shifted to align with the song.
-             * (e.g. negative values allow skipping potential silent parts at the start of the file and directly start with the first note).
-             */
-            this.padding = 0;
-        }
     }
 
     /**
@@ -14357,6 +14350,7 @@
         constructor() {
             this._hasAnacrusis = false;
             this._skipApplyLyrics = false;
+            this._backingTrackPadding = 0;
             this._doubleBars = new Set();
             this._keySignatures = new Map();
         }
@@ -14589,7 +14583,7 @@
                         assetId = c.innerText;
                         break;
                     case 'FramePadding':
-                        backingTrack.padding = GpifParser.parseIntSafe(c.innerText, 0) / GpifParser.SampleRate * 1000;
+                        this._backingTrackPadding = GpifParser.parseIntSafe(c.innerText, 0) / GpifParser.SampleRate * 1000;
                         break;
                 }
             }
@@ -16803,6 +16797,7 @@
                             masterBar.tempoAutomations.push(automation);
                             break;
                         case AutomationType.SyncPoint:
+                            automation.syncPointValue.millisecondOffset -= this._backingTrackPadding;
                             masterBar.addSyncPoint(automation);
                             break;
                     }
@@ -22291,17 +22286,6 @@
         }
     }
 
-    /**
-     * Rerpresents a point to sync the alphaTab time axis with an external backing track.
-     */
-    class BackingTrackSyncPoint {
-        constructor(tick, data) {
-            this.tick = 0;
-            this.tick = tick;
-            this.data = data;
-        }
-    }
-
     class MidiFileSequencerTempoChange {
         constructor(bpm, ticks, time) {
             this.bpm = bpm;
@@ -22309,10 +22293,12 @@
             this.time = time;
         }
     }
-    class BackingTrackSyncPointWithTime extends BackingTrackSyncPoint {
-        constructor(tick, data, time) {
-            super(tick, data);
-            this.time = time;
+    class BackingTrackSyncPointWithTime {
+        constructor(tick, time, modifiedTempo, millisecondOffset) {
+            this.alphaTabTick = tick;
+            this.alphaTabTime = time;
+            this.modifiedTempo = modifiedTempo;
+            this.millisecondOffset = millisecondOffset;
         }
     }
     class MidiSequencerState {
@@ -22418,7 +22404,7 @@
                 this._mainState.currentTempo = this._mainState.tempoChanges[0].bpm;
                 this._mainState.modifiedTempo =
                     this._mainState.syncPoints.length > 0
-                        ? this._mainState.syncPoints[0].data.modifiedTempo
+                        ? this._mainState.syncPoints[0].modifiedTempo
                         : this._mainState.currentTempo;
                 if (this.isPlayingMain) {
                     const metronomeVolume = this._synthesizer.metronomeVolume;
@@ -22590,25 +22576,52 @@
         mainUpdateSyncPoints(syncPoints) {
             const state = this._mainState;
             syncPoints.sort((a, b) => a.tick - b.tick); // just in case
-            state.syncPoints = new Array(syncPoints.length);
+            state.syncPoints = [];
             if (syncPoints.length >= 0) {
                 let bpm = 120;
                 let absTick = 0;
                 let absTime = 0.0;
-                let previousTick = 0;
                 let tempoChangeIndex = 0;
                 for (let i = 0; i < syncPoints.length; i++) {
                     const p = syncPoints[i];
-                    const deltaTick = p.tick - previousTick;
-                    absTick += deltaTick;
-                    absTime += deltaTick * (60000.0 / (bpm * state.division));
-                    state.syncPoints[i] = new BackingTrackSyncPointWithTime(p.tick, p.data, absTime);
-                    previousTick = p.tick;
+                    let deltaTick = 0;
+                    // remember state from previous sync point (or start). to handle linear interpolation
+                    let previousModifiedTempo;
+                    let previousMillisecondOffset;
+                    let previousTick;
+                    if (i === 0) {
+                        previousModifiedTempo = bpm;
+                        previousMillisecondOffset = 0;
+                        previousTick = 0;
+                    }
+                    else {
+                        const previousSyncPoint = syncPoints[i - 1];
+                        previousModifiedTempo = previousSyncPoint.data.modifiedTempo;
+                        previousMillisecondOffset = previousSyncPoint.data.millisecondOffset;
+                        previousTick = previousSyncPoint.tick;
+                    }
+                    // process time until sync point
+                    // here it gets a bit tricky. if we have tempo changes on the synthesizer time axis (inbetween two sync points)
+                    // we have to calculate a interpolated sync point on the alphaTab time axis.
+                    // otherwise the linear interpolation later in the lookup will fail.
+                    // goal is to have always a linear increase between two points, no matter if the time axis is sliced by tempo changes or sync points
                     while (tempoChangeIndex < state.tempoChanges.length &&
-                        state.tempoChanges[tempoChangeIndex].ticks <= absTick) {
+                        state.tempoChanges[tempoChangeIndex].ticks <= p.tick) {
+                        deltaTick = state.tempoChanges[tempoChangeIndex].ticks - absTick;
+                        if (deltaTick > 0) {
+                            absTick += deltaTick;
+                            absTime += deltaTick * (60000.0 / (bpm * state.division));
+                            const millisPerTick = (p.data.millisecondOffset - previousMillisecondOffset) / (p.tick - previousTick);
+                            const interpolatedMillisecondOffset = (absTick - previousTick) * millisPerTick + previousMillisecondOffset;
+                            state.syncPoints.push(new BackingTrackSyncPointWithTime(absTick, absTime, previousModifiedTempo, interpolatedMillisecondOffset));
+                        }
                         bpm = state.tempoChanges[tempoChangeIndex].bpm;
                         tempoChangeIndex++;
                     }
+                    deltaTick = p.tick - absTick;
+                    absTick += deltaTick;
+                    absTime += deltaTick * (60000.0 / (bpm * state.division));
+                    state.syncPoints.push(new BackingTrackSyncPointWithTime(p.tick, absTime, p.data.modifiedTempo, p.data.millisecondOffset));
                 }
             }
             state.syncPointIndex = 0;
@@ -22622,7 +22635,7 @@
             this.updateCurrentTempo(state, timePosition);
             const lastTempoChange = state.tempoChanges[state.tempoChangeIndex];
             const timeDiff = timePosition - lastTempoChange.time;
-            const ticks = ((timeDiff / (60000.0 / (lastTempoChange.bpm * state.division))) | 0);
+            const ticks = (timeDiff / (60000.0 / (lastTempoChange.bpm * state.division))) | 0;
             // we add 1 for possible rounding errors.(floating point issuses)
             return lastTempoChange.ticks + ticks + 1;
         }
@@ -22642,16 +22655,16 @@
             const syncPoints = state.syncPoints;
             if (syncPoints.length > 0) {
                 let syncPointIndex = Math.min(state.syncPointIndex, syncPoints.length - 1);
-                if (timePosition < syncPoints[syncPointIndex].data.millisecondOffset) {
+                if (timePosition < syncPoints[syncPointIndex].millisecondOffset) {
                     syncPointIndex = 0;
                 }
                 while (syncPointIndex + 1 < syncPoints.length &&
-                    syncPoints[syncPointIndex + 1].data.millisecondOffset <= timePosition) {
+                    syncPoints[syncPointIndex + 1].millisecondOffset <= timePosition) {
                     syncPointIndex++;
                 }
                 if (syncPointIndex !== state.syncPointIndex) {
                     state.syncPointIndex = syncPointIndex;
-                    state.modifiedTempo = syncPoints[syncPointIndex].data.modifiedTempo;
+                    state.modifiedTempo = syncPoints[syncPointIndex].modifiedTempo;
                 }
             }
             else {
@@ -22667,18 +22680,18 @@
             this.updateCurrentTempo(this._mainState, timePosition);
             const syncPointIndex = Math.min(mainState.syncPointIndex, syncPoints.length - 1);
             const currentSyncPoint = syncPoints[syncPointIndex];
-            const timeDiff = timePosition - currentSyncPoint.data.millisecondOffset;
+            const timeDiff = timePosition - currentSyncPoint.millisecondOffset;
             let alphaTabTimeDiff;
             if (syncPointIndex + 1 < syncPoints.length) {
                 const nextSyncPoint = syncPoints[syncPointIndex + 1];
-                const relativeTimeDiff = timeDiff / (nextSyncPoint.data.millisecondOffset - currentSyncPoint.data.millisecondOffset);
-                alphaTabTimeDiff = (nextSyncPoint.time - currentSyncPoint.time) * relativeTimeDiff;
+                const relativeTimeDiff = timeDiff / (nextSyncPoint.millisecondOffset - currentSyncPoint.millisecondOffset);
+                alphaTabTimeDiff = (nextSyncPoint.alphaTabTime - currentSyncPoint.alphaTabTime) * relativeTimeDiff;
             }
             else {
-                const relativeTimeDiff = timeDiff / (backingTrackLength - currentSyncPoint.data.millisecondOffset);
-                alphaTabTimeDiff = (mainState.endTime - currentSyncPoint.time) * relativeTimeDiff;
+                const relativeTimeDiff = timeDiff / (backingTrackLength - currentSyncPoint.millisecondOffset);
+                alphaTabTimeDiff = (mainState.endTime - currentSyncPoint.alphaTabTime) * relativeTimeDiff;
             }
-            return (currentSyncPoint.time + alphaTabTimeDiff) / this.playbackSpeed;
+            return (currentSyncPoint.alphaTabTime + alphaTabTimeDiff) / this.playbackSpeed;
         }
         mainTimePositionToBackingTrack(timePosition, backingTrackLength) {
             const mainState = this._mainState;
@@ -22688,25 +22701,27 @@
             }
             timePosition *= this.playbackSpeed;
             let syncPointIndex = Math.min(mainState.syncPointIndex, syncPoints.length - 1);
-            if (timePosition < syncPoints[syncPointIndex].time) {
+            if (timePosition < syncPoints[syncPointIndex].alphaTabTime) {
                 syncPointIndex = 0;
             }
-            while (syncPointIndex + 1 < syncPoints.length && syncPoints[syncPointIndex + 1].time <= timePosition) {
+            while (syncPointIndex + 1 < syncPoints.length && syncPoints[syncPointIndex + 1].alphaTabTime <= timePosition) {
                 syncPointIndex++;
             }
+            // NOTE: this logic heavily relies on the interpolation done in mainUpdateSyncPoints
+            // we ensure that we have a linear increase between two points
             const currentSyncPoint = syncPoints[syncPointIndex];
-            const alphaTabTimeDiff = timePosition - currentSyncPoint.time;
+            const alphaTabTimeDiff = timePosition - currentSyncPoint.alphaTabTime;
             let backingTrackPos;
             if (syncPointIndex + 1 < syncPoints.length) {
                 const nextSyncPoint = syncPoints[syncPointIndex + 1];
-                const relativeAlphaTabTimeDiff = alphaTabTimeDiff / (nextSyncPoint.time - currentSyncPoint.time);
-                const backingTrackDiff = nextSyncPoint.data.millisecondOffset - currentSyncPoint.data.millisecondOffset;
-                backingTrackPos = currentSyncPoint.data.millisecondOffset + backingTrackDiff * relativeAlphaTabTimeDiff;
+                const relativeAlphaTabTimeDiff = alphaTabTimeDiff / (nextSyncPoint.alphaTabTime - currentSyncPoint.alphaTabTime);
+                const backingTrackDiff = nextSyncPoint.millisecondOffset - currentSyncPoint.millisecondOffset;
+                backingTrackPos = currentSyncPoint.millisecondOffset + backingTrackDiff * relativeAlphaTabTimeDiff;
             }
             else {
-                const relativeAlphaTabTimeDiff = alphaTabTimeDiff / (mainState.endTime - currentSyncPoint.time);
-                const frameDiff = backingTrackLength - currentSyncPoint.data.millisecondOffset;
-                backingTrackPos = currentSyncPoint.data.millisecondOffset + frameDiff * relativeAlphaTabTimeDiff;
+                const relativeAlphaTabTimeDiff = alphaTabTimeDiff / (mainState.endTime - currentSyncPoint.alphaTabTime);
+                const frameDiff = backingTrackLength - currentSyncPoint.millisecondOffset;
+                backingTrackPos = currentSyncPoint.millisecondOffset + frameDiff * relativeAlphaTabTimeDiff;
             }
             return backingTrackPos;
         }
@@ -28588,7 +28603,9 @@
         hasSamplesForPercussion(key) {
             return this.synthesizer.hasSamplesForPercussion(key);
         }
-        loadBackingTrack(_score, _syncPoints) {
+        loadBackingTrack(_score) {
+        }
+        updateSyncPoints(_syncPoints) {
         }
     }
     /**
@@ -29076,7 +29093,7 @@
             }
             switch (typeof v) {
                 case 'undefined':
-                    return null;
+                    return undefined;
                 case 'object': {
                     const m = v;
                     const families = m.get('families');
@@ -29156,10 +29173,13 @@
                     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);
@@ -30166,6 +30186,14 @@
             /*@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);
@@ -30189,6 +30217,13 @@
                     obj.fontDirectory = v;
                     return true;
                 /*@target web*/
+                case "smuflfontsources":
+                    obj.smuflFontSources = new Map();
+                    JsonHelper.forEach(v, (v, k) => {
+                        obj.smuflFontSources.set(JsonHelper.parseEnum(k, exports.FontFileFormat), v);
+                    });
+                    return true;
+                /*@target web*/
                 case "file":
                     obj.file = v;
                     return true;
@@ -30232,6 +30267,7 @@
                 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));
@@ -30258,6 +30294,9 @@
         }
         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;
@@ -32463,15 +32502,9 @@
                 return null;
             }
             const o = new Map();
-            o.set("padding", obj.padding);
             return o;
         }
         static setProperty(obj, property, v) {
-            switch (property) {
-                case "padding":
-                    obj.padding = v;
-                    return true;
-            }
             return false;
         }
     }
@@ -34235,15 +34268,6 @@
             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;
@@ -34258,6 +34282,7 @@
             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;
@@ -34942,7 +34967,13 @@
              * Gets the list of tempo changes within the tick lookup.
              */
             this.tempoChanges = [];
+            /**
+             * The first beat in the bar.
+             */
             this.firstBeat = null;
+            /**
+             * The last beat in the bar.
+             */
             this.lastBeat = null;
             /**
              * Gets or sets the {@link MasterBarTickLookup} of the next masterbar in the {@link Score}
@@ -35356,14 +35387,13 @@
         constructor() {
             this._currentMasterBar = null;
             /**
-             * Gets a dictionary of all master bars played. The index is the index equals to {@link MasterBar.index}.
+             * A dictionary of all master bars played. The index is the index equals to {@link MasterBar.index}.
              * This lookup only contains the first time a MasterBar is played. For a whole sequence of the song refer to {@link MasterBars}.
              * @internal
              */
             this.masterBarLookup = new Map();
             /**
-             * Gets a list of all {@link MasterBarTickLookup} sorted by time.
-             * @internal
+             * A list of all {@link MasterBarTickLookup} sorted by time.
              */
             this.masterBars = [];
             /**
@@ -35737,6 +35767,17 @@
         }
     }
 
+    /**
+     * Rerpresents a point to sync the alphaTab time axis with an external backing track.
+     */
+    class BackingTrackSyncPoint {
+        constructor(tick, data) {
+            this.tick = 0;
+            this.tick = tick;
+            this.data = data;
+        }
+    }
+
     class MidiNoteDuration {
         constructor() {
             this.noteOnly = 0;
@@ -35806,62 +35847,22 @@
                 this.generateTrack(track);
             }
             Logger.debug('Midi', 'Begin midi generation');
-            const controller = new MidiPlaybackController(this._score);
-            let previousMasterBar = null;
-            let currentTempo = this._score.tempo;
-            // store the previous played bar for repeats
-            const barOccurence = new Map();
-            while (!controller.finished) {
-                const index = controller.index;
-                const bar = this._score.masterBars[index];
-                const currentTick = controller.currentTick;
-                controller.processCurrent();
-                if (controller.shouldPlay) {
-                    let occurence = barOccurence.has(index) ? barOccurence.get(index) : -1;
-                    occurence++;
-                    barOccurence.set(index, occurence);
-                    this.generateMasterBar(bar, previousMasterBar, currentTick, currentTempo, occurence);
-                    if (bar.tempoAutomations.length > 0) {
-                        currentTempo = bar.tempoAutomations[0].value;
-                    }
-                    for (const track of this._score.tracks) {
-                        for (const staff of track.staves) {
-                            if (index < staff.bars.length) {
-                                this.generateBar(staff.bars[index], currentTick, currentTempo);
-                            }
+            this.syncPoints = [];
+            MidiFileGenerator.playThroughSong(this._score, this.syncPoints, (bar, previousMasterBar, currentTick, currentTempo, occurence) => {
+                this.generateMasterBar(bar, previousMasterBar, currentTick, currentTempo, occurence);
+            }, (index, currentTick, currentTempo) => {
+                for (const track of this._score.tracks) {
+                    for (const staff of track.staves) {
+                        if (index < staff.bars.length) {
+                            this.generateBar(staff.bars[index], currentTick, currentTempo);
                         }
                     }
-                    if (bar.tempoAutomations.length > 0) {
-                        currentTempo = bar.tempoAutomations[bar.tempoAutomations.length - 1].value;
-                    }
                 }
-                controller.moveNext();
-                previousMasterBar = bar;
-            }
-            // here we interpolate the sync point which marks the end of the sync.
-            // Sync points define new tempos at certain positions.
-            // looking from the last sync point to the end we do not assume the end where the audio ends,
-            // but where it ends according to the BPM and the remaining ticks.
-            if (this.syncPoints.length > 0) {
-                const lastSyncPoint = this.syncPoints[this.syncPoints.length - 1];
-                const endTick = controller.currentTick;
-                const remainingTicks = endTick - lastSyncPoint.tick;
-                if (remainingTicks > 0) {
-                    const syncPointData = new SyncPointData();
-                    // last occurence of the last bar
-                    syncPointData.barOccurence = barOccurence.get(this._score.masterBars.length - 1);
-                    // same tempo as last point
-                    syncPointData.modifiedTempo = lastSyncPoint.data.modifiedTempo;
-                    // interpolated end from last syncPoint
-                    syncPointData.millisecondOffset =
-                        lastSyncPoint.data.millisecondOffset +
-                            MidiUtils.ticksToMillis(remainingTicks, syncPointData.modifiedTempo);
-                    this.syncPoints.push(new BackingTrackSyncPoint(endTick, syncPointData));
+            }, endTick => {
+                for (const track of this._score.tracks) {
+                    this._handler.finishTrack(track.index, endTick);
                 }
-            }
-            for (const track of this._score.tracks) {
-                this._handler.finishTrack(track.index, controller.currentTick);
-            }
+            });
             Logger.debug('Midi', 'Midi generation done');
         }
         generateTrack(track) {
@@ -35906,6 +35907,81 @@
             this._handler.addControlChange(track.index, 0, channel, ControllerType.DataEntryCoarse, MidiFileGenerator.PitchBendRangeInSemitones);
             this.addProgramChange(track, 0, channel, playbackInfo.program);
         }
+        /**
+         * Generates the sync points for the given score without re-generating the midi itself.
+         * @remarks
+         * Use this method if a re-generation of the sync points after modification is required.
+         * It correctly handles repeats and places sync points accoridng to their absolute midi tick when they
+         * need to be considered for synchronization.
+         * @param score The song for which to regenerate the sync points.
+         * @returns The generated sync points for usage in the backing track playback.
+         */
+        static generateSyncPoints(score) {
+            const syncPoints = [];
+            MidiFileGenerator.playThroughSong(score, syncPoints, (_masterBar, _previousMasterBar, _currentTick, _currentTempo, _barOccurence) => {
+            }, (_barIndex, _currentTick, _currentTempo) => {
+            }, _endTick => {
+            });
+            return syncPoints;
+        }
+        static playThroughSong(score, syncPoints, generateMasterBar, generateTracks, finish) {
+            const controller = new MidiPlaybackController(score);
+            let currentTempo = score.tempo;
+            let previousMasterBar = null;
+            // store the previous played bar for repeats
+            const barOccurence = new Map();
+            while (!controller.finished) {
+                const index = controller.index;
+                const bar = score.masterBars[index];
+                const currentTick = controller.currentTick;
+                controller.processCurrent();
+                if (controller.shouldPlay) {
+                    let occurence = barOccurence.has(index) ? barOccurence.get(index) : -1;
+                    occurence++;
+                    barOccurence.set(index, occurence);
+                    generateMasterBar(bar, previousMasterBar, currentTick, currentTempo, occurence);
+                    const barSyncPoints = bar.syncPoints;
+                    if (barSyncPoints) {
+                        for (const syncPoint of barSyncPoints) {
+                            if (syncPoint.syncPointValue.barOccurence === occurence) {
+                                const tick = currentTick + bar.calculateDuration() * syncPoint.ratioPosition;
+                                syncPoints.push(new BackingTrackSyncPoint(tick, syncPoint.syncPointValue));
+                            }
+                        }
+                    }
+                    if (bar.tempoAutomations.length > 0) {
+                        currentTempo = bar.tempoAutomations[0].value;
+                    }
+                    generateTracks(index, currentTick, currentTempo);
+                    if (bar.tempoAutomations.length > 0) {
+                        currentTempo = bar.tempoAutomations[bar.tempoAutomations.length - 1].value;
+                    }
+                }
+                controller.moveNext();
+                previousMasterBar = bar;
+            }
+            // here we interpolate the sync point which marks the end of the sync.
+            // Sync points define new tempos at certain positions.
+            // looking from the last sync point to the end we do not assume the end where the audio ends,
+            // but where it ends according to the BPM and the remaining ticks.
+            if (syncPoints.length > 0) {
+                const lastSyncPoint = syncPoints[syncPoints.length - 1];
+                const remainingTicks = controller.currentTick - lastSyncPoint.tick;
+                if (remainingTicks > 0) {
+                    const syncPointData = new SyncPointData();
+                    // last occurence of the last bar
+                    syncPointData.barOccurence = barOccurence.get(score.masterBars.length - 1);
+                    // same tempo as last point
+                    syncPointData.modifiedTempo = lastSyncPoint.data.modifiedTempo;
+                    // interpolated end from last syncPoint
+                    syncPointData.millisecondOffset =
+                        lastSyncPoint.data.millisecondOffset +
+                            MidiUtils.ticksToMillis(remainingTicks, syncPointData.modifiedTempo);
+                    syncPoints.push(new BackingTrackSyncPoint(controller.currentTick, syncPointData));
+                }
+            }
+            finish(controller.currentTick);
+        }
         static toChannelShort(data) {
             const value = Math.max(-32768, Math.min(32767, data * 8 - 1));
             return Math.max(value, -1) + 1;
@@ -38242,21 +38318,23 @@
                 this._backingTrackOutput.seekTo(this.sequencer.mainTimePositionToBackingTrack(timePosition, this._backingTrackOutput.backingTrackDuration));
             }
         }
-        loadBackingTrack(score, syncPoints) {
+        loadBackingTrack(score) {
             const backingTrackInfo = score.backingTrack;
             if (backingTrackInfo) {
                 this._backingTrackOutput.loadBackingTrack(backingTrackInfo);
-                this.sequencer.mainUpdateSyncPoints(syncPoints);
                 this.timePosition = 0;
             }
         }
+        updateSyncPoints(syncPoints) {
+            this.sequencer.mainUpdateSyncPoints(syncPoints);
+            this.tickPosition = this.tickPosition;
+        }
     }
 
     class ExternalMediaSynthOutput {
         constructor() {
             // fake rate
             this.sampleRate = 44100;
-            this._padding = 0;
             this._seekPosition = 0;
             this.ready = new EventEmitter();
             this.samplesPlayed = new EventEmitterOfT();
@@ -38299,20 +38377,19 @@
         seekTo(time) {
             const handler = this.handler;
             if (handler) {
-                handler.seekTo(time - this._padding);
+                handler.seekTo(time);
             }
             else {
-                this._seekPosition = time - this._padding;
+                this._seekPosition = time;
             }
         }
-        loadBackingTrack(backingTrack) {
-            this._padding = backingTrack.padding;
+        loadBackingTrack(_backingTrack) {
         }
         open(_bufferTimeInMilliseconds) {
             this.ready.trigger();
         }
         updatePosition(currentTime) {
-            this.timeUpdate.trigger(currentTime + this._padding);
+            this.timeUpdate.trigger(currentTime);
         }
         play() {
             this.handler?.play();
@@ -38577,9 +38654,14 @@
                 this._instance.loadMidiFile(midi);
             }
         }
-        loadBackingTrack(score, syncPoints) {
+        loadBackingTrack(score) {
             if (this._instance) {
-                this._instance.loadBackingTrack(score, syncPoints);
+                this._instance.loadBackingTrack(score);
+            }
+        }
+        updateSyncPoints(syncPoints) {
+            if (this._instance) {
+                this._instance.updateSyncPoints(syncPoints);
             }
         }
         applyTranspositionPitches(transpositionPitches) {
@@ -39908,7 +39990,7 @@
         }
         appendRenderResult(result, isLast) {
             // resizing the canvas and wrapper elements at the end is enough
-            // it avoids flickering on resizes and re-renders. 
+            // it avoids flickering on resizes and re-renders.
             // the individual partials are anyhow sized correctly
             if (isLast) {
                 this.canvasElement.width = result.totalWidth;
@@ -40670,9 +40752,23 @@
             this.onMidiLoad(midiFile);
             const player = this._player;
             player.loadMidiFile(midiFile);
-            player.loadBackingTrack(score, generator.syncPoints);
+            player.loadBackingTrack(score);
+            player.updateSyncPoints(generator.syncPoints);
             player.applyTranspositionPitches(generator.transpositionPitches);
         }
+        /**
+         * Triggers an update of the sync points for the current score after modification within the data model
+         * @category Methods - Player
+         * @since 1.6.0
+         */
+        updateSyncPoints() {
+            if (!this.score) {
+                return;
+            }
+            const score = this.score;
+            const player = this._player;
+            player.updateSyncPoints(MidiFileGenerator.generateSyncPoints(score));
+        }
         /**
          * Changes the volume of the given tracks.
          * @param tracks The tracks for which the volume should be changed.
@@ -43340,6 +43436,8 @@
         }
         loadBackingTrack(_score) {
         }
+        updateSyncPoints(_syncPoints) {
+        }
     }
 
     /**
@@ -43714,7 +43812,6 @@
         constructor() {
             // fake rate
             this.sampleRate = 44100;
-            this._padding = 0;
             this._updateInterval = 0;
             this.ready = new EventEmitter();
             this.samplesPlayed = new EventEmitterOfT();
@@ -43738,13 +43835,12 @@
             this.audioElement.volume = value;
         }
         seekTo(time) {
-            this.audioElement.currentTime = time / 1000 - this._padding;
+            this.audioElement.currentTime = time / 1000;
         }
         loadBackingTrack(backingTrack) {
             if (this.audioElement?.src) {
                 URL.revokeObjectURL(this.audioElement.src);
             }
-            this._padding = backingTrack.padding / 1000;
             const blob = new Blob([backingTrack.rawAudioFile]);
             // https://html.spec.whatwg.org/multipage/media.html#loading-the-media-resource
             // Step 8. resets the playbackRate, we need to remember and restore it. 
@@ -43763,7 +43859,7 @@
             this.ready.trigger();
         }
         updatePosition() {
-            const timePos = (this.audioElement.currentTime + this._padding) * 1000;
+            const timePos = this.audioElement.currentTime * 1000;
             this.timeUpdate.trigger(timePos);
         }
         play() {
@@ -43849,10 +43945,6 @@
             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) {
@@ -43889,7 +43981,6 @@
             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]
             });
@@ -43957,7 +44048,7 @@
                 this._contents = element.element.innerHTML;
                 element.element.innerHTML = '';
             }
-            this.createStyleElement(settings);
+            this.createStyleElements(settings);
             this._file = settings.core.file;
         }
         setupFontCheckers(settings) {
@@ -43983,10 +44074,16 @@
         }
         destroy() {
             this.rootContainer.element.innerHTML = '';
+            const webFont = this._webFont;
+            webFont.usages--;
+            if (webFont.usages <= 0) {
+                webFont.element.remove();
+                BrowserUiFacade._registeredWebFonts.delete(webFont.hash);
+            }
         }
         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';
@@ -44084,9 +44181,133 @@
                 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 = {
+                hash,
+                element: styleElement,
+                fontSuffix,
+                usages: 1,
+                checker
+            };
+            registeredWebFonts.set(hash, webFont);
+            this._webFont = webFont;
+        }
+        static cssFormat(format) {
+            switch (format) {
+                case exports.FontFileFormat.EmbeddedOpenType:
+                    return 'embedded-opentype';
+                case exports.FontFileFormat.Woff:
+                    return 'woff';
+                case exports.FontFileFormat.Woff2:
+                    return 'woff2';
+                case exports.FontFileFormat.OpenType:
+                    return 'opentype';
+                case exports.FontFileFormat.TrueType:
+                    return 'truetype';
+                case exports.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) {
@@ -44468,6 +44689,7 @@
             return new BackingTrackPlayer(new AudioElementBackingTrackSynthOutput(), this._api.settings.player.bufferTimeInMilliseconds);
         }
     }
+    BrowserUiFacade._registeredWebFonts = new Map();
 
     /**
      * Represents the progress of any data being loaded.
@@ -60725,9 +60947,9 @@
             print(`build date: ${VersionInfo.date}`);
         }
     }
-    VersionInfo.version = '1.6.0-alpha.1416';
-    VersionInfo.date = '2025-05-19T16:41:23.634Z';
-    VersionInfo.commit = '4aff072e1be5292482c3d77f434dd1555b6cbb8d';
+    VersionInfo.version = '1.6.0-alpha.1420';
+    VersionInfo.date = '2025-05-22T03:03:04.057Z';
+    VersionInfo.commit = '230bdd455a1906e6f334b63bad3b8cf773f890e6';
 
     /**
      * A factory for custom layout engines.
@@ -60759,59 +60981,6 @@
      * @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
@@ -60887,7 +61056,9 @@
             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;
@@ -61365,11 +61536,6 @@
      * @target web
      */
     Environment.fontDirectory = Environment.detectFontDirectory();
-    /**
-     * @target web
-     * @internal
-     */
-    Environment.bravuraFontChecker = new FontLoadingChecker(['alphaTab']);
     Environment.renderEngines = Environment.createDefaultRenderEngines();
     /**
      * @internal
@@ -61380,12 +61546,58 @@
      */
     Environment.staveProfiles = Environment.createDefaultStaveProfiles();
 
+    /**
+     * Lists the known file formats for font files.
+     * @target web
+     */
+    exports.FontFileFormat = void 0;
+    (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";
+    })(exports.FontFileFormat || (exports.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(exports.FontFileFormat.Woff2, `${prefix}Bravura.woff2`);
+            map.set(exports.FontFileFormat.Woff, `${prefix}Bravura.woff`);
+            map.set(exports.FontFileFormat.OpenType, `${prefix}Bravura.otf`);
+            return map;
+        }
         /**
          * @target web
          */
@@ -61411,12 +61623,27 @@
              * 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