@coderline/alphatab 1.6.0-alpha.1399 → 1.6.0-alpha.1403

package/dist/alphaTab.core.mjs

@@ -1,5 +1,5 @@
 /*!
- * alphaTab v1.6.0-alpha.1399 (develop, build 1399)
+ * alphaTab v1.6.0-alpha.1403 (develop, build 1403)
  *
  * Copyright © 2025, Daniel Kuschny and Contributors, All rights reserved.
  *
@@ -49,7 +49,127 @@
  * @license
  */
 
-if(typeof Symbol.dispose==='undefined'){Symbol.dispose = Symbol('Symbol.dispose')}
+/**
+ * A very basic polyfill of the ResizeObserver which triggers
+ * a the callback on window resize for all registered targets.
+ * @target web
+ */
+class ResizeObserverPolyfill {
+    constructor(callback) {
+        this._targets = new Set();
+        this._callback = callback;
+        window.addEventListener('resize', this.onWindowResize.bind(this), false);
+    }
+    observe(target) {
+        this._targets.add(target);
+    }
+    unobserve(target) {
+        this._targets.delete(target);
+    }
+    disconnect() {
+        this._targets.clear();
+    }
+    onWindowResize() {
+        const entries = [];
+        for (const t of this._targets) {
+            entries.push({
+                target: t,
+                // not used by alphaTab
+                contentRect: undefined,
+                borderBoxSize: undefined,
+                contentBoxSize: [],
+                devicePixelContentBoxSize: []
+            });
+        }
+        this._callback(entries, this);
+    }
+}
+
+/**
+ * A polyfill of the InsersectionObserver
+ * @target web
+ */
+class IntersectionObserverPolyfill {
+    constructor(callback) {
+        this._elements = [];
+        let timer = null;
+        const oldCheck = this.check.bind(this);
+        this.check = () => {
+            if (!timer) {
+                timer = setTimeout(() => {
+                    oldCheck();
+                    timer = null;
+                }, 100);
+            }
+        };
+        this._callback = callback;
+        window.addEventListener('resize', this.check, true);
+        document.addEventListener('scroll', this.check, true);
+    }
+    observe(target) {
+        if (this._elements.indexOf(target) >= 0) {
+            return;
+        }
+        this._elements.push(target);
+        this.check();
+    }
+    unobserve(target) {
+        this._elements = this._elements.filter(item => {
+            return item !== target;
+        });
+    }
+    check() {
+        const entries = [];
+        for (const element of this._elements) {
+            const rect = element.getBoundingClientRect();
+            const isVisible = rect.top + rect.height >= 0 &&
+                rect.top <= window.innerHeight &&
+                rect.left + rect.width >= 0 &&
+                rect.left <= window.innerWidth;
+            if (isVisible) {
+                entries.push({
+                    target: element,
+                    isIntersecting: true
+                });
+            }
+        }
+        if (entries.length) {
+            this._callback(entries, this);
+        }
+    }
+}
+
+/*@target web*/
+(() => {
+    if (typeof Symbol.dispose === 'undefined') {
+        Symbol.dispose = Symbol('Symbol.dispose');
+    }
+    if (typeof window !== 'undefined') {
+        // ResizeObserver API does not yet exist so long on Safari (only start 2020 with iOS Safari 13.7 and Desktop 13.1)
+        // so we better add a polyfill for it
+        if (!('ResizeObserver' in globalThis)) {
+            globalThis.ResizeObserver = ResizeObserverPolyfill;
+        }
+        // IntersectionObserver API does not on older iOS versions
+        // so we better add a polyfill for it
+        if (!('IntersectionObserver' in globalThis)) {
+            globalThis.IntersectionObserver = IntersectionObserverPolyfill;
+        }
+        if (!('replaceChildren' in Element.prototype)) {
+            Element.prototype.replaceChildren = function (...nodes) {
+                this.innerHTML = '';
+                this.append(...nodes);
+            };
+            Document.prototype.replaceChildren = Element.prototype.replaceChildren;
+            DocumentFragment.prototype.replaceChildren = Element.prototype.replaceChildren;
+        }
+    }
+    if (!('replaceAll' in String.prototype)) {
+        String.prototype.replaceAll = function (str, newStr) {
+            return this.replace(new RegExp(str, 'g'), newStr);
+        };
+    }
+})();
 
 /**
  * Lists all layout modes that are supported.
@@ -1273,7 +1393,37 @@ var AutomationType;
      * Balance change.
      */
     AutomationType[AutomationType["Balance"] = 3] = "Balance";
+    /**
+     * A sync point for synchronizing the internal time axis with an external audio track.
+     */
+    AutomationType[AutomationType["SyncPoint"] = 4] = "SyncPoint";
 })(AutomationType || (AutomationType = {}));
+/**
+ * Represents the data of a sync point for synchronizing the internal time axis with
+ * an external audio file.
+ * @cloneable
+ * @json
+ * @json_strict
+ */
+class SyncPointData {
+    constructor() {
+        /**
+         * Indicates for which repeat occurence this sync point is valid (e.g. 0 on the first time played, 1 on the second time played)
+         */
+        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
+         * cursor playback is performed to align with the audio track.
+         */
+        this.modifiedTempo = 0;
+        /**
+         * The uadio offset marking the position within the audio track in milliseconds.
+         * This information is used to regularly sync (or on seeking) to match a given external audio time axis with the internal time axis.
+         */
+        this.millisecondOffset = 0;
+    }
+}
 /**
  * Automations are used to change the behaviour of a song.
  * @cloneable
@@ -2572,6 +2722,16 @@ class MasterBar {
         }
         return null;
     }
+    /**
+     * Adds the given sync point to the list of sync points for this bar.
+     * @param syncPoint  The sync point to add.
+     */
+    addSyncPoint(syncPoint) {
+        if (!this.syncPoints) {
+            this.syncPoints = [];
+        }
+        this.syncPoints.push(syncPoint);
+    }
 }
 MasterBar.MaxAlternateEndings = 8;
 
@@ -5666,6 +5826,21 @@ class NoteCloner {
     }
 }
 
+// <auto-generated>
+// This code was auto-generated.
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+class SyncPointDataCloner {
+    static clone(original) {
+        const clone = new SyncPointData();
+        clone.barOccurence = original.barOccurence;
+        clone.modifiedTempo = original.modifiedTempo;
+        clone.millisecondOffset = original.millisecondOffset;
+        return clone;
+    }
+}
+
 // <auto-generated>
 // This code was auto-generated.
 // Changes to this file may cause incorrect behavior and will be lost if
@@ -5677,6 +5852,7 @@ class AutomationCloner {
         clone.isLinear = original.isLinear;
         clone.type = original.type;
         clone.value = original.value;
+        clone.syncPointValue = original.syncPointValue ? SyncPointDataCloner.clone(original.syncPointValue) : undefined;
         clone.ratioPosition = original.ratioPosition;
         clone.text = original.text;
         return clone;
@@ -14122,6 +14298,21 @@ class XmlDocument extends XmlNode {
     }
 }
 
+/**
+ * Holds information about the backing track which can be played instead of synthesized audio.
+ * @json
+ * @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;
+    }
+}
+
 /**
  * This structure represents a duration within a gpif
  */
@@ -14214,6 +14405,9 @@ class GpifParser {
                     case 'MasterTrack':
                         this.parseMasterTrackNode(n);
                         break;
+                    case 'BackingTrack':
+                        this.parseBackingTrackNode(n);
+                        break;
                     case 'Tracks':
                         this.parseTracksNode(n);
                         break;
@@ -14235,6 +14429,9 @@ class GpifParser {
                     case 'Rhythms':
                         this.parseRhythms(n);
                         break;
+                    case 'Assets':
+                        this.parseAssets(n);
+                        break;
                 }
             }
         }
@@ -14242,6 +14439,37 @@ class GpifParser {
             throw new UnsupportedFormatError('Root node of XML was not GPIF');
         }
     }
+    parseAssets(element) {
+        for (const c of element.childElements()) {
+            switch (c.localName) {
+                case 'Asset':
+                    if (c.getAttribute('id') === this._backingTrackAssetId) {
+                        this.parseBackingTrackAsset(c);
+                    }
+                    break;
+            }
+        }
+    }
+    parseBackingTrackAsset(element) {
+        let embeddedFilePath = '';
+        for (const c of element.childElements()) {
+            switch (c.localName) {
+                case 'EmbeddedFilePath':
+                    embeddedFilePath = c.innerText;
+                    break;
+            }
+        }
+        const loadAsset = this.loadAsset;
+        if (loadAsset) {
+            const assetData = loadAsset(embeddedFilePath);
+            if (assetData) {
+                this.score.backingTrack.rawAudioFile = assetData;
+            }
+            else {
+                this.score.backingTrack = undefined;
+            }
+        }
+    }
     //
     // <Score>...</Score>
     //
@@ -14322,7 +14550,41 @@ class GpifParser {
         if (!text) {
             return [];
         }
-        return text.split(separator).map(t => t.trim()).filter(t => t.length > 0);
+        return text
+            .split(separator)
+            .map(t => t.trim())
+            .filter(t => t.length > 0);
+    }
+    //
+    // <BackingTrack>...</BackingTrack>
+    //
+    parseBackingTrackNode(node) {
+        const backingTrack = new BackingTrack();
+        let enabled = false;
+        let source = '';
+        let assetId = '';
+        for (const c of node.childElements()) {
+            switch (c.localName) {
+                case 'Enabled':
+                    enabled = c.innerText === 'true';
+                    break;
+                case 'Source':
+                    source = c.innerText;
+                    break;
+                case 'AssetId':
+                    assetId = c.innerText;
+                    break;
+                case 'FramePadding':
+                    backingTrack.padding = GpifParser.parseIntSafe(c.innerText, 0) / GpifParser.SampleRate * 1000;
+                    break;
+            }
+        }
+        // only local (contained backing tracks are supported)
+        // remote / youtube links seem to come in future releases according to the gpif tags.
+        if (enabled && source === 'Local') {
+            this.score.backingTrack = backingTrack;
+            this._backingTrackAssetId = assetId; // when the Asset tag is parsed this ID is used to load the raw data
+        }
     }
     //
     // <MasterTrack>...</MasterTrack>
