@coderline/alphatab 1.6.0-alpha.1401 → 1.6.0-alpha.1405

package/dist/alphaTab.js

@@ -1,5 +1,5 @@
 /*!
- * alphaTab v1.6.0-alpha.1401 (develop, build 1401)
+ * alphaTab v1.6.0-alpha.1405 (develop, build 1405)
  *
  * Copyright © 2025, Daniel Kuschny and Contributors, All rights reserved.
  *
@@ -55,7 +55,127 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.alphaTab = {}));
 })(this, (function (exports) { 'use strict';
 
-    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.
@@ -1279,7 +1399,37 @@
          * 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
@@ -2578,6 +2728,16 @@
             }
             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;
 
@@ -5672,6 +5832,21 @@
         }
     }
 
+    // <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
@@ -5683,6 +5858,7 @@
             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;
@@ -14128,6 +14304,21 @@
         }
     }
 
+    /**
+     * 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
      */
@@ -14220,6 +14411,9 @@
                         case 'MasterTrack':
                             this.parseMasterTrackNode(n);
                             break;
+                        case 'BackingTrack':
+                            this.parseBackingTrackNode(n);
+                            break;
                         case 'Tracks':
                             this.parseTracksNode(n);
                             break;
@@ -14241,6 +14435,9 @@
                         case 'Rhythms':
                             this.parseRhythms(n);
                             break;
+                        case 'Assets':
+                            this.parseAssets(n);
+                            break;
                     }
                 }
             }
@@ -14248,6 +14445,37 @@
                 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>
         //
@@ -14328,7 +14556,41 @@
             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>
@@ -14366,6 +14628,7 @@
             let textValue = null;
             let reference = 0;
             let text = null;
+            let syncPointValue = undefined;
             for (const c of node.childElements()) {
                 switch (c.localName) {
                     case 'Type':
@@ -14384,6 +14647,28 @@
                         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
@@ -14411,6 +14696,13 @@
                 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);
@@ -16492,14 +16784,19 @@
                 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;
                     }
                 }
             }
@@ -16516,6 +16813,10 @@
      * 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
@@ -17382,7 +17683,9 @@
             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);
@@ -17405,6 +17708,12 @@
             // 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;
@@ -21870,8 +22179,24 @@
      * 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) {
@@ -21954,6 +22279,17 @@
         }
     }
 
+    /**
+     * Rerpresents a point to sync the alphaTab time axis with an external backing track.
+     */
+    class BackingTrackSyncPoint {
+        constructor(tick, data) {
+            this.tick = 0;
+            this.tick = tick;
+            this.data = data;
+        }
+    }
+
     class MidiFileSequencerTempoChange {
         constructor(bpm, ticks, time) {
             this.bpm = bpm;
@@ -21961,9 +22297,17 @@
             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;
@@ -21971,11 +22315,15 @@
             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;
         }
     }
     /**
@@ -22028,6 +22376,12 @@
         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;
@@ -22047,6 +22401,8 @@
                 // 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);
@@ -22121,7 +22477,7 @@
                 }
                 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));
                 }
@@ -22155,6 +22511,8 @@
                     }
                 }
             }
+            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;
@@ -22171,6 +22529,35 @@
         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;
@@ -22198,9 +22585,87 @@
         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;
@@ -22310,6 +22775,8 @@
             });
             state.endTime = metronomeTime;
             state.endTick = metronomeTick;
+            state.currentTempo = bpm;
+            state.modifiedTempo = bpm;
             this._countInState = state;
         }
     }
@@ -22355,12 +22822,22 @@
          * @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;
         }
     }
 
@@ -26096,38 +26573,51 @@
      */
     Voice.RenderEffectSampleBlock = SynthConstants.MicroBufferSize;
 
