feat: Add base implementation for Guitar Pro 8 Audio Track (backing track & external media)

playground-template/control-template.html

@@ -33,6 +33,9 @@
         </div>
     </div>
     <div class="at-footer">
+        <div class="at-waveform d-none">
+            <div class="at-waveform-cursor"></div>
+        </div>
         <div class="at-time-slider">
             <div class="at-time-slider-value"></div>
         </div>

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;
-}
+}
+
+.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);
+}

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) {

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,

src.csharp/AlphaTab.Windows/AlphaTab.Windows.csproj

@@ -26,7 +26,7 @@
     </ItemGroup>
 
     <ItemGroup>
-      <PackageReference Include="NAudio.Core" Version="2.2.1" />
+      <PackageReference Include="NAudio" Version="2.2.1" />
       <PackageReference Include="AlphaSkia.Native.Windows" Version="3.3.135" />
     </ItemGroup>