@@ -14360,6 +14622,7 @@ class GpifParser {
         let textValue = null;
         let reference = 0;
         let text = null;
+        let syncPointValue = undefined;
         for (const c of node.childElements()) {
             switch (c.localName) {
                 case 'Type':
@@ -14378,6 +14641,28 @@ class GpifParser {
                     if (c.firstElement && c.firstElement.nodeType === XmlNodeType.CDATA) {
                         textValue = c.innerText;
                     }
+                    else if (c.firstElement &&
+                        c.firstElement.nodeType === XmlNodeType.Element &&
+                        type === 'SyncPoint') {
+                        syncPointValue = new SyncPointData();
+                        for (const vc of c.childElements()) {
+                            switch (vc.localName) {
+                                case 'BarIndex':
+                                    barIndex = GpifParser.parseIntSafe(vc.innerText, 0);
+                                    break;
+                                case 'BarOccurrence':
+                                    syncPointValue.barOccurence = GpifParser.parseIntSafe(vc.innerText, 0);
+                                    break;
+                                case 'ModifiedTempo':
+                                    syncPointValue.modifiedTempo = GpifParser.parseFloatSafe(vc.innerText, 0);
+                                    break;
+                                case 'FrameOffset':
+                                    const frameOffset = GpifParser.parseFloatSafe(vc.innerText, 0);
+                                    syncPointValue.millisecondOffset = (frameOffset / GpifParser.SampleRate) * 1000;
+                                    break;
+                            }
+                        }
+                    }
                     else {
                         const parts = GpifParser.splitSafe(c.innerText);
                         // Issue 391: Some GPX files might have
@@ -14405,6 +14690,13 @@ class GpifParser {
             case 'Tempo':
                 automation = Automation.buildTempoAutomation(isLinear, ratioPosition, numberValue, reference);
                 break;
+            case 'SyncPoint':
+                automation = new Automation();
+                automation.type = AutomationType.SyncPoint;
+                automation.isLinear = isLinear;
+                automation.ratioPosition = ratioPosition;
+                automation.syncPointValue = syncPointValue;
+                break;
             case 'Sound':
                 if (textValue && sounds && sounds.has(textValue)) {
                     automation = Automation.buildInstrumentAutomation(isLinear, ratioPosition, sounds.get(textValue).program);
@@ -16486,14 +16778,19 @@ class GpifParser {
             const masterBar = this.score.masterBars[barNumber];
             for (let i = 0, j = automations.length; i < j; i++) {
                 const automation = automations[i];
-                if (automation.type === AutomationType.Tempo) {
-                    if (barNumber === 0) {
-                        this.score.tempo = automation.value | 0;
-                        if (automation.text) {
-                            this.score.tempoLabel = automation.text;
+                switch (automation.type) {
+                    case AutomationType.Tempo:
+                        if (barNumber === 0) {
+                            this.score.tempo = automation.value | 0;
+                            if (automation.text) {
+                                this.score.tempoLabel = automation.text;
+                            }
                         }
-                    }
-                    masterBar.tempoAutomations.push(automation);
+                        masterBar.tempoAutomations.push(automation);
+                        break;
+                    case AutomationType.SyncPoint:
+                        masterBar.addSyncPoint(automation);
+                        break;
                 }
             }
         }
@@ -16510,6 +16807,10 @@ GpifParser.BendPointPositionFactor = BendPoint.MaxPosition / 100.0;
  * Internal Range: 1 per quarter note
  */
 GpifParser.BendPointValueFactor = 1 / 25.0;
+// test have shown that Guitar Pro seem to always work with 44100hz for the frame offsets,
+// they are NOT using the sample rate of the input file. 
+// Downsampling a 44100hz ogg to 8000hz and using it in as audio track resulted in the same frame offset when placing sync points.
+GpifParser.SampleRate = 44100;
 
 // PartConfiguration File Format Notes.
 // Based off Guitar Pro 8
@@ -17376,7 +17677,9 @@ class Gp7To8Importer extends ScoreImporter {
         let binaryStylesheetData = null;
         let partConfigurationData = null;
         let layoutConfigurationData = null;
+        const entryLookup = new Map();
         for (const entry of entries) {
+            entryLookup.set(entry.fullName, entry);
             switch (entry.fileName) {
                 case 'score.gpif':
                     xml = IOHelper.toString(entry.data, this.settings.importer.encoding);
@@ -17399,6 +17702,12 @@ class Gp7To8Importer extends ScoreImporter {
         // the score information as XML we need to parse.
         Logger.debug(this.name, 'Start Parsing score.gpif');
         const gpifParser = new GpifParser();
+        gpifParser.loadAsset = (fileName) => {
+            if (entryLookup.has(fileName)) {
+                return entryLookup.get(fileName).data;
+            }
+            return undefined;
+        };
         gpifParser.parseXml(xml, this.settings);
         Logger.debug(this.name, 'score.gpif parsed');
         const score = gpifParser.score;
@@ -21864,8 +22173,24 @@ class ProgramChangeEvent extends MidiEvent {
  * Represents a change of the tempo in the song.
  */
 class TempoChangeEvent extends MidiEvent {
+    /**
+     * The tempo in microseconds per quarter note (aka USQ). A time format typically for midi.
+     */
+    get microSecondsPerQuarterNote() {
+        return 60000000 / this.beatsPerMinute;
+    }
+    /**
+         * The tempo in microseconds per quarter note (aka USQ). A time format typically for midi.
+         */
+    set microSecondsPerQuarterNote(value) {
+        this.beatsPerMinute = 60000000 / value;
+    }
     constructor(tick, microSecondsPerQuarterNote) {
         super(0, tick, MidiEventType.TempoChange);
+        /**
+         * The tempo in beats per minute
+         */
+        this.beatsPerMinute = 0;
         this.microSecondsPerQuarterNote = microSecondsPerQuarterNote;
     }
     writeTo(s) {
@@ -21948,6 +22273,17 @@ class SynthEvent {
     }
 }
 
+/**
+ * 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;
@@ -21955,9 +22291,17 @@ class MidiFileSequencerTempoChange {
         this.time = time;
     }
 }
+class BackingTrackSyncPointWithTime extends BackingTrackSyncPoint {
+    constructor(tick, data, time) {
+        super(tick, data);
+        this.time = time;
+    }
+}
 class MidiSequencerState {
     constructor() {
         this.tempoChanges = [];
+        this.tempoChangeIndex = 0;
+        this.syncPoints = [];
         this.firstProgramEventPerChannel = new Map();
         this.firstTimeSignatureNumerator = 0;
         this.firstTimeSignatureDenominator = 0;
@@ -21965,11 +22309,15 @@ class MidiSequencerState {
         this.division = MidiUtils.QuarterTime;
         this.eventIndex = 0;
         this.currentTime = 0;
+        this.currentTick = 0;
+        this.syncPointIndex = 0;
         this.playbackRange = null;
         this.playbackRangeStartTime = 0;
         this.playbackRangeEndTime = 0;
         this.endTick = 0;
         this.endTime = 0;
+        this.currentTempo = 0;
+        this.modifiedTempo = 0;
     }
 }
 /**
@@ -22022,6 +22370,12 @@ class MidiFileSequencer {
     get currentEndTime() {
         return this._currentState.endTime / this.playbackSpeed;
     }
+    get currentTempo() {
+        return this._currentState.currentTempo;
+    }
+    get modifiedTempo() {
+        return this._currentState.modifiedTempo * this.playbackSpeed;
+    }
     mainSeek(timePosition) {
         // map to speed=1
         timePosition *= this.playbackSpeed;
@@ -22041,6 +22395,8 @@ class MidiFileSequencer {
             // we have to restart the midi to make sure we get the right state: instruments, volume, pan, etc
             this._mainState.currentTime = 0;
             this._mainState.eventIndex = 0;
+            this._mainState.syncPointIndex = 0;
+            this._mainState.tempoChangeIndex = 0;
             if (this.isPlayingMain) {
                 const metronomeVolume = this._synthesizer.metronomeVolume;
                 this._synthesizer.noteOffAll(true);
@@ -22115,7 +22471,7 @@ class MidiFileSequencer {
             }
             if (mEvent.type === MidiEventType.TempoChange) {
                 const meta = mEvent;
-                bpm = 60000000 / meta.microSecondsPerQuarterNote;
+                bpm = meta.beatsPerMinute;
                 state.tempoChanges.push(new MidiFileSequencerTempoChange(bpm, absTick, absTime));
                 metronomeLengthInMillis = metronomeLengthInTicks * (60000.0 / (bpm * midiFile.division));
             }
@@ -22149,6 +22505,8 @@ class MidiFileSequencer {
                 }
             }
         }
+        state.currentTempo = state.tempoChanges.length > 0 ? state.tempoChanges[0].bpm : bpm;
+        state.modifiedTempo = state.currentTempo;
         state.synthData.sort((a, b) => {
             if (a.time > b.time) {
                 return 1;
@@ -22165,6 +22523,35 @@ class MidiFileSequencer {
     fillMidiEventQueue() {
         return this.fillMidiEventQueueLimited(-1);
     }
+    fillMidiEventQueueToEndTime(endTime) {
+        while (this._mainState.currentTime < endTime) {
+            if (this.fillMidiEventQueueLimited(endTime - this._mainState.currentTime)) {
+                this._synthesizer.synthesizeSilent(SynthConstants.MicroBufferSize);
+            }
+        }
+        let anyEventsDispatched = false;
+        this._currentState.currentTime = endTime;
+        while (this._currentState.eventIndex < this._currentState.synthData.length &&
+            this._currentState.synthData[this._currentState.eventIndex].time < this._currentState.currentTime) {
+            const synthEvent = this._currentState.synthData[this._currentState.eventIndex];
+            this._synthesizer.dispatchEvent(synthEvent);
+            while (this._currentState.syncPointIndex < this._currentState.syncPoints.length &&
+                this._currentState.syncPoints[this._currentState.syncPointIndex].tick < synthEvent.event.tick) {
+                this._currentState.modifiedTempo =
+                    this._currentState.syncPoints[this._currentState.syncPointIndex].data.modifiedTempo;
+                this._currentState.syncPointIndex++;
+            }
+            while (this._currentState.tempoChangeIndex < this._currentState.tempoChanges.length &&
+                this._currentState.tempoChanges[this._currentState.tempoChangeIndex].time <= synthEvent.time) {
+                this._currentState.currentTempo =
+                    this._currentState.tempoChanges[this._currentState.tempoChangeIndex].bpm;
+                this._currentState.tempoChangeIndex++;
+            }
+            this._currentState.eventIndex++;
+            anyEventsDispatched = true;
+        }
+        return anyEventsDispatched;
+    }
     fillMidiEventQueueLimited(maxMilliseconds) {
         let millisecondsPerBuffer = (SynthConstants.MicroBufferSize / this._synthesizer.outSampleRate) * 1000 * this.playbackSpeed;
         let endTime = this.internalEndTime;
@@ -22192,9 +22579,87 @@ class MidiFileSequencer {
     mainTimePositionToTickPosition(timePosition) {
         return this.timePositionToTickPositionWithSpeed(this._mainState, timePosition, this.playbackSpeed);
     }
+    mainUpdateSyncPoints(syncPoints) {
+        const state = this._mainState;
+        syncPoints.sort((a, b) => a.tick - b.tick); // just in case
+        state.syncPoints = new Array(syncPoints.length);
+        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;
+                while (tempoChangeIndex < state.tempoChanges.length &&
+                    state.tempoChanges[tempoChangeIndex].ticks <= absTick) {
+                    bpm = state.tempoChanges[tempoChangeIndex].bpm;
+                    tempoChangeIndex++;
+                }
+            }
+        }
+        state.syncPointIndex = 0;
+    }
     currentTimePositionToTickPosition(timePosition) {
         return this.timePositionToTickPositionWithSpeed(this._currentState, timePosition, this.playbackSpeed);
     }
+    mainTimePositionFromBackingTrack(timePosition, backingTrackLength) {
+        const mainState = this._mainState;
+        const syncPoints = mainState.syncPoints;
+        if (timePosition < 0 || syncPoints.length === 0) {
+            return timePosition;
+        }
+        let syncPointIndex = timePosition >= syncPoints[mainState.syncPointIndex].data.millisecondOffset ? mainState.syncPointIndex : 0;
+        while (syncPointIndex + 1 < syncPoints.length &&
+            syncPoints[syncPointIndex + 1].data.millisecondOffset <= timePosition) {
+            syncPointIndex++;
+        }
+        const currentSyncPoint = syncPoints[syncPointIndex];
+        const timeDiff = timePosition - currentSyncPoint.data.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;
+        }
+        else {
+            const relativeTimeDiff = timeDiff / (backingTrackLength - currentSyncPoint.data.millisecondOffset);
+            alphaTabTimeDiff = (mainState.endTime - currentSyncPoint.time) * relativeTimeDiff;
+        }
+        return (currentSyncPoint.time + alphaTabTimeDiff) / this.playbackSpeed;
+    }
+    mainTimePositionToBackingTrack(timePosition, backingTrackLength) {
+        const mainState = this._mainState;
+        const syncPoints = mainState.syncPoints;
+        if (timePosition < 0 || syncPoints.length === 0) {
+            return timePosition;
+        }
+        timePosition *= this.playbackSpeed;
+        let syncPointIndex = timePosition >= syncPoints[mainState.syncPointIndex].time ? mainState.syncPointIndex : 0;
+        while (syncPointIndex + 1 < syncPoints.length && syncPoints[syncPointIndex + 1].time <= timePosition) {
+            syncPointIndex++;
+        }
+        const currentSyncPoint = syncPoints[syncPointIndex];
+        const alphaTabTimeDiff = timePosition - currentSyncPoint.time;
+        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;
+        }
+        else {
+            const relativeAlphaTabTimeDiff = alphaTabTimeDiff / (mainState.endTime - currentSyncPoint.time);
+            const frameDiff = backingTrackLength - currentSyncPoint.data.millisecondOffset;
+            backingTrackPos = currentSyncPoint.data.millisecondOffset + frameDiff * relativeAlphaTabTimeDiff;
+        }
+        return backingTrackPos;
+    }
     tickPositionToTimePositionWithSpeed(state, tickPosition, playbackSpeed) {
         let timePosition = 0.0;
         let bpm = 120.0;
@@ -22304,6 +22769,8 @@ class MidiFileSequencer {
         });
         state.endTime = metronomeTime;
         state.endTick = metronomeTick;
+        state.currentTempo = bpm;
+        state.modifiedTempo = bpm;
         this._countInState = state;
     }
 }
@@ -22349,12 +22816,22 @@ class PositionChangedEventArgs {
      * @param endTick The end tick.
      * @param isSeek Whether the time was seeked.
      */
-    constructor(currentTime, endTime, currentTick, endTick, isSeek) {
+    constructor(currentTime, endTime, currentTick, endTick, isSeek, originalTempo, modifiedTempo) {
+        /**
+         * The original tempo in which alphaTab internally would be playing right now.
+         */
+        this.originalTempo = 0;
+        /**
+         * The modified tempo in which the actual playback is happening (e.g. due to playback speed or external audio synchronization)
+         */
+        this.modifiedTempo = 0;
         this.currentTime = currentTime;
         this.endTime = endTime;
         this.currentTick = currentTick;
         this.endTick = endTick;
         this.isSeek = isSeek;
+        this.originalTempo = originalTempo;
+        this.modifiedTempo = modifiedTempo;
     }
 }
 
@@ -26452,7 +26929,7 @@ class TinySoundFont {
                 break;
             case MidiEventType.TempoChange:
                 const tempoChange = e;
-                this.currentTempo = 60000000 / tempoChange.microSecondsPerQuarterNote;
+                this.currentTempo = tempoChange.beatsPerMinute;
                 break;
             case MidiEventType.PitchBend:
                 const pitchBend = e;
@@ -27604,15 +28081,15 @@ class PlaybackRangeChangedEventArgs {
 }
 
 /**
- * This is the main synthesizer component which can be used to
+ * This is the base class for synthesizer components which can be used to
  * play a {@link MidiFile} via a {@link ISynthOutput}.
  */
-class AlphaSynth {
+class AlphaSynthBase {
     get output() {
         return this._output;
     }
     get isReadyForPlayback() {
-        return this.isReady && this._isSoundFontLoaded && this._isMidiLoaded;
+        return this.isReady && this.isSoundFontLoaded && this._isMidiLoaded;
     }
     get logLevel() {
         return Logger.logLevel;
@@ -27621,11 +28098,14 @@ class AlphaSynth {
         Logger.logLevel = value;
     }
     get masterVolume() {
-        return this._synthesizer.masterVolume;
+        return this.synthesizer.masterVolume;
     }
     set masterVolume(value) {
         value = Math.max(value, SynthConstants.MinVolume);
-        this._synthesizer.masterVolume = value;
+        this.updateMasterVolume(value);
+    }
+    updateMasterVolume(value) {
+        this.synthesizer.masterVolume = value;
     }
     get metronomeVolume() {
         return this._metronomeVolume;
@@ -27633,7 +28113,7 @@ class AlphaSynth {
     set metronomeVolume(value) {
         value = Math.max(value, SynthConstants.MinVolume);
         this._metronomeVolume = value;
-        this._synthesizer.metronomeVolume = value;
+        this.synthesizer.metronomeVolume = value;
     }
     get countInVolume() {
         return this._countInVolume;
@@ -27649,19 +28129,22 @@ class AlphaSynth {
         this._midiEventsPlayedFilter = new Set(value);
     }
     get playbackSpeed() {
-        return this._sequencer.playbackSpeed;
+        return this.sequencer.playbackSpeed;
     }
     set playbackSpeed(value) {
         value = ModelUtils.clamp(value, SynthConstants.MinPlaybackSpeed, SynthConstants.MaxPlaybackSpeed);
-        const oldSpeed = this._sequencer.playbackSpeed;
-        this._sequencer.playbackSpeed = value;
+        this.updatePlaybackSpeed(value);
+    }
+    updatePlaybackSpeed(value) {
+        const oldSpeed = this.sequencer.playbackSpeed;
+        this.sequencer.playbackSpeed = value;
         this.timePosition = this.timePosition * (oldSpeed / value);
     }
     get tickPosition() {
         return this._tickPosition;
     }
     set tickPosition(value) {
-        this.timePosition = this._sequencer.mainTickPositionToTimePosition(value);
+        this.timePosition = this.sequencer.mainTickPositionToTimePosition(value);
     }
     get timePosition() {
         return this._timePosition;
@@ -27669,30 +28152,30 @@ class AlphaSynth {
     set timePosition(value) {
         Logger.debug('AlphaSynth', `Seeking to position ${value}ms (main)`);
         // tell the sequencer to jump to the given position
-        this._sequencer.mainSeek(value);
+        this.sequencer.mainSeek(value);
         // update the internal position
         this.updateTimePosition(value, true);
         // tell the output to reset the already synthesized buffers and request data again
-        if (this._sequencer.isPlayingMain) {
+        if (this.sequencer.isPlayingMain) {
             this._notPlayedSamples = 0;
             this.output.resetSamples();
         }
     }
     get playbackRange() {
-        return this._sequencer.mainPlaybackRange;
+        return this.sequencer.mainPlaybackRange;
     }
     set playbackRange(value) {
-        this._sequencer.mainPlaybackRange = value;
+        this.sequencer.mainPlaybackRange = value;
         if (value) {
             this.tickPosition = value.startTick;
         }
         this.playbackRangeChanged.trigger(new PlaybackRangeChangedEventArgs(value));
     }
     get isLooping() {
-        return this._sequencer.isLooping;
+        return this.sequencer.isLooping;
     }
     set isLooping(value) {
-        this._sequencer.isLooping = value;
+        this.sequencer.isLooping = value;
     }
     destroy() {
         Logger.debug('AlphaSynth', 'Destroying player');
@@ -27700,11 +28183,11 @@ class AlphaSynth {
         this.output.destroy();
     }
     /**
-     * Initializes a new instance of the {@link AlphaSynth} class.
+     * Initializes a new instance of the {@link AlphaSynthBase} class.
      * @param output The output to use for playing the generated samples.
      */
-    constructor(output, bufferTimeInMilliseconds) {
-        this._isSoundFontLoaded = false;
+    constructor(output, synthesizer, bufferTimeInMilliseconds) {
+        this.isSoundFontLoaded = false;
         this._isMidiLoaded = false;
         this._tickPosition = 0;
         this._timePosition = 0;
@@ -27733,8 +28216,8 @@ class AlphaSynth {
         Logger.debug('AlphaSynth', 'Creating output');
         this._output = output;
         Logger.debug('AlphaSynth', 'Creating synthesizer');
-        this._synthesizer = new TinySoundFont(this.output.sampleRate);
-        this._sequencer = new MidiFileSequencer(this._synthesizer);
+        this.synthesizer = synthesizer;
+        this.sequencer = new MidiFileSequencer(this.synthesizer);
         Logger.debug('AlphaSynth', 'Opening output');
         this.output.ready.on(() => {
             this.isReady = true;
@@ -27742,42 +28225,45 @@ class AlphaSynth {
             this.checkReadyForPlayback();
         });
         this.output.sampleRequest.on(() => {
-            if (this.state === PlayerState.Playing &&
-                (!this._sequencer.isFinished || this._synthesizer.activeVoiceCount > 0)) {
-                let samples = new Float32Array(SynthConstants.MicroBufferSize * SynthConstants.MicroBufferCount * SynthConstants.AudioChannels);
-                let bufferPos = 0;
-                for (let i = 0; i < SynthConstants.MicroBufferCount; i++) {
-                    // synthesize buffer
-                    this._sequencer.fillMidiEventQueue();
-                    const synthesizedEvents = this._synthesizer.synthesize(samples, bufferPos, SynthConstants.MicroBufferSize);
-                    bufferPos += SynthConstants.MicroBufferSize * SynthConstants.AudioChannels;
-                    // push all processed events into the queue
-                    // for informing users about played events
-                    for (const e of synthesizedEvents) {
-                        if (this._midiEventsPlayedFilter.has(e.event.type)) {
-                            this._playedEventsQueue.enqueue(e);
-                        }
-                    }
-                    // tell sequencer to check whether its work is done
-                    if (this._sequencer.isFinished) {
-                        break;
+            this.onSampleRequest();
+        });
+        this.output.samplesPlayed.on(this.onSamplesPlayed.bind(this));
+        this.output.open(bufferTimeInMilliseconds);
+    }
+    onSampleRequest() {
+        if (this.state === PlayerState.Playing &&
+            (!this.sequencer.isFinished || this.synthesizer.activeVoiceCount > 0)) {
+            let samples = new Float32Array(SynthConstants.MicroBufferSize * SynthConstants.MicroBufferCount * SynthConstants.AudioChannels);
+            let bufferPos = 0;
+            for (let i = 0; i < SynthConstants.MicroBufferCount; i++) {
+                // synthesize buffer
+                this.sequencer.fillMidiEventQueue();
+                const synthesizedEvents = this.synthesizer.synthesize(samples, bufferPos, SynthConstants.MicroBufferSize);
+                bufferPos += SynthConstants.MicroBufferSize * SynthConstants.AudioChannels;
+                // push all processed events into the queue
+                // for informing users about played events
+                for (const e of synthesizedEvents) {
+                    if (this._midiEventsPlayedFilter.has(e.event.type)) {
+                        this._playedEventsQueue.enqueue(e);
                     }
                 }
-                // send it to output
-                if (bufferPos < samples.length) {
-                    samples = samples.subarray(0, bufferPos);
+                // tell sequencer to check whether its work is done
+                if (this.sequencer.isFinished) {
+                    break;
                 }
-                this._notPlayedSamples += samples.length;
-                this.output.addSamples(samples);
             }
-            else {
-                // Tell output that there is no data left for it.
-                const samples = new Float32Array(0);
-                this.output.addSamples(samples);
+            // send it to output
+            if (bufferPos < samples.length) {
+                samples = samples.subarray(0, bufferPos);
             }
-        });
-        this.output.samplesPlayed.on(this.onSamplesPlayed.bind(this));
-        this.output.open(bufferTimeInMilliseconds);
+            this._notPlayedSamples += samples.length;
+            this.output.addSamples(samples);
+        }
+        else {
+            // Tell output that there is no data left for it.
+            const samples = new Float32Array(0);
+            this.output.addSamples(samples);
+        }
     }
     play() {
         if (this.state !== PlayerState.Paused || !this._isMidiLoaded) {
@@ -27787,20 +28273,20 @@ class AlphaSynth {
         this.playInternal();
         if (this._countInVolume > 0) {
             Logger.debug('AlphaSynth', 'Starting countin');
-            this._sequencer.startCountIn();
-            this._synthesizer.setupMetronomeChannel(this._countInVolume);
+            this.sequencer.startCountIn();
+            this.synthesizer.setupMetronomeChannel(this._countInVolume);
             this.updateTimePosition(0, true);
         }
         this.output.play();
         return true;
     }
     playInternal() {
-        if (this._sequencer.isPlayingOneTimeMidi) {
+        if (this.sequencer.isPlayingOneTimeMidi) {
             Logger.debug('AlphaSynth', 'Cancelling one time midi');
             this.stopOneTimeMidi();
         }
         Logger.debug('AlphaSynth', 'Starting playback');
-        this._synthesizer.setupMetronomeChannel(this.metronomeVolume);
+        this.synthesizer.setupMetronomeChannel(this.metronomeVolume);
         this._synthStopping = false;
         this.state = PlayerState.Playing;
         this.stateChanged.trigger(new PlayerStateChangedEventArgs(this.state, false));
@@ -27813,7 +28299,7 @@ class AlphaSynth {
         this.state = PlayerState.Paused;
         this.stateChanged.trigger(new PlayerStateChangedEventArgs(this.state, false));
         this.output.pause();
-        this._synthesizer.noteOffAll(false);
+        this.synthesizer.noteOffAll(false);
     }
     playPause() {
         if (this.state !== PlayerState.Paused || !this._isMidiLoaded) {
@@ -27831,21 +28317,21 @@ class AlphaSynth {
         this.state = PlayerState.Paused;
         this.output.pause();
         this._notPlayedSamples = 0;
-        this._sequencer.stop();
-        this._synthesizer.noteOffAll(true);
-        this.tickPosition = this._sequencer.mainPlaybackRange ? this._sequencer.mainPlaybackRange.startTick : 0;
+        this.sequencer.stop();
+        this.synthesizer.noteOffAll(true);
+        this.tickPosition = this.sequencer.mainPlaybackRange ? this.sequencer.mainPlaybackRange.startTick : 0;
         this.stateChanged.trigger(new PlayerStateChangedEventArgs(this.state, true));
     }
     playOneTimeMidiFile(midi) {
-        if (this._sequencer.isPlayingOneTimeMidi) {
+        if (this.sequencer.isPlayingOneTimeMidi) {
             this.stopOneTimeMidi();
         }
         else {
             // pause current playback.
             this.pause();
         }
-        this._sequencer.loadOneTimeMidi(midi);
-        this._synthesizer.noteOffAll(true);
+        this.sequencer.loadOneTimeMidi(midi);
+        this.synthesizer.noteOffAll(true);
         // update the internal position
         this.updateTimePosition(0, true);
         // tell the output to reset the already synthesized buffers and request data again
@@ -27855,9 +28341,9 @@ class AlphaSynth {
     }
     resetSoundFonts() {
         this.stop();
-        this._synthesizer.resetPresets();
+        this.synthesizer.resetPresets();
         this._loadedSoundFonts = [];
-        this._isSoundFontLoaded = false;
+        this.isSoundFontLoaded = false;
         this.soundFontLoaded.trigger();
     }
     loadSoundFont(data, append) {
@@ -27871,7 +28357,7 @@ class AlphaSynth {
                 this._loadedSoundFonts = [];
             }
             this._loadedSoundFonts.push(soundFont);
-            this._isSoundFontLoaded = true;
+            this.isSoundFontLoaded = true;
             this.soundFontLoaded.trigger();
             Logger.debug('AlphaSynth', 'soundFont successfully loaded');
             this.checkReadyForPlayback();
@@ -27883,12 +28369,12 @@ class AlphaSynth {
     }
     checkReadyForPlayback() {
         if (this.isReadyForPlayback) {
-            this._synthesizer.setupMetronomeChannel(this.metronomeVolume);
-            const programs = this._sequencer.instrumentPrograms;
-            const percussionKeys = this._sequencer.percussionKeys;
+            this.synthesizer.setupMetronomeChannel(this.metronomeVolume);
+            const programs = this.sequencer.instrumentPrograms;
+            const percussionKeys = this.sequencer.percussionKeys;
             let append = false;
             for (const soundFont of this._loadedSoundFonts) {
-                this._synthesizer.loadPresets(soundFont, programs, percussionKeys, append);
+                this.synthesizer.loadPresets(soundFont, programs, percussionKeys, append);
                 append = true;
             }
             this.readyForPlayback.trigger();
@@ -27902,9 +28388,9 @@ class AlphaSynth {
         this.stop();
         try {
             Logger.debug('AlphaSynth', 'Loading midi from model');
-            this._sequencer.loadMidi(midi);
+            this.sequencer.loadMidi(midi);
             this._isMidiLoaded = true;
-            this.midiLoaded.trigger(new PositionChangedEventArgs(0, this._sequencer.currentEndTime, 0, this._sequencer.currentEndTick, false));
+            this.midiLoaded.trigger(new PositionChangedEventArgs(0, this.sequencer.currentEndTime, 0, this.sequencer.currentEndTick, false, this.sequencer.currentTempo, this.sequencer.modifiedTempo));
             Logger.debug('AlphaSynth', 'Midi successfully loaded');
             this.checkReadyForPlayback();
             this.tickPosition = 0;
@@ -27915,29 +28401,29 @@ class AlphaSynth {
         }
     }
     applyTranspositionPitches(transpositionPitches) {
-        this._synthesizer.applyTranspositionPitches(transpositionPitches);
+        this.synthesizer.applyTranspositionPitches(transpositionPitches);
     }
     setChannelTranspositionPitch(channel, semitones) {
-        this._synthesizer.setChannelTranspositionPitch(channel, semitones);
+        this.synthesizer.setChannelTranspositionPitch(channel, semitones);
     }
     setChannelMute(channel, mute) {
-        this._synthesizer.channelSetMute(channel, mute);
+        this.synthesizer.channelSetMute(channel, mute);
     }
     resetChannelStates() {
-        this._synthesizer.resetChannelStates();
+        this.synthesizer.resetChannelStates();
     }
     setChannelSolo(channel, solo) {
-        this._synthesizer.channelSetSolo(channel, solo);
+        this.synthesizer.channelSetSolo(channel, solo);
     }
     setChannelVolume(channel, volume) {
         volume = Math.max(volume, SynthConstants.MinVolume);
-        this._synthesizer.channelSetMixVolume(channel, volume);
+        this.synthesizer.channelSetMixVolume(channel, volume);
     }
     onSamplesPlayed(sampleCount) {
         if (sampleCount === 0) {
             return;
         }
-        const playedMillis = (sampleCount / this._synthesizer.outSampleRate) * 1000;
+        const playedMillis = (sampleCount / this.synthesizer.outSampleRate) * 1000;
         this._notPlayedSamples -= sampleCount * SynthConstants.AudioChannels;
         this.updateTimePosition(this._timePosition + playedMillis, false);
         this.checkForFinish();
@@ -27945,76 +28431,85 @@ class AlphaSynth {
     checkForFinish() {
         let startTick = 0;
         let endTick = 0;
-        if (this.playbackRange && this._sequencer.isPlayingMain) {
+        if (this.playbackRange && this.sequencer.isPlayingMain) {
             startTick = this.playbackRange.startTick;
             endTick = this.playbackRange.endTick;
         }
         else {
-            endTick = this._sequencer.currentEndTick;
-        }
-        if (this._tickPosition >= endTick && this._notPlayedSamples <= 0) {
-            this._notPlayedSamples = 0;
-            if (this._sequencer.isPlayingCountIn) {
-                Logger.debug('AlphaSynth', 'Finished playback (count-in)');
-                this._sequencer.resetCountIn();
-                this.timePosition = this._sequencer.currentTime;
-                this.playInternal();
-                this.output.resetSamples();
-            }
-            else if (this._sequencer.isPlayingOneTimeMidi) {
-                Logger.debug('AlphaSynth', 'Finished playback (one time)');
-                this.output.resetSamples();
-                this.state = PlayerState.Paused;
-                this.stopOneTimeMidi();
-            }
-            else if (this.isLooping) {
-                Logger.debug('AlphaSynth', 'Finished playback (main looping)');
-                this.finished.trigger();
-                this.tickPosition = startTick;
-                this._synthStopping = false;
+            endTick = this.sequencer.currentEndTick;
+        }
+        if (this._tickPosition >= endTick) {
+            // fully done with playback of remaining samples? 
+            if (this._notPlayedSamples <= 0) {
+                this._notPlayedSamples = 0;
+                if (this.sequencer.isPlayingCountIn) {
+                    Logger.debug('AlphaSynth', 'Finished playback (count-in)');
+                    this.sequencer.resetCountIn();
+                    this.timePosition = this.sequencer.currentTime;
+                    this.playInternal();
+                    this.output.resetSamples();
+                }
+                else if (this.sequencer.isPlayingOneTimeMidi) {
+                    Logger.debug('AlphaSynth', 'Finished playback (one time)');
+                    this.output.resetSamples();
+                    this.state = PlayerState.Paused;
+                    this.stopOneTimeMidi();
+                }
+                else if (this.isLooping) {
+                    Logger.debug('AlphaSynth', 'Finished playback (main looping)');
+                    this.finished.trigger();
+                    this.tickPosition = startTick;
+                    this._synthStopping = false;
+                }
+                else if (this.synthesizer.activeVoiceCount > 0) {
+                    // smooth stop
+                    if (!this._synthStopping) {
+                        Logger.debug('AlphaSynth', 'Signaling synth to stop all voices (all samples played)');
+                        this.synthesizer.noteOffAll(true);
+                        this._synthStopping = true;
+                    }
+                }
+                else {
+                    this._synthStopping = false;
+                    Logger.debug('AlphaSynth', 'Finished playback (main)');
+                    this.finished.trigger();
+                    this.stop();
+                }
             }
-            else if (this._synthesizer.activeVoiceCount > 0) {
-                // smooth stop
+            else {
+                // the output still has to play some samples, signal the synth to stop
+                // to eventually bring the voices down to 0 and stop playing
                 if (!this._synthStopping) {
-                    this._synthesizer.noteOffAll(true);
+                    Logger.debug('AlphaSynth', 'Signaling synth to stop all voices (not all samples played)');
+                    this.synthesizer.noteOffAll(true);
                     this._synthStopping = true;
                 }
             }
-            else {
-                this._synthStopping = false;
-                Logger.debug('AlphaSynth', 'Finished playback (main)');
-                this.finished.trigger();
-                this.stop();
-            }
         }
     }
     stopOneTimeMidi() {
         this.output.pause();
-        this._synthesizer.noteOffAll(true);
-        this._sequencer.resetOneTimeMidi();
-        this.timePosition = this._sequencer.currentTime;
+        this.synthesizer.noteOffAll(true);
+        this.sequencer.resetOneTimeMidi();
+        this.timePosition = this.sequencer.currentTime;
     }
     updateTimePosition(timePosition, isSeek) {
         // update the real positions
         let currentTime = timePosition;
         this._timePosition = currentTime;
-        let currentTick = this._sequencer.currentTimePositionToTickPosition(currentTime);
+        let currentTick = this.sequencer.currentTimePositionToTickPosition(currentTime);
         this._tickPosition = currentTick;
-        const endTime = this._sequencer.currentEndTime;
-        const endTick = this._sequencer.currentEndTick;
+        const endTime = this.sequencer.currentEndTime;
+        const endTick = this.sequencer.currentEndTick;
         // on fade outs we can have some milliseconds longer, ensure we don't report this
         if (currentTime > endTime) {
             currentTime = endTime;
             currentTick = endTick;
         }
-        const mode = this._sequencer.isPlayingMain
-            ? 'main'
-            : this._sequencer.isPlayingCountIn
-                ? 'count-in'
-                : 'one-time';
-        Logger.debug('AlphaSynth', `Position changed: (time: ${currentTime}/${endTime}, tick: ${currentTick}/${endTick}, Active Voices: ${this._synthesizer.activeVoiceCount} (${mode})`);
-        if (this._sequencer.isPlayingMain) {
-            this.positionChanged.trigger(new PositionChangedEventArgs(currentTime, endTime, currentTick, endTick, isSeek));
+        const mode = this.sequencer.isPlayingMain ? 'main' : this.sequencer.isPlayingCountIn ? 'count-in' : 'one-time';
+        Logger.debug('AlphaSynth', `Position changed: (time: ${currentTime}/${endTime}, tick: ${currentTick}/${endTick}, Active Voices: ${this.synthesizer.activeVoiceCount} (${mode}), Tempo original: ${this.sequencer.currentTempo}, Tempo modified: ${this.sequencer.modifiedTempo})`);
+        if (this.sequencer.isPlayingMain) {
+            this.positionChanged.trigger(new PositionChangedEventArgs(currentTime, endTime, currentTick, endTick, isSeek, this.sequencer.currentTempo, this.sequencer.modifiedTempo));
         }
         // build events which were actually played
         if (isSeek) {
@@ -28035,13 +28530,28 @@ class AlphaSynth {
      * @internal
      */
     hasSamplesForProgram(program) {
-        return this._synthesizer.hasSamplesForProgram(program);
+        return this.synthesizer.hasSamplesForProgram(program);
     }
     /**
      * @internal
      */
     hasSamplesForPercussion(key) {
-        return this._synthesizer.hasSamplesForPercussion(key);
+        return this.synthesizer.hasSamplesForPercussion(key);
+    }
+    loadBackingTrack(_score, _syncPoints) {
+    }
+}
+/**
+ * This is the main synthesizer component which can be used to
+ * play a {@link MidiFile} via a {@link ISynthOutput}.
+ */
+class AlphaSynth extends AlphaSynthBase {
+    /**
+     * Initializes a new instance of the {@link AlphaSynth} class.
+     * @param output The output to use for playing the generated samples.
+     */
+    constructor(output, bufferTimeInMilliseconds) {
+        super(output, new TinySoundFont(output.sampleRate), bufferTimeInMilliseconds);
     }
 }
 
@@ -29288,6 +29798,35 @@ var PlayerOutputMode;
      */
     PlayerOutputMode[PlayerOutputMode["WebAudioScriptProcessor"] = 1] = "WebAudioScriptProcessor";
 })(PlayerOutputMode || (PlayerOutputMode = {}));
+/**
+ * Lists the different modes how the internal alphaTab player (and related cursor behavior) is working.
+ */
+var PlayerMode;
+(function (PlayerMode) {
+    /**
+     * The player functionality is fully disabled.
+     */
+    PlayerMode[PlayerMode["Disabled"] = 0] = "Disabled";
+    /**
+     * The player functionality is enabled.
+     * If the loaded file provides a backing track, it is used for playback.
+     * If no backing track is provided, the midi synthesizer is used.
+     */
+    PlayerMode[PlayerMode["EnabledAutomatic"] = 1] = "EnabledAutomatic";
+    /**
+     * The player functionality is enabled and the synthesizer is used (even if a backing track is embedded in the file).
+     */
+    PlayerMode[PlayerMode["EnabledSynthesizer"] = 2] = "EnabledSynthesizer";
+    /**
+     * The player functionality is enabled. If the input data model has no backing track configured, the player might not work as expected (as playback completes instantly).
+     */
+    PlayerMode[PlayerMode["EnabledBackingTrack"] = 3] = "EnabledBackingTrack";
+    /**
+     * The player functionality is enabled and an external audio/video source is used as time axis.
+     * The related player APIs need to be used to update the current position of the external audio source within alphaTab.
+     */
+    PlayerMode[PlayerMode["EnabledExternalMedia"] = 4] = "EnabledExternalMedia";
+})(PlayerMode || (PlayerMode = {}));
 /**
  * The player settings control how the audio playback and UI is behaving.
  * @json
@@ -29334,6 +29873,7 @@ class PlayerSettings {
          * @since 0.9.6
          * @defaultValue `false`
          * @category Player
+         * @deprecated Use {@link playerMode} instead.
          * @remarks
          * This setting configures whether the player feature is enabled or not. Depending on the platform enabling the player needs some additional actions of the developer.
          * For the JavaScript version the [player.soundFont](/docs/reference/settings/player/soundfont) property must be set to the URL of the sound font that should be used or it must be loaded manually via API.
@@ -29342,6 +29882,37 @@ class PlayerSettings {
          * AlphaTab does not ship a default UI for the player. The API must be hooked up to some UI controls to allow the user to interact with the player.
          */
         this.enablePlayer = false;
+        /**
+         * Whether the player should be enabled and which mode it should use.
+         * @since 1.6.0
+         * @defaultValue `PlayerMode.Disabled`
+         * @category Player
+         * @remarks
+         * This setting configures whether the player feature is enabled or not. Depending on the platform enabling the player needs some additional actions of the developer.
+         *
+         * **Synthesizer**
+         *
+         * If the synthesizer is used (via {@link PlayerMode.EnabledAutomatic} or {@link PlayerMode.EnabledSynthesizer}) a sound font is needed so that the midi synthesizer can produce the audio samples.
+         *
+         * For the JavaScript version the [player.soundFont](/docs/reference/settings/player/soundfont) property must be set to the URL of the sound font that should be used or it must be loaded manually via API.
+         * For .net manually the soundfont must be loaded.
+         *
+         * **Backing Track**
+         *
+         * For a built-in backing track of the input file no additional data needs to be loaded (assuming everything is filled via the input file).
+         * Otherwise the `score.backingTrack` needs to be filled before loading and the related sync points need to be configured.
+         *
+         * **External Media**
+         *
+         * For synchronizing alphaTab with an external media no data needs to be loaded into alphaTab. The configured sync points on the MasterBars are used
+         * as reference to synchronize the external media with the internal time axis. Then the related APIs on the AlphaTabApi object need to be used
+         * to update the playback state and exterrnal audio position during playback.
+         *
+         * **User Interface**
+         *
+         * AlphaTab does not ship a default UI for the player. The API must be hooked up to some UI controls to allow the user to interact with the player.
+         */
+        this.playerMode = PlayerMode.Disabled;
         /**
          * Whether playback cursors should be displayed.
          * @since 0.9.6
@@ -30047,6 +30618,7 @@ class PlayerSettingsSerializer {
         /*@target web*/
         o.set("outputmode", obj.outputMode);
         o.set("enableplayer", obj.enablePlayer);
+        o.set("playermode", obj.playerMode);
         o.set("enablecursor", obj.enableCursor);
         o.set("enableanimatedbeatcursor", obj.enableAnimatedBeatCursor);
         o.set("enableelementhighlighting", obj.enableElementHighlighting);
@@ -30082,6 +30654,9 @@ class PlayerSettingsSerializer {
             case "enableplayer":
                 obj.enablePlayer = v;
                 return true;
+            case "playermode":
+                obj.playerMode = JsonHelper.parseEnum(v, PlayerMode);
+                return true;
             case "enablecursor":
                 obj.enableCursor = v;
                 return true;
@@ -30316,6 +30891,39 @@ class SectionSerializer {
     }
 }
 
+class SyncPointDataSerializer {
+    static fromJson(obj, m) {
+        if (!m) {
+            return;
+        }
+        JsonHelper.forEach(m, (v, k) => SyncPointDataSerializer.setProperty(obj, k, v));
+    }
+    static toJson(obj) {
+        if (!obj) {
+            return null;
+        }
+        const o = new Map();
+        o.set("baroccurence", obj.barOccurence);
+        o.set("modifiedtempo", obj.modifiedTempo);
+        o.set("millisecondoffset", obj.millisecondOffset);
+        return o;
+    }
+    static setProperty(obj, property, v) {
+        switch (property) {
+            case "baroccurence":
+                obj.barOccurence = v;
+                return true;
+            case "modifiedtempo":
+                obj.modifiedTempo = v;
+                return true;
+            case "millisecondoffset":
+                obj.millisecondOffset = v;
+                return true;
+        }
+        return false;
+    }
+}
+
 class AutomationSerializer {
     static fromJson(obj, m) {
         if (!m) {
@@ -30331,6 +30939,9 @@ class AutomationSerializer {
         o.set("islinear", obj.isLinear);
         o.set("type", obj.type);
         o.set("value", obj.value);
+        if (obj.syncPointValue) {
+            o.set("syncpointvalue", SyncPointDataSerializer.toJson(obj.syncPointValue));
+        }
         o.set("ratioposition", obj.ratioPosition);
         o.set("text", obj.text);
         return o;
@@ -30346,6 +30957,15 @@ class AutomationSerializer {
             case "value":
                 obj.value = v;
                 return true;
+            case "syncpointvalue":
+                if (v) {
+                    obj.syncPointValue = new SyncPointData();
+                    SyncPointDataSerializer.fromJson(obj.syncPointValue, v);
+                }
+                else {
+                    obj.syncPointValue = undefined;
+                }
+                return true;
             case "ratioposition":
                 obj.ratioPosition = v;
                 return true;
@@ -30411,6 +31031,9 @@ class MasterBarSerializer {
             o.set("section", SectionSerializer.toJson(obj.section));
         }
         o.set("tempoautomations", obj.tempoAutomations.map(i => AutomationSerializer.toJson(i)));
+        if (obj.syncPoints !== undefined) {
+            o.set("syncpoints", obj.syncPoints?.map(i => AutomationSerializer.toJson(i)));
+        }
         if (obj.fermata !== null) {
             const m = new Map();
             o.set("fermata", m);
@@ -30477,6 +31100,16 @@ class MasterBarSerializer {
                     obj.tempoAutomations.push(i);
                 }
                 return true;
+            case "syncpoints":
+                if (v) {
+                    obj.syncPoints = [];
+                    for (const o of v) {
+                        const i = new Automation();
+                        AutomationSerializer.fromJson(i, o);
+                        obj.addSyncPoint(i);
+                    }
+                }
+                return true;
             case "fermata":
                 obj.fermata = new Map();
                 JsonHelper.forEach(v, (v, k) => {
@@ -31768,6 +32401,31 @@ class RenderStylesheetSerializer {
     }
 }
 
+class BackingTrackSerializer {
+    static fromJson(obj, m) {
+        if (!m) {
+            return;
+        }
+        JsonHelper.forEach(m, (v, k) => BackingTrackSerializer.setProperty(obj, k, v));
+    }
+    static toJson(obj) {
+        if (!obj) {
+            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;
+    }
+}
+
 class HeaderFooterStyleSerializer {
     static fromJson(obj, m) {
         if (!m) {
@@ -31879,6 +32537,9 @@ class ScoreSerializer {
         o.set("defaultsystemslayout", obj.defaultSystemsLayout);
         o.set("systemslayout", obj.systemsLayout);
         o.set("stylesheet", RenderStylesheetSerializer.toJson(obj.stylesheet));
+        if (obj.backingTrack) {
+            o.set("backingtrack", BackingTrackSerializer.toJson(obj.backingTrack));
+        }
         if (obj.style) {
             o.set("style", ScoreStyleSerializer.toJson(obj.style));
         }
@@ -31947,6 +32608,15 @@ class ScoreSerializer {
             case "stylesheet":
                 RenderStylesheetSerializer.fromJson(obj.stylesheet, v);
                 return true;
+            case "backingtrack":
+                if (v) {
+                    obj.backingTrack = new BackingTrack();
+                    BackingTrackSerializer.fromJson(obj.backingTrack, v);
+                }
+                else {
+                    obj.backingTrack = undefined;
+                }
+                return true;
             case "style":
                 if (v) {
                     obj.style = new ScoreStyle();
@@ -32123,7 +32793,9 @@ class JsonConverter {
             case MidiEventType.ProgramChange:
                 return new ProgramChangeEvent(track, tick, JsonHelper.getValue(midiEvent, 'channel'), JsonHelper.getValue(midiEvent, 'program'));
             case MidiEventType.TempoChange:
-                return new TempoChangeEvent(tick, JsonHelper.getValue(midiEvent, 'microSecondsPerQuarterNote'));
+                const tempo = new TempoChangeEvent(tick, 0);
+                tempo.beatsPerMinute = JsonHelper.getValue(midiEvent, 'beatsPerMinute');
+                return tempo;
             case MidiEventType.PitchBend:
                 return new PitchBendEvent(track, tick, JsonHelper.getValue(midiEvent, 'channel'), JsonHelper.getValue(midiEvent, 'value'));
             case MidiEventType.PerNotePitchBend:
@@ -32198,7 +32870,7 @@ class JsonConverter {
                 o.set('program', midiEvent.program);
                 break;
             case MidiEventType.TempoChange:
-                o.set('microSecondsPerQuarterNote', midiEvent.microSecondsPerQuarterNote);
+                o.set('beatsPerMinute', midiEvent.beatsPerMinute);
                 break;
             case MidiEventType.PitchBend:
                 o.set('channel', midiEvent.channel);
@@ -32425,7 +33097,9 @@ class AlphaSynthWebWorker {
             endTime: e.endTime,
             currentTick: e.currentTick,
             endTick: e.endTick,
-            isSeek: e.isSeek
+            isSeek: e.isSeek,
+            originalTempo: e.originalTempo,
+            modifiedTempo: e.modifiedTempo
         });
     }
     onPlayerStateChanged(e) {
@@ -32471,7 +33145,9 @@ class AlphaSynthWebWorker {
             endTime: e.endTime,
             currentTick: e.currentTick,
             endTick: e.endTick,
-            isSeek: e.isSeek
+            isSeek: e.isSeek,
+            originalTempo: e.originalTempo,
+            modifiedTempo: e.modifiedTempo
         });
     }
     onMidiLoadFailed(e) {
@@ -33780,8 +34456,9 @@ class AlphaSynthMidiFileHandler {
     }
     addTempo(tick, tempo) {
         // bpm -> microsecond per quarter note
-        const tempoInUsq = (60000000 / tempo) | 0;
-        this._midiFile.addEvent(new TempoChangeEvent(tick, tempoInUsq));
+        const tempoEvent = new TempoChangeEvent(tick, 0);
+        tempoEvent.beatsPerMinute = tempo;
+        this._midiFile.addEvent(tempoEvent);
     }
     addBend(track, tick, channel, value) {
         if (value >= SynthConstants.MaxPitchWheel) {
@@ -35053,6 +35730,10 @@ class MidiFileGenerator {
          * Gets or sets whether transposition pitches should be applied to the individual midi events or not.
          */
         this.applyTranspositionPitches = true;
+        /**
+         * The computed sync points for synchronizing the midi file with an external backing track.
+         */
+        this.syncPoints = [];
         /**
          * Gets the transposition pitches for the individual midi channels.
          */
@@ -35079,13 +35760,17 @@ class MidiFileGenerator {
         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) {
-                this.generateMasterBar(bar, previousMasterBar, currentTick, currentTempo);
+                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;
                 }
@@ -35154,7 +35839,7 @@ class MidiFileGenerator {
         const value = Math.max(-32768, Math.min(32767, data * 8 - 1));
         return Math.max(value, -1) + 1;
     }
-    generateMasterBar(masterBar, previousMasterBar, currentTick, currentTempo) {
+    generateMasterBar(masterBar, previousMasterBar, currentTick, currentTempo, barOccurence) {
         // time signature
         if (!previousMasterBar ||
             previousMasterBar.timeSignatureDenominator !== masterBar.timeSignatureDenominator ||
@@ -35181,6 +35866,15 @@ class MidiFileGenerator {
         else {
             masterBarLookup.tempoChanges.push(new MasterBarTickLookupTempoChange(currentTick, currentTempo));
         }
+        const syncPoints = masterBar.syncPoints;
+        if (syncPoints) {
+            for (const syncPoint of syncPoints) {
+                if (syncPoint.syncPointValue.barOccurence === barOccurence) {
+                    const tick = currentTick + masterBarDuration * syncPoint.ratioPosition;
+                    this.syncPoints.push(new BackingTrackSyncPoint(tick, syncPoint.syncPointValue));
+                }
+            }
+        }
         masterBarLookup.masterBar = masterBar;
         masterBarLookup.start = currentTick;
         masterBarLookup.end = masterBarLookup.start + masterBarDuration;
@@ -37378,6 +38072,213 @@ class ActiveBeatsChangedEventArgs {
     }
 }
 
+class BackingTrackAudioSynthesizer {
+    constructor() {
+        this._midiEventQueue = new Queue();
+        this.masterVolume = 1;
+        this.metronomeVolume = 0;
+        this.outSampleRate = 44100;
+        this.currentTempo = 120;
+        this.timeSignatureNumerator = 4;
+        this.timeSignatureDenominator = 4;
+        this.activeVoiceCount = 0;
+    }
+    noteOffAll(_immediate) {
+    }
+    resetSoft() {
+    }
+    resetPresets() {
+    }
+    loadPresets(_hydra, _instrumentPrograms, _percussionKeys, _append) {
+    }
+    setupMetronomeChannel(_metronomeVolume) {
+    }
+    synthesizeSilent(_sampleCount) {
+        this.fakeSynthesize();
+    }
+    processMidiMessage(e) {
+    }
+    dispatchEvent(synthEvent) {
+        this._midiEventQueue.enqueue(synthEvent);
+    }
+    synthesize(_buffer, _bufferPos, _sampleCount) {
+        return this.fakeSynthesize();
+    }
+    fakeSynthesize() {
+        const processedEvents = [];
+        while (!this._midiEventQueue.isEmpty) {
+            const m = this._midiEventQueue.dequeue();
+            if (m.isMetronome && this.metronomeVolume > 0) ;
+            else if (m.event) {
+                this.processMidiMessage(m.event);
+            }
+            processedEvents.push(m);
+        }
+        return processedEvents;
+    }
+    applyTranspositionPitches(transpositionPitches) {
+    }
+    setChannelTranspositionPitch(channel, semitones) {
+    }
+    channelSetMute(channel, mute) {
+    }
+    channelSetSolo(channel, solo) {
+    }
+    resetChannelStates() {
+    }
+    channelSetMixVolume(channel, volume) {
+    }
+    hasSamplesForProgram(program) {
+        return true;
+    }
+    hasSamplesForPercussion(key) {
+        return true;
+    }
+}
+class BackingTrackPlayer extends AlphaSynthBase {
+    constructor(backingTrackOutput, bufferTimeInMilliseconds) {
+        super(backingTrackOutput, new BackingTrackAudioSynthesizer(), bufferTimeInMilliseconds);
+        this.synthesizer.output = backingTrackOutput;
+        this._backingTrackOutput = backingTrackOutput;
+        backingTrackOutput.timeUpdate.on(timePosition => {
+            const alphaTabTimePosition = this.sequencer.mainTimePositionFromBackingTrack(timePosition, backingTrackOutput.backingTrackDuration);
+            this.sequencer.fillMidiEventQueueToEndTime(alphaTabTimePosition);
+            this.synthesizer.fakeSynthesize();
+            this.updateTimePosition(alphaTabTimePosition, false);
+            this.checkForFinish();
+        });
+    }
+    updateMasterVolume(value) {
+        super.updateMasterVolume(value);
+        this._backingTrackOutput.masterVolume = value;
+    }
+    updatePlaybackSpeed(value) {
+        super.updatePlaybackSpeed(value);
+        this._backingTrackOutput.playbackRate = value;
+    }
+    onSampleRequest() {
+    }
+    loadMidiFile(midi) {
+        if (!this.isSoundFontLoaded) {
+            this.isSoundFontLoaded = true;
+            this.soundFontLoaded.trigger();
+        }
+        super.loadMidiFile(midi);
+    }
+    updateTimePosition(timePosition, isSeek) {
+        super.updateTimePosition(timePosition, isSeek);
+        if (isSeek) {
+            this._backingTrackOutput.seekTo(this.sequencer.mainTimePositionToBackingTrack(timePosition, this._backingTrackOutput.backingTrackDuration));
+        }
+    }
+    loadBackingTrack(score, syncPoints) {
+        const backingTrackInfo = score.backingTrack;
+        if (backingTrackInfo) {
+            this._backingTrackOutput.loadBackingTrack(backingTrackInfo);
+            this.sequencer.mainUpdateSyncPoints(syncPoints);
+            this.timePosition = 0;
+        }
+    }
+}
+
+class ExternalMediaSynthOutput {
+    constructor() {
+        // fake rate
+        this.sampleRate = 44100;
+        this._padding = 0;
+        this._seekPosition = 0;
+        this.ready = new EventEmitter();
+        this.samplesPlayed = new EventEmitterOfT();
+        this.timeUpdate = new EventEmitterOfT();
+        this.sampleRequest = new EventEmitter();
+    }
+    get handler() {
+        return this._handler;
+    }
+    set handler(value) {
+        if (value) {
+            if (this._seekPosition !== 0) {
+                value.seekTo(this._seekPosition);
+                this._seekPosition = 0;
+            }
+        }
+        this._handler = value;
+    }
+    get backingTrackDuration() {
+        return this.handler?.backingTrackDuration ?? 0;
+    }
+    get playbackRate() {
+        return this.handler?.playbackRate ?? 1;
+    }
+    set playbackRate(value) {
+        const handler = this.handler;
+        if (handler) {
+            handler.playbackRate = value;
+        }
+    }
+    get masterVolume() {
+        return this.handler?.masterVolume ?? 1;
+    }
+    set masterVolume(value) {
+        const handler = this.handler;
+        if (handler) {
+            handler.masterVolume = value;
+        }
+    }
+    seekTo(time) {
+        const handler = this.handler;
+        if (handler) {
+            handler.seekTo(time - this._padding);
+        }
+        else {
+            this._seekPosition = time - this._padding;
+        }
+    }
+    loadBackingTrack(backingTrack) {
+        this._padding = backingTrack.padding;
+    }
+    open(_bufferTimeInMilliseconds) {
+        this.ready.trigger();
+    }
+    updatePosition(currentTime) {
+        this.timeUpdate.trigger(currentTime + this._padding);
+    }
+    play() {
+        this.handler?.play();
+    }
+    destroy() {
+    }
+    pause() {
+        this.handler?.pause();
+    }
+    addSamples(_samples) {
+    }
+    resetSamples() {
+    }
+    activate() {
+    }
+    async enumerateOutputDevices() {
+        const empty = [];
+        return empty;
+    }
+    async setOutputDevice(_device) {
+    }
+    async getOutputDevice() {
+        return null;
+    }
+}
+class ExternalMediaPlayer extends BackingTrackPlayer {
+    get handler() {
+        return this.output.handler;
+    }
+    set handler(value) {
+        this.output.handler = value;
+    }
+    constructor(bufferTimeInMilliseconds) {
+        super(new ExternalMediaSynthOutput(), bufferTimeInMilliseconds);
+    }
+}
+
 class SelectionInfo {
     constructor(beat) {
         this.bounds = null;
@@ -37391,6 +38292,12 @@ class SelectionInfo {
  * @csharp_public
  */
 class AlphaTabApiBase {
+    /**
+     * The actual player mode which is currently active (e.g. allows determining whether a backing track or the synthesizer is active).
+     */
+    get actualPlayerMode() {
+        return this._actualPlayerMode;
+    }
     /**
      * The score holding all information about the song being rendered
      * @category Properties - Core
@@ -37460,10 +38367,8 @@ class AlphaTabApiBase {
         this._isDestroyed = false;
         this._score = null;
         this._tracks = [];
+        this._actualPlayerMode = PlayerMode.Disabled;
         this._tickCache = null;
-        /**
-         * Gets the alphaSynth player used for playback. This is the low-level API to the Midi synthesizer used for playback.
-         */
         /**
          * The alphaSynth player used for playback.
          * @remarks
@@ -38500,6 +39405,10 @@ class AlphaTabApiBase {
         this.container = uiFacade.rootContainer;
         uiFacade.initialize(this, settings);
         Logger.logLevel = this.settings.core.logLevel;
+        // backwards compatibility: remove in 2.0
+        if (this.settings.player.playerMode === PlayerMode.Disabled && this.settings.player.enablePlayer) {
+            this.settings.player.playerMode = PlayerMode.EnabledAutomatic;
+        }
         Environment.printEnvironmentInfo(false);
         this.canvasElement = uiFacade.createCanvasElement();
         this.container.appendChild(this.canvasElement);
@@ -38543,7 +39452,7 @@ class AlphaTabApiBase {
             this.appendRenderResult(null); // marks last element
         });
         this.renderer.error.on(this.onError.bind(this));
-        if (this.settings.player.enablePlayer) {
+        if (this.settings.player.playerMode !== PlayerMode.Disabled) {
             this.setupPlayer();
         }
         this.setupClickHandling();
@@ -38635,10 +39544,9 @@ class AlphaTabApiBase {
         }
         this.renderer.updateSettings(this.settings);
         // enable/disable player if needed
-        if (this.settings.player.enablePlayer) {
-            this.setupPlayer();
-            if (score) {
-                this.player?.applyTranspositionPitches(MidiFileGenerator.buildTranspositionPitches(score, this.settings));
+        if (this.settings.player.playerMode !== PlayerMode.Disabled) {
+            if (this.setupPlayer() && score) {
+                this.loadMidiForScore();
             }
         }
         else {
@@ -39570,13 +40478,51 @@ class AlphaTabApiBase {
         this.destroyCursors();
     }
     setupPlayer() {
+        let mode = this.settings.player.playerMode;
+        if (mode === PlayerMode.EnabledAutomatic) {
+            const score = this.score;
+            if (!score) {
+                return false;
+            }
+            if (score?.backingTrack?.rawAudioFile) {
+                mode = PlayerMode.EnabledBackingTrack;
+            }
+            else {
+                mode = PlayerMode.EnabledSynthesizer;
+            }
+        }
+        if (mode !== this._actualPlayerMode) {
+            this.destroyPlayer();
+        }
         this.updateCursors();
-        if (this.player) {
-            return;
+        this._actualPlayerMode = mode;
+        switch (mode) {
+            case PlayerMode.Disabled:
+                this.destroyPlayer();
+                return false;
+            case PlayerMode.EnabledSynthesizer:
+                if (this.player) {
+                    return true;
+                }
+                // new player needed
+                this.player = this.uiFacade.createWorkerPlayer();
+                break;
+            case PlayerMode.EnabledBackingTrack:
+                if (this.player) {
+                    return true;
+                }
+                // new player needed
+                this.player = this.uiFacade.createBackingTrackPlayer();
+                break;
+            case PlayerMode.EnabledExternalMedia:
+                if (this.player) {
+                    return true;
+                }
+                this.player = new ExternalMediaPlayer(this.settings.player.bufferTimeInMilliseconds);
+                break;
         }
-        this.player = this.uiFacade.createWorkerPlayer();
         if (!this.player) {
-            return;
+            return false;
         }
         this.player.ready.on(() => {
             this.loadMidiForScore();
@@ -39605,6 +40551,7 @@ class AlphaTabApiBase {
         this.player.playbackRangeChanged.on(this.onPlaybackRangeChanged.bind(this));
         this.player.finished.on(this.onPlayerFinished.bind(this));
         this.setupPlayerEvents();
+        return false;
     }
     loadMidiForScore() {
         if (!this.score) {
@@ -39626,6 +40573,7 @@ class AlphaTabApiBase {
         const player = this.player;
         if (player) {
             player.loadMidiFile(midiFile);
+            player.loadBackingTrack(score, generator.syncPoints);
             player.applyTranspositionPitches(generator.transpositionPitches);
         }
     }
@@ -40042,7 +40990,7 @@ class AlphaTabApiBase {
                 this._selectionWrapper = cursors.selectionWrapper;
             }
             if (this._currentBeat !== null) {
-                this.cursorUpdateBeat(this._currentBeat, false, this._previousTick > 10, true);
+                this.cursorUpdateBeat(this._currentBeat, false, this._previousTick > 10, 1, true);
             }
         }
         else if (!this.settings.player.enableCursor && this._cursorWrapper) {
@@ -40057,13 +41005,14 @@ class AlphaTabApiBase {
         // we need to update our position caches if we render a tablature
         this.renderer.postRenderFinished.on(() => {
             this._currentBeat = null;
-            this.cursorUpdateTick(this._previousTick, false, this._previousTick > 10);
+            this.cursorUpdateTick(this._previousTick, false, 1, this._previousTick > 10);
         });
         if (this.player) {
             this.player.positionChanged.on(e => {
                 this._previousTick = e.currentTick;
                 this.uiFacade.beginInvoke(() => {
-                    this.cursorUpdateTick(e.currentTick, false, false, e.isSeek);
+                    const cursorSpeed = e.modifiedTempo / e.originalTempo;
+                    this.cursorUpdateTick(e.currentTick, false, cursorSpeed, false, e.isSeek);
                 });
             });
             this.player.stateChanged.on(e => {
@@ -40084,14 +41033,15 @@ class AlphaTabApiBase {
      * @param stop
      * @param shouldScroll whether we should scroll to the bar (if scrolling is active)
      */
-    cursorUpdateTick(tick, stop, shouldScroll = false, forceUpdate = false) {
+    cursorUpdateTick(tick, stop, cursorSpeed, shouldScroll = false, forceUpdate = false) {
+        this._previousTick = tick;
         const cache = this._tickCache;
         if (cache) {
             const tracks = this._trackIndexLookup;
             if (tracks != null && tracks.size > 0) {
                 const beat = cache.findBeat(tracks, tick, this._currentBeat);
                 if (beat) {
-                    this.cursorUpdateBeat(beat, stop, shouldScroll, forceUpdate || this.playerState === PlayerState.Paused);
+                    this.cursorUpdateBeat(beat, stop, shouldScroll, cursorSpeed, forceUpdate || this.playerState === PlayerState.Paused);
                 }
             }
         }
@@ -40099,7 +41049,7 @@ class AlphaTabApiBase {
     /**
      * updates the cursors to highlight the specified beat
      */
-    cursorUpdateBeat(lookupResult, stop, shouldScroll, forceUpdate = false) {
+    cursorUpdateBeat(lookupResult, stop, shouldScroll, cursorSpeed, forceUpdate = false) {
         const beat = lookupResult.beat;
         const nextBeat = lookupResult.nextBeat?.beat ?? null;
         const duration = lookupResult.duration;
@@ -40131,7 +41081,7 @@ class AlphaTabApiBase {
         this._previousCursorCache = cache;
         this._previousStateForCursor = this._playerState;
         this.uiFacade.beginInvoke(() => {
-            this.internalCursorUpdateBeat(beat, nextBeat, duration, stop, beatsToHighlight, cache, beatBoundings, shouldScroll, lookupResult.cursorMode);
+            this.internalCursorUpdateBeat(beat, nextBeat, duration, stop, beatsToHighlight, cache, beatBoundings, shouldScroll, lookupResult.cursorMode, cursorSpeed);
         });
     }
     /**
@@ -40196,7 +41146,7 @@ class AlphaTabApiBase {
             }
         }
     }
-    internalCursorUpdateBeat(beat, nextBeat, duration, stop, beatsToHighlight, cache, beatBoundings, shouldScroll, cursorMode) {
+    internalCursorUpdateBeat(beat, nextBeat, duration, stop, beatsToHighlight, cache, beatBoundings, shouldScroll, cursorMode, cursorSpeed) {
         const barCursor = this._barCursor;
         const beatCursor = this._beatCursor;
         const barBoundings = beatBoundings.barBounds.masterBarBounds;
@@ -40205,12 +41155,29 @@ class AlphaTabApiBase {
         if (barCursor) {
             barCursor.setBounds(barBounds.x, barBounds.y, barBounds.w, barBounds.h);
         }
+        let nextBeatX = barBoundings.visualBounds.x + barBoundings.visualBounds.w;
+        // get position of next beat on same system
+        if (nextBeat && cursorMode === MidiTickLookupFindBeatResultCursorMode.ToNextBext) {
+            // if we are moving within the same bar or to the next bar
+            // transition to the next beat, otherwise transition to the end of the bar.
+            const nextBeatBoundings = cache.findBeat(nextBeat);
+            if (nextBeatBoundings &&
+                nextBeatBoundings.barBounds.masterBarBounds.staffSystemBounds === barBoundings.staffSystemBounds) {
+                nextBeatX = nextBeatBoundings.onNotesX;
+            }
+        }
+        let startBeatX = beatBoundings.onNotesX;
         if (beatCursor) {
-            // move beat to start position immediately
+            // relative positioning of the cursor
             if (this.settings.player.enableAnimatedBeatCursor) {
-                beatCursor.stopAnimation();
+                const animationWidth = nextBeatX - beatBoundings.onNotesX;
+                const relativePosition = this._previousTick - this._currentBeat.start;
+                const ratioPosition = relativePosition / this._currentBeat.tickDuration;
+                startBeatX = beatBoundings.onNotesX + animationWidth * ratioPosition;
+                duration -= duration * ratioPosition;
+                beatCursor.transitionToX(0, startBeatX);
             }
-            beatCursor.setBounds(beatBoundings.onNotesX, barBounds.y, 1, barBounds.h);
+            beatCursor.setBounds(startBeatX, barBounds.y, 1, barBounds.h);
         }
         // if playing, animate the cursor to the next beat
         if (this.settings.player.enableElementHighlighting) {
@@ -40230,22 +41197,11 @@ class AlphaTabApiBase {
             shouldNotifyBeatChange = true;
         }
         if (this.settings.player.enableAnimatedBeatCursor && beatCursor) {
-            let nextBeatX = barBoundings.visualBounds.x + barBoundings.visualBounds.w;
-            // get position of next beat on same system
-            if (nextBeat && cursorMode === MidiTickLookupFindBeatResultCursorMode.ToNextBext) {
-                // if we are moving within the same bar or to the next bar
-                // transition to the next beat, otherwise transition to the end of the bar.
-                const nextBeatBoundings = cache.findBeat(nextBeat);
-                if (nextBeatBoundings &&
-                    nextBeatBoundings.barBounds.masterBarBounds.staffSystemBounds === barBoundings.staffSystemBounds) {
-                    nextBeatX = nextBeatBoundings.onNotesX;
-                }
-            }
             if (isPlayingUpdate) {
                 // we need to put the transition to an own animation frame
                 // otherwise the stop animation above is not applied.
                 this.uiFacade.beginInvoke(() => {
-                    beatCursor.transitionToX(duration / this.playbackSpeed, nextBeatX);
+                    beatCursor.transitionToX(duration / cursorSpeed, nextBeatX);
                 });
             }
         }
@@ -40276,7 +41232,7 @@ class AlphaTabApiBase {
         if (this._isDestroyed) {
             return;
         }
-        if (this.settings.player.enablePlayer &&
+        if (this.settings.player.playerMode !== PlayerMode.Disabled &&
             this.settings.player.enableCursor &&
             this.settings.player.enableUserInteraction) {
             this._selectionStart = new SelectionInfo(beat);
@@ -40318,7 +41274,7 @@ class AlphaTabApiBase {
         if (this._isDestroyed) {
             return;
         }
-        if (this.settings.player.enablePlayer &&
+        if (this.settings.player.playerMode !== PlayerMode.Disabled &&
             this.settings.player.enableCursor &&
             this.settings.player.enableUserInteraction) {
             if (this._selectionEnd) {
@@ -40339,7 +41295,7 @@ class AlphaTabApiBase {
                 // move to selection start
                 this._currentBeat = null; // reset current beat so it is updating the cursor
                 if (this._playerState === PlayerState.Paused) {
-                    this.cursorUpdateTick(this._tickCache.getBeatStart(this._selectionStart.beat), false);
+                    this.cursorUpdateTick(this._tickCache.getBeatStart(this._selectionStart.beat), false, 1);
                 }
                 this.tickPosition = realMasterBarStart + this._selectionStart.beat.playbackStart;
                 // set playback range
@@ -40451,7 +41407,7 @@ class AlphaTabApiBase {
         });
         this.renderer.postRenderFinished.on(() => {
             if (!this._selectionStart ||
-                !this.settings.player.enablePlayer ||
+                this.settings.player.playerMode === PlayerMode.Disabled ||
                 !this.settings.player.enableCursor ||
                 !this.settings.player.enableUserInteraction) {
                 return;
@@ -40529,6 +41485,9 @@ class AlphaTabApiBase {
         }
         this.scoreLoaded.trigger(score);
         this.uiFacade.triggerEvent(this.container, 'scoreLoaded', score);
+        if (this.setupPlayer()) {
+            this.loadMidiForScore();
+        }
     }
     onResize(e) {
         if (this._isDestroyed) {
@@ -41269,52 +42228,14 @@ class AlphaSynthWebAudioSynthOutputDevice {
     }
 }
 /**
+ * Some shared web audio stuff.
  * @target web
  */
-class AlphaSynthWebAudioOutputBase {
-    constructor() {
-        this._context = null;
-        this._buffer = null;
-        this._source = null;
-        this.ready = new EventEmitter();
-        this.samplesPlayed = new EventEmitterOfT();
-        this.sampleRequest = new EventEmitter();
-        this._knownDevices = [];
-    }
-    get sampleRate() {
-        return this._context ? this._context.sampleRate : AlphaSynthWebAudioOutputBase.PreferredSampleRate;
-    }
-    activate(resumedCallback) {
-        if (!this._context) {
-            this._context = this.createAudioContext();
-        }
-        if (this._context.state === 'suspended' || this._context.state === 'interrupted') {
-            Logger.debug('WebAudio', 'Audio Context is suspended, trying resume');
-            this._context.resume().then(() => {
-                Logger.debug('WebAudio', `Audio Context resume success: state=${this._context?.state}, sampleRate:${this._context?.sampleRate}`);
-                if (resumedCallback) {
-                    resumedCallback();
-                }
-            }, reason => {
-                Logger.warning('WebAudio', `Audio Context resume failed: state=${this._context?.state}, sampleRate:${this._context?.sampleRate}, reason=${reason}`);
-            });
-        }
+class WebAudioHelper {
+    static findKnownDevice(sinkId) {
+        return WebAudioHelper._knownDevices.find(d => d.deviceId === sinkId);
     }
-    patchIosSampleRate() {
-        const ua = navigator.userAgent;
-        if (ua.indexOf('iPhone') !== -1 || ua.indexOf('iPad') !== -1) {
-            const context = this.createAudioContext();
-            const buffer = context.createBuffer(1, 1, AlphaSynthWebAudioOutputBase.PreferredSampleRate);
-            const dummy = context.createBufferSource();
-            dummy.buffer = buffer;
-            dummy.connect(context.destination);
-            dummy.start(0);
-            dummy.disconnect(0);
-            // tslint:disable-next-line: no-floating-promises
-            context.close();
-        }
-    }
-    createAudioContext() {
+    static createAudioContext() {
         if ('AudioContext' in Environment.globalThis) {
             return new AudioContext();
         }
@@ -41323,73 +42244,18 @@ class AlphaSynthWebAudioOutputBase {
         }
         throw new AlphaTabError(AlphaTabErrorType.General, 'AudioContext not found');
     }
-    open(bufferTimeInMilliseconds) {
-        this.patchIosSampleRate();
-        this._context = this.createAudioContext();
-        const ctx = this._context;
-        if (ctx.state === 'suspended') {
-            this.registerResumeHandler();
-        }
-    }
-    registerResumeHandler() {
-        this._resumeHandler = (() => {
-            this.activate(() => {
-                this.unregisterResumeHandler();
-            });
-        }).bind(this);
-        document.body.addEventListener('touchend', this._resumeHandler, false);
-        document.body.addEventListener('click', this._resumeHandler, false);
-    }
-    unregisterResumeHandler() {
-        const resumeHandler = this._resumeHandler;
-        if (resumeHandler) {
-            document.body.removeEventListener('touchend', resumeHandler, false);
-            document.body.removeEventListener('click', resumeHandler, false);
-        }
-    }
-    play() {
-        const ctx = this._context;
-        this.activate();
-        // create an empty buffer source (silence)
-        this._buffer = ctx.createBuffer(2, AlphaSynthWebAudioOutputBase.BufferSize, ctx.sampleRate);
-        this._source = ctx.createBufferSource();
-        this._source.buffer = this._buffer;
-        this._source.loop = true;
-    }
-    pause() {
-        if (this._source) {
-            this._source.stop(0);
-            this._source.disconnect();
-        }
-        this._source = null;
-    }
-    destroy() {
-        this.pause();
-        this._context?.close();
-        this._context = null;
-        this.unregisterResumeHandler();
-    }
-    onSamplesPlayed(numberOfSamples) {
-        this.samplesPlayed.trigger(numberOfSamples);
-    }
-    onSampleRequest() {
-        this.sampleRequest.trigger();
-    }
-    onReady() {
-        this.ready.trigger();
-    }
-    async checkSinkIdSupport() {
+    static async checkSinkIdSupport() {
         // https://caniuse.com/mdn-api_audiocontext_sinkid
-        const context = this._context ?? this.createAudioContext();
+        const context = WebAudioHelper.createAudioContext();
         if (!('setSinkId' in context)) {
             Logger.warning('WebAudio', 'Browser does not support changing the output device');
             return false;
         }
         return true;
     }
-    async enumerateOutputDevices() {
+    static async enumerateOutputDevices() {
         try {
-            if (!(await this.checkSinkIdSupport())) {
+            if (!(await WebAudioHelper.checkSinkIdSupport())) {
                 return [];
             }
             // Request permissions
@@ -41430,7 +42296,7 @@ class AlphaSynthWebAudioOutputBase {
             if (defaultDevice) {
                 defaultDevice.isDefault = true;
             }
-            this._knownDevices = final;
+            WebAudioHelper._knownDevices = final;
             return final;
         }
         catch (e) {
@@ -41438,8 +42304,113 @@ class AlphaSynthWebAudioOutputBase {
             return [];
         }
     }
+}
+WebAudioHelper._knownDevices = [];
+/**
+ * @target web
+ */
+class AlphaSynthWebAudioOutputBase {
+    constructor() {
+        this._context = null;
+        this._buffer = null;
+        this._source = null;
+        this.ready = new EventEmitter();
+        this.samplesPlayed = new EventEmitterOfT();
+        this.sampleRequest = new EventEmitter();
+    }
+    get sampleRate() {
+        return this._context ? this._context.sampleRate : AlphaSynthWebAudioOutputBase.PreferredSampleRate;
+    }
+    activate(resumedCallback) {
+        if (!this._context) {
+            this._context = WebAudioHelper.createAudioContext();
+        }
+        if (this._context.state === 'suspended' || this._context.state === 'interrupted') {
+            Logger.debug('WebAudio', 'Audio Context is suspended, trying resume');
+            this._context.resume().then(() => {
+                Logger.debug('WebAudio', `Audio Context resume success: state=${this._context?.state}, sampleRate:${this._context?.sampleRate}`);
+                if (resumedCallback) {
+                    resumedCallback();
+                }
+            }, reason => {
+                Logger.warning('WebAudio', `Audio Context resume failed: state=${this._context?.state}, sampleRate:${this._context?.sampleRate}, reason=${reason}`);
+            });
+        }
+    }
+    patchIosSampleRate() {
+        const ua = navigator.userAgent;
+        if (ua.indexOf('iPhone') !== -1 || ua.indexOf('iPad') !== -1) {
+            const context = WebAudioHelper.createAudioContext();
+            const buffer = context.createBuffer(1, 1, AlphaSynthWebAudioOutputBase.PreferredSampleRate);
+            const dummy = context.createBufferSource();
+            dummy.buffer = buffer;
+            dummy.connect(context.destination);
+            dummy.start(0);
+            dummy.disconnect(0);
+            // tslint:disable-next-line: no-floating-promises
+            context.close();
+        }
+    }
+    open(bufferTimeInMilliseconds) {
+        this.patchIosSampleRate();
+        this._context = WebAudioHelper.createAudioContext();
+        const ctx = this._context;
+        if (ctx.state === 'suspended') {
+            this.registerResumeHandler();
+        }
+    }
+    registerResumeHandler() {
+        this._resumeHandler = (() => {
+            this.activate(() => {
+                this.unregisterResumeHandler();
+            });
+        }).bind(this);
+        document.body.addEventListener('touchend', this._resumeHandler, false);
+        document.body.addEventListener('click', this._resumeHandler, false);
+    }
+    unregisterResumeHandler() {
+        const resumeHandler = this._resumeHandler;
+        if (resumeHandler) {
+            document.body.removeEventListener('touchend', resumeHandler, false);
+            document.body.removeEventListener('click', resumeHandler, false);
+        }
+    }
+    play() {
+        const ctx = this._context;
+        this.activate();
+        // create an empty buffer source (silence)
+        this._buffer = ctx.createBuffer(2, AlphaSynthWebAudioOutputBase.BufferSize, ctx.sampleRate);
+        this._source = ctx.createBufferSource();
+        this._source.buffer = this._buffer;
+        this._source.loop = true;
+    }
+    pause() {
+        if (this._source) {
+            this._source.stop(0);
+            this._source.disconnect();
+        }
+        this._source = null;
+    }
+    destroy() {
+        this.pause();
+        this._context?.close();
+        this._context = null;
+        this.unregisterResumeHandler();
+    }
+    onSamplesPlayed(numberOfSamples) {
+        this.samplesPlayed.trigger(numberOfSamples);
+    }
+    onSampleRequest() {
+        this.sampleRequest.trigger();
+    }
+    onReady() {
+        this.ready.trigger();
+    }
+    enumerateOutputDevices() {
+        return WebAudioHelper.enumerateOutputDevices();
+    }
     async setOutputDevice(device) {
-        if (!(await this.checkSinkIdSupport())) {
+        if (!(await WebAudioHelper.checkSinkIdSupport())) {
             return;
         }
         // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/setSinkId
@@ -41451,7 +42422,7 @@ class AlphaSynthWebAudioOutputBase {
         }
     }
     async getOutputDevice() {
-        if (!(await this.checkSinkIdSupport())) {
+        if (!(await WebAudioHelper.checkSinkIdSupport())) {
             return null;
         }
         // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/sinkId
@@ -41460,7 +42431,7 @@ class AlphaSynthWebAudioOutputBase {
             return null;
         }
         // fast path -> cached devices list
-        let device = this._knownDevices.find(d => d.deviceId === sinkId);
+        let device = WebAudioHelper.findKnownDevice(sinkId);
         if (device) {
             return device;
         }
@@ -41908,7 +42879,7 @@ class AlphaSynthWebWorkerApi {
             case 'alphaSynth.positionChanged':
                 this._timePosition = data.currentTime;
                 this._tickPosition = data.currentTick;
-                this.positionChanged.trigger(new PositionChangedEventArgs(data.currentTime, data.endTime, data.currentTick, data.endTick, data.isSeek));
+                this.positionChanged.trigger(new PositionChangedEventArgs(data.currentTime, data.endTime, data.currentTick, data.endTick, data.isSeek, data.originalTempo, data.modifiedTempo));
                 break;
             case 'alphaSynth.midiEventsPlayed':
                 this.midiEventsPlayed.trigger(new MidiEventsPlayedEventArgs(data.events.map(JsonConverter.jsObjectToMidiEvent)));
@@ -41932,7 +42903,7 @@ class AlphaSynthWebWorkerApi {
                 break;
             case 'alphaSynth.midiLoaded':
                 this.checkReadyForPlayback();
-                this.midiLoaded.trigger(new PositionChangedEventArgs(data.currentTime, data.endTime, data.currentTick, data.endTick, data.isSeek));
+                this.midiLoaded.trigger(new PositionChangedEventArgs(data.currentTime, data.endTime, data.currentTick, data.endTick, data.isSeek, data.originalTempo, data.modifiedTempo));
                 break;
             case 'alphaSynth.midiLoadFailed':
                 this.checkReadyForPlayback();
@@ -41982,6 +42953,8 @@ class AlphaSynthWebWorkerApi {
         this._outputIsReady = true;
         this.checkReady();
     }
+    loadBackingTrack(_score) {
+    }
 }
 
 /**
@@ -42349,6 +43322,123 @@ class ScalableHtmlElementContainer extends HtmlElementContainer {
     }
 }
 
+/**
+ * @target web
+ */
+class AudioElementBackingTrackSynthOutput {
+    constructor() {
+        // fake rate
+        this.sampleRate = 44100;
+        this._padding = 0;
+        this._updateInterval = 0;
+        this.ready = new EventEmitter();
+        this.samplesPlayed = new EventEmitterOfT();
+        this.timeUpdate = new EventEmitterOfT();
+        this.sampleRequest = new EventEmitter();
+    }
+    get backingTrackDuration() {
+        const duration = this.audioElement.duration ?? 0;
+        return Number.isFinite(duration) ? duration * 1000 : 0;
+    }
+    get playbackRate() {
+        return this.audioElement.playbackRate;
+    }
+    set playbackRate(value) {
+        this.audioElement.playbackRate = value;
+    }
+    get masterVolume() {
+        return this.audioElement.volume;
+    }
+    set masterVolume(value) {
+        this.audioElement.volume = value;
+    }
+    seekTo(time) {
+        this.audioElement.currentTime = time / 1000 - this._padding;
+    }
+    loadBackingTrack(backingTrack) {
+        if (this.audioElement?.src) {
+            URL.revokeObjectURL(this.audioElement.src);
+        }
+        this._padding = backingTrack.padding / 1000;
+        const blob = new Blob([backingTrack.rawAudioFile]);
+        this.audioElement.src = URL.createObjectURL(blob);
+    }
+    open(_bufferTimeInMilliseconds) {
+        const audioElement = document.createElement('audio');
+        audioElement.style.display = 'none';
+        document.body.appendChild(audioElement);
+        audioElement.addEventListener('timeupdate', () => {
+            this.updatePosition();
+        });
+        this.audioElement = audioElement;
+        this.ready.trigger();
+    }
+    updatePosition() {
+        const timePos = (this.audioElement.currentTime + this._padding) * 1000;
+        this.timeUpdate.trigger(timePos);
+    }
+    play() {
+        this.audioElement.play();
+        this._updateInterval = window.setInterval(() => {
+            this.updatePosition();
+        }, 50);
+    }
+    destroy() {
+        const audioElement = this.audioElement;
+        if (audioElement) {
+            document.body.removeChild(audioElement);
+        }
+    }
+    pause() {
+        this.audioElement.pause();
+        window.clearInterval(this._updateInterval);
+    }
+    addSamples(_samples) {
+    }
+    resetSamples() {
+    }
+    activate() {
+    }
+    async enumerateOutputDevices() {
+        return WebAudioHelper.enumerateOutputDevices();
+    }
+    async setOutputDevice(device) {
+        if (!(await WebAudioHelper.checkSinkIdSupport())) {
+            return;
+        }
+        // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/setSinkId
+        if (!device) {
+            await this.audioElement.setSinkId('');
+        }
+        else {
+            await this.audioElement.setSinkId(device.deviceId);
+        }
+    }
+    async getOutputDevice() {
+        if (!(await WebAudioHelper.checkSinkIdSupport())) {
+            return null;
+        }
+        // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/sinkId
+        const sinkId = this.audioElement.sinkId;
+        if (typeof sinkId !== 'string' || sinkId === '' || sinkId === 'default') {
+            return null;
+        }
+        // fast path -> cached devices list
+        let device = WebAudioHelper.findKnownDevice(sinkId);
+        if (device) {
+            return device;
+        }
+        // slow path -> enumerate devices
+        const allDevices = await this.enumerateOutputDevices();
+        device = allDevices.find(d => d.deviceId === sinkId);
+        if (device) {
+            return device;
+        }
+        Logger.warning('WebAudio', 'Could not find output device in device list', sinkId, allDevices);
+        return null;
+    }
+}
+
 /**
  * @target web
  */
@@ -42985,6 +44075,9 @@ class BrowserUiFacade {
             window.requestAnimationFrame(step);
         }
     }
+    createBackingTrackPlayer() {
+        return new BackingTrackPlayer(new AudioElementBackingTrackSynthOutput(), this._api.settings.player.bufferTimeInMilliseconds);
+    }
 }
 
 /**
@@ -43127,7 +44220,7 @@ class AlphaTabApi extends AlphaTabApiBase {
         settings.core.file = null;
         settings.core.tracks = null;
         settings.player.enableCursor = false;
-        settings.player.enablePlayer = false;
+        settings.player.playerMode = PlayerMode.Disabled;
         settings.player.enableElementHighlighting = false;
         settings.player.enableUserInteraction = false;
         settings.player.soundFont = null;
@@ -57088,96 +58181,6 @@ class CapellaImporter extends ScoreImporter {
     }
 }
 
-/**
- * A very basic polyfill of the ResizeObserver which triggers
- * a the callback on window resize for all registered targets.
- * @target web
- */
-class ResizeObserverPolyfill {
-    constructor(callback) {
-        this._targets = new Set();
-        this._callback = callback;
-        window.addEventListener('resize', this.onWindowResize.bind(this), false);
-    }
-    observe(target) {
-        this._targets.add(target);
-    }
-    unobserve(target) {
-        this._targets.delete(target);
-    }
-    disconnect() {
-        this._targets.clear();
-    }
-    onWindowResize() {
-        const entries = [];
-        for (const t of this._targets) {
-            entries.push({
-                target: t,
-                // not used by alphaTab
-                contentRect: undefined,
-                borderBoxSize: undefined,
-                contentBoxSize: [],
-                devicePixelContentBoxSize: []
-            });
-        }
-        this._callback(entries, this);
-    }
-}
-
-/**
- * A polyfill of the InsersectionObserver
- * @target web
- */
-class IntersectionObserverPolyfill {
-    constructor(callback) {
-        this._elements = [];
-        let timer = null;
-        const oldCheck = this.check.bind(this);
-        this.check = () => {
-            if (!timer) {
-                timer = setTimeout(() => {
-                    oldCheck();
-                    timer = null;
-                }, 100);
-            }
-        };
-        this._callback = callback;
-        window.addEventListener('resize', this.check, true);
-        document.addEventListener('scroll', this.check, true);
-    }
-    observe(target) {
-        if (this._elements.indexOf(target) >= 0) {
-            return;
-        }
-        this._elements.push(target);
-        this.check();
-    }
-    unobserve(target) {
-        this._elements = this._elements.filter(item => {
-            return item !== target;
-        });
-    }
-    check() {
-        const entries = [];
-        for (const element of this._elements) {
-            const rect = element.getBoundingClientRect();
-            const isVisible = rect.top + rect.height >= 0 &&
-                rect.top <= window.innerHeight &&
-                rect.left + rect.width >= 0 &&
-                rect.left <= window.innerWidth;
-            if (isVisible) {
-                entries.push({
-                    target: element,
-                    isIntersecting: true
-                });
-            }
-        }
-        if (entries.length) {
-            this._callback(entries, this);
-        }
-    }
-}
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -59293,9 +60296,9 @@ class VersionInfo {
         print(`build date: ${VersionInfo.date}`);
     }
 }
-VersionInfo.version = '1.6.0-alpha.1399';
-VersionInfo.date = '2025-05-06T02:05:53.707Z';
-VersionInfo.commit = 'b35f0f77c217a628a19f8346512c00d14c9ee778';
+VersionInfo.version = '1.6.0-alpha.1403';
+VersionInfo.date = '2025-05-09T02:06:22.101Z';
+VersionInfo.commit = '3644a11f557063573413de459c607a1f9c302a6a';
 
 /**
  * A factory for custom layout engines.
@@ -59766,29 +60769,6 @@ class Environment {
         if (Environment.webPlatform === WebPlatform.Browser || Environment.webPlatform === WebPlatform.BrowserModule) {
             Environment.registerJQueryPlugin();
             Environment.HighDpiFactor = window.devicePixelRatio;
-            // ResizeObserver API does not yet exist so long on Safari (only start 2020 with iOS Safari 13.7 and Desktop 13.1)
-            // so we better add a polyfill for it
-            if (!('ResizeObserver' in Environment.globalThis)) {
-                Environment.globalThis.ResizeObserver = ResizeObserverPolyfill;
-            }
-            // IntersectionObserver API does not on older iOS versions
-            // so we better add a polyfill for it
-            if (!('IntersectionObserver' in Environment.globalThis)) {
-                Environment.globalThis.IntersectionObserver = IntersectionObserverPolyfill;
-            }
-            if (!('replaceChildren' in Element.prototype)) {
-                Element.prototype.replaceChildren = function (...nodes) {
-                    this.innerHTML = '';
-                    this.append(...nodes);
-                };
-                Document.prototype.replaceChildren = Element.prototype.replaceChildren;
-                DocumentFragment.prototype.replaceChildren = Element.prototype.replaceChildren;
-            }
-            if (!('replaceAll' in String.prototype)) {
-                String.prototype.replaceAll = function (str, newStr) {
-                    return this.replace(new RegExp(str, 'g'), newStr);
-                };
-            }
         }
         Environment.createWebWorker = createWebWorker;
         Environment.createAudioWorklet = createAudioWorklet;
@@ -63520,6 +64500,7 @@ const _barrel$3 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty(
     get AccidentalType () { return AccidentalType; },
     Automation,
     get AutomationType () { return AutomationType; },
+    BackingTrack,
     Bar,
     get BarLineStyle () { return BarLineStyle; },
     BarStyle,
@@ -63582,6 +64563,7 @@ const _barrel$3 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty(
     Staff,
     SustainPedalMarker,
     get SustainPedalMarkerType () { return SustainPedalMarkerType; },
+    SyncPointData,
     Track,
     get TrackNameMode () { return TrackNameMode; },
     get TrackNameOrientation () { return TrackNameOrientation; },
@@ -63646,4 +64628,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, 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, 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 };