+    class QueueItem {
+        constructor(value) {
+            this.value = value;
+        }
+    }
     class Queue {
-        constructor() {
-            this._items = [];
-            this._position = 0;
-            this.isEmpty = true;
+        get isEmpty() {
+            return this._head === undefined;
         }
         clear() {
-            this._items = [];
-            this._position = 0;
-            this.isEmpty = true;
+            this._head = undefined;
+            this._tail = undefined;
         }
         enqueue(item) {
-            this.isEmpty = false;
-            this._items.push(item);
+            const queueItem = new QueueItem(item);
+            if (this._tail) {
+                // not empty -> add after tail
+                this._tail.next = queueItem;
+                this._tail = queueItem;
+            }
+            else {
+                // empty -> new item takes head and tail
+                this._head = queueItem;
+                this._tail = queueItem;
+            }
         }
         peek() {
-            return this._items[this._position];
+            const head = this._head;
+            if (!head) {
+                return undefined;
+            }
+            return head.value;
         }
         dequeue() {
-            const item = this._items[this._position];
-            this._position++;
-            if (this._position >= this._items.length / 2) {
-                this._items = this._items.slice(this._position);
-                this._position = 0;
+            const head = this._head;
+            if (!head) {
+                return undefined;
             }
-            this.isEmpty = this._items.length === 0;
-            return item;
-        }
-        toArray() {
-            const items = this._items.slice(this._position);
-            items.reverse();
-            return items;
+            const newHead = head.next;
+            this._head = newHead;
+            // last item removed?
+            if (!newHead) {
+                this._tail = undefined;
+            }
+            return head.value;
         }
     }
 
@@ -26458,7 +26948,7 @@
                     break;
                 case MidiEventType.TempoChange:
                     const tempoChange = e;
-                    this.currentTempo = 60000000 / tempoChange.microSecondsPerQuarterNote;
+                    this.currentTempo = tempoChange.beatsPerMinute;
                     break;
                 case MidiEventType.PitchBend:
                     const pitchBend = e;
@@ -27610,15 +28100,15 @@
     }
 
     /**
-     * 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;
@@ -27627,11 +28117,14 @@
             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;
@@ -27639,7 +28132,7 @@
         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;
@@ -27655,19 +28148,22 @@
             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;
@@ -27675,30 +28171,30 @@
         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');
@@ -27706,11 +28202,11 @@
             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;
@@ -27739,8 +28235,8 @@
             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;
@@ -27748,42 +28244,45 @@
                 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) {
@@ -27793,20 +28292,20 @@
             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));
@@ -27819,7 +28318,7 @@
             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) {
@@ -27837,21 +28336,21 @@
             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
@@ -27861,9 +28360,9 @@
         }
         resetSoundFonts() {
             this.stop();
-            this._synthesizer.resetPresets();
+            this.synthesizer.resetPresets();
             this._loadedSoundFonts = [];
-            this._isSoundFontLoaded = false;
+            this.isSoundFontLoaded = false;
             this.soundFontLoaded.trigger();
         }
         loadSoundFont(data, append) {
@@ -27877,7 +28376,7 @@
                     this._loadedSoundFonts = [];
                 }
                 this._loadedSoundFonts.push(soundFont);
-                this._isSoundFontLoaded = true;
+                this.isSoundFontLoaded = true;
                 this.soundFontLoaded.trigger();
                 Logger.debug('AlphaSynth', 'soundFont successfully loaded');
                 this.checkReadyForPlayback();
@@ -27889,12 +28388,12 @@
         }
         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();
@@ -27908,9 +28407,9 @@
             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;
@@ -27921,29 +28420,29 @@
             }
         }
         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();
@@ -27951,25 +28450,25 @@
         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;
+                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) {
+                    if (this.sequencer.isPlayingCountIn) {
                         Logger.debug('AlphaSynth', 'Finished playback (count-in)');
-                        this._sequencer.resetCountIn();
-                        this.timePosition = this._sequencer.currentTime;
+                        this.sequencer.resetCountIn();
+                        this.timePosition = this.sequencer.currentTime;
                         this.playInternal();
                         this.output.resetSamples();
                     }
-                    else if (this._sequencer.isPlayingOneTimeMidi) {
+                    else if (this.sequencer.isPlayingOneTimeMidi) {
                         Logger.debug('AlphaSynth', 'Finished playback (one time)');
                         this.output.resetSamples();
                         this.state = PlayerState.Paused;
@@ -27981,11 +28480,11 @@
                         this.tickPosition = startTick;
                         this._synthStopping = false;
                     }
-                    else if (this._synthesizer.activeVoiceCount > 0) {
+                    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.synthesizer.noteOffAll(true);
                             this._synthStopping = true;
                         }
                     }
@@ -28001,7 +28500,7 @@
                     // to eventually bring the voices down to 0 and stop playing
                     if (!this._synthStopping) {
                         Logger.debug('AlphaSynth', 'Signaling synth to stop all voices (not all samples played)');
-                        this._synthesizer.noteOffAll(true);
+                        this.synthesizer.noteOffAll(true);
                         this._synthStopping = true;
                     }
                 }
@@ -28009,44 +28508,41 @@
         }
         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) {
                 this._playedEventsQueue.clear();
             }
             else {
-                const playedEvents = new Queue();
+                const playedEvents = [];
                 while (!this._playedEventsQueue.isEmpty && this._playedEventsQueue.peek().time < currentTime) {
                     const synthEvent = this._playedEventsQueue.dequeue();
-                    playedEvents.enqueue(synthEvent.event);
+                    playedEvents.push(synthEvent.event);
                 }
-                if (!playedEvents.isEmpty) {
-                    this.midiEventsPlayed.trigger(new MidiEventsPlayedEventArgs(playedEvents.toArray()));
+                if (playedEvents.length > 0) {
+                    playedEvents.reverse();
+                    this.midiEventsPlayed.trigger(new MidiEventsPlayedEventArgs(playedEvents));
                 }
             }
         }
@@ -28054,13 +28550,28 @@
          * @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);
         }
     }
 
@@ -29307,6 +29818,35 @@
          */
         PlayerOutputMode[PlayerOutputMode["WebAudioScriptProcessor"] = 1] = "WebAudioScriptProcessor";
     })(exports.PlayerOutputMode || (exports.PlayerOutputMode = {}));
