Skip to main content

Song Details Formatting

since 1.5.0

In the page payout, alphaTab shows the information of the song directly as part of the music sheet. The display of this song information can be adjusted in 3 ways:

The mechanisms are currently a bit scattered historically. With alphaTab 2.x we plan to consolidate these options.

For some formats like Guitar Pro alphaTab will read the information contained in the file and adjust the alignments and templates. In any case, the song info can be adjusted by updating the settings and the data model after it has been loaded.

The examples here are written in TypeScript (for clarity on types), the same methods and properties are available on all flavors of alphaTab. When and what to set as styles depends on your needs. You might have an own custom style applied to all files, or you have the style stored beside your file and load it along the file itself.

function adjustStyle(score: alphaTab.model.Score) {
    // ensure we have a score style 
    if(!score.style) {
        score.style = new alphaTab.model.ScoreStyle();
    }

    // set a new style for the title
    score.style.headerAndFooter.set(
        alphaTab.model.ScoreSubElement.Title,
        new alphaTab.model.HeaderFooterStyle(
            "%TITLE% - %SUBTITLE%", // text template
            true, // visible? 
            alphaTab.platform.TextAlign.Left
        )
    );
    score.style.colors.set(
        alphaTab.model.ScoreSubElement.Title,
        alphaTab.model.Color.fromJson("#FF0000")
    );

    // hide the subtitle
    score.style.headerAndFooter.set(
        alphaTab.model.ScoreSubElement.SubTitle,
        new alphaTab.model.HeaderFooterStyle(
            "", // text template
            false, // visible? 
            alphaTab.platform.TextAlign.Left
        )
    );    
}

// Variant A: Adjust when the song is loaded manually
const score = alphaTab.importer.ScoreLoader.loadScoreFromBytes(loadFileFromSomewhere());
adjustStyle(score);
alphaTabApi.renderScore(score, [0]);

// Variant B: Adjust the style later at any point
adjustStyle(api.score);
alphaTabApi.renderScore(score, [0]);

// Variant C: Listen for any new score loaded and adjust it
alphaTabApi.scoreLoaded.on(score => {
    adjustStyle(score);
});

The most important parts to know: