Backing-track audio

A student learning a song wants to play along with the studio recording — not a MIDI approximation. Set the player to backing-track mode and the cursor on the score follows the real audio file, note for note. Guitar Pro 8 files embed both the audio and the sync points, so a .gp file loaded into alphaTab plays the full-band recording out of the box. For other formats, attach the audio bytes on score.backingTrack before render. alphaTab plays either the synthesized audio or the backing track — the two do not mix.

What alphaTab needs

The backing-track pipeline expects three things on the score:

• score.backingTrack.rawAudioFile — the audio bytes as a Uint8Array. OGG Vorbis and MP3 are the safe formats across browsers.
• Sync points on MasterBar.syncPoints — automations of type SyncPoint that anchor bar positions to audio timestamps. Guitar Pro 8 files ship these; for other formats generate them with the Media Sync Editor or set them at runtime.
• player.playerMode set to EnabledBackingTrack or EnabledAutomatic — Automatic picks the backing track when one is present and falls back to the synth otherwise.

On the web, playback is driven by AudioElementBackingTrackSynthOutput, which owns a hidden <audio> element sourced from a blob URL of the raw audio.

Guitar Pro 8

If the audio file is embedded in the .gp file, alphaTab loads and wires it automatically once you enable the backing-track mode. Nothing else to configure.

The demo below loads Iron Waltz, a Guitar Pro 8 file with the recording and its sync points embedded:

00:00 / 00:00

Show it in code

import * as alphaTab from '@coderline/alphatab';

const container = getAlphaTabContainer();
const api = new alphaTab.AlphaTabApi(container, {
  core: { file: '/scores/my-song.gp' },
  player: {
    playerMode: alphaTab.PlayerMode.EnabledAutomatic,
    soundFont: '/soundfont/sonivox.sf2',
  },
});

// For non-GP8 scores: attach the backing track before rendering.
const response = await fetch('/audio/my-song.ogg');
const audioBytes = new Uint8Array(await response.arrayBuffer());

api.scoreLoaded.on((score) => {
  score.backingTrack = new alphaTab.model.BackingTrack();
  score.backingTrack.rawAudioFile = audioBytes;

  // Point sync points at the score's masterbars — see the sync-points page
  // for the runtime API.
  api.updateSyncPoints();
});

getAlphaTabContainer() is a placeholder for the platform-specific step of obtaining the render target — a <div> on Web, an AlphaTab control on .NET, or an AlphaTabView on Android.

Where to look next

• Video sync — the same pattern with an HTML5 video element or a YouTube iframe.
• Sync points at runtime — building and updating the sync-point list programmatically.
• The MIDI event stream — even in backing-track mode, alphaTab still emits the score's MIDI events for tracking.
• Media Sync Editor — the interactive tool for creating sync points against a waveform.
• PlayerMode and BackingTrack in the reference.