+    /**
+     * Lists the different modes how the internal alphaTab player (and related cursor behavior) is working.
+     */
+    exports.PlayerMode = void 0;
+    (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";
+    })(exports.PlayerMode || (exports.PlayerMode = {}));
     /**
      * The player settings control how the audio playback and UI is behaving.
      * @json
@@ -29353,6 +29893,7 @@
              * @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.
@@ -29361,6 +29902,37 @@
              * 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 = exports.PlayerMode.Disabled;
             /**
              * Whether playback cursors should be displayed.
              * @since 0.9.6
@@ -30066,6 +30638,7 @@
             /*@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);
@@ -30101,6 +30674,9 @@
                 case "enableplayer":
                     obj.enablePlayer = v;
                     return true;
+                case "playermode":
+                    obj.playerMode = JsonHelper.parseEnum(v, exports.PlayerMode);
+                    return true;
                 case "enablecursor":
                     obj.enableCursor = v;
                     return true;
@@ -30335,6 +30911,39 @@
         }
     }
 
+    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) {
@@ -30350,6 +30959,9 @@
             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;
@@ -30365,6 +30977,15 @@
                 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;
@@ -30430,6 +31051,9 @@
                 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);
@@ -30496,6 +31120,16 @@
                         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) => {
@@ -31787,6 +32421,31 @@
         }
     }
 
+    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) {
@@ -31898,6 +32557,9 @@
             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));
             }
@@ -31966,6 +32628,15 @@
                 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();
@@ -32142,7 +32813,9 @@
                 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:
@@ -32217,7 +32890,7 @@
                     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);
@@ -32444,7 +33117,9 @@
                 endTime: e.endTime,
                 currentTick: e.currentTick,
                 endTick: e.endTick,
-                isSeek: e.isSeek
+                isSeek: e.isSeek,
+                originalTempo: e.originalTempo,
+                modifiedTempo: e.modifiedTempo
             });
         }
         onPlayerStateChanged(e) {
@@ -32490,7 +33165,9 @@
                 endTime: e.endTime,
                 currentTick: e.currentTick,
                 endTick: e.endTick,
-                isSeek: e.isSeek
+                isSeek: e.isSeek,
+                originalTempo: e.originalTempo,
+                modifiedTempo: e.modifiedTempo
             });
         }
         onMidiLoadFailed(e) {
@@ -33799,8 +34476,9 @@
         }
         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) {
@@ -35072,6 +35750,10 @@
              * 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.
              */
@@ -35098,13 +35780,17 @@
             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;
                     }
@@ -35173,7 +35859,7 @@
             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 ||
@@ -35200,6 +35886,15 @@
             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;
@@ -37397,6 +38092,213 @@
         }
     }
 
+    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;
@@ -37410,6 +38312,12 @@
      * @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
@@ -37479,10 +38387,8 @@
             this._isDestroyed = false;
             this._score = null;
             this._tracks = [];
