Rendering a slice

display.startBar and display.barCount render a window of consecutive bars out of a larger score. Reach for them to build a practice UI that paginates a long piece four bars at a time, to isolate a phrase for a tutorial page, or to generate embedded thumbnails of specific passages — all without loading a different file each time.

bars 1–4

The two knobs

• display.startBar — the first bar to render, one-based. 1 is the beginning of the score (the default), 5 starts the render at bar 5.
• display.barCount — how many consecutive bars to include. -1 (the default) renders every bar from startBar to the end.

The rest of the score model is still loaded and available for playback, event hooks, and bounds lookup — only the visible render is trimmed. Playback still traverses the full score unless you also constrain player.playbackRange.

To change the visible slice at runtime, mutate api.settings.display.startBar and api.settings.display.barCount, then call api.updateSettings() followed by api.render().

Show it in code

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

const container = getAlphaTabContainer();
const api = new alphaTab.AlphaTabApi(container, {
  core: { file: '/scores/song.gp' },
  display: {
    startBar: 4,
    barCount: 8,
  },
});

// Later — page forward eight bars
document.getElementById('next-page').addEventListener('click', () => {
  api.settings.display.startBar += 8;
  api.updateSettings();
  api.render();
});

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. Every other line runs unchanged on all three runtimes.

Where to look next

• Page layout — the wrapping mode this slice usually renders in.
• display.startBar and display.barCount reference entries.
• updateSettings — apply setting mutations at runtime.