diff --git a/playground-template/control-template.html b/playground-template/control-template.html index ce1ea39f5..9d8162045 100644 --- a/playground-template/control-template.html +++ b/playground-template/control-template.html @@ -33,6 +33,9 @@
+
+
+
diff --git a/playground-template/control.css b/playground-template/control.css index f5dae5b8b..ffaa75248 100644 --- a/playground-template/control.css +++ b/playground-template/control.css @@ -338,8 +338,14 @@ input[type='range']::-moz-range-thumb { background: #d9d9d9; } +.at-time-slider:hover { + transition: all 0.1s ease; + height: 15px; + cursor: pointer; +} + .at-time-slider-value { - height: 4px; + height: 100%; background: #4972a1; width: 0; } @@ -456,4 +462,25 @@ input[type='range']::-moz-range-thumb { .at-menu .dropdown-toggle::after { display: none; -} \ No newline at end of file +} + +.at-waveform { + position: relative; + background: #f7f7f7; + border-top: 1px solid rgba(0, 0, 0, 0.12); + cursor: pointer; +} + +.at-waveform > canvas { + width: 100%; + opacity: 0.5; +} + +.at-waveform-cursor { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 1px; + background: rgba(64, 64, 255, 0.75); +} diff --git a/playground-template/control.mjs b/playground-template/control.mjs index 0b33736ea..3820d2c77 100644 --- a/playground-template/control.mjs +++ b/playground-template/control.mjs @@ -17,7 +17,7 @@ const defaultSettings = { fontDirectory: '/font/bravura/' }, player: { - enablePlayer: true, + playerMode: alphaTab.PlayerMode.EnabledAutomatic, scrollOffsetX: -10, soundFont: '/font/sonivox/sonivox.sf2' } @@ -96,6 +96,125 @@ function createTrackItem(track, trackSelection) { return trackItem; } +let backingTrackScore = null; +let backingTrackAudioElement = null; +let waveForm = null; +let waveFormCursor = null; +window.onload = ()=>{ + waveForm = document.querySelector('.at-waveform'); + waveFormCursor = waveForm.querySelector('.at-waveform-cursor'); + waveForm.onclick = (e)=>{ + const percent = e.offsetX / waveForm.offsetWidth; + if(backingTrackAudioElement) { + backingTrackAudioElement.currentTime = backingTrackAudioElement.duration * percent; + } + }; +} + +function updateWaveFormCursor(){ + if(waveFormCursor) { + waveFormCursor.style.left = ((backingTrackAudioElement.currentTime / backingTrackAudioElement.duration) * 100) + '%'; + } +}; + +function hideBackingTrack(at) { + if(backingTrackAudioElement) { + backingTrackAudioElement.removeEventListener('timeupdate', updateWaveFormCursor); + backingTrackAudioElement.removeEventListener('durationchange', updateWaveFormCursor); + backingTrackAudioElement.removeEventListener('seeked', updateWaveFormCursor); + } + const waveForm = document.querySelector('.at-waveform'); + waveForm.classList.add('d-none'); +} + + +async function showBackingTrack(at) { + + const audioElement = at.player.output.audioElement; + if(audioElement !== backingTrackAudioElement) { + backingTrackAudioElement = audioElement; + audioElement.addEventListener('timeupdate', updateWaveFormCursor); + audioElement.addEventListener('durationchange', updateWaveFormCursor); + audioElement.addEventListener('seeked', updateWaveFormCursor); + updateWaveFormCursor(); + } + + const score = at.score; + if(score === backingTrackScore) { + return; + } + backingTrackScore = at.score; + + const audioContext = new AudioContext(); + const rawData = await audioContext.decodeAudioData( + structuredClone(at.score.backingTrack.rawAudioFile.buffer) + ); + + const topChannel = rawData.getChannelData(0); + const bottomChannel = rawData.numberOfChannels > 1 ? rawData.getChannelData(1) : topChannel; + const length = topChannel.length + + waveForm.classList.remove('d-none'); + + const canvas = document.querySelector('.at-waveform canvas') ?? document.createElement('canvas'); + const width = waveForm.offsetWidth; + const height = 80; + canvas.width = width; + canvas.height = height; + waveForm.appendChild(canvas); + + const ctx = canvas.getContext('2d'); + + const pixelRatio = window.devicePixelRatio; + const halfHeight = height / 2; + + const barWidth = 2 * pixelRatio; + const barGap = 1 * pixelRatio; + const barIndexScale = width / (barWidth + barGap) / length + + ctx.beginPath(); + + let prevX = 0 + let maxTop = 0 + let maxBottom = 0 + for (let i = 0; i <= length; i++) { + const x = Math.round(i * barIndexScale) + + if (x > prevX) { + const topBarHeight = Math.round(maxTop * halfHeight) + const bottomBarHeight = Math.round(maxBottom * halfHeight) + const barHeight = topBarHeight + bottomBarHeight || 1 + + ctx.roundRect(prevX * (barWidth + barGap), halfHeight - topBarHeight, barWidth, barHeight, 2) + + prevX = x + maxTop = 0 + maxBottom = 0 + } + + const magnitudeTop = Math.abs(topChannel[i] || 0) + const magnitudeBottom = Math.abs(bottomChannel[i] || 0) + if (magnitudeTop > maxTop) maxTop = magnitudeTop + if (magnitudeBottom > maxBottom) maxBottom = magnitudeBottom + } + + ctx.fillStyle = '#436d9d' + ctx.fill() +} + +function updateBackingTrack(at) { + switch(at.actualPlayerMode) { + case alphaTab.PlayerMode.Disabled: + case alphaTab.PlayerMode.EnabledSynthesizer: + case alphaTab.PlayerMode.EnabledExternalMedia: + hideBackingTrack(at); + break; + case alphaTab.PlayerMode.EnabledBackingTrack: + showBackingTrack(at); + break; + } +} + export function setupControl(selector, customSettings) { const el = document.querySelector(selector); const control = el.closest('.at-wrap'); @@ -184,11 +303,25 @@ export function setupControl(selector, customSettings) { trackItems.push(trackItem); trackList.appendChild(trackItem); }); + + updateBackingTrack(at); }); const timePositionLabel = control.querySelector('.at-time-position'); const timeSliderValue = control.querySelector('.at-time-slider-value'); + const timeSlider = control.querySelector('.at-time-slider'); + let songTimeInfo = null; + timeSlider.onclick = (e)=>{ + const percent = e.offsetX / timeSlider.offsetWidth; + if(songTimeInfo) { + at.timePosition = Math.floor(songTimeInfo.endTime * percent); + } + }; + at.midiLoaded.on(e => { songTimeInfo = e; }); + + + function formatDuration(milliseconds) { let seconds = milliseconds / 1000; const minutes = (seconds / 60) | 0; @@ -214,6 +347,8 @@ export function setupControl(selector, customSettings) { control.querySelectorAll('.at-player .disabled').forEach(function (c) { c.classList.remove('disabled'); }); + + updateBackingTrack(at); }); at.playerStateChanged.on(function (args) { diff --git a/src.compiler/csharp/CSharpAstTransformer.ts b/src.compiler/csharp/CSharpAstTransformer.ts index 6c9e05f09..733c553bb 100644 --- a/src.compiler/csharp/CSharpAstTransformer.ts +++ b/src.compiler/csharp/CSharpAstTransformer.ts @@ -234,28 +234,34 @@ export default class CSharpAstTransformer { // validate global statements if (!defaultExport || !ts.isClassDeclaration(defaultExport)) { for (const s of globalStatements) { + if (!this.shouldSkip(s, true)) { + this._context.addTsNodeDiagnostics( + s, + 'Global statements in modules are only allowed if there is a default class export', + ts.DiagnosticCategory.Error + ); + } + } + } + + for (const s of additionalNestedExportDeclarations) { + if (!this.shouldSkip(s, true)) { this._context.addTsNodeDiagnostics( s, - 'Global statements in modules are only allowed if there is a default class export', + 'Global statements in modules are not yet supported', ts.DiagnosticCategory.Error ); } } - for (const s of additionalNestedExportDeclarations) { - this._context.addTsNodeDiagnostics( - s, - 'Global statements in modules are not yet supported', - ts.DiagnosticCategory.Error - ); - } - for (const s of additionalNestedNonExportsDeclarations) { - this._context.addTsNodeDiagnostics( - s, - 'Global statements in modules are not yet supported', - ts.DiagnosticCategory.Error - ); + if (!this.shouldSkip(s, true)) { + this._context.addTsNodeDiagnostics( + s, + 'Global statements in modules are not yet supported', + ts.DiagnosticCategory.Error + ); + } } // TODO: make root namespace configurable from outside. @@ -3621,8 +3627,7 @@ export default class CSharpAstTransformer { const argumentSymbol = this._context.typeChecker.getSymbolAtLocation(expression.argumentExpression); const elementAccessMethod = argumentSymbol ? this._context.getMethodNameFromSymbol(argumentSymbol) : ''; - if(elementAccessMethod) { - + if (elementAccessMethod) { const memberAccess = { nodeType: cs.SyntaxKind.MemberAccessExpression, expression: {} as cs.Expression, @@ -3631,7 +3636,7 @@ export default class CSharpAstTransformer { tsNode: expression, nullSafe: !!expression.questionDotToken } as cs.MemberAccessExpression; - + memberAccess.expression = this.visitExpression(memberAccess, expression.expression)!; if (!memberAccess.expression) { return null; @@ -3640,7 +3645,6 @@ export default class CSharpAstTransformer { return memberAccess; } - const elementAccess = { expression: {} as cs.Expression, argumentExpression: {} as cs.Expression, diff --git a/src.csharp/AlphaTab.Windows/AlphaTab.Windows.csproj b/src.csharp/AlphaTab.Windows/AlphaTab.Windows.csproj index 0ee4f0b72..32a02fd81 100644 --- a/src.csharp/AlphaTab.Windows/AlphaTab.Windows.csproj +++ b/src.csharp/AlphaTab.Windows/AlphaTab.Windows.csproj @@ -26,7 +26,7 @@ - + diff --git a/src.csharp/AlphaTab.Windows/NAudioBackingTrackOutput.cs b/src.csharp/AlphaTab.Windows/NAudioBackingTrackOutput.cs new file mode 100644 index 000000000..e4be541d7 --- /dev/null +++ b/src.csharp/AlphaTab.Windows/NAudioBackingTrackOutput.cs @@ -0,0 +1,196 @@ +using System; +using System.Collections.Generic; +using System.Threading; +using System.Threading.Tasks; +using AlphaTab.Core.EcmaScript; +using AlphaTab.Model; +using AlphaTab.Synth; +using NAudio.Wave; + +namespace AlphaTab +{ + internal class NAudioBackingTrackOutput : IBackingTrackSynthOutput, IDisposable + { + private readonly Action _invokeUi; + private const int PreferredSampleRate = 44100; + private const int DirectSoundLatency = 40; + + /// + public double SampleRate => PreferredSampleRate; + + private TimeSpan _padding; + private ISynthOutputDevice? _device; + private StreamMediaFoundationReader? _audioFileReader; + private DirectSoundOut? _context; + private Task? _timeUpdateTask; + private CancellationTokenSource? _timeUpdateTaskCancellation; + + public double MasterVolume + { + get => _context!.Volume; + set => _context!.Volume = (float)value; + } + + public NAudioBackingTrackOutput(Action invokeUi) + { + _invokeUi = invokeUi; + } + + public double BackingTrackDuration => _audioFileReader?.TotalTime.TotalMilliseconds ?? 0; + + // not yet supported, NAudio is a bit tricky here, maybe we migrate to another lib? + public double PlaybackRate { get; set; } + + public void SeekTo(double time) + { + _audioFileReader!.CurrentTime = TimeSpan.FromMilliseconds(time) - _padding; + } + + + public void LoadBackingTrack(BackingTrack backingTrack) + { + _audioFileReader?.Dispose(); + _context?.Dispose(); + + _padding = TimeSpan.FromMilliseconds(backingTrack.Padding); + + _audioFileReader = new StreamMediaFoundationReader(new System.IO.MemoryStream( + backingTrack.RawAudioFile!.Buffer.Raw, + (int)backingTrack.RawAudioFile!.ByteOffset, + (int)backingTrack.RawAudioFile.Length + )); + + _context = new DirectSoundOut(DirectSoundLatency); + _context.Init(_audioFileReader); + } + + public void Open(double bufferTimeInMilliseconds) + { + ((EventEmitter)Ready).Trigger(); + } + + public void Destroy() + { + Dispose(); + } + + public void Dispose() + { + Close(); + } + + private void Close() + { + var cancel = _timeUpdateTaskCancellation; + if (cancel != null) + { + cancel.Cancel(); + _timeUpdateTask!.Wait(TimeSpan.FromSeconds(5)); + _timeUpdateTask?.Dispose(); + cancel.Dispose(); + } + + var context = _context; + if (context != null) + { + context.Stop(); + context.Dispose(); + } + + _audioFileReader?.Dispose(); + } + + private void UpdatePosition() + { + var timePos = (_context!.PlaybackPosition + _padding).TotalMilliseconds; + _invokeUi(() => { ((EventEmitterOfT)TimeUpdate).Trigger(timePos); }); + } + + public void Play() + { + _context!.Play(); + _timeUpdateTaskCancellation = new CancellationTokenSource(); + var token = _timeUpdateTaskCancellation.Token; + _timeUpdateTask = Task.Run(async () => + { + try + { + while (!token.IsCancellationRequested) + { + UpdatePosition(); + await Task.Delay(50, token); + } + } + catch + { + // ignore + } + }, token); + } + + public void Pause() + { + _context!.Pause(); + _timeUpdateTaskCancellation!.Cancel(); + } + + public void AddSamples(Float32Array samples) + { + } + + public void ResetSamples() + { + } + + public void Activate() + { + } + + /// + public IEventEmitter Ready { get; } = new EventEmitter(); + + /// + public IEventEmitterOfT SamplesPlayed { get; } = new EventEmitterOfT(); + + /// + public IEventEmitterOfT TimeUpdate { get; } = new EventEmitterOfT(); + + /// + public IEventEmitter SampleRequest { get; } = new EventEmitter(); + + /// + public Task> EnumerateOutputDevices() + { + return Task.FromResult(NAudioSynthOutput.EnumerateDirectSoundOutputDevices()); + } + + /// + public Task SetOutputDevice(ISynthOutputDevice? device) + { + var wasPlaying = _timeUpdateTaskCancellation != null; + Pause(); + _timeUpdateTask?.Wait(); + _context?.Dispose(); + + _context = new DirectSoundOut( + device == null + ? DirectSoundOut.DSDEVID_DefaultPlayback + : ((NAudioOutputDevice)device).Device.Guid, + DirectSoundLatency); + _device = device; + _context.Init(_audioFileReader); + if (wasPlaying) + { + Play(); + } + + return Task.CompletedTask; + } + + /// + public Task GetOutputDevice() + { + return Task.FromResult(_device); + } + } +} diff --git a/src.csharp/AlphaTab.Windows/NAudioSynthOutput.cs b/src.csharp/AlphaTab.Windows/NAudioSynthOutput.cs index c7d03e940..568aee037 100644 --- a/src.csharp/AlphaTab.Windows/NAudioSynthOutput.cs +++ b/src.csharp/AlphaTab.Windows/NAudioSynthOutput.cs @@ -164,16 +164,21 @@ public override int Read(float[] buffer, int offset, int count) /// public Task> EnumerateOutputDevices() + { + return Task.FromResult(EnumerateDirectSoundOutputDevices()); + } + + internal static IList EnumerateDirectSoundOutputDevices() { var defaultPlayback = DirectSoundOut.DSDEVID_DefaultPlayback; GetDeviceID(ref defaultPlayback, out Guid realDefault); - return Task.FromResult( + return DirectSoundOut.Devices .Where(d => d.Guid != Guid.Empty) .Map(d => (ISynthOutputDevice)new NAudioOutputDevice(d, realDefault)) - ); + ; } [DllImport("dsound.dll", CharSet = CharSet.Unicode, diff --git a/src.csharp/AlphaTab.Windows/WinForms/WinFormsUiFacade.cs b/src.csharp/AlphaTab.Windows/WinForms/WinFormsUiFacade.cs index c695c0643..9a5427212 100644 --- a/src.csharp/AlphaTab.Windows/WinForms/WinFormsUiFacade.cs +++ b/src.csharp/AlphaTab.Windows/WinForms/WinFormsUiFacade.cs @@ -101,6 +101,14 @@ protected override ISynthOutput CreateSynthOutput() return new NAudioSynthOutput(); } + public override IAlphaSynth CreateBackingTrackPlayer() + { + return new BackingTrackPlayer( + new NAudioBackingTrackOutput(BeginInvoke), + Api.Settings.Player.BufferTimeInMilliseconds + ); + } + public override void Destroy() { SettingsContainer.SettingsChanged -= OnSettingsChanged; diff --git a/src.csharp/AlphaTab.Windows/Wpf/AlphaTab.cs b/src.csharp/AlphaTab.Windows/Wpf/AlphaTab.cs index c947e662a..4c7668ebc 100644 --- a/src.csharp/AlphaTab.Windows/Wpf/AlphaTab.cs +++ b/src.csharp/AlphaTab.Windows/Wpf/AlphaTab.cs @@ -176,7 +176,7 @@ public AlphaTab() SnapsToDevicePixels = true; Settings = new Settings(); - Settings.Player.EnablePlayer = true; + Settings.Player.PlayerMode = PlayerMode.EnabledAutomatic; Settings.Player.EnableCursor = true; } diff --git a/src.csharp/AlphaTab.Windows/Wpf/WpfUiFacade.cs b/src.csharp/AlphaTab.Windows/Wpf/WpfUiFacade.cs index 5c821f7c0..6506dd001 100644 --- a/src.csharp/AlphaTab.Windows/Wpf/WpfUiFacade.cs +++ b/src.csharp/AlphaTab.Windows/Wpf/WpfUiFacade.cs @@ -108,6 +108,14 @@ protected override ISynthOutput CreateSynthOutput() return new NAudioSynthOutput(); } + public override IAlphaSynth? CreateBackingTrackPlayer() + { + return new BackingTrackPlayer( + new NAudioBackingTrackOutput(BeginInvoke), + Api.Settings.Player.BufferTimeInMilliseconds + ); + } + public override void Destroy() { SettingsContainer.SettingsChanged -= OnSettingsChanged; diff --git a/src.csharp/AlphaTab/Platform/CSharp/AlphaSynthWorkerApiBase.cs b/src.csharp/AlphaTab/Platform/CSharp/AlphaSynthWorkerApiBase.cs index c961f9aad..bb98383d0 100644 --- a/src.csharp/AlphaTab/Platform/CSharp/AlphaSynthWorkerApiBase.cs +++ b/src.csharp/AlphaTab/Platform/CSharp/AlphaSynthWorkerApiBase.cs @@ -2,6 +2,7 @@ using System.Collections.Generic; using AlphaTab.Collections; using AlphaTab.Midi; +using AlphaTab.Model; using AlphaTab.Synth; namespace AlphaTab.Platform.CSharp; @@ -189,11 +190,16 @@ public void SetChannelTranspositionPitch(double channel, double semitones) DispatchOnWorkerThread(() => { _player.SetChannelTranspositionPitch(channel, semitones); }); } + public void LoadBackingTrack(Score score, IList syncPoints) + { + DispatchOnWorkerThread(() => { _player.LoadBackingTrack(score, syncPoints); }); + } + public IEventEmitter Ready { get; } = new EventEmitter(); public IEventEmitter ReadyForPlayback { get; } = new EventEmitter(); public IEventEmitter Finished { get; } = new EventEmitter(); public IEventEmitter SoundFontLoaded { get; } = new EventEmitter(); - public IEventEmitterOfT SoundFontLoadFailed { get; } =new EventEmitterOfT(); + public IEventEmitterOfT SoundFontLoadFailed { get; } = new EventEmitterOfT(); public IEventEmitterOfT MidiLoad { get; } = new EventEmitterOfT(); public IEventEmitterOfT MidiLoaded { get; } = new EventEmitterOfT(); public IEventEmitterOfT MidiLoadFailed { get; } = new EventEmitterOfT(); diff --git a/src.csharp/AlphaTab/Platform/CSharp/ManagedUiFacade.cs b/src.csharp/AlphaTab/Platform/CSharp/ManagedUiFacade.cs index 0536f71c6..dcff0bc8a 100644 --- a/src.csharp/AlphaTab/Platform/CSharp/ManagedUiFacade.cs +++ b/src.csharp/AlphaTab/Platform/CSharp/ManagedUiFacade.cs @@ -56,6 +56,8 @@ public IAlphaSynth CreateWorkerPlayer() return player; } + public abstract IAlphaSynth? CreateBackingTrackPlayer(); + protected abstract ISynthOutput CreateSynthOutput(); public abstract IContainer RootContainer { get; } diff --git a/src.kotlin/alphaTab/android/src/main/java/alphaTab/AlphaTabView.kt b/src.kotlin/alphaTab/android/src/main/java/alphaTab/AlphaTabView.kt index a43ac8c60..373fbfbd2 100644 --- a/src.kotlin/alphaTab/android/src/main/java/alphaTab/AlphaTabView.kt +++ b/src.kotlin/alphaTab/android/src/main/java/alphaTab/AlphaTabView.kt @@ -31,7 +31,7 @@ class AlphaTabView : RelativeLayout { private var _settings: Settings = Settings().apply { this.player.enableCursor = true - this.player.enablePlayer = true + this.player.playerMode = alphaTab.PlayerMode.EnabledAutomatic this.player.enableUserInteraction = true } diff --git a/src.kotlin/alphaTab/android/src/main/java/alphaTab/core/Globals.kt b/src.kotlin/alphaTab/android/src/main/java/alphaTab/core/Globals.kt index edbfe2cec..c20b5a558 100644 --- a/src.kotlin/alphaTab/android/src/main/java/alphaTab/core/Globals.kt +++ b/src.kotlin/alphaTab/android/src/main/java/alphaTab/core/Globals.kt @@ -84,7 +84,7 @@ internal fun Double.toInvariantString(base: Double): String { var invariantDoubleFormat = DecimalFormat().apply { this.minimumFractionDigits = 0 - this.maximumFractionDigits = 12 + this.maximumFractionDigits = 13 this.decimalFormatSymbols.decimalSeparator = '.' this.isGroupingUsed = false } @@ -101,7 +101,7 @@ internal fun Double.toInvariantString(): String { } internal inline fun IAlphaTabEnum.toInvariantString(): String { - return this.toString() + return this.value.toString() } internal inline fun Double.toFixed(decimals: Double): String { diff --git a/src.kotlin/alphaTab/android/src/main/java/alphaTab/io/JsonHelperPartials.kt b/src.kotlin/alphaTab/android/src/main/java/alphaTab/io/JsonHelperPartials.kt index 4023bd453..f974fad25 100644 --- a/src.kotlin/alphaTab/android/src/main/java/alphaTab/io/JsonHelperPartials.kt +++ b/src.kotlin/alphaTab/android/src/main/java/alphaTab/io/JsonHelperPartials.kt @@ -3,6 +3,7 @@ package alphaTab.io import alphaTab.AlphaTabError import alphaTab.AlphaTabErrorType import alphaTab.collections.Map +import alphaTab.core.toIntOrNaN import kotlin.contracts.ExperimentalContracts import kotlin.jvm.JvmName import kotlin.reflect.KClass @@ -31,17 +32,21 @@ internal open class JsonHelperPartials { // NOTE: We know that we only have Map in our serialization // handling. we need this cast to satisfy Kotlin type checks. @Suppress("UNCHECKED_CAST") val unsafeMap = o as Map - return if (unsafeMap.has(k)) unsafeMap.get(k) else null + return if (unsafeMap.has(k)) unsafeMap.get(k) else null } - return null + return null } public fun > parseEnum(value: String, values: Array): T? { + val valueInt = value.toIntOrNaN() + val isNaN = valueInt.isNaN() val valueLower = value.lowercase() for (e in values) { - if (valueLower.equals(e.name, true)) { + if (valueLower.equals(e.name, true) || + (!isNaN && e is alphaTab.core.IAlphaTabEnum && e.value == valueInt.toInt()) + ) { return e } } diff --git a/src.kotlin/alphaTab/android/src/main/java/alphaTab/platform/android/AndroidBackingTrackSynthOutput.kt b/src.kotlin/alphaTab/android/src/main/java/alphaTab/platform/android/AndroidBackingTrackSynthOutput.kt new file mode 100644 index 000000000..4877031dd --- /dev/null +++ b/src.kotlin/alphaTab/android/src/main/java/alphaTab/platform/android/AndroidBackingTrackSynthOutput.kt @@ -0,0 +1,189 @@ +package alphaTab.platform.android + +import alphaTab.EventEmitter +import alphaTab.EventEmitterOfT +import alphaTab.IEventEmitter +import alphaTab.IEventEmitterOfT +import alphaTab.collections.List +import alphaTab.core.ecmaScript.Float32Array +import alphaTab.core.ecmaScript.Uint8Array +import alphaTab.model.BackingTrack +import alphaTab.synth.IBackingTrackSynthOutput +import alphaTab.synth.ISynthOutputDevice +import android.content.Context +import android.media.AudioAttributes +import android.media.AudioManager +import android.media.MediaDataSource +import android.media.MediaPlayer +import android.os.Build +import java.util.concurrent.Executors +import java.util.concurrent.ScheduledExecutorService +import java.util.concurrent.ScheduledFuture +import java.util.concurrent.TimeUnit +import kotlin.contracts.ExperimentalContracts + +@ExperimentalUnsignedTypes +@ExperimentalContracts +class AndroidBackingTrackSynthOutput( + private val context: Context, + private val synthInvoke: (action: (() -> Unit)) -> Unit +) : IBackingTrackSynthOutput { + companion object { + private const val PREFERRED_SAMPLE_RATE = 44100 + } + + private var _masterVolume = 1.0 + + private var _player: MediaPlayer = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.UPSIDE_DOWN_CAKE) { + MediaPlayer(context) + } else { + MediaPlayer() + } + + override var masterVolume: Double + get() = _masterVolume + set(value) { + _masterVolume = value + _player.setVolume(value.toFloat(), value.toFloat()) + } + + private var _padding: Int = 0 + private var _device: ISynthOutputDevice? = null + private val _updateTimer: ScheduledExecutorService = Executors.newScheduledThreadPool(1) + private var _updateSchedule: ScheduledFuture<*>? = null + + override val sampleRate: Double + get() = PREFERRED_SAMPLE_RATE.toDouble() + + override val backingTrackDuration: Double + get() = _player.duration.toDouble() + + override var playbackRate: Double + get() { + return _player.playbackParams.speed.toDouble() + } + set(value) { + _player.playbackParams = _player.playbackParams.setSpeed(value.toFloat()) + } + + override fun seekTo(time: Double) { + _player.seekTo(time.toInt()) + } + + override fun loadBackingTrack(backingTrack: BackingTrack) { + _player.reset() + _padding = backingTrack.padding.toInt() + _player.setAudioAttributes( + AudioAttributes.Builder() + .setContentType(AudioAttributes.CONTENT_TYPE_MUSIC) + .setUsage(AudioAttributes.USAGE_MEDIA) + .build() + ) + _player.setDataSource( + Uint8ArrayMediaDataSource( + backingTrack.rawAudioFile!!, + ) + ) + _player.prepare() + } + + override fun open(bufferTimeInMilliseconds: Double) { + (ready as EventEmitter).trigger() + } + + override fun destroy() { + _updateTimer.shutdown() + _player.reset() + _player.release() + } + + private fun updatePosition() { + val timePos = _player.currentPosition + _padding + synthInvoke { + (timeUpdate as EventEmitterOfT).trigger(timePos.toDouble()) + } + } + + override fun play() { + _player.start() + _updateSchedule = _updateTimer.scheduleWithFixedDelay( + { + updatePosition() + }, 0L, 50L, TimeUnit.MILLISECONDS + ) + } + + override fun pause() { + _player.pause() + _updateSchedule?.cancel(true) + } + + override fun addSamples(samples: Float32Array) { + } + + override fun resetSamples() { + } + + override fun activate() { + } + + override val ready: IEventEmitter = EventEmitter() + override val samplesPlayed: IEventEmitterOfT = EventEmitterOfT() + override val timeUpdate: IEventEmitterOfT = EventEmitterOfT() + override val sampleRequest: IEventEmitter = EventEmitter() + + override suspend fun enumerateOutputDevices(): List { + val audioService = context.getSystemService(Context.AUDIO_SERVICE) as AudioManager? + ?: return List() + + return List( + audioService.getDevices(AudioManager.GET_DEVICES_OUTPUTS).filter { + it.isSink + }.map { AndroidOutputDevice(it) } + ) + } + + override suspend fun setOutputDevice(device: ISynthOutputDevice?) { + val preferredDevice = (device as AndroidOutputDevice?)?.device + if (preferredDevice != null) { + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) { + _player.preferredDevice = preferredDevice + } + } + _device = device + } + + override suspend fun getOutputDevice(): ISynthOutputDevice? { + return _device + } +} + +@ExperimentalUnsignedTypes +@ExperimentalContracts +internal class Uint8ArrayMediaDataSource(private val data: Uint8Array) : MediaDataSource() { + override fun close() { + } + + override fun readAt(position: Long, buffer: ByteArray, offset: Int, size: Int): Int { + if (position >= this.size) { + return -1 + } + + var readSize = size + if (position + size > data.length) { + readSize = (data.length - position).toInt() + } + + data.buffer.asByteArray().copyInto( + buffer, + offset, + position.toInt(), + (position + readSize).toInt() + ) + return readSize + } + + override fun getSize(): Long { + return data.length.toLong() + } +} diff --git a/src.kotlin/alphaTab/android/src/main/java/alphaTab/platform/android/AndroidThreadAlphaSynthWorkerPlayer.kt b/src.kotlin/alphaTab/android/src/main/java/alphaTab/platform/android/AndroidThreadAlphaSynthWorkerPlayer.kt index d4e111689..835b77743 100644 --- a/src.kotlin/alphaTab/android/src/main/java/alphaTab/platform/android/AndroidThreadAlphaSynthWorkerPlayer.kt +++ b/src.kotlin/alphaTab/android/src/main/java/alphaTab/platform/android/AndroidThreadAlphaSynthWorkerPlayer.kt @@ -7,6 +7,7 @@ import alphaTab.core.ecmaScript.Error import alphaTab.core.ecmaScript.Uint8Array import alphaTab.midi.MidiEventType import alphaTab.midi.MidiFile +import alphaTab.model.Score import alphaTab.synth.* import android.util.Log import java.util.concurrent.BlockingQueue @@ -254,6 +255,10 @@ internal class AndroidThreadAlphaSynthWorkerPlayer : IAlphaSynth, Runnable { _workerQueue.add { _player?.setChannelTranspositionPitch(channel, semitones) } } + override fun loadBackingTrack(score: Score, syncPoints: List) { + _workerQueue.add { _player?.loadBackingTrack(score, syncPoints) } + } + override val ready: IEventEmitter = EventEmitter() override val readyForPlayback: IEventEmitter = EventEmitter() override val finished: IEventEmitter = EventEmitter() diff --git a/src.kotlin/alphaTab/android/src/main/java/alphaTab/platform/android/AndroidUiFacade.kt b/src.kotlin/alphaTab/android/src/main/java/alphaTab/platform/android/AndroidUiFacade.kt index db0324b3c..d4bb6055e 100644 --- a/src.kotlin/alphaTab/android/src/main/java/alphaTab/platform/android/AndroidUiFacade.kt +++ b/src.kotlin/alphaTab/android/src/main/java/alphaTab/platform/android/AndroidUiFacade.kt @@ -15,6 +15,7 @@ import alphaTab.platform.skia.AlphaSkiaImage import alphaTab.rendering.IScoreRenderer import alphaTab.rendering.RenderFinishedEventArgs import alphaTab.rendering.utils.Bounds +import alphaTab.synth.BackingTrackPlayer import alphaTab.synth.IAlphaSynth import android.annotation.SuppressLint import android.graphics.Bitmap @@ -56,7 +57,8 @@ internal class AndroidUiFacade : IUiFacade { _renderSurface = renderSurface _renderWrapper = renderWrapper - rootContainer = AndroidRootViewContainer(outerScroll, innerScroll, renderSurface, this::beginInvoke) + rootContainer = + AndroidRootViewContainer(outerScroll, innerScroll, renderSurface, this::beginInvoke) _handler = Handler(outerScroll.context.mainLooper) rootContainerBecameVisible = object : IEventEmitter, @@ -226,8 +228,7 @@ internal class AndroidUiFacade : IUiFacade { _handler.post { // convert AlphaSkia image to Android Bitmap val renderResult = renderResults.renderResult - if (renderResult is AlphaSkiaImage) - { + if (renderResult is AlphaSkiaImage) { renderResults.renderResult = convertAlphaSkiaImageToAndroidBitmap(renderResult) } @@ -237,7 +238,8 @@ internal class AndroidUiFacade : IUiFacade { private fun convertAlphaSkiaImageToAndroidBitmap(renderResult: AlphaSkiaImage): Bitmap { renderResult.use { - val bitmap = Bitmap.createBitmap(renderResult.width.toInt(), renderResult.height.toInt(), + val bitmap = Bitmap.createBitmap( + renderResult.width.toInt(), renderResult.height.toInt(), Bitmap.Config.ARGB_8888 ) val pixels = renderResult.readPixels()!! @@ -386,6 +388,7 @@ internal class AndroidUiFacade : IUiFacade { success(data as Score) return true } + (data is ByteArray) -> { success( ScoreLoader.loadScoreFromBytes( @@ -395,6 +398,7 @@ internal class AndroidUiFacade : IUiFacade { ) return true } + (data is UByteArray) -> { success( ScoreLoader.loadScoreFromBytes( @@ -404,6 +408,7 @@ internal class AndroidUiFacade : IUiFacade { ) return true } + (data is InputStream) -> { val bos = ByteArrayOutputStream() (data as InputStream).copyTo(bos) @@ -415,6 +420,7 @@ internal class AndroidUiFacade : IUiFacade { ) return true } + else -> { return false } @@ -429,19 +435,29 @@ internal class AndroidUiFacade : IUiFacade { player.loadSoundFont(Uint8Array((data as ByteArray).asUByteArray()), append) return true } + (data is UByteArray) -> { player.loadSoundFont(Uint8Array((data as UByteArray)), append) return true } + (data is InputStream) -> { val bos = ByteArrayOutputStream() (data as InputStream).copyTo(bos) player.loadSoundFont(Uint8Array(bos.toByteArray().asUByteArray()), append) return true } + else -> { return false } } } + + override fun createBackingTrackPlayer(): IAlphaSynth { + return BackingTrackPlayer( + AndroidBackingTrackSynthOutput(_renderWrapper.context, this::beginInvoke), + this.api.settings.player.bufferTimeInMilliseconds + ) + } } diff --git a/src/AlphaTabApiBase.ts b/src/AlphaTabApiBase.ts index 05720ea77..dbdbd985a 100644 --- a/src/AlphaTabApiBase.ts +++ b/src/AlphaTabApiBase.ts @@ -67,7 +67,7 @@ import type { Track } from '@src/model/Track'; import type { IContainer } from '@src/platform/IContainer'; import type { IMouseEventArgs } from '@src/platform/IMouseEventArgs'; import type { IUiFacade } from '@src/platform/IUiFacade'; -import { ScrollMode } from '@src/PlayerSettings'; +import { PlayerMode, ScrollMode } from '@src/PlayerSettings'; import { BeatContainerGlyph } from '@src/rendering/glyphs/BeatContainerGlyph'; import type { IScoreRenderer } from '@src/rendering/IScoreRenderer'; @@ -96,6 +96,7 @@ import type { ISynthOutputDevice } from '@src/synth/ISynthOutput'; // biome-ignore lint/correctness/noUnusedImports: https://github.com/biomejs/biome/issues/4677 import type { CoreSettings } from '@src/CoreSettings'; +import { ExternalMediaPlayer } from '@src/synth/ExternalMediaPlayer'; class SelectionInfo { public beat: Beat; @@ -119,6 +120,15 @@ export class AlphaTabApiBase { private _isDestroyed: boolean = false; private _score: Score | null = null; private _tracks: Track[] = []; + private _actualPlayerMode:PlayerMode = PlayerMode.Disabled; + + /** + * The actual player mode which is currently active (e.g. allows determining whether a backing track or the synthesizer is active). + */ + public get actualPlayerMode(): PlayerMode { + return this._actualPlayerMode; + } + /** * Gets the UI facade to use for interacting with the user interface. */ @@ -272,6 +282,11 @@ export class AlphaTabApiBase { uiFacade.initialize(this, settings); Logger.logLevel = this.settings.core.logLevel; + // backwards compatibility: remove in 2.0 + if (this.settings.player.playerMode === PlayerMode.Disabled && this.settings.player.enablePlayer) { + this.settings.player.playerMode = PlayerMode.EnabledAutomatic; + } + Environment.printEnvironmentInfo(false); this.canvasElement = uiFacade.createCanvasElement(); @@ -320,7 +335,7 @@ export class AlphaTabApiBase { this.appendRenderResult(null); // marks last element }); this.renderer.error.on(this.onError.bind(this)); - if (this.settings.player.enablePlayer) { + if (this.settings.player.playerMode !== PlayerMode.Disabled) { this.setupPlayer(); } this.setupClickHandling(); @@ -414,12 +429,9 @@ export class AlphaTabApiBase { } this.renderer.updateSettings(this.settings); // enable/disable player if needed - if (this.settings.player.enablePlayer) { - this.setupPlayer(); - if (score) { - this.player?.applyTranspositionPitches( - MidiFileGenerator.buildTranspositionPitches(score, this.settings) - ); + if (this.settings.player.playerMode !== PlayerMode.Disabled) { + if (this.setupPlayer() && score) { + this.loadMidiForScore(); } } else { this.destroyPlayer(); @@ -919,9 +931,9 @@ export class AlphaTabApiBase { return this.renderer.boundsLookup; } - /** - * Gets the alphaSynth player used for playback. This is the low-level API to the Midi synthesizer used for playback. - */ + // the previously configured player mode to detect changes + private _playerMode: PlayerMode = PlayerMode.Disabled; + /** * The alphaSynth player used for playback. * @remarks @@ -1428,15 +1440,63 @@ export class AlphaTabApiBase { this.destroyCursors(); } - private setupPlayer(): void { + private setupPlayer(): boolean { + let mode = this.settings.player.playerMode; + if (mode === PlayerMode.EnabledAutomatic) { + const score = this.score; + if (!score) { + return false; + } + + if (score?.backingTrack?.rawAudioFile) { + mode = PlayerMode.EnabledBackingTrack; + } else { + mode = PlayerMode.EnabledSynthesizer; + } + } + + if (mode !== this._playerMode) { + this.destroyPlayer(); + } this.updateCursors(); - if (this.player) { - return; + + this._actualPlayerMode = mode; + switch (mode) { + case PlayerMode.Disabled: + this._playerMode = PlayerMode.Disabled; + this.destroyPlayer(); + return false; + + case PlayerMode.EnabledSynthesizer: + if (this.player) { + return true; + } + + // new player needed + this.player = this.uiFacade.createWorkerPlayer(); + break; + + case PlayerMode.EnabledBackingTrack: + if (this.player) { + return true; + } + + // new player needed + this.player = this.uiFacade.createBackingTrackPlayer(); + break; + case PlayerMode.EnabledExternalMedia: + if (this.player) { + return true; + } + + this.player = new ExternalMediaPlayer(this.settings.player.bufferTimeInMilliseconds); + break; } - this.player = this.uiFacade.createWorkerPlayer(); + if (!this.player) { - return; + return false; } + this.player.ready.on(() => { this.loadMidiForScore(); }); @@ -1464,6 +1524,8 @@ export class AlphaTabApiBase { this.player.playbackRangeChanged.on(this.onPlaybackRangeChanged.bind(this)); this.player.finished.on(this.onPlayerFinished.bind(this)); this.setupPlayerEvents(); + + return false; } private loadMidiForScore(): void { @@ -1492,6 +1554,7 @@ export class AlphaTabApiBase { const player = this.player; if (player) { player.loadMidiFile(midiFile); + player.loadBackingTrack(score, generator.syncPoints); player.applyTranspositionPitches(generator.transpositionPitches); } } @@ -1944,7 +2007,7 @@ export class AlphaTabApiBase { this._selectionWrapper = cursors.selectionWrapper; } if (this._currentBeat !== null) { - this.cursorUpdateBeat(this._currentBeat!, false, this._previousTick > 10, true); + this.cursorUpdateBeat(this._currentBeat!, false, this._previousTick > 10, 1, true); } } else if (!this.settings.player.enableCursor && this._cursorWrapper) { this.destroyCursors(); @@ -1959,13 +2022,14 @@ export class AlphaTabApiBase { // we need to update our position caches if we render a tablature this.renderer.postRenderFinished.on(() => { this._currentBeat = null; - this.cursorUpdateTick(this._previousTick, false, this._previousTick > 10); + this.cursorUpdateTick(this._previousTick, false, 1, this._previousTick > 10); }); if (this.player) { this.player.positionChanged.on(e => { this._previousTick = e.currentTick; this.uiFacade.beginInvoke(() => { - this.cursorUpdateTick(e.currentTick, false, false, e.isSeek); + const cursorSpeed = e.modifiedTempo / e.originalTempo; + this.cursorUpdateTick(e.currentTick, false, cursorSpeed, false, e.isSeek); }); }); this.player.stateChanged.on(e => { @@ -1990,9 +2054,12 @@ export class AlphaTabApiBase { private cursorUpdateTick( tick: number, stop: boolean, + cursorSpeed: number, shouldScroll: boolean = false, forceUpdate: boolean = false ): void { + this._previousTick = tick; + const cache: MidiTickLookup | null = this._tickCache; if (cache) { const tracks = this._trackIndexLookup; @@ -2003,6 +2070,7 @@ export class AlphaTabApiBase { beat, stop, shouldScroll, + cursorSpeed, forceUpdate || this.playerState === PlayerState.Paused ); } @@ -2017,6 +2085,7 @@ export class AlphaTabApiBase { lookupResult: MidiTickLookupFindBeatResult, stop: boolean, shouldScroll: boolean, + cursorSpeed: number, forceUpdate: boolean = false ): void { const beat: Beat = lookupResult.beat; @@ -2064,7 +2133,8 @@ export class AlphaTabApiBase { cache!, beatBoundings!, shouldScroll, - lookupResult.cursorMode + lookupResult.cursorMode, + cursorSpeed ); }); } @@ -2153,7 +2223,8 @@ export class AlphaTabApiBase { cache: BoundsLookup, beatBoundings: BeatBounds, shouldScroll: boolean, - cursorMode: MidiTickLookupFindBeatResultCursorMode + cursorMode: MidiTickLookupFindBeatResultCursorMode, + cursorSpeed: number ) { const barCursor = this._barCursor; const beatCursor = this._beatCursor; @@ -2167,12 +2238,33 @@ export class AlphaTabApiBase { barCursor.setBounds(barBounds.x, barBounds.y, barBounds.w, barBounds.h); } + let nextBeatX: number = 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: BeatBounds | null = 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 @@ -2196,25 +2288,11 @@ export class AlphaTabApiBase { } if (this.settings.player.enableAnimatedBeatCursor && beatCursor) { - let nextBeatX: number = 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: BeatBounds | null = 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); }); } } @@ -2576,7 +2654,7 @@ export class AlphaTabApiBase { } if ( - this.settings.player.enablePlayer && + this.settings.player.playerMode !== PlayerMode.Disabled && this.settings.player.enableCursor && this.settings.player.enableUserInteraction ) { @@ -2628,7 +2706,7 @@ export class AlphaTabApiBase { } if ( - this.settings.player.enablePlayer && + this.settings.player.playerMode !== PlayerMode.Disabled && this.settings.player.enableCursor && this.settings.player.enableUserInteraction ) { @@ -2654,7 +2732,7 @@ export class AlphaTabApiBase { // move to selection start this._currentBeat = null; // reset current beat so it is updating the cursor if (this._playerState === PlayerState.Paused) { - this.cursorUpdateTick(this._tickCache.getBeatStart(this._selectionStart.beat), false); + this.cursorUpdateTick(this._tickCache.getBeatStart(this._selectionStart.beat), false, 1); } this.tickPosition = realMasterBarStart + this._selectionStart.beat.playbackStart; // set playback range @@ -2775,7 +2853,7 @@ export class AlphaTabApiBase { this.renderer.postRenderFinished.on(() => { if ( !this._selectionStart || - !this.settings.player.enablePlayer || + this.settings.player.playerMode === PlayerMode.Disabled || !this.settings.player.enableCursor || !this.settings.player.enableUserInteraction ) { @@ -2921,6 +2999,9 @@ export class AlphaTabApiBase { } (this.scoreLoaded as EventEmitterOfT).trigger(score); this.uiFacade.triggerEvent(this.container, 'scoreLoaded', score); + if (this.setupPlayer()) { + this.loadMidiForScore(); + } } /** diff --git a/src/Environment.ts b/src/Environment.ts index 45515da50..07e1c4d26 100644 --- a/src/Environment.ts +++ b/src/Environment.ts @@ -51,9 +51,7 @@ import { FontLoadingChecker } from '@src/util/FontLoadingChecker'; import { Logger } from '@src/Logger'; import { LeftHandTapEffectInfo } from '@src/rendering/effects/LeftHandTapEffectInfo'; import { CapellaImporter } from '@src/importer/CapellaImporter'; -import { ResizeObserverPolyfill } from '@src/platform/javascript/ResizeObserverPolyfill'; import { WebPlatform } from '@src/platform/javascript/WebPlatform'; -import { IntersectionObserverPolyfill } from '@src/platform/javascript/IntersectionObserverPolyfill'; import { AlphaSynthWebWorklet } from '@src/platform/javascript/AlphaSynthAudioWorkletOutput'; import { SkiaCanvas } from '@src/platform/skia/SkiaCanvas'; import type { Font } from '@src/model/Font'; @@ -720,32 +718,6 @@ export class Environment { if (Environment.webPlatform === WebPlatform.Browser || Environment.webPlatform === WebPlatform.BrowserModule) { Environment.registerJQueryPlugin(); Environment.HighDpiFactor = window.devicePixelRatio; - // ResizeObserver API does not yet exist so long on Safari (only start 2020 with iOS Safari 13.7 and Desktop 13.1) - // so we better add a polyfill for it - if (!('ResizeObserver' in Environment.globalThis)) { - (Environment.globalThis as any).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 as any).IntersectionObserver = IntersectionObserverPolyfill; - } - - if (!('replaceChildren' in Element.prototype)) { - (Element.prototype as Element).replaceChildren = function (...nodes: (Node | string)[]) { - this.innerHTML = ''; - this.append(...nodes); - }; - (Document.prototype as Document).replaceChildren = (Element.prototype as Element).replaceChildren; - (DocumentFragment.prototype as DocumentFragment).replaceChildren = ( - Element.prototype as Element - ).replaceChildren; - } - if (!('replaceAll' in String.prototype)) { - (String.prototype as any).replaceAll = function (str: string, newStr: string) { - return this.replace(new RegExp(str, 'g'), newStr); - }; - } } Environment.createWebWorker = createWebWorker; diff --git a/src/PlayerSettings.ts b/src/PlayerSettings.ts index 7ab1384cf..3b3658af1 100644 --- a/src/PlayerSettings.ts +++ b/src/PlayerSettings.ts @@ -119,6 +119,35 @@ export enum PlayerOutputMode { WebAudioScriptProcessor = 1 } +/** + * Lists the different modes how the internal alphaTab player (and related cursor behavior) is working. + */ +export enum PlayerMode { + /** + * The player functionality is fully disabled. + */ + Disabled = 0, + /** + * 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. + */ + EnabledAutomatic = 1, + /** + * The player functionality is enabled and the synthesizer is used (even if a backing track is embedded in the file). + */ + EnabledSynthesizer = 2, + /** + * 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). + */ + EnabledBackingTrack = 3, + /** + * 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. + */ + EnabledExternalMedia = 4 +} + /** * The player settings control how the audio playback and UI is behaving. * @json @@ -167,6 +196,7 @@ export class PlayerSettings { * @since 0.9.6 * @defaultValue `false` * @category Player + * @deprecated Use {@link playerMode} instead. * @remarks * This setting configures whether the player feature is enabled or not. Depending on the platform enabling the player needs some additional actions of the developer. * For the JavaScript version the [player.soundFont](/docs/reference/settings/player/soundfont) property must be set to the URL of the sound font that should be used or it must be loaded manually via API. @@ -176,6 +206,38 @@ export class PlayerSettings { */ public enablePlayer: boolean = 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. + */ + public playerMode: PlayerMode = PlayerMode.Disabled; + /** * Whether playback cursors should be displayed. * @since 0.9.6 diff --git a/src/alphaTab.core.ts b/src/alphaTab.core.ts index e1c198c2c..126ffa127 100644 --- a/src/alphaTab.core.ts +++ b/src/alphaTab.core.ts @@ -1,3 +1,5 @@ +import '@src/alphaTab.polyfills'; + export { CoreSettings } from '@src/CoreSettings'; export { DisplaySettings, SystemsLayoutMode } from '@src/DisplaySettings'; export { LayoutMode } from '@src/LayoutMode'; @@ -9,7 +11,8 @@ export { ScrollMode, SlidePlaybackSettings, VibratoPlaybackSettings, - PlayerOutputMode + PlayerOutputMode, + PlayerMode } from '@src/PlayerSettings'; export { ProgressEventArgs } from '@src/ProgressEventArgs'; export { RenderingResources } from '@src/RenderingResources'; diff --git a/src/alphaTab.polyfills.ts b/src/alphaTab.polyfills.ts new file mode 100644 index 000000000..9cc7fc96c --- /dev/null +++ b/src/alphaTab.polyfills.ts @@ -0,0 +1,41 @@ +import { ResizeObserverPolyfill } from '@src/platform/javascript/ResizeObserverPolyfill'; +import { IntersectionObserverPolyfill } from '@src/platform/javascript/IntersectionObserverPolyfill'; + +/*@target web*/ +(() => { + if (typeof Symbol.dispose === 'undefined') { + type Writeable = { -readonly [K in keyof T]: T[K] }; + (Symbol as Writeable).dispose = Symbol('Symbol.dispose') as (typeof 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 as any).ResizeObserver = ResizeObserverPolyfill; + } + + // IntersectionObserver API does not on older iOS versions + // so we better add a polyfill for it + if (!('IntersectionObserver' in globalThis)) { + (globalThis as any).IntersectionObserver = IntersectionObserverPolyfill; + } + + if (!('replaceChildren' in Element.prototype)) { + (Element.prototype as Element).replaceChildren = function (...nodes: (Node | string)[]) { + this.innerHTML = ''; + this.append(...nodes); + }; + (Document.prototype as Document).replaceChildren = (Element.prototype as Element).replaceChildren; + (DocumentFragment.prototype as DocumentFragment).replaceChildren = ( + Element.prototype as Element + ).replaceChildren; + } + } + + if (!('replaceAll' in String.prototype)) { + (String.prototype as any).replaceAll = function (str: string, newStr: string) { + return this.replace(new RegExp(str, 'g'), newStr); + }; + } +})(); diff --git a/src/generated/PlayerSettingsJson.ts b/src/generated/PlayerSettingsJson.ts index 1f9185c46..e01d022a0 100644 --- a/src/generated/PlayerSettingsJson.ts +++ b/src/generated/PlayerSettingsJson.ts @@ -4,6 +4,7 @@ // the code is regenerated. // import { PlayerOutputMode } from "@src/PlayerSettings"; +import { PlayerMode } from "@src/PlayerSettings"; import { ScrollMode } from "@src/PlayerSettings"; import { VibratoPlaybackSettingsJson } from "@src/generated/VibratoPlaybackSettingsJson"; import { SlidePlaybackSettingsJson } from "@src/generated/SlidePlaybackSettingsJson"; @@ -53,6 +54,7 @@ export interface PlayerSettingsJson { * @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. @@ -61,6 +63,37 @@ export interface PlayerSettingsJson { * 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. */ enablePlayer?: boolean; + /** + * 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. + */ + playerMode?: PlayerMode | keyof typeof PlayerMode | Lowercase; /** * Whether playback cursors should be displayed. * @since 0.9.6 diff --git a/src/generated/PlayerSettingsSerializer.ts b/src/generated/PlayerSettingsSerializer.ts index 441c4611f..f77f808a5 100644 --- a/src/generated/PlayerSettingsSerializer.ts +++ b/src/generated/PlayerSettingsSerializer.ts @@ -8,6 +8,7 @@ import { JsonHelper } from "@src/io/JsonHelper"; import { VibratoPlaybackSettingsSerializer } from "@src/generated/VibratoPlaybackSettingsSerializer"; import { SlidePlaybackSettingsSerializer } from "@src/generated/SlidePlaybackSettingsSerializer"; import { PlayerOutputMode } from "@src/PlayerSettings"; +import { PlayerMode } from "@src/PlayerSettings"; import { ScrollMode } from "@src/PlayerSettings"; export class PlayerSettingsSerializer { public static fromJson(obj: PlayerSettings, m: unknown): void { @@ -26,6 +27,7 @@ export class PlayerSettingsSerializer { /*@target web*/ o.set("outputmode", obj.outputMode as number); o.set("enableplayer", obj.enablePlayer); + o.set("playermode", obj.playerMode as number); o.set("enablecursor", obj.enableCursor); o.set("enableanimatedbeatcursor", obj.enableAnimatedBeatCursor); o.set("enableelementhighlighting", obj.enableElementHighlighting); @@ -61,6 +63,9 @@ export class PlayerSettingsSerializer { case "enableplayer": obj.enablePlayer = v! as boolean; return true; + case "playermode": + obj.playerMode = JsonHelper.parseEnum(v, PlayerMode)!; + return true; case "enablecursor": obj.enableCursor = v! as boolean; return true; diff --git a/src/generated/model/AutomationCloner.ts b/src/generated/model/AutomationCloner.ts index 20359463f..0d0adf953 100644 --- a/src/generated/model/AutomationCloner.ts +++ b/src/generated/model/AutomationCloner.ts @@ -4,12 +4,14 @@ // the code is regenerated. // import { Automation } from "@src/model/Automation"; +import { SyncPointDataCloner } from "@src/generated/model/SyncPointDataCloner"; export class AutomationCloner { public static clone(original: Automation): Automation { const clone = new Automation(); 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; diff --git a/src/generated/model/AutomationSerializer.ts b/src/generated/model/AutomationSerializer.ts index 82495b661..5ff68af9d 100644 --- a/src/generated/model/AutomationSerializer.ts +++ b/src/generated/model/AutomationSerializer.ts @@ -5,7 +5,9 @@ // import { Automation } from "@src/model/Automation"; import { JsonHelper } from "@src/io/JsonHelper"; +import { SyncPointDataSerializer } from "@src/generated/model/SyncPointDataSerializer"; import { AutomationType } from "@src/model/Automation"; +import { SyncPointData } from "@src/model/Automation"; export class AutomationSerializer { public static fromJson(obj: Automation, m: unknown): void { if (!m) { @@ -21,6 +23,9 @@ export class AutomationSerializer { o.set("islinear", obj.isLinear); o.set("type", obj.type as number); 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; @@ -36,6 +41,15 @@ export class AutomationSerializer { case "value": obj.value = v! as number; 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! as number; return true; diff --git a/src/generated/model/BackingTrackSerializer.ts b/src/generated/model/BackingTrackSerializer.ts new file mode 100644 index 000000000..79a344d87 --- /dev/null +++ b/src/generated/model/BackingTrackSerializer.ts @@ -0,0 +1,31 @@ +// +// This code was auto-generated. +// Changes to this file may cause incorrect behavior and will be lost if +// the code is regenerated. +// +import { BackingTrack } from "@src/model/BackingTrack"; +import { JsonHelper } from "@src/io/JsonHelper"; +export class BackingTrackSerializer { + public static fromJson(obj: BackingTrack, m: unknown): void { + if (!m) { + return; + } + JsonHelper.forEach(m, (v, k) => BackingTrackSerializer.setProperty(obj, k, v)); + } + public static toJson(obj: BackingTrack | null): Map | null { + if (!obj) { + return null; + } + const o = new Map(); + o.set("padding", obj.padding); + return o; + } + public static setProperty(obj: BackingTrack, property: string, v: unknown): boolean { + switch (property) { + case "padding": + obj.padding = v! as number; + return true; + } + return false; + } +} diff --git a/src/generated/model/MasterBarSerializer.ts b/src/generated/model/MasterBarSerializer.ts index 7dd3dcb70..17901c804 100644 --- a/src/generated/model/MasterBarSerializer.ts +++ b/src/generated/model/MasterBarSerializer.ts @@ -38,6 +38,9 @@ export class MasterBarSerializer { o.set("section", SectionSerializer.toJson(obj.section)); } o.set("tempoautomations", obj.tempoAutomations.map(i => AutomationSerializer.toJson(i))); + if (obj.syncPoints !== undefined) { + o.set("syncpoints", obj.syncPoints?.map(i => AutomationSerializer.toJson(i))); + } if (obj.fermata !== null) { const m = new Map(); o.set("fermata", m); @@ -104,6 +107,16 @@ export class MasterBarSerializer { obj.tempoAutomations.push(i); } return true; + case "syncpoints": + if (v) { + obj.syncPoints = []; + for (const o of (v as (Map | null)[])) { + const i = new Automation(); + AutomationSerializer.fromJson(i, o); + obj.addSyncPoint(i); + } + } + return true; case "fermata": obj.fermata = new Map(); JsonHelper.forEach(v, (v, k) => { diff --git a/src/generated/model/ScoreSerializer.ts b/src/generated/model/ScoreSerializer.ts index 56df3c800..3370180c3 100644 --- a/src/generated/model/ScoreSerializer.ts +++ b/src/generated/model/ScoreSerializer.ts @@ -8,9 +8,11 @@ import { JsonHelper } from "@src/io/JsonHelper"; import { MasterBarSerializer } from "@src/generated/model/MasterBarSerializer"; import { TrackSerializer } from "@src/generated/model/TrackSerializer"; import { RenderStylesheetSerializer } from "@src/generated/model/RenderStylesheetSerializer"; +import { BackingTrackSerializer } from "@src/generated/model/BackingTrackSerializer"; import { ScoreStyleSerializer } from "@src/generated/model/ScoreStyleSerializer"; import { MasterBar } from "@src/model/MasterBar"; import { Track } from "@src/model/Track"; +import { BackingTrack } from "@src/model/BackingTrack"; import { ScoreStyle } from "@src/model/Score"; export class ScoreSerializer { public static fromJson(obj: Score, m: unknown): void { @@ -41,6 +43,9 @@ export class ScoreSerializer { o.set("defaultsystemslayout", obj.defaultSystemsLayout); o.set("systemslayout", obj.systemsLayout); o.set("stylesheet", RenderStylesheetSerializer.toJson(obj.stylesheet)); + if (obj.backingTrack) { + o.set("backingtrack", BackingTrackSerializer.toJson(obj.backingTrack)); + } if (obj.style) { o.set("style", ScoreStyleSerializer.toJson(obj.style)); } @@ -109,6 +114,15 @@ export class ScoreSerializer { case "stylesheet": RenderStylesheetSerializer.fromJson(obj.stylesheet, v); return true; + case "backingtrack": + if (v) { + obj.backingTrack = new BackingTrack(); + BackingTrackSerializer.fromJson(obj.backingTrack, v); + } + else { + obj.backingTrack = undefined; + } + return true; case "style": if (v) { obj.style = new ScoreStyle(); diff --git a/src/generated/model/SyncPointDataCloner.ts b/src/generated/model/SyncPointDataCloner.ts new file mode 100644 index 000000000..8e1b2b506 --- /dev/null +++ b/src/generated/model/SyncPointDataCloner.ts @@ -0,0 +1,15 @@ +// +// This code was auto-generated. +// Changes to this file may cause incorrect behavior and will be lost if +// the code is regenerated. +// +import { SyncPointData } from "@src/model/Automation"; +export class SyncPointDataCloner { + public static clone(original: SyncPointData): SyncPointData { + const clone = new SyncPointData(); + clone.barOccurence = original.barOccurence; + clone.modifiedTempo = original.modifiedTempo; + clone.millisecondOffset = original.millisecondOffset; + return clone; + } +} diff --git a/src/generated/model/SyncPointDataSerializer.ts b/src/generated/model/SyncPointDataSerializer.ts new file mode 100644 index 000000000..de651a23e --- /dev/null +++ b/src/generated/model/SyncPointDataSerializer.ts @@ -0,0 +1,39 @@ +// +// This code was auto-generated. +// Changes to this file may cause incorrect behavior and will be lost if +// the code is regenerated. +// +import { SyncPointData } from "@src/model/Automation"; +import { JsonHelper } from "@src/io/JsonHelper"; +export class SyncPointDataSerializer { + public static fromJson(obj: SyncPointData, m: unknown): void { + if (!m) { + return; + } + JsonHelper.forEach(m, (v, k) => SyncPointDataSerializer.setProperty(obj, k, v)); + } + public static toJson(obj: SyncPointData | null): Map | null { + 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; + } + public static setProperty(obj: SyncPointData, property: string, v: unknown): boolean { + switch (property) { + case "baroccurence": + obj.barOccurence = v! as number; + return true; + case "modifiedtempo": + obj.modifiedTempo = v! as number; + return true; + case "millisecondoffset": + obj.millisecondOffset = v! as number; + return true; + } + return false; + } +} diff --git a/src/importer/Gp7To8Importer.ts b/src/importer/Gp7To8Importer.ts index 135b1fa36..118d13085 100644 --- a/src/importer/Gp7To8Importer.ts +++ b/src/importer/Gp7To8Importer.ts @@ -38,7 +38,9 @@ export class Gp7To8Importer extends ScoreImporter { let binaryStylesheetData: Uint8Array | null = null; let partConfigurationData: Uint8Array | null = null; let layoutConfigurationData: Uint8Array | null = 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); @@ -63,6 +65,12 @@ export class Gp7To8Importer extends ScoreImporter { // the score information as XML we need to parse. Logger.debug(this.name, 'Start Parsing score.gpif'); const gpifParser: 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: Score = gpifParser.score; diff --git a/src/importer/GpifParser.ts b/src/importer/GpifParser.ts index 96bb5d8ee..05dfebabb 100644 --- a/src/importer/GpifParser.ts +++ b/src/importer/GpifParser.ts @@ -1,6 +1,6 @@ import { UnsupportedFormatError } from '@src/importer/UnsupportedFormatError'; import { AccentuationType } from '@src/model/AccentuationType'; -import { Automation, AutomationType } from '@src/model/Automation'; +import { Automation, AutomationType, SyncPointData } from '@src/model/Automation'; import { Bar, BarLineStyle, SustainPedalMarker, SustainPedalMarkerType } from '@src/model/Bar'; import { Beat, BeatBeamingMode } from '@src/model/Beat'; import { BendPoint } from '@src/model/BendPoint'; @@ -54,6 +54,7 @@ import { NoteOrnament } from '@src/model/NoteOrnament'; import { Rasgueado } from '@src/model/Rasgueado'; import { Direction } from '@src/model/Direction'; import { ModelUtils } from '@src/model/ModelUtils'; +import { BackingTrack } from '@src/model/BackingTrack'; /** * This structure represents a duration within a gpif @@ -95,7 +96,14 @@ export class GpifParser { */ private static readonly BendPointValueFactor: number = 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. + private static readonly SampleRate = 44100; + + public score!: Score; + private _backingTrackAssetId: string | undefined; private _masterTrackAutomations!: Map; private _automationsPerTrackIdAndBarIndex!: Map>; @@ -126,6 +134,8 @@ export class GpifParser { [KeySignature, KeySignatureType] >(); + public loadAsset?: (fileName: string) => Uint8Array | undefined; + public parseXml(xml: string, settings: Settings): void { this._masterTrackAutomations = new Map(); this._automationsPerTrackIdAndBarIndex = new Map>(); @@ -187,6 +197,9 @@ export class GpifParser { case 'MasterTrack': this.parseMasterTrackNode(n); break; + case 'BackingTrack': + this.parseBackingTrackNode(n); + break; case 'Tracks': this.parseTracksNode(n); break; @@ -208,6 +221,9 @@ export class GpifParser { case 'Rhythms': this.parseRhythms(n); break; + case 'Assets': + this.parseAssets(n); + break; } } } else { @@ -215,6 +231,38 @@ export class GpifParser { } } + private parseAssets(element: XmlNode) { + for (const c of element.childElements()) { + switch (c.localName) { + case 'Asset': + if (c.getAttribute('id') === this._backingTrackAssetId) { + this.parseBackingTrackAsset(c); + } + break; + } + } + } + private parseBackingTrackAsset(element: XmlNode) { + 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; + } + } + } + // // ... // @@ -303,7 +351,43 @@ export class GpifParser { 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); + } + + // + // ... + // + private parseBackingTrackNode(node: XmlNode): void { + 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 + } } // @@ -354,6 +438,8 @@ export class GpifParser { let textValue: string | null = null; let reference: number = 0; let text: string | null = null; + let syncPointValue: SyncPointData | undefined = undefined; + for (const c of node.childElements()) { switch (c.localName) { case 'Type': @@ -371,6 +457,29 @@ export class GpifParser { case 'Value': 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: string[] = GpifParser.splitSafe(c.innerText); // Issue 391: Some GPX files might have @@ -397,6 +506,13 @@ export class GpifParser { case 'Tempo': automation = Automation.buildTempoAutomation(isLinear, ratioPosition, numberValue, reference); break; + case 'SyncPoint': + automation = new Automation(); + automation.type = AutomationType.SyncPoint; + automation.isLinear = isLinear; + automation.ratioPosition = ratioPosition; + automation.syncPointValue = syncPointValue; + break; case 'Sound': if (textValue && sounds && sounds.has(textValue)) { automation = Automation.buildInstrumentAutomation( @@ -2619,14 +2735,19 @@ export class GpifParser { const masterBar: MasterBar = this.score.masterBars[barNumber]; for (let i: number = 0, j: number = automations.length; i < j; i++) { const automation: 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; } } } diff --git a/src/midi/AlphaSynthMidiFileHandler.ts b/src/midi/AlphaSynthMidiFileHandler.ts index 1512008e0..aa34595ae 100644 --- a/src/midi/AlphaSynthMidiFileHandler.ts +++ b/src/midi/AlphaSynthMidiFileHandler.ts @@ -104,8 +104,9 @@ export class AlphaSynthMidiFileHandler implements IMidiFileHandler { public addTempo(tick: number, tempo: number): void { // bpm -> microsecond per quarter note - const tempoInUsq: number = (60000000 / tempo) | 0; - this._midiFile.addEvent(new TempoChangeEvent(tick, tempoInUsq)); + const tempoEvent = new TempoChangeEvent(tick, 0); + tempoEvent.beatsPerMinute = tempo; + this._midiFile.addEvent(tempoEvent); } public addBend(track: number, tick: number, channel: number, value: number): void { diff --git a/src/midi/MidiEvent.ts b/src/midi/MidiEvent.ts index 22d835ac8..fa7711905 100644 --- a/src/midi/MidiEvent.ts +++ b/src/midi/MidiEvent.ts @@ -411,7 +411,20 @@ export class TempoChangeEvent extends MidiEvent { /** * The tempo in microseconds per quarter note (aka USQ). A time format typically for midi. */ - public microSecondsPerQuarterNote: number; + public get microSecondsPerQuarterNote(): number { + return 60000000 / this.beatsPerMinute; + } +/** + * The tempo in microseconds per quarter note (aka USQ). A time format typically for midi. + */ + public set microSecondsPerQuarterNote(value : number) { + this.beatsPerMinute = 60000000 / value; + } + + /** + * The tempo in beats per minute + */ + public beatsPerMinute: number = 0; public constructor(tick: number, microSecondsPerQuarterNote: number) { super(0, tick, MidiEventType.TempoChange); diff --git a/src/midi/MidiFileGenerator.ts b/src/midi/MidiFileGenerator.ts index 70a647194..00e69fad4 100644 --- a/src/midi/MidiFileGenerator.ts +++ b/src/midi/MidiFileGenerator.ts @@ -39,6 +39,7 @@ import { DynamicValue } from '@src/model/DynamicValue'; import { FadeType } from '@src/model/FadeType'; import { NoteOrnament } from '@src/model/NoteOrnament'; import { Rasgueado } from '@src/model/Rasgueado'; +import { BackingTrackSyncPoint } from '@src/synth/IAlphaSynth'; export class MidiNoteDuration { public noteOnly: number = 0; @@ -83,6 +84,11 @@ export class MidiFileGenerator { */ public applyTranspositionPitches: boolean = true; + /** + * The computed sync points for synchronizing the midi file with an external backing track. + */ + public syncPoints: BackingTrackSyncPoint[] = []; + /** * Gets the transposition pitches for the individual midi channels. */ @@ -121,6 +127,7 @@ export class MidiFileGenerator { let currentTempo = this._score.tempo; // store the previous played bar for repeats + const barOccurence = new Map(); while (!controller.finished) { const index: number = controller.index; const bar: MasterBar = this._score.masterBars[index]; @@ -128,7 +135,11 @@ export class MidiFileGenerator { 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; @@ -224,7 +235,8 @@ export class MidiFileGenerator { masterBar: MasterBar, previousMasterBar: MasterBar | null, currentTick: number, - currentTempo: number + currentTempo: number, + barOccurence: number ): void { // time signature if ( @@ -260,6 +272,16 @@ export class MidiFileGenerator { 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; diff --git a/src/model/Automation.ts b/src/model/Automation.ts index 7b38c3414..89f9455ed 100644 --- a/src/model/Automation.ts +++ b/src/model/Automation.ts @@ -17,7 +17,36 @@ export enum AutomationType { /** * Balance change. */ - Balance = 3 + Balance = 3, + /** + * A sync point for synchronizing the internal time axis with an external audio track. + */ + SyncPoint = 4 +} + +/** + * Represents the data of a sync point for synchronizing the internal time axis with + * an external audio file. + * @cloneable + * @json + * @json_strict + */ +export class SyncPointData { + /** + * Indicates for which repeat occurence this sync point is valid (e.g. 0 on the first time played, 1 on the second time played) + */ + public barOccurence: number = 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. + */ + public modifiedTempo: number = 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. + */ + public millisecondOffset: number = 0; } /** @@ -42,6 +71,11 @@ export class Automation { */ public value: number = 0; + /** + * The sync point data in case of {@link AutomationType.SyncPoint} + */ + public syncPointValue: SyncPointData | undefined; + /** * Gets or sets the relative position of of the automation. */ diff --git a/src/model/BackingTrack.ts b/src/model/BackingTrack.ts new file mode 100644 index 000000000..e1809946d --- /dev/null +++ b/src/model/BackingTrack.ts @@ -0,0 +1,19 @@ +/** + * Holds information about the backing track which can be played instead of synthesized audio. + * @json + * @json_strict + */ +export class BackingTrack { + + /** + * The data of the raw audio file to be used for playback. + * @json_ignore + */ + public rawAudioFile: Uint8Array | undefined; + + /** + * 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). + */ + public padding:number = 0; +} diff --git a/src/model/JsonConverter.ts b/src/model/JsonConverter.ts index d1ee80d7b..b27279ab2 100644 --- a/src/model/JsonConverter.ts +++ b/src/model/JsonConverter.ts @@ -237,10 +237,9 @@ export class JsonConverter { JsonHelper.getValue(midiEvent, 'program') as number ); case MidiEventType.TempoChange: - return new TempoChangeEvent( - tick, - JsonHelper.getValue(midiEvent, 'microSecondsPerQuarterNote') as number - ); + const tempo = new TempoChangeEvent(tick, 0); + tempo.beatsPerMinute = JsonHelper.getValue(midiEvent, 'beatsPerMinute') as number; + return tempo; case MidiEventType.PitchBend: return new PitchBendEvent( track, @@ -337,7 +336,7 @@ export class JsonConverter { o.set('program', (midiEvent as ProgramChangeEvent).program); break; case MidiEventType.TempoChange: - o.set('microSecondsPerQuarterNote', (midiEvent as TempoChangeEvent).microSecondsPerQuarterNote); + o.set('beatsPerMinute', (midiEvent as TempoChangeEvent).beatsPerMinute); break; case MidiEventType.PitchBend: o.set('channel', (midiEvent as PitchBendEvent).channel); diff --git a/src/model/MasterBar.ts b/src/model/MasterBar.ts index 11686af96..d4e00e2ab 100644 --- a/src/model/MasterBar.ts +++ b/src/model/MasterBar.ts @@ -149,6 +149,13 @@ export class MasterBar { */ public tempoAutomations: Automation[] = []; + /** + * The sync points for this master bar to synchronize the alphaTab time axis with the + * external backing track audio. + * @json_add addSyncPoint + */ + public syncPoints: Automation[] | undefined; + /** * Gets or sets the reference to the score this song belongs to. * @json_ignore @@ -247,4 +254,15 @@ export class MasterBar { } return null; } + + /** + * Adds the given sync point to the list of sync points for this bar. + * @param syncPoint The sync point to add. + */ + public addSyncPoint(syncPoint: Automation) { + if (!this.syncPoints) { + this.syncPoints = []; + } + this.syncPoints!.push(syncPoint); + } } diff --git a/src/model/Score.ts b/src/model/Score.ts index 8469329e7..d780981a6 100644 --- a/src/model/Score.ts +++ b/src/model/Score.ts @@ -11,6 +11,7 @@ import { Note } from '@src/model/Note'; // biome-ignore lint/correctness/noUnusedImports: https://github.com/biomejs/biome/issues/4677 import type { NotationSettings } from '@src/NotationSettings'; import { TextAlign } from '@src/platform/ICanvas'; +import type { BackingTrack } from '@src/model/BackingTrack'; /** * Lists all graphical sub elements within a {@link Score} which can be styled via {@link Score.style} @@ -305,6 +306,11 @@ export class Score { */ public stylesheet: RenderStylesheet = new RenderStylesheet(); + /** + * Information about the backing track that can be used instead of the synthesized audio. + */ + public backingTrack: BackingTrack | undefined; + /** * The style customizations for this item. */ diff --git a/src/model/_barrel.ts b/src/model/_barrel.ts index ad1daddb6..b562569a0 100644 --- a/src/model/_barrel.ts +++ b/src/model/_barrel.ts @@ -1,6 +1,6 @@ export { AccentuationType } from '@src/model/AccentuationType'; export { AccidentalType } from '@src/model/AccidentalType'; -export { AutomationType, Automation } from '@src/model/Automation'; +export { AutomationType, Automation, SyncPointData } from '@src/model/Automation'; export { Bar, SustainPedalMarkerType, SustainPedalMarker, BarSubElement, BarStyle, BarLineStyle } from '@src/model/Bar'; export { BarreShape } from '@src/model/BarreShape'; export { Beat, BeatBeamingMode, BeatSubElement, BeatStyle } from '@src/model/Beat'; @@ -60,3 +60,4 @@ export { Voice, VoiceSubElement, VoiceStyle } from '@src/model/Voice'; export { WahPedal } from '@src/model/WahPedal'; export { WhammyType } from '@src/model/WhammyType'; export { ElementStyle } from '@src/model/ElementStyle'; +export { BackingTrack } from '@src/model/BackingTrack'; diff --git a/src/platform/IUiFacade.ts b/src/platform/IUiFacade.ts index 300fcf76c..be4a76435 100644 --- a/src/platform/IUiFacade.ts +++ b/src/platform/IUiFacade.ts @@ -88,11 +88,17 @@ export interface IUiFacade { createWorkerRenderer(): IScoreRenderer; /** - * Tells the UI layer to create a player worker. + * Tells the UI layer to create a player worker for the synthesizer. * @returns */ createWorkerPlayer(): IAlphaSynth | null; + /** + * Tells the UI layer to create a player which can play backing tracks. + * @returns + */ + createBackingTrackPlayer(): IAlphaSynth | null; + /** * Creates the cursor objects that are used to highlight the currently played beats and bars. * @returns diff --git a/src/platform/javascript/AlphaSynthWebAudioOutputBase.ts b/src/platform/javascript/AlphaSynthWebAudioOutputBase.ts index e8ebb578f..453b6d70d 100644 --- a/src/platform/javascript/AlphaSynthWebAudioOutputBase.ts +++ b/src/platform/javascript/AlphaSynthWebAudioOutputBase.ts @@ -24,6 +24,98 @@ export class AlphaSynthWebAudioSynthOutputDevice implements ISynthOutputDevice { public isDefault: boolean = false; } +/** + * Some shared web audio stuff. + * @target web + */ +export class WebAudioHelper { + private static _knownDevices: ISynthOutputDevice[] = []; + + public static findKnownDevice(sinkId: string) { + return WebAudioHelper._knownDevices.find(d => d.deviceId === sinkId); + } + + public static createAudioContext(): AudioContext { + if ('AudioContext' in Environment.globalThis) { + return new AudioContext(); + } + if ('webkitAudioContext' in Environment.globalThis) { + return new webkitAudioContext(); + } + throw new AlphaTabError(AlphaTabErrorType.General, 'AudioContext not found'); + } + + public static async checkSinkIdSupport() { + // https://caniuse.com/mdn-api_audiocontext_sinkid + const context = WebAudioHelper.createAudioContext(); + if (!('setSinkId' in context)) { + Logger.warning('WebAudio', 'Browser does not support changing the output device'); + return false; + } + return true; + } + + public static async enumerateOutputDevices(): Promise { + try { + if (!(await WebAudioHelper.checkSinkIdSupport())) { + return []; + } + + // Request permissions + try { + await navigator.mediaDevices.getUserMedia({ audio: true }); + } catch (e) { + // sometimes we get an error but can still enumerate, e.g. if microphone access is denied, + // we can still load the output devices in some cases. + Logger.warning('WebAudio', 'Output device permission rejected', e); + } + + // load devices + const devices = await navigator.mediaDevices.enumerateDevices(); + + // default device candidates + let defaultDeviceGroupId = ''; + let defaultDeviceId = ''; + + const realDevices = new Map(); + for (const device of devices) { + if (device.kind === 'audiooutput') { + realDevices.set(device.groupId, new AlphaSynthWebAudioSynthOutputDevice(device)); + + // chromium has the default device as deviceID: 'default' + // the standard defines empty-string as default + if (device.deviceId === 'default' || device.deviceId === '') { + defaultDeviceGroupId = device.groupId; + defaultDeviceId = device.deviceId; + } + } + } + + const final = Array.from(realDevices.values()); + + // flag default device + let defaultDevice = final.find(d => d.deviceId === defaultDeviceId); + if (!defaultDevice) { + defaultDevice = final.find(d => d.device.groupId === defaultDeviceGroupId); + } + if (!defaultDevice && final.length > 0) { + defaultDevice = final[0]; + } + + if (defaultDevice) { + defaultDevice.isDefault = true; + } + + WebAudioHelper._knownDevices = final; + + return final; + } catch (e) { + Logger.error('WebAudio', 'Failed to enumerate output devices', e); + return []; + } + } +} + /** * @target web */ @@ -43,7 +135,7 @@ export abstract class AlphaSynthWebAudioOutputBase implements ISynthOutput { public activate(resumedCallback?: () => void): void { if (!this._context) { - this._context = this.createAudioContext(); + this._context = WebAudioHelper.createAudioContext(); } if (this._context.state === 'suspended' || (this._context.state as string) === 'interrupted') { @@ -71,7 +163,7 @@ export abstract class AlphaSynthWebAudioOutputBase implements ISynthOutput { private patchIosSampleRate(): void { const ua: string = navigator.userAgent; if (ua.indexOf('iPhone') !== -1 || ua.indexOf('iPad') !== -1) { - const context: AudioContext = this.createAudioContext(); + const context: AudioContext = WebAudioHelper.createAudioContext(); const buffer: AudioBuffer = context.createBuffer(1, 1, AlphaSynthWebAudioOutputBase.PreferredSampleRate); const dummy: AudioBufferSourceNode = context.createBufferSource(); dummy.buffer = buffer; @@ -83,19 +175,9 @@ export abstract class AlphaSynthWebAudioOutputBase implements ISynthOutput { } } - private createAudioContext(): AudioContext { - if ('AudioContext' in Environment.globalThis) { - return new AudioContext(); - } - if ('webkitAudioContext' in Environment.globalThis) { - return new webkitAudioContext(); - } - throw new AlphaTabError(AlphaTabErrorType.General, 'AudioContext not found'); - } - public open(bufferTimeInMilliseconds: number): void { this.patchIosSampleRate(); - this._context = this.createAudioContext(); + this._context = WebAudioHelper.createAudioContext(); const ctx: any = this._context; if (ctx.state === 'suspended') { this.registerResumeHandler(); @@ -164,80 +246,12 @@ export abstract class AlphaSynthWebAudioOutputBase implements ISynthOutput { (this.ready as EventEmitter).trigger(); } - private async checkSinkIdSupport() { - // https://caniuse.com/mdn-api_audiocontext_sinkid - const context = this._context ?? this.createAudioContext(); - if (!('setSinkId' in context)) { - Logger.warning('WebAudio', 'Browser does not support changing the output device'); - return false; - } - return true; - } - - private _knownDevices: ISynthOutputDevice[] = []; - - public async enumerateOutputDevices(): Promise { - try { - if (!(await this.checkSinkIdSupport())) { - return []; - } - - // Request permissions - try { - await navigator.mediaDevices.getUserMedia({ audio: true }); - } catch (e) { - // sometimes we get an error but can still enumerate, e.g. if microphone access is denied, - // we can still load the output devices in some cases. - Logger.warning('WebAudio', 'Output device permission rejected', e); - } - - // load devices - const devices = await navigator.mediaDevices.enumerateDevices(); - - // default device candidates - let defaultDeviceGroupId = ''; - let defaultDeviceId = ''; - - const realDevices = new Map(); - for (const device of devices) { - if (device.kind === 'audiooutput') { - realDevices.set(device.groupId, new AlphaSynthWebAudioSynthOutputDevice(device)); - - // chromium has the default device as deviceID: 'default' - // the standard defines empty-string as default - if (device.deviceId === 'default' || device.deviceId === '') { - defaultDeviceGroupId = device.groupId; - defaultDeviceId = device.deviceId; - } - } - } - - const final = Array.from(realDevices.values()); - - // flag default device - let defaultDevice = final.find(d => d.deviceId === defaultDeviceId); - if (!defaultDevice) { - defaultDevice = final.find(d => d.device.groupId === defaultDeviceGroupId); - } - if (!defaultDevice && final.length > 0) { - defaultDevice = final[0]; - } - - if (defaultDevice) { - defaultDevice.isDefault = true; - } - - this._knownDevices = final; - - return final; - } catch (e) { - Logger.error('WebAudio', 'Failed to enumerate output devices', e); - return []; - } + public enumerateOutputDevices(): Promise { + return WebAudioHelper.enumerateOutputDevices(); } public async setOutputDevice(device: ISynthOutputDevice | null): Promise { - if (!(await this.checkSinkIdSupport())) { + if (!(await WebAudioHelper.checkSinkIdSupport())) { return; } @@ -250,7 +264,7 @@ export abstract class AlphaSynthWebAudioOutputBase implements ISynthOutput { } public async getOutputDevice(): Promise { - if (!(await this.checkSinkIdSupport())) { + if (!(await WebAudioHelper.checkSinkIdSupport())) { return null; } @@ -262,7 +276,7 @@ export abstract class AlphaSynthWebAudioOutputBase implements ISynthOutput { } // fast path -> cached devices list - let device = this._knownDevices.find(d => d.deviceId === sinkId); + let device = WebAudioHelper.findKnownDevice(sinkId); if (device) { return device; } diff --git a/src/platform/javascript/AlphaSynthWebWorker.ts b/src/platform/javascript/AlphaSynthWebWorker.ts index 091a96826..3e862636f 100644 --- a/src/platform/javascript/AlphaSynthWebWorker.ts +++ b/src/platform/javascript/AlphaSynthWebWorker.ts @@ -149,7 +149,9 @@ export class AlphaSynthWebWorker { endTime: e.endTime, currentTick: e.currentTick, endTick: e.endTick, - isSeek: e.isSeek + isSeek: e.isSeek, + originalTempo: e.originalTempo, + modifiedTempo: e.modifiedTempo }); } @@ -201,7 +203,9 @@ export class AlphaSynthWebWorker { endTime: e.endTime, currentTick: e.currentTick, endTick: e.endTick, - isSeek: e.isSeek + isSeek: e.isSeek, + originalTempo: e.originalTempo, + modifiedTempo: e.modifiedTempo }); } diff --git a/src/platform/javascript/AlphaSynthWebWorkerApi.ts b/src/platform/javascript/AlphaSynthWebWorkerApi.ts index 203e8f86e..86f911a89 100644 --- a/src/platform/javascript/AlphaSynthWebWorkerApi.ts +++ b/src/platform/javascript/AlphaSynthWebWorkerApi.ts @@ -18,6 +18,7 @@ import { Environment } from '@src/Environment'; import { PlaybackRangeChangedEventArgs } from '@src/synth/PlaybackRangeChangedEventArgs'; import type { Settings } from '@src/Settings'; import { ModelUtils } from '@src/model/ModelUtils'; +import type { Score } from '@src/model/Score'; /** * a WebWorker based alphaSynth which uses the given player as output. @@ -382,7 +383,9 @@ export class AlphaSynthWebWorkerApi implements IAlphaSynth { data.endTime, data.currentTick, data.endTick, - data.isSeek + data.isSeek, + data.originalTempo, + data.modifiedTempo ) ); break; @@ -420,7 +423,9 @@ export class AlphaSynthWebWorkerApi implements IAlphaSynth { data.endTime, data.currentTick, data.endTick, - data.isSeek + data.isSeek, + data.originalTempo, + data.modifiedTempo ) ); break; @@ -492,4 +497,8 @@ export class AlphaSynthWebWorkerApi implements IAlphaSynth { this._outputIsReady = true; this.checkReady(); } + + public loadBackingTrack(_score: Score): void { + // ignore + } } diff --git a/src/platform/javascript/AlphaTabApi.ts b/src/platform/javascript/AlphaTabApi.ts index f667019a7..039066e71 100644 --- a/src/platform/javascript/AlphaTabApi.ts +++ b/src/platform/javascript/AlphaTabApi.ts @@ -12,6 +12,7 @@ import type { Settings } from '@src/Settings'; import { JsonConverter } from '@src/model/JsonConverter'; import { SettingsSerializer } from '@src/generated/SettingsSerializer'; import type { SettingsJson } from '@src/generated/SettingsJson'; +import { PlayerMode } from '@src/PlayerSettings'; /** * @target web @@ -137,7 +138,7 @@ export class AlphaTabApi extends AlphaTabApiBase { settings.core.file = null; settings.core.tracks = null; settings.player.enableCursor = false; - settings.player.enablePlayer = false; + settings.player.playerMode = PlayerMode.Disabled; settings.player.enableElementHighlighting = false; settings.player.enableUserInteraction = false; settings.player.soundFont = null; diff --git a/src/platform/javascript/AudioElementBackingTrackSynthOutput.ts b/src/platform/javascript/AudioElementBackingTrackSynthOutput.ts new file mode 100644 index 000000000..519848a66 --- /dev/null +++ b/src/platform/javascript/AudioElementBackingTrackSynthOutput.ts @@ -0,0 +1,162 @@ +import { EventEmitter, EventEmitterOfT, type IEventEmitter, type IEventEmitterOfT } from '@src/EventEmitter'; +import { Logger } from '@src/Logger'; +import type { BackingTrack } from '@src/model/BackingTrack'; +import { WebAudioHelper } from '@src/platform/javascript/AlphaSynthWebAudioOutputBase'; +import type { IBackingTrackSynthOutput } from '@src/synth/BackingTrackPlayer'; +import type { ISynthOutputDevice } from '@src/synth/ISynthOutput'; + +/** + * A {@link IBackingTrackSynthOutput} which uses a HTMLAudioElement as playback mechanism. + * Allows the access to the element for further custom usage. + * @target web + */ +export interface IAudioElementBackingTrackSynthOutput extends IBackingTrackSynthOutput { + /** + * The audio element used for playing the backing track. + * @remarks + * Direct interaction with the element might not result in correct alphaTab behavior. + */ + readonly audioElement: HTMLAudioElement; +} + +/** + * @target web + */ +export class AudioElementBackingTrackSynthOutput implements IAudioElementBackingTrackSynthOutput { + // fake rate + public readonly sampleRate: number = 44100; + + public audioElement!: HTMLAudioElement; + private _padding: number = 0; + private _updateInterval: number = 0; + + public get backingTrackDuration(): number { + const duration = this.audioElement.duration ?? 0; + return Number.isFinite(duration) ? duration * 1000 : 0; + } + + public get playbackRate(): number { + return this.audioElement.playbackRate; + } + + public set playbackRate(value: number) { + this.audioElement.playbackRate = value; + } + + public get masterVolume(): number { + return this.audioElement.volume; + } + + public set masterVolume(value: number) { + this.audioElement.volume = value; + } + + public seekTo(time: number): void { + this.audioElement.currentTime = time / 1000 - this._padding; + } + + public loadBackingTrack(backingTrack: 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); + } + + public open(_bufferTimeInMilliseconds: number): void { + const audioElement = document.createElement('audio'); + audioElement.style.display = 'none'; + document.body.appendChild(audioElement); + audioElement.addEventListener('timeupdate', () => { + this.updatePosition(); + }); + this.audioElement = audioElement; + (this.ready as EventEmitter).trigger(); + } + + private updatePosition() { + const timePos = (this.audioElement.currentTime + this._padding) * 1000; + (this.timeUpdate as EventEmitterOfT).trigger(timePos); + } + + public play(): void { + this.audioElement.play(); + this._updateInterval = window.setInterval(() => { + this.updatePosition(); + }, 50); + } + public destroy(): void { + const audioElement = this.audioElement; + if (audioElement) { + document.body.removeChild(audioElement); + } + } + + public pause(): void { + this.audioElement.pause(); + window.clearInterval(this._updateInterval); + } + + public addSamples(_samples: Float32Array): void { + // nobody will call this + } + public resetSamples(): void { + // nobody will call this + } + public activate(): void { + // nobody will call this + } + + public readonly ready: IEventEmitter = new EventEmitter(); + public readonly samplesPlayed: IEventEmitterOfT = new EventEmitterOfT(); + public readonly timeUpdate: IEventEmitterOfT = new EventEmitterOfT(); + public readonly sampleRequest: IEventEmitter = new EventEmitter(); + + public async enumerateOutputDevices(): Promise { + return WebAudioHelper.enumerateOutputDevices(); + } + public async setOutputDevice(device: ISynthOutputDevice | null): Promise { + 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); + } + } + + public async getOutputDevice(): Promise { + 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; + } +} diff --git a/src/platform/javascript/BrowserUiFacade.ts b/src/platform/javascript/BrowserUiFacade.ts index a15ba78df..a60c2597f 100644 --- a/src/platform/javascript/BrowserUiFacade.ts +++ b/src/platform/javascript/BrowserUiFacade.ts @@ -31,6 +31,8 @@ import { AlphaSynthAudioWorkletOutput } from '@src/platform/javascript/AlphaSynt import { ScalableHtmlElementContainer } from '@src/platform/javascript/ScalableHtmlElementContainer'; import { PlayerOutputMode } from '@src/PlayerSettings'; import type { SettingsJson } from '@src/generated/SettingsJson'; +import { AudioElementBackingTrackSynthOutput } from '@src/platform/javascript/AudioElementBackingTrackSynthOutput'; +import { BackingTrackPlayer } from '@src/synth/BackingTrackPlayer'; /** * @target web @@ -755,4 +757,11 @@ export class BrowserUiFacade implements IUiFacade { window.requestAnimationFrame(step); } } + + public createBackingTrackPlayer(): IAlphaSynth | null { + return new BackingTrackPlayer( + new AudioElementBackingTrackSynthOutput(), + this._api.settings.player.bufferTimeInMilliseconds + ); + } } diff --git a/src/synth/AlphaSynth.ts b/src/synth/AlphaSynth.ts index 455d26b9c..3a8ae53e8 100644 --- a/src/synth/AlphaSynth.ts +++ b/src/synth/AlphaSynth.ts @@ -1,5 +1,5 @@ import type { MidiFile } from '@src/midi/MidiFile'; -import type { IAlphaSynth } from '@src/synth/IAlphaSynth'; +import type { BackingTrackSyncPoint, IAlphaSynth } from '@src/synth/IAlphaSynth'; import type { ISynthOutput } from '@src/synth/ISynthOutput'; import { MidiFileSequencer } from '@src/synth/MidiFileSequencer'; import type { PlaybackRange } from '@src/synth/PlaybackRange'; @@ -19,22 +19,24 @@ import { MidiEventsPlayedEventArgs } from '@src/synth/MidiEventsPlayedEventArgs' import type { MidiEvent, MidiEventType } from '@src/midi/MidiEvent'; import { PlaybackRangeChangedEventArgs } from '@src/synth/PlaybackRangeChangedEventArgs'; import { ModelUtils } from '@src/model/ModelUtils'; +import type { Score } from '@src/model/Score'; +import type { IAudioSampleSynthesizer } from '@src/synth/IAudioSampleSynthesizer'; /** - * 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}. */ -export class AlphaSynth implements IAlphaSynth { - private _sequencer: MidiFileSequencer; - private _synthesizer: TinySoundFont; - private _isSoundFontLoaded: boolean = false; +export class AlphaSynthBase implements IAlphaSynth { + protected sequencer: MidiFileSequencer; + protected synthesizer: IAudioSampleSynthesizer; + protected isSoundFontLoaded: boolean = false; private _isMidiLoaded: boolean = false; private _tickPosition: number = 0; private _timePosition: number = 0; private _metronomeVolume: number = 0; private _countInVolume: number = 0; - private _playedEventsQueue: Queue = new Queue(); - private _midiEventsPlayedFilter: Set = new Set(); + protected _playedEventsQueue: Queue = new Queue(); + protected _midiEventsPlayedFilter: Set = new Set(); private _notPlayedSamples: number = 0; private _synthStopping = false; private _output: ISynthOutput; @@ -46,7 +48,7 @@ export class AlphaSynth implements IAlphaSynth { public isReady: boolean = false; public get isReadyForPlayback(): boolean { - return this.isReady && this._isSoundFontLoaded && this._isMidiLoaded; + return this.isReady && this.isSoundFontLoaded && this._isMidiLoaded; } public state: PlayerState = PlayerState.Paused; @@ -60,12 +62,16 @@ export class AlphaSynth implements IAlphaSynth { } public get masterVolume(): number { - return this._synthesizer.masterVolume; + return this.synthesizer.masterVolume; } public set masterVolume(value: number) { value = Math.max(value, SynthConstants.MinVolume); - this._synthesizer.masterVolume = value; + this.updateMasterVolume(value); + } + + protected updateMasterVolume(value: number) { + this.synthesizer.masterVolume = value; } public get metronomeVolume(): number { @@ -75,7 +81,7 @@ export class AlphaSynth implements IAlphaSynth { public set metronomeVolume(value: number) { value = Math.max(value, SynthConstants.MinVolume); this._metronomeVolume = value; - this._synthesizer.metronomeVolume = value; + this.synthesizer.metronomeVolume = value; } public get countInVolume(): number { @@ -96,22 +102,27 @@ export class AlphaSynth implements IAlphaSynth { } public get playbackSpeed(): number { - return this._sequencer.playbackSpeed; + return this.sequencer.playbackSpeed; } public set playbackSpeed(value: number) { value = ModelUtils.clamp(value, SynthConstants.MinPlaybackSpeed, SynthConstants.MaxPlaybackSpeed); - const oldSpeed: number = this._sequencer.playbackSpeed; - this._sequencer.playbackSpeed = value; + this.updatePlaybackSpeed(value); + } + + protected updatePlaybackSpeed(value: number) { + const oldSpeed: number = this.sequencer.playbackSpeed; + this.sequencer.playbackSpeed = value; this.timePosition = this.timePosition * (oldSpeed / value); } + public get tickPosition(): number { return this._tickPosition; } public set tickPosition(value: number) { - this.timePosition = this._sequencer.mainTickPositionToTimePosition(value); + this.timePosition = this.sequencer.mainTickPositionToTimePosition(value); } public get timePosition(): number { @@ -122,24 +133,24 @@ export class AlphaSynth implements IAlphaSynth { 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(); } } public get playbackRange(): PlaybackRange | null { - return this._sequencer.mainPlaybackRange; + return this.sequencer.mainPlaybackRange; } public set playbackRange(value: PlaybackRange | null) { - this._sequencer.mainPlaybackRange = value; + this.sequencer.mainPlaybackRange = value; if (value) { this.tickPosition = value.startTick; } @@ -149,11 +160,11 @@ export class AlphaSynth implements IAlphaSynth { } public get isLooping(): boolean { - return this._sequencer.isLooping; + return this.sequencer.isLooping; } public set isLooping(value: boolean) { - this._sequencer.isLooping = value; + this.sequencer.isLooping = value; } public destroy(): void { @@ -163,10 +174,10 @@ export class AlphaSynth implements IAlphaSynth { } /** - * 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. */ - public constructor(output: ISynthOutput, bufferTimeInMilliseconds: number) { + public constructor(output: ISynthOutput, synthesizer: IAudioSampleSynthesizer, bufferTimeInMilliseconds: number) { Logger.debug('AlphaSynth', 'Initializing player'); this.state = PlayerState.Paused; @@ -174,8 +185,8 @@ export class AlphaSynth implements IAlphaSynth { 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(() => { @@ -184,51 +195,55 @@ export class AlphaSynth implements IAlphaSynth { this.checkReadyForPlayback(); }); this.output.sampleRequest.on(() => { - if ( - this.state === PlayerState.Playing && - (!this._sequencer.isFinished || this._synthesizer.activeVoiceCount > 0) - ) { - let samples: Float32Array = new Float32Array( - SynthConstants.MicroBufferSize * SynthConstants.MicroBufferCount * SynthConstants.AudioChannels + this.onSampleRequest(); + }); + this.output.samplesPlayed.on(this.onSamplesPlayed.bind(this)); + this.output.open(bufferTimeInMilliseconds); + } + + protected onSampleRequest() { + if ( + this.state === PlayerState.Playing && + (!this.sequencer.isFinished || this.synthesizer.activeVoiceCount > 0) + ) { + let samples: Float32Array = new Float32Array( + SynthConstants.MicroBufferSize * SynthConstants.MicroBufferCount * SynthConstants.AudioChannels + ); + let bufferPos: number = 0; + + for (let i = 0; i < SynthConstants.MicroBufferCount; i++) { + // synthesize buffer + this.sequencer.fillMidiEventQueue(); + const synthesizedEvents = this.synthesizer.synthesize( + samples, + bufferPos, + SynthConstants.MicroBufferSize ); - let bufferPos: number = 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; + 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: Float32Array = new Float32Array(0); - this.output.addSamples(samples); } - }); - this.output.samplesPlayed.on(this.onSamplesPlayed.bind(this)); - this.output.open(bufferTimeInMilliseconds); + + // send it to output + if (bufferPos < samples.length) { + samples = samples.subarray(0, bufferPos); + } + this._notPlayedSamples += samples.length; + this.output.addSamples(samples); + } else { + // Tell output that there is no data left for it. + const samples: Float32Array = new Float32Array(0); + this.output.addSamples(samples); + } } public play(): boolean { @@ -241,8 +256,8 @@ export class AlphaSynth implements IAlphaSynth { 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); } @@ -251,13 +266,13 @@ export class AlphaSynth implements IAlphaSynth { } private 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 as EventEmitterOfT).trigger( @@ -275,7 +290,7 @@ export class AlphaSynth implements IAlphaSynth { new PlayerStateChangedEventArgs(this.state, false) ); this.output.pause(); - this._synthesizer.noteOffAll(false); + this.synthesizer.noteOffAll(false); } public playPause(): void { @@ -294,24 +309,24 @@ export class AlphaSynth implements IAlphaSynth { 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 as EventEmitterOfT).trigger( new PlayerStateChangedEventArgs(this.state, true) ); } public playOneTimeMidiFile(midi: MidiFile): void { - 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); @@ -325,9 +340,9 @@ export class AlphaSynth implements IAlphaSynth { public resetSoundFonts(): void { this.stop(); - this._synthesizer.resetPresets(); + this.synthesizer.resetPresets(); this._loadedSoundFonts = []; - this._isSoundFontLoaded = false; + this.isSoundFontLoaded = false; (this.soundFontLoaded as EventEmitter).trigger(); } @@ -346,7 +361,7 @@ export class AlphaSynth implements IAlphaSynth { } this._loadedSoundFonts.push(soundFont); - this._isSoundFontLoaded = true; + this.isSoundFontLoaded = true; (this.soundFontLoaded as EventEmitter).trigger(); Logger.debug('AlphaSynth', 'soundFont successfully loaded'); @@ -359,12 +374,12 @@ export class AlphaSynth implements IAlphaSynth { private checkReadyForPlayback(): void { 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 as EventEmitter).trigger(); @@ -380,15 +395,17 @@ export class AlphaSynth implements IAlphaSynth { try { Logger.debug('AlphaSynth', 'Loading midi from model'); - this._sequencer.loadMidi(midi); + this.sequencer.loadMidi(midi); this._isMidiLoaded = true; (this.midiLoaded as EventEmitterOfT).trigger( new PositionChangedEventArgs( 0, - this._sequencer.currentEndTime, + this.sequencer.currentEndTime, 0, - this._sequencer.currentEndTick, - false + this.sequencer.currentEndTick, + false, + this.sequencer.currentTempo, + this.sequencer.modifiedTempo ) ); Logger.debug('AlphaSynth', 'Midi successfully loaded'); @@ -401,62 +418,62 @@ export class AlphaSynth implements IAlphaSynth { } public applyTranspositionPitches(transpositionPitches: Map): void { - this._synthesizer.applyTranspositionPitches(transpositionPitches); + this.synthesizer.applyTranspositionPitches(transpositionPitches); } public setChannelTranspositionPitch(channel: number, semitones: number): void { - this._synthesizer.setChannelTranspositionPitch(channel, semitones); + this.synthesizer.setChannelTranspositionPitch(channel, semitones); } public setChannelMute(channel: number, mute: boolean): void { - this._synthesizer.channelSetMute(channel, mute); + this.synthesizer.channelSetMute(channel, mute); } public resetChannelStates(): void { - this._synthesizer.resetChannelStates(); + this.synthesizer.resetChannelStates(); } public setChannelSolo(channel: number, solo: boolean): void { - this._synthesizer.channelSetSolo(channel, solo); + this.synthesizer.channelSetSolo(channel, solo); } public setChannelVolume(channel: number, volume: number): void { volume = Math.max(volume, SynthConstants.MinVolume); - this._synthesizer.channelSetMixVolume(channel, volume); + this.synthesizer.channelSetMixVolume(channel, volume); } private onSamplesPlayed(sampleCount: number): void { if (sampleCount === 0) { return; } - const playedMillis: number = (sampleCount / this._synthesizer.outSampleRate) * 1000; + const playedMillis: number = (sampleCount / this.synthesizer.outSampleRate) * 1000; this._notPlayedSamples -= sampleCount * SynthConstants.AudioChannels; this.updateTimePosition(this._timePosition + playedMillis, false); this.checkForFinish(); } - private checkForFinish() { + protected 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; @@ -466,11 +483,11 @@ export class AlphaSynth implements IAlphaSynth { (this.finished as EventEmitter).trigger(); 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; } } else { @@ -484,7 +501,7 @@ export class AlphaSynth implements IAlphaSynth { // 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; } } @@ -494,20 +511,20 @@ export class AlphaSynth implements IAlphaSynth { private 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; } - private updateTimePosition(timePosition: number, isSeek: boolean): void { + protected updateTimePosition(timePosition: number, isSeek: boolean): void { // update the real positions let currentTime: number = timePosition; this._timePosition = currentTime; - let currentTick: number = this._sequencer.currentTimePositionToTickPosition(currentTime); + let currentTick: number = this.sequencer.currentTimePositionToTickPosition(currentTime); this._tickPosition = currentTick; - const endTime: number = this._sequencer.currentEndTime; - const endTick: number = this._sequencer.currentEndTick; + const endTime: number = this.sequencer.currentEndTime; + const endTick: number = this.sequencer.currentEndTick; // on fade outs we can have some milliseconds longer, ensure we don't report this if (currentTime > endTime) { @@ -515,20 +532,24 @@ export class AlphaSynth implements IAlphaSynth { currentTick = endTick; } - const mode = this._sequencer.isPlayingMain - ? 'main' - : this._sequencer.isPlayingCountIn - ? 'count-in' - : 'one-time'; + 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})` + `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) { + if (this.sequencer.isPlayingMain) { (this.positionChanged as EventEmitterOfT).trigger( - new PositionChangedEventArgs(currentTime, endTime, currentTick, endTick, isSeek) + new PositionChangedEventArgs( + currentTime, + endTime, + currentTick, + endTick, + isSeek, + this.sequencer.currentTempo, + this.sequencer.modifiedTempo + ) ); } @@ -569,13 +590,31 @@ export class AlphaSynth implements IAlphaSynth { * @internal */ public hasSamplesForProgram(program: number): boolean { - return this._synthesizer.hasSamplesForProgram(program); + return this.synthesizer.hasSamplesForProgram(program); } /** * @internal */ public hasSamplesForPercussion(key: number): boolean { - return this._synthesizer.hasSamplesForPercussion(key); + return this.synthesizer.hasSamplesForPercussion(key); + } + + public loadBackingTrack(_score: Score, _syncPoints:BackingTrackSyncPoint[]): void { + // ignore + } +} + +/** + * This is the main synthesizer component which can be used to + * play a {@link MidiFile} via a {@link ISynthOutput}. + */ +export class AlphaSynth extends AlphaSynthBase { + /** + * Initializes a new instance of the {@link AlphaSynth} class. + * @param output The output to use for playing the generated samples. + */ + public constructor(output: ISynthOutput, bufferTimeInMilliseconds: number) { + super(output, new TinySoundFont(output.sampleRate), bufferTimeInMilliseconds); } } diff --git a/src/synth/BackingTrackPlayer.ts b/src/synth/BackingTrackPlayer.ts new file mode 100644 index 000000000..c12207b65 --- /dev/null +++ b/src/synth/BackingTrackPlayer.ts @@ -0,0 +1,201 @@ +import type { EventEmitter, IEventEmitterOfT } from '@src/EventEmitter'; +import type { MidiEvent } from '@src/midi/MidiEvent'; +import type { MidiFile } from '@src/midi/MidiFile'; +import type { BackingTrack } from '@src/model/BackingTrack'; +import type { Score } from '@src/model/Score'; +import { AlphaSynthBase } from '@src/synth/AlphaSynth'; +import { Queue } from '@src/synth/ds/Queue'; +import type { BackingTrackSyncPoint } from '@src/synth/IAlphaSynth'; +import type { IAudioSampleSynthesizer } from '@src/synth/IAudioSampleSynthesizer'; +import type { ISynthOutput } from '@src/synth/ISynthOutput'; +import type { Hydra } from '@src/synth/soundfont/Hydra'; +import type { SynthEvent } from '@src/synth/synthesis/SynthEvent'; + +/** + * A synth output for playing backing tracks. + */ +export interface IBackingTrackSynthOutput extends ISynthOutput { + /** + * An event fired when the playback time changes. The time is in absolute milliseconds. + */ + readonly timeUpdate: IEventEmitterOfT; + /** + * The total duration of the backing track in milliseconds. + */ + readonly backingTrackDuration: number; + /** + * The playback rate at which the output should playback. + */ + playbackRate: number; + /** + * The volume at which the output should play (0-1) + */ + masterVolume: number; + /** + * Instructs the output to seek to the given time position. + * @param time The absolute time in milliseconds. + */ + seekTo(time: number): void; + + /** + * Instructs the output to load the given backing track. + * @param backingTrack The backing track to load. + */ + loadBackingTrack(backingTrack: BackingTrack): void; +} + +class BackingTrackAudioSynthesizer implements IAudioSampleSynthesizer { + private _midiEventQueue: Queue = new Queue(); + + public masterVolume: number = 1; + public metronomeVolume: number = 0; + public outSampleRate: number = 44100; + public currentTempo: number = 120; + public timeSignatureNumerator: number = 4; + public timeSignatureDenominator: number = 4; + public activeVoiceCount: number = 0; + public output!: IBackingTrackSynthOutput; + + public noteOffAll(_immediate: boolean): void { + // not supported, ignore + } + + public resetSoft(): void { + // not supported, ignore + } + + public resetPresets(): void { + // not supported, ignore + } + + public loadPresets( + _hydra: Hydra, + _instrumentPrograms: Set, + _percussionKeys: Set, + _append: boolean + ): void { + // not supported, ignore + } + + public setupMetronomeChannel(_metronomeVolume: number): void { + // not supported, ignore + } + + public synthesizeSilent(_sampleCount: number): void { + this.fakeSynthesize(); + } + + private processMidiMessage(e: MidiEvent): void {} + + public dispatchEvent(synthEvent: SynthEvent): void { + this._midiEventQueue.enqueue(synthEvent); + } + + public synthesize(_buffer: Float32Array, _bufferPos: number, _sampleCount: number): SynthEvent[] { + return this.fakeSynthesize(); + } + + public fakeSynthesize(): SynthEvent[] { + const processedEvents: SynthEvent[] = []; + while (!this._midiEventQueue.isEmpty) { + const m: SynthEvent = this._midiEventQueue.dequeue(); + if (m.isMetronome && this.metronomeVolume > 0) { + // ignore metronome + } else if (m.event) { + this.processMidiMessage(m.event); + } + processedEvents.push(m); + } + return processedEvents; + } + + public applyTranspositionPitches(transpositionPitches: Map): void { + // not supported, ignore + } + public setChannelTranspositionPitch(channel: number, semitones: number): void { + // not supported, ignore + } + public channelSetMute(channel: number, mute: boolean): void { + // not supported, ignore + } + public channelSetSolo(channel: number, solo: boolean): void { + // not supported, ignore + } + public resetChannelStates(): void { + // not supported, ignore + } + public channelSetMixVolume(channel: number, volume: number): void { + // not supported, ignore + } + public hasSamplesForProgram(program: number): boolean { + return true; + } + public hasSamplesForPercussion(key: number): boolean { + return true; + } +} + +export class BackingTrackPlayer extends AlphaSynthBase { + private _backingTrackOutput: IBackingTrackSynthOutput; + constructor(backingTrackOutput: IBackingTrackSynthOutput, bufferTimeInMilliseconds: number) { + super(backingTrackOutput, new BackingTrackAudioSynthesizer(), bufferTimeInMilliseconds); + (this.synthesizer as BackingTrackAudioSynthesizer).output = backingTrackOutput; + this._backingTrackOutput = backingTrackOutput; + + backingTrackOutput.timeUpdate.on(timePosition => { + const alphaTabTimePosition = this.sequencer.mainTimePositionFromBackingTrack( + timePosition, + backingTrackOutput.backingTrackDuration + ); + + this.sequencer.fillMidiEventQueueToEndTime(alphaTabTimePosition); + (this.synthesizer as BackingTrackAudioSynthesizer).fakeSynthesize(); + + this.updateTimePosition(alphaTabTimePosition, false); + this.checkForFinish(); + }); + } + + protected override updateMasterVolume(value: number): void { + super.updateMasterVolume(value); + this._backingTrackOutput.masterVolume = value; + } + + protected override updatePlaybackSpeed(value: number): void { + super.updatePlaybackSpeed(value); + this._backingTrackOutput.playbackRate = value; + } + + protected override onSampleRequest(): void { + // should never be called + } + + public override loadMidiFile(midi: MidiFile): void { + if (!this.isSoundFontLoaded) { + this.isSoundFontLoaded = true; + (this.soundFontLoaded as EventEmitter).trigger(); + } + super.loadMidiFile(midi); + } + + protected override updateTimePosition(timePosition: number, isSeek: boolean): void { + super.updateTimePosition(timePosition, isSeek); + if (isSeek) { + this._backingTrackOutput.seekTo( + this.sequencer.mainTimePositionToBackingTrack( + timePosition, + this._backingTrackOutput.backingTrackDuration + ) + ); + } + } + + public override loadBackingTrack(score: Score, syncPoints: BackingTrackSyncPoint[]): void { + const backingTrackInfo = score.backingTrack; + if (backingTrackInfo) { + this._backingTrackOutput.loadBackingTrack(backingTrackInfo); + this.sequencer.mainUpdateSyncPoints(syncPoints); + this.timePosition = 0; + } + } +} diff --git a/src/synth/ExternalMediaPlayer.ts b/src/synth/ExternalMediaPlayer.ts new file mode 100644 index 000000000..d59788d01 --- /dev/null +++ b/src/synth/ExternalMediaPlayer.ts @@ -0,0 +1,61 @@ +import { EventEmitter, EventEmitterOfT, type IEventEmitter, type IEventEmitterOfT } from '@src/EventEmitter'; +import type { BackingTrack } from '@src/model/BackingTrack'; +import { type IBackingTrackSynthOutput, BackingTrackPlayer } from '@src/synth/BackingTrackPlayer'; +import type { ISynthOutputDevice } from '@src/synth/ISynthOutput'; + +class ExternalMediaSynthOutput implements IBackingTrackSynthOutput { + // fake rate + public readonly sampleRate: number = 44100; + + public backingTrackDuration: number = 0; + public playbackRate: number = 1; + public masterVolume: number = 1; + + public seekTo(time: number): void {} + + public loadBackingTrack(backingTrack: BackingTrack) {} + + public open(_bufferTimeInMilliseconds: number): void { + (this.ready as EventEmitter).trigger(); + } + + public updatePosition(currentTime: number) { + (this.timeUpdate as EventEmitterOfT).trigger(currentTime); + } + + public play(): void {} + public destroy(): void {} + + public pause(): void {} + + public addSamples(_samples: Float32Array): void { + // nobody will call this + } + public resetSamples(): void { + // nobody will call this + } + public activate(): void { + // nobody will call this + } + + public readonly ready: IEventEmitter = new EventEmitter(); + public readonly samplesPlayed: IEventEmitterOfT = new EventEmitterOfT(); + public readonly timeUpdate: IEventEmitterOfT = new EventEmitterOfT(); + public readonly sampleRequest: IEventEmitter = new EventEmitter(); + + public async enumerateOutputDevices(): Promise { + const empty:ISynthOutputDevice[] = []; + return empty; + } + public async setOutputDevice(_device: ISynthOutputDevice | null): Promise {} + + public async getOutputDevice(): Promise { + return null; + } +} + +export class ExternalMediaPlayer extends BackingTrackPlayer { + constructor(bufferTimeInMilliseconds: number) { + super(new ExternalMediaSynthOutput(), bufferTimeInMilliseconds); + } +} diff --git a/src/synth/IAlphaSynth.ts b/src/synth/IAlphaSynth.ts index 68ed1d3d6..48cc9ca1f 100644 --- a/src/synth/IAlphaSynth.ts +++ b/src/synth/IAlphaSynth.ts @@ -9,6 +9,21 @@ import type { LogLevel } from '@src/LogLevel'; import type { MidiEventsPlayedEventArgs } from '@src/synth/MidiEventsPlayedEventArgs'; import type { MidiEventType } from '@src/midi/MidiEvent'; import type { ISynthOutput } from '@src/synth/ISynthOutput'; +import type { Score } from '@src/model/Score'; +import type { SyncPointData } from '@src/model/Automation'; + +/** + * Rerpresents a point to sync the alphaTab time axis with an external backing track. + */ +export class BackingTrackSyncPoint { + public tick: number = 0; + public data: SyncPointData; + + constructor(tick: number, data: SyncPointData) { + this.tick = tick; + this.data = data; + } +} /** * The public API interface for interacting with the synthesizer. @@ -137,6 +152,12 @@ export interface IAlphaSynth { */ loadMidiFile(midi: MidiFile): void; + /** + * Loads the synchronization information from the given score (used for backing tracks and external media). + * @param score + */ + loadBackingTrack(score: Score, syncPoints: BackingTrackSyncPoint[]): void; + /** * Applies the given transposition pitches to be used during playback. * @param transpositionPitches a map defining the transposition pitches for midi channel. diff --git a/src/synth/IAudioSampleSynthesizer.ts b/src/synth/IAudioSampleSynthesizer.ts new file mode 100644 index 000000000..5c6e38fbd --- /dev/null +++ b/src/synth/IAudioSampleSynthesizer.ts @@ -0,0 +1,145 @@ +import type { Hydra } from '@src/synth/soundfont/Hydra'; +import type { SynthEvent } from '@src/synth/synthesis/SynthEvent'; + +/** + * Classes implementing this interface can act as main audio synthesis engine + * within alphaSynth. + */ +export interface IAudioSampleSynthesizer { + /** + * The master volume to produce. + */ + masterVolume: number; + + /** + * The volume of metronome ticks. + */ + metronomeVolume: number; + + /** + * The output sample rate which is produced. + */ + readonly outSampleRate: number; + + /** + * The current tempo according to the processed midi events (used for metronome event generation) + */ + readonly currentTempo: number; + /** + * The current time signature numerator according to the processed midi events (used for metronome event generation) + */ + readonly timeSignatureNumerator: number; + /** + * The current time signature denominator according to the processed midi events (used for metronome event generation) + */ + readonly timeSignatureDenominator: number; + + /** + * The number of voices which are currently active in the syntheiszer and still producing audio. + */ + readonly activeVoiceCount: number; + + /** + * Ensures for all active notes a note-off is issued to stop playing the keys. + * @param immediate Whether the stop should happen immediately or with sustain->release. + */ + noteOffAll(immediate: boolean): void; + + /** + * Stop all playing notes immediatly and reset all channel parameters but keeps user + * defined settings + */ + resetSoft(): void; + + /** + * Resets all loaded presets. + */ + resetPresets(): void; + + /** + * Loads the presets from the given SoundFont hydra structure. + * @param hydra The SoundFont hydra structure. + * @param instrumentPrograms The used instrument programs to load the samples for. + * @param percussionKeys The instrument keys used. + * @param append Whether the presets should be appended or whether they should replace all loaded ones. + */ + loadPresets(hydra: Hydra, instrumentPrograms: Set, percussionKeys: Set, append: boolean): void; + + /** + * Configures the channel used to generate metronome sounds. + * @param metronomeVolume The volume for the channel. + */ + setupMetronomeChannel(metronomeVolume: number): void; + + /** + * Synthesizes the given number of samples without producing an output (e.g. on seeking) + * @param sampleCount The number of samples to synthesize. + */ + synthesizeSilent(sampleCount: number): void; + + /** + * Processes the given synth event. + * @param synthEvent The synth event. + */ + dispatchEvent(synthEvent: SynthEvent): void; + + /** + * Synthesizes the given number of samples into the provided output buffer. + * @param buffer The buffer to fill. + * @param bufferPos The offset in the buffer to start writing into. + * @param sampleCount The number of samples to synthesize. + */ + synthesize(buffer: Float32Array, bufferPos: number, sampleCount: number): SynthEvent[]; + + /** + * Applies the given transposition pitches used for general pitch changes that should be applied to the song. + * Used for general transpositions applied to the file. + * @param transpositionPitches A map defining for a given list of midi channels the number of semitones that should be adjusted. + */ + applyTranspositionPitches(transpositionPitches: Map): void; + /** + * Sets the transposition pitch of a given channel. This pitch is additionally applied beside the + * ones applied already via {@link applyTranspositionPitches}. + * @param channel The channel number + * @param semitones The number of semitones to apply as pitch offset. + */ + setChannelTranspositionPitch(channel: number, semitones: number): void; + + /** + * Sets the mute state of a channel. + * @param channel The channel number + * @param mute true if the channel should be muted, otherwise false. + */ + channelSetMute(channel: number, mute: boolean): void; + + /** + * Gets the solo state of a channel. + * @param channel The channel number + * @param solo true if the channel should be played solo, otherwise false. + */ + channelSetSolo(channel: number, solo: boolean): void; + + /** + * Resets the mute/solo state of all channels + */ + resetChannelStates(): void; + + /** + * Gets or sets the current and initial volume of the given channel. + * @param channel The channel number. + * @param volume The volume of of the channel (0.0-1.0) + */ + channelSetMixVolume(channel: number, volume: number): void; + + /** + * Checks whether the synth has loaded the samples for a given midi program. + * @param program The program to check. + */ + hasSamplesForProgram(program: number): boolean; + + /** + * Checks whether the synth has loaded the samples for a given percussion key. + * @param key The midi key defining the percussion instrument. + */ + hasSamplesForPercussion(key: number): boolean; +} diff --git a/src/synth/MidiFileSequencer.ts b/src/synth/MidiFileSequencer.ts index a53474b16..75d4e4e41 100644 --- a/src/synth/MidiFileSequencer.ts +++ b/src/synth/MidiFileSequencer.ts @@ -8,10 +8,12 @@ import { import type { MidiFile } from '@src/midi/MidiFile'; import type { PlaybackRange } from '@src/synth/PlaybackRange'; import { SynthEvent } from '@src/synth/synthesis/SynthEvent'; -import type { TinySoundFont } from '@src/synth/synthesis/TinySoundFont'; import { Logger } from '@src/Logger'; import { SynthConstants } from '@src/synth/SynthConstants'; import { MidiUtils } from '@src/midi/MidiUtils'; +import type { IAudioSampleSynthesizer } from '@src/synth/IAudioSampleSynthesizer'; +import { BackingTrackSyncPoint } from '@src/synth/IAlphaSynth'; +import type { SyncPointData } from '@src/model/Automation'; export class MidiFileSequencerTempoChange { public bpm: number; @@ -25,8 +27,18 @@ export class MidiFileSequencerTempoChange { } } +class BackingTrackSyncPointWithTime extends BackingTrackSyncPoint { + public time: number; + constructor(tick: number, data: SyncPointData, time: number) { + super(tick, data); + this.time = time; + } +} + class MidiSequencerState { public tempoChanges: MidiFileSequencerTempoChange[] = []; + public tempoChangeIndex: number = 0; + public syncPoints: BackingTrackSyncPointWithTime[] = []; public firstProgramEventPerChannel: Map = new Map(); public firstTimeSignatureNumerator: number = 0; public firstTimeSignatureDenominator: number = 0; @@ -34,11 +46,15 @@ class MidiSequencerState { public division: number = MidiUtils.QuarterTime; public eventIndex: number = 0; public currentTime: number = 0; + public currentTick: number = 0; + public syncPointIndex: number = 0; public playbackRange: PlaybackRange | null = null; public playbackRangeStartTime: number = 0; public playbackRangeEndTime: number = 0; public endTick: number = 0; public endTime: number = 0; + public currentTempo: number = 0; + public modifiedTempo: number = 0; } /** @@ -46,7 +62,7 @@ class MidiSequencerState { * synthesize position. The sequencer does not consider the playback speed. */ export class MidiFileSequencer { - private _synthesizer: TinySoundFont; + private _synthesizer: IAudioSampleSynthesizer; private _currentState: MidiSequencerState; private _mainState: MidiSequencerState; private _oneTimeState: MidiSequencerState | null = null; @@ -64,7 +80,7 @@ export class MidiFileSequencer { return this._currentState === this._countInState; } - public constructor(synthesizer: TinySoundFont) { + public constructor(synthesizer: IAudioSampleSynthesizer) { this._synthesizer = synthesizer; this._mainState = new MidiSequencerState(); this._currentState = this._mainState; @@ -107,6 +123,14 @@ export class MidiFileSequencer { return this._currentState.endTime / this.playbackSpeed; } + public get currentTempo(): number { + return this._currentState.currentTempo; + } + + public get modifiedTempo(): number { + return this._currentState.modifiedTempo * this.playbackSpeed; + } + /** * Gets or sets the playback speed. */ @@ -131,6 +155,8 @@ export class MidiFileSequencer { // we have to restart the midi to make sure we get the right state: instruments, volume, pan, etc this._mainState.currentTime = 0; this._mainState.eventIndex = 0; + this._mainState.syncPointIndex = 0; + this._mainState.tempoChangeIndex = 0; if (this.isPlayingMain) { const metronomeVolume: number = this._synthesizer.metronomeVolume; this._synthesizer.noteOffAll(true); @@ -232,7 +258,7 @@ export class MidiFileSequencer { if (mEvent.type === MidiEventType.TempoChange) { const meta: TempoChangeEvent = mEvent as TempoChangeEvent; - bpm = 60000000 / meta.microSecondsPerQuarterNote; + bpm = meta.beatsPerMinute; state.tempoChanges.push(new MidiFileSequencerTempoChange(bpm, absTick, absTime)); metronomeLengthInMillis = metronomeLengthInTicks * (60000.0 / (bpm * midiFile.division)); } else if (mEvent.type === MidiEventType.TimeSignature) { @@ -264,6 +290,9 @@ export class MidiFileSequencer { } } + state.currentTempo = state.tempoChanges.length > 0 ? state.tempoChanges[0].bpm : bpm; + state.modifiedTempo = state.currentTempo; + state.synthData.sort((a, b) => { if (a.time > b.time) { return 1; @@ -283,6 +312,47 @@ export class MidiFileSequencer { return this.fillMidiEventQueueLimited(-1); } + public fillMidiEventQueueToEndTime(endTime: number) { + while (this._mainState.currentTime < endTime) { + if (this.fillMidiEventQueueLimited(endTime - this._mainState.currentTime)) { + this._synthesizer.synthesizeSilent(SynthConstants.MicroBufferSize); + } + } + + let anyEventsDispatched: boolean = 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; + } + private fillMidiEventQueueLimited(maxMilliseconds: number): boolean { let millisecondsPerBuffer: number = (SynthConstants.MicroBufferSize / this._synthesizer.outSampleRate) * 1000 * this.playbackSpeed; @@ -318,10 +388,110 @@ export class MidiFileSequencer { return this.timePositionToTickPositionWithSpeed(this._mainState, timePosition, this.playbackSpeed); } + public mainUpdateSyncPoints(syncPoints: BackingTrackSyncPoint[]) { + 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: number = 120; + let absTick: number = 0; + let absTime: number = 0.0; + let previousTick: number = 0; + + let tempoChangeIndex = 0; + + for (let i = 0; i < syncPoints.length; i++) { + const p = syncPoints[i]; + const deltaTick: number = 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; + } + public currentTimePositionToTickPosition(timePosition: number): number { return this.timePositionToTickPositionWithSpeed(this._currentState, timePosition, this.playbackSpeed); } + public mainTimePositionFromBackingTrack(timePosition: number, backingTrackLength: number): number { + 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: number; + 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; + } + + public mainTimePositionToBackingTrack(timePosition: number, backingTrackLength: number): number { + 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: number; + 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; + } + private tickPositionToTimePositionWithSpeed( state: MidiSequencerState, tickPosition: number, @@ -465,6 +635,8 @@ export class MidiFileSequencer { }); state.endTime = metronomeTime; state.endTick = metronomeTick; + state.currentTempo = bpm; + state.modifiedTempo = bpm; this._countInState = state; } } diff --git a/src/synth/PositionChangedEventArgs.ts b/src/synth/PositionChangedEventArgs.ts index 87947c668..078760865 100644 --- a/src/synth/PositionChangedEventArgs.ts +++ b/src/synth/PositionChangedEventArgs.ts @@ -28,6 +28,16 @@ export class PositionChangedEventArgs { */ public isSeek: boolean; + /** + * The original tempo in which alphaTab internally would be playing right now. + */ + public originalTempo: number = 0; + + /** + * The modified tempo in which the actual playback is happening (e.g. due to playback speed or external audio synchronization) + */ + public modifiedTempo: number = 0; + /** * Initializes a new instance of the {@link PositionChangedEventArgs} class. * @param currentTime The current time. @@ -36,11 +46,21 @@ export class PositionChangedEventArgs { * @param endTick The end tick. * @param isSeek Whether the time was seeked. */ - public constructor(currentTime: number, endTime: number, currentTick: number, endTick: number, isSeek: boolean) { + public constructor( + currentTime: number, + endTime: number, + currentTick: number, + endTick: number, + isSeek: boolean, + originalTempo: number, + modifiedTempo: number + ) { this.currentTime = currentTime; this.endTime = endTime; this.currentTick = currentTick; this.endTick = endTick; this.isSeek = isSeek; + this.originalTempo = originalTempo; + this.modifiedTempo = modifiedTempo; } } diff --git a/src/synth/_barrel.ts b/src/synth/_barrel.ts index c0c9f8234..e39b1dd52 100644 --- a/src/synth/_barrel.ts +++ b/src/synth/_barrel.ts @@ -2,6 +2,7 @@ export { AlphaSynth } from '@src/synth/AlphaSynth'; export { CircularSampleBuffer } from '@src/synth/ds/CircularSampleBuffer'; export { PlaybackRange } from '@src/synth/PlaybackRange'; export type { ISynthOutput, ISynthOutputDevice } from '@src/synth/ISynthOutput'; +export type { IBackingTrackSynthOutput } from '@src/synth/BackingTrackPlayer'; export type { IAlphaSynth } from '@src/synth/IAlphaSynth'; export { PlayerState } from '@src/synth/PlayerState'; export { PlayerStateChangedEventArgs } from '@src/synth/PlayerStateChangedEventArgs'; @@ -13,3 +14,4 @@ export { AlphaSynthWebWorkerApi } from '@src/platform/javascript/AlphaSynthWebWo export { AlphaSynthWebAudioOutputBase } from '@src/platform/javascript/AlphaSynthWebAudioOutputBase'; export { AlphaSynthScriptProcessorOutput } from '@src/platform/javascript/AlphaSynthScriptProcessorOutput'; export { AlphaSynthAudioWorkletOutput } from '@src/platform/javascript/AlphaSynthAudioWorkletOutput'; +export type { IAudioElementBackingTrackSynthOutput } from '@src/platform/javascript/AudioElementBackingTrackSynthOutput'; diff --git a/src/synth/synthesis/TinySoundFont.ts b/src/synth/synthesis/TinySoundFont.ts index 198bff7d2..20418fb9d 100644 --- a/src/synth/synthesis/TinySoundFont.ts +++ b/src/synth/synthesis/TinySoundFont.ts @@ -39,6 +39,7 @@ import { SynthConstants } from '@src/synth/SynthConstants'; import { Queue } from '@src/synth/ds/Queue'; import { ControllerType } from '@src/midi/ControllerType'; import { Logger } from '@src/Logger'; +import type { IAudioSampleSynthesizer } from '@src/synth/IAudioSampleSynthesizer'; /** * This is a tiny soundfont based synthesizer. @@ -47,7 +48,7 @@ import { Logger } from '@src/Logger'; * - Better low-pass filter without lowering performance too much * - Support for modulators */ -export class TinySoundFont { +export class TinySoundFont implements IAudioSampleSynthesizer { private _midiEventQueue: Queue = new Queue(); private _mutedChannels: Map = new Map(); private _soloChannels: Map = new Map(); @@ -242,7 +243,7 @@ export class TinySoundFont { break; case MidiEventType.TempoChange: const tempoChange = e as TempoChangeEvent; - this.currentTempo = 60000000 / tempoChange.microSecondsPerQuarterNote; + this.currentTempo = tempoChange.beatsPerMinute; break; case MidiEventType.PitchBend: const pitchBend = e as PitchBendEvent; diff --git a/test-data/guitarpro8/canon-audio-track.gp b/test-data/guitarpro8/canon-audio-track.gp new file mode 100644 index 000000000..9f28f5836 Binary files /dev/null and b/test-data/guitarpro8/canon-audio-track.gp differ diff --git a/test/importer/Gp8Importer.test.ts b/test/importer/Gp8Importer.test.ts index c7553471b..87d89f34b 100644 --- a/test/importer/Gp8Importer.test.ts +++ b/test/importer/Gp8Importer.test.ts @@ -386,4 +386,13 @@ describe('Gp8ImporterTest', () => { } } }); + + it('audio-track', async () => { + const score = (await prepareImporterWithFile('guitarpro8/canon-audio-track.gp')).readScore(); + + // track data not relevant for snapshots + score.tracks = []; + + expect(score).to.toMatchSnapshot(); + }); }); diff --git a/test/importer/__snapshots__/gp8importer.test.ts.snap b/test/importer/__snapshots__/gp8importer.test.ts.snap new file mode 100644 index 000000000..8d5db7f5b --- /dev/null +++ b/test/importer/__snapshots__/gp8importer.test.ts.snap @@ -0,0 +1,1392 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Gp8ImporterTest audio-track 1`] = ` +Map { + "__kind" => "Score", + "artist" => "JerryC", + "music" => "JerryC", + "title" => "Canon Rock", + "tempo" => 90, + "masterbars" => Array [ + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 90, + "ratioposition" => 0, + "text" => "", + }, + ], + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 71.88264, + "millisecondoffset" => 0, + }, + "ratioposition" => 0, + "text" => "", + }, + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 99.72622, + "millisecondoffset" => 1669.387755102041, + }, + "ratioposition" => 0.5, + "text" => "", + }, + ], + }, + Map { + "__kind" => "MasterBar", + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 90.66336, + "millisecondoffset" => 2872.6530612244896, + }, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 3840, + }, + Map { + "__kind" => "MasterBar", + "start" => 7680, + }, + Map { + "__kind" => "MasterBar", + "start" => 11520, + }, + Map { + "__kind" => "MasterBar", + "start" => 15360, + }, + Map { + "__kind" => "MasterBar", + "start" => 19200, + }, + Map { + "__kind" => "MasterBar", + "start" => 23040, + }, + Map { + "__kind" => "MasterBar", + "start" => 26880, + }, + Map { + "__kind" => "MasterBar", + "start" => 30720, + }, + Map { + "__kind" => "MasterBar", + "start" => 34560, + }, + Map { + "__kind" => "MasterBar", + "start" => 38400, + }, + Map { + "__kind" => "MasterBar", + "start" => 42240, + }, + Map { + "__kind" => "MasterBar", + "start" => 46080, + }, + Map { + "__kind" => "MasterBar", + "start" => 49920, + }, + Map { + "__kind" => "MasterBar", + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 87.32674, + "millisecondoffset" => 37285.71428571428, + }, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 53760, + }, + Map { + "__kind" => "MasterBar", + "start" => 57600, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 200, + "ratioposition" => 0, + "text" => "", + }, + ], + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 200.18156, + "millisecondoffset" => 42782.31292517007, + }, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 61440, + }, + Map { + "__kind" => "MasterBar", + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 200.09074, + "millisecondoffset" => 43981.22448979592, + }, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 65280, + }, + Map { + "__kind" => "MasterBar", + "start" => 69120, + }, + Map { + "__kind" => "MasterBar", + "start" => 72960, + }, + Map { + "__kind" => "MasterBar", + "start" => 76800, + }, + Map { + "__kind" => "MasterBar", + "start" => 80640, + }, + Map { + "__kind" => "MasterBar", + "start" => 84480, + }, + Map { + "__kind" => "MasterBar", + "start" => 88320, + }, + Map { + "__kind" => "MasterBar", + "start" => 92160, + }, + Map { + "__kind" => "MasterBar", + "start" => 96000, + }, + Map { + "__kind" => "MasterBar", + "start" => 99840, + }, + Map { + "__kind" => "MasterBar", + "start" => 103680, + }, + Map { + "__kind" => "MasterBar", + "start" => 107520, + }, + Map { + "__kind" => "MasterBar", + "start" => 111360, + }, + Map { + "__kind" => "MasterBar", + "start" => 115200, + }, + Map { + "__kind" => "MasterBar", + "start" => 119040, + }, + Map { + "__kind" => "MasterBar", + "start" => 122880, + }, + Map { + "__kind" => "MasterBar", + "start" => 126720, + }, + Map { + "__kind" => "MasterBar", + "start" => 130560, + }, + Map { + "__kind" => "MasterBar", + "start" => 134400, + }, + Map { + "__kind" => "MasterBar", + "start" => 138240, + }, + Map { + "__kind" => "MasterBar", + "start" => 142080, + }, + Map { + "__kind" => "MasterBar", + "start" => 145920, + }, + Map { + "__kind" => "MasterBar", + "start" => 149760, + }, + Map { + "__kind" => "MasterBar", + "start" => 153600, + }, + Map { + "__kind" => "MasterBar", + "start" => 157440, + }, + Map { + "__kind" => "MasterBar", + "start" => 161280, + }, + Map { + "__kind" => "MasterBar", + "start" => 165120, + }, + Map { + "__kind" => "MasterBar", + "start" => 168960, + }, + Map { + "__kind" => "MasterBar", + "start" => 172800, + }, + Map { + "__kind" => "MasterBar", + "start" => 176640, + }, + Map { + "__kind" => "MasterBar", + "start" => 180480, + }, + Map { + "__kind" => "MasterBar", + "start" => 184320, + }, + Map { + "__kind" => "MasterBar", + "start" => 188160, + }, + Map { + "__kind" => "MasterBar", + "start" => 192000, + }, + Map { + "__kind" => "MasterBar", + "start" => 195840, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 215, + "ratioposition" => 0.25, + "text" => "", + }, + Map { + "islinear" => false, + "type" => 0, + "value" => 200, + "ratioposition" => 0.5, + "text" => "", + }, + ], + "start" => 199680, + }, + Map { + "__kind" => "MasterBar", + "start" => 203520, + }, + Map { + "__kind" => "MasterBar", + "start" => 207360, + }, + Map { + "__kind" => "MasterBar", + "start" => 211200, + }, + Map { + "__kind" => "MasterBar", + "start" => 215040, + }, + Map { + "__kind" => "MasterBar", + "start" => 218880, + }, + Map { + "__kind" => "MasterBar", + "start" => 222720, + }, + Map { + "__kind" => "MasterBar", + "start" => 226560, + }, + Map { + "__kind" => "MasterBar", + "start" => 230400, + }, + Map { + "__kind" => "MasterBar", + "start" => 234240, + }, + Map { + "__kind" => "MasterBar", + "start" => 238080, + }, + Map { + "__kind" => "MasterBar", + "start" => 241920, + }, + Map { + "__kind" => "MasterBar", + "start" => 245760, + }, + Map { + "__kind" => "MasterBar", + "start" => 249600, + }, + Map { + "__kind" => "MasterBar", + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 199.99873, + "millisecondoffset" => 102754.55782312925, + }, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 253440, + }, + Map { + "__kind" => "MasterBar", + "start" => 257280, + }, + Map { + "__kind" => "MasterBar", + "start" => 261120, + }, + Map { + "__kind" => "MasterBar", + "start" => 264960, + }, + Map { + "__kind" => "MasterBar", + "start" => 268800, + }, + Map { + "__kind" => "MasterBar", + "start" => 272640, + }, + Map { + "__kind" => "MasterBar", + "start" => 276480, + }, + Map { + "__kind" => "MasterBar", + "start" => 280320, + }, + Map { + "__kind" => "MasterBar", + "start" => 284160, + }, + Map { + "__kind" => "MasterBar", + "start" => 288000, + }, + Map { + "__kind" => "MasterBar", + "start" => 291840, + }, + Map { + "__kind" => "MasterBar", + "start" => 295680, + }, + Map { + "__kind" => "MasterBar", + "start" => 299520, + }, + Map { + "__kind" => "MasterBar", + "start" => 303360, + }, + Map { + "__kind" => "MasterBar", + "start" => 307200, + }, + Map { + "__kind" => "MasterBar", + "start" => 311040, + }, + Map { + "__kind" => "MasterBar", + "start" => 314880, + }, + Map { + "__kind" => "MasterBar", + "start" => 318720, + }, + Map { + "__kind" => "MasterBar", + "start" => 322560, + }, + Map { + "__kind" => "MasterBar", + "start" => 326400, + }, + Map { + "__kind" => "MasterBar", + "start" => 330240, + }, + Map { + "__kind" => "MasterBar", + "start" => 334080, + }, + Map { + "__kind" => "MasterBar", + "start" => 337920, + }, + Map { + "__kind" => "MasterBar", + "start" => 341760, + }, + Map { + "__kind" => "MasterBar", + "start" => 345600, + }, + Map { + "__kind" => "MasterBar", + "start" => 349440, + }, + Map { + "__kind" => "MasterBar", + "start" => 353280, + }, + Map { + "__kind" => "MasterBar", + "start" => 357120, + }, + Map { + "__kind" => "MasterBar", + "start" => 360960, + }, + Map { + "__kind" => "MasterBar", + "start" => 364800, + }, + Map { + "__kind" => "MasterBar", + "start" => 368640, + }, + Map { + "__kind" => "MasterBar", + "start" => 372480, + }, + Map { + "__kind" => "MasterBar", + "start" => 376320, + }, + Map { + "__kind" => "MasterBar", + "start" => 380160, + }, + Map { + "__kind" => "MasterBar", + "start" => 384000, + }, + Map { + "__kind" => "MasterBar", + "start" => 387840, + }, + Map { + "__kind" => "MasterBar", + "start" => 391680, + }, + Map { + "__kind" => "MasterBar", + "start" => 395520, + }, + Map { + "__kind" => "MasterBar", + "start" => 399360, + }, + Map { + "__kind" => "MasterBar", + "start" => 403200, + }, + Map { + "__kind" => "MasterBar", + "start" => 407040, + }, + Map { + "__kind" => "MasterBar", + "start" => 410880, + }, + Map { + "__kind" => "MasterBar", + "start" => 414720, + }, + Map { + "__kind" => "MasterBar", + "start" => 418560, + }, + Map { + "__kind" => "MasterBar", + "start" => 422400, + }, + Map { + "__kind" => "MasterBar", + "start" => 426240, + }, + Map { + "__kind" => "MasterBar", + "start" => 430080, + }, + Map { + "__kind" => "MasterBar", + "start" => 433920, + }, + Map { + "__kind" => "MasterBar", + "start" => 437760, + }, + Map { + "__kind" => "MasterBar", + "start" => 441600, + }, + Map { + "__kind" => "MasterBar", + "start" => 445440, + }, + Map { + "__kind" => "MasterBar", + "start" => 449280, + }, + Map { + "__kind" => "MasterBar", + "start" => 453120, + }, + Map { + "__kind" => "MasterBar", + "start" => 456960, + }, + Map { + "__kind" => "MasterBar", + "start" => 460800, + }, + Map { + "__kind" => "MasterBar", + "start" => 464640, + }, + Map { + "__kind" => "MasterBar", + "start" => 468480, + }, + Map { + "__kind" => "MasterBar", + "start" => 472320, + }, + Map { + "__kind" => "MasterBar", + "start" => 476160, + }, + Map { + "__kind" => "MasterBar", + "start" => 480000, + }, + Map { + "__kind" => "MasterBar", + "start" => 483840, + }, + Map { + "__kind" => "MasterBar", + "start" => 487680, + }, + Map { + "__kind" => "MasterBar", + "start" => 491520, + }, + Map { + "__kind" => "MasterBar", + "start" => 495360, + }, + Map { + "__kind" => "MasterBar", + "start" => 499200, + }, + Map { + "__kind" => "MasterBar", + "start" => 503040, + }, + Map { + "__kind" => "MasterBar", + "start" => 506880, + }, + Map { + "__kind" => "MasterBar", + "start" => 510720, + }, + Map { + "__kind" => "MasterBar", + "start" => 514560, + }, + Map { + "__kind" => "MasterBar", + "start" => 518400, + }, + Map { + "__kind" => "MasterBar", + "start" => 522240, + }, + Map { + "__kind" => "MasterBar", + "start" => 526080, + }, + Map { + "__kind" => "MasterBar", + "timesignaturenumerator" => 6, + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 91, + "ratioposition" => 0, + "text" => "", + }, + ], + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 95.02262, + "millisecondoffset" => 189155.10204081633, + }, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 529920, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 97, + "ratioposition" => 0, + "text" => "", + }, + ], + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 103.20769, + "millisecondoffset" => 192943.67346938775, + }, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 535680, + }, + Map { + "__kind" => "MasterBar", + "start" => 539520, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 100, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 543360, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 99, + "ratioposition" => 0.5, + "text" => "", + }, + ], + "start" => 547200, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 98, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 551040, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 101, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 554880, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 100, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 558720, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 102, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 562560, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 200, + "ratioposition" => 0, + "text" => "", + }, + ], + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 192.18826, + "millisecondoffset" => 211546.9387755102, + }, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 566400, + }, + Map { + "__kind" => "MasterBar", + "start" => 570240, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 200, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 574080, + }, + Map { + "__kind" => "MasterBar", + "start" => 577920, + }, + Map { + "__kind" => "MasterBar", + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 195.20833, + "millisecondoffset" => 216542.04081632654, + }, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 581760, + }, + Map { + "__kind" => "MasterBar", + "start" => 585600, + }, + Map { + "__kind" => "MasterBar", + "start" => 589440, + }, + Map { + "__kind" => "MasterBar", + "start" => 593280, + }, + Map { + "__kind" => "MasterBar", + "start" => 597120, + }, + Map { + "__kind" => "MasterBar", + "start" => 600960, + }, + Map { + "__kind" => "MasterBar", + "start" => 604800, + }, + Map { + "__kind" => "MasterBar", + "start" => 608640, + }, + Map { + "__kind" => "MasterBar", + "start" => 612480, + }, + Map { + "__kind" => "MasterBar", + "start" => 616320, + }, + Map { + "__kind" => "MasterBar", + "start" => 620160, + }, + Map { + "__kind" => "MasterBar", + "start" => 624000, + }, + Map { + "__kind" => "MasterBar", + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 200.20428, + "millisecondoffset" => 231295.51020408163, + }, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 627840, + }, + Map { + "__kind" => "MasterBar", + "start" => 631680, + }, + Map { + "__kind" => "MasterBar", + "start" => 635520, + }, + Map { + "__kind" => "MasterBar", + "start" => 639360, + }, + Map { + "__kind" => "MasterBar", + "start" => 643200, + }, + Map { + "__kind" => "MasterBar", + "start" => 647040, + }, + Map { + "__kind" => "MasterBar", + "start" => 650880, + }, + Map { + "__kind" => "MasterBar", + "start" => 654720, + }, + Map { + "__kind" => "MasterBar", + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 200.38033, + "millisecondoffset" => 240885.71428571426, + }, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 658560, + }, + Map { + "__kind" => "MasterBar", + "start" => 662400, + }, + Map { + "__kind" => "MasterBar", + "start" => 666240, + }, + Map { + "__kind" => "MasterBar", + "start" => 670080, + }, + Map { + "__kind" => "MasterBar", + "start" => 673920, + }, + Map { + "__kind" => "MasterBar", + "start" => 677760, + }, + Map { + "__kind" => "MasterBar", + "start" => 681600, + }, + Map { + "__kind" => "MasterBar", + "start" => 685440, + }, + Map { + "__kind" => "MasterBar", + "timesignaturenumerator" => 6, + "start" => 689280, + }, + Map { + "__kind" => "MasterBar", + "start" => 695040, + }, + Map { + "__kind" => "MasterBar", + "start" => 698880, + }, + Map { + "__kind" => "MasterBar", + "start" => 702720, + }, + Map { + "__kind" => "MasterBar", + "start" => 706560, + }, + Map { + "__kind" => "MasterBar", + "start" => 710400, + }, + Map { + "__kind" => "MasterBar", + "start" => 714240, + }, + Map { + "__kind" => "MasterBar", + "start" => 718080, + }, + Map { + "__kind" => "MasterBar", + "start" => 721920, + }, + Map { + "__kind" => "MasterBar", + "start" => 725760, + }, + Map { + "__kind" => "MasterBar", + "start" => 729600, + }, + Map { + "__kind" => "MasterBar", + "start" => 733440, + }, + Map { + "__kind" => "MasterBar", + "start" => 737280, + }, + Map { + "__kind" => "MasterBar", + "start" => 741120, + }, + Map { + "__kind" => "MasterBar", + "start" => 744960, + }, + Map { + "__kind" => "MasterBar", + "start" => 748800, + }, + Map { + "__kind" => "MasterBar", + "start" => 752640, + }, + Map { + "__kind" => "MasterBar", + "start" => 756480, + }, + Map { + "__kind" => "MasterBar", + "start" => 760320, + }, + Map { + "__kind" => "MasterBar", + "start" => 764160, + }, + Map { + "__kind" => "MasterBar", + "start" => 768000, + }, + Map { + "__kind" => "MasterBar", + "start" => 771840, + }, + Map { + "__kind" => "MasterBar", + "start" => 775680, + }, + Map { + "__kind" => "MasterBar", + "start" => 779520, + }, + Map { + "__kind" => "MasterBar", + "start" => 783360, + }, + Map { + "__kind" => "MasterBar", + "start" => 787200, + }, + Map { + "__kind" => "MasterBar", + "start" => 791040, + }, + Map { + "__kind" => "MasterBar", + "start" => 794880, + }, + Map { + "__kind" => "MasterBar", + "start" => 798720, + }, + Map { + "__kind" => "MasterBar", + "start" => 802560, + }, + Map { + "__kind" => "MasterBar", + "start" => 806400, + }, + Map { + "__kind" => "MasterBar", + "start" => 810240, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 88, + "ratioposition" => 0, + "text" => "", + }, + ], + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 89.990814, + "millisecondoffset" => 289393.4693877551, + }, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 814080, + }, + Map { + "__kind" => "MasterBar", + "start" => 817920, + }, + Map { + "__kind" => "MasterBar", + "start" => 821760, + }, + Map { + "__kind" => "MasterBar", + "start" => 825600, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 91, + "ratioposition" => 0, + "text" => "", + }, + ], + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 103.1941, + "millisecondoffset" => 300061.2244897959, + }, + "ratioposition" => 0, + "text" => "", + }, + ], + "start" => 829440, + }, + Map { + "__kind" => "MasterBar", + "start" => 833280, + }, + Map { + "__kind" => "MasterBar", + "start" => 837120, + }, + Map { + "__kind" => "MasterBar", + "start" => 840960, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 94, + "ratioposition" => 0.125, + "text" => "", + }, + Map { + "islinear" => false, + "type" => 0, + "value" => 100, + "ratioposition" => 0.791667, + "text" => "", + }, + ], + "start" => 844800, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 76, + "ratioposition" => 0.875, + "text" => "", + }, + ], + "start" => 848640, + }, + Map { + "__kind" => "MasterBar", + "tempoautomations" => Array [ + Map { + "islinear" => false, + "type" => 0, + "value" => 90, + "ratioposition" => 0, + "text" => "", + }, + Map { + "islinear" => false, + "type" => 0, + "value" => 120, + "ratioposition" => 0.205479, + "text" => "", + }, + Map { + "islinear" => false, + "type" => 0, + "value" => 85, + "ratioposition" => 0.369863, + "text" => "", + }, + Map { + "islinear" => false, + "type" => 0, + "value" => 90, + "ratioposition" => 0.424658, + "text" => "", + }, + ], + "start" => 852480, + }, + Map { + "__kind" => "MasterBar", + "start" => 856320, + }, + Map { + "__kind" => "MasterBar", + "syncpoints" => Array [ + Map { + "islinear" => false, + "type" => 4, + "value" => 0, + "syncpointvalue" => Map { + "baroccurence" => 0, + "modifiedtempo" => 103.19424, + "millisecondoffset" => 320992.6530612245, + }, + "ratioposition" => 1, + "text" => "", + }, + ], + "start" => 860160, + }, + ], + "defaultsystemslayout" => 4, + "stylesheet" => Map { + "hidedynamics" => true, + "bracketextendmode" => 0, + }, + "backingtrack" => Map { + "padding" => -1653.061224489796, + }, + "style" => Map { + "headerandfooter" => Map { + "3" => Map { + "template" => "%ALBUM%", + "isvisible" => true, + "textalign" => 1, + }, + "6" => Map { + "template" => "Words & Music by %MUSIC%", + "isvisible" => true, + "textalign" => 2, + }, + "9" => Map { + "template" => "All Rights Reserved - International Copyright Secured", + "isvisible" => true, + "textalign" => 1, + }, + "5" => Map { + "template" => "Music by %MUSIC%", + "isvisible" => true, + "textalign" => 2, + }, + "7" => Map { + "template" => "Tabbed by %TABBER%", + "isvisible" => false, + "textalign" => 2, + }, + "8" => Map { + "template" => "%COPYRIGHT%", + "isvisible" => true, + "textalign" => 1, + }, + "2" => Map { + "template" => "%ARTIST%", + "isvisible" => true, + "textalign" => 1, + }, + "0" => Map { + "template" => "%TITLE%", + "isvisible" => true, + "textalign" => 1, + }, + "1" => Map { + "template" => "%SUBTITLE%", + "isvisible" => true, + "textalign" => 1, + }, + "4" => Map { + "template" => "Words by %WORDS%", + "isvisible" => true, + "textalign" => 0, + }, + }, + "colors" => Map {}, + }, +} +`; diff --git a/test/visualTests/TestUiFacade.ts b/test/visualTests/TestUiFacade.ts index f1da7331f..16cf7b5f8 100644 --- a/test/visualTests/TestUiFacade.ts +++ b/test/visualTests/TestUiFacade.ts @@ -307,6 +307,10 @@ export class TestUiFacade implements IUiFacade { return false; } + public createBackingTrackPlayer(): IAlphaSynth | null { + return null; + } + public readonly canRenderChanged: IEventEmitter = new EventEmitter(); public readonly rootContainerBecameVisible: IEventEmitter = new EventEmitter(); } diff --git a/vite.config.ts b/vite.config.ts index 6e8a206dd..746d5a380 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -104,13 +104,6 @@ export default defineConfig(({ command, mode }) => { const commonOutput: Partial = { globals: { jQuery: 'jQuery' - }, - // ugly workaround for https://github.com/rollup/rollup/issues/5946 - intro(chunk) { - if(chunk.isEntry) { - return "if(typeof Symbol.dispose==='undefined'){Symbol.dispose = Symbol('Symbol.dispose')}" - } - return ''; } };