+            this._actualPlayerMode = exports.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
@@ -38519,6 +39425,10 @@
             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 === exports.PlayerMode.Disabled && this.settings.player.enablePlayer) {
+                this.settings.player.playerMode = exports.PlayerMode.EnabledAutomatic;
+            }
             Environment.printEnvironmentInfo(false);
             this.canvasElement = uiFacade.createCanvasElement();
             this.container.appendChild(this.canvasElement);
@@ -38562,7 +39472,7 @@
                 this.appendRenderResult(null); // marks last element
             });
             this.renderer.error.on(this.onError.bind(this));
-            if (this.settings.player.enablePlayer) {
+            if (this.settings.player.playerMode !== exports.PlayerMode.Disabled) {
                 this.setupPlayer();
             }
             this.setupClickHandling();
@@ -38654,10 +39564,9 @@
             }
             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 !== exports.PlayerMode.Disabled) {
+                if (this.setupPlayer() && score) {
+                    this.loadMidiForScore();
                 }
             }
             else {
@@ -39589,13 +40498,51 @@
             this.destroyCursors();
         }
         setupPlayer() {
+            let mode = this.settings.player.playerMode;
+            if (mode === exports.PlayerMode.EnabledAutomatic) {
+                const score = this.score;
+                if (!score) {
+                    return false;
+                }
+                if (score?.backingTrack?.rawAudioFile) {
+                    mode = exports.PlayerMode.EnabledBackingTrack;
+                }
+                else {
+                    mode = exports.PlayerMode.EnabledSynthesizer;
+                }
+            }
+            if (mode !== this._actualPlayerMode) {
+                this.destroyPlayer();
+            }
             this.updateCursors();
-            if (this.player) {
-                return;
+            this._actualPlayerMode = mode;
+            switch (mode) {
+                case exports.PlayerMode.Disabled:
+                    this.destroyPlayer();
+                    return false;
+                case exports.PlayerMode.EnabledSynthesizer:
+                    if (this.player) {
+                        return true;
+                    }
+                    // new player needed
+                    this.player = this.uiFacade.createWorkerPlayer();
+                    break;
+                case exports.PlayerMode.EnabledBackingTrack:
+                    if (this.player) {
+                        return true;
+                    }
+                    // new player needed
+                    this.player = this.uiFacade.createBackingTrackPlayer();
+                    break;
+                case exports.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();
@@ -39624,6 +40571,7 @@
             this.player.playbackRangeChanged.on(this.onPlaybackRangeChanged.bind(this));
             this.player.finished.on(this.onPlayerFinished.bind(this));
             this.setupPlayerEvents();
+            return false;
         }
         loadMidiForScore() {
             if (!this.score) {
@@ -39645,6 +40593,7 @@
             const player = this.player;
             if (player) {
                 player.loadMidiFile(midiFile);
+                player.loadBackingTrack(score, generator.syncPoints);
                 player.applyTranspositionPitches(generator.transpositionPitches);
             }
         }
@@ -40061,7 +41010,7 @@
                     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) {
@@ -40076,13 +41025,14 @@
             // 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 => {
@@ -40103,14 +41053,15 @@
          * @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);
                     }
                 }
             }
@@ -40118,7 +41069,7 @@
         /**
          * 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;
@@ -40150,7 +41101,7 @@
             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);
             });
         }
         /**
@@ -40215,7 +41166,7 @@
                 }
             }
         }
-        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;
@@ -40224,12 +41175,29 @@
             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) {
@@ -40249,22 +41217,11 @@
                 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);
                     });
                 }
             }
@@ -40295,7 +41252,7 @@
             if (this._isDestroyed) {
                 return;
             }
-            if (this.settings.player.enablePlayer &&
+            if (this.settings.player.playerMode !== exports.PlayerMode.Disabled &&
                 this.settings.player.enableCursor &&
                 this.settings.player.enableUserInteraction) {
                 this._selectionStart = new SelectionInfo(beat);
@@ -40337,7 +41294,7 @@
             if (this._isDestroyed) {
                 return;
             }
-            if (this.settings.player.enablePlayer &&
+            if (this.settings.player.playerMode !== exports.PlayerMode.Disabled &&
                 this.settings.player.enableCursor &&
                 this.settings.player.enableUserInteraction) {
                 if (this._selectionEnd) {
@@ -40358,7 +41315,7 @@
                     // 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
@@ -40470,7 +41427,7 @@
             });
             this.renderer.postRenderFinished.on(() => {
                 if (!this._selectionStart ||
-                    !this.settings.player.enablePlayer ||
+                    this.settings.player.playerMode === exports.PlayerMode.Disabled ||
                     !this.settings.player.enableCursor ||
                     !this.settings.player.enableUserInteraction) {
                     return;
@@ -40548,6 +41505,9 @@
             }
             this.scoreLoaded.trigger(score);
             this.uiFacade.triggerEvent(this.container, 'scoreLoaded', score);
+            if (this.setupPlayer()) {
+                this.loadMidiForScore();
+            }
         }
         onResize(e) {
             if (this._isDestroyed) {
@@ -41288,52 +42248,14 @@
         }
     }
     /**
+     * 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;
+    class WebAudioHelper {
+        static findKnownDevice(sinkId) {
+            return WebAudioHelper._knownDevices.find(d => d.deviceId === sinkId);
         }
-        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}`);
-                });
-            }
-        }
-        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();
             }
@@ -41342,73 +42264,18 @@
             }
             throw new AlphaTabError(exports.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
@@ -41449,7 +42316,7 @@
                 if (defaultDevice) {
                     defaultDevice.isDefault = true;
                 }
-                this._knownDevices = final;
+                WebAudioHelper._knownDevices = final;
                 return final;
             }
             catch (e) {
@@ -41457,8 +42324,113 @@
                 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
@@ -41470,7 +42442,7 @@
             }
         }
         async getOutputDevice() {
-            if (!(await this.checkSinkIdSupport())) {
+            if (!(await WebAudioHelper.checkSinkIdSupport())) {
                 return null;
             }
             // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/sinkId
@@ -41479,7 +42451,7 @@
                 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;
             }
@@ -41927,7 +42899,7 @@
                 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)));
@@ -41951,7 +42923,7 @@
                     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();
@@ -42001,6 +42973,8 @@
             this._outputIsReady = true;
             this.checkReady();
         }
+        loadBackingTrack(_score) {
+        }
     }
 
     /**
@@ -42368,6 +43342,123 @@
         }
     }
 
+    /**
+     * @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
      */
@@ -43004,6 +44095,9 @@
                 window.requestAnimationFrame(step);
             }
         }
+        createBackingTrackPlayer() {
+            return new BackingTrackPlayer(new AudioElementBackingTrackSynthOutput(), this._api.settings.player.bufferTimeInMilliseconds);
+        }
     }
 
     /**
@@ -43146,7 +44240,7 @@
             settings.core.file = null;
             settings.core.tracks = null;
             settings.player.enableCursor = false;
-            settings.player.enablePlayer = false;
+            settings.player.playerMode = exports.PlayerMode.Disabled;
             settings.player.enableElementHighlighting = false;
             settings.player.enableUserInteraction = false;
             settings.player.soundFont = null;
@@ -57107,96 +58201,6 @@
         }
     }
 
-    /**
-     * 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.
 
@@ -59312,9 +60316,9 @@
             print(`build date: ${VersionInfo.date}`);
         }
     }
-    VersionInfo.version = '1.6.0-alpha.1401';
-    VersionInfo.date = '2025-05-07T12:40:48.955Z';
-    VersionInfo.commit = 'e58a9704e560b3344b8fe39a2b2f46a2ee3bb5b1';
+    VersionInfo.version = '1.6.0-alpha.1405';
+    VersionInfo.date = '2025-05-10T17:25:30.743Z';
+    VersionInfo.commit = 'a9f729a65e195d4fec684444cd2c2a259dc9729b';
 
     /**
      * A factory for custom layout engines.
@@ -59785,29 +60789,6 @@
             if (Environment.webPlatform === exports.WebPlatform.Browser || Environment.webPlatform === exports.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;
@@ -63539,6 +64520,7 @@
         get AccidentalType () { return AccidentalType; },
         Automation,
         get AutomationType () { return AutomationType; },
+        BackingTrack,
         Bar,
         get BarLineStyle () { return BarLineStyle; },
         BarStyle,
@@ -63601,6 +64583,7 @@
         Staff,
         SustainPedalMarker,
         get SustainPedalMarkerType () { return SustainPedalMarkerType; },
+        SyncPointData,
         Track,
         get TrackNameMode () { return TrackNameMode; },
         get TrackNameOrientation () { return TrackNameOrientation; },