Configuration (Web)

Now with alphaTab being part of your project it is time for customization. alphaTab has quite a list of settings, events and API methods to interact with.

Setup

On the installation guide you already saw that alphaTab initializes itself to a given div element.

Simply create a div container where you want alphaTab to be located on your page. alphaTab will dynamically resize to the available width of the div when using the page layout. If you prefer a fixed layout simply set a fixed width on the div via CSS and no resizes to alphaTab will happen either.

The main namespace alphaTab and its sub-namespaces like model or midi contain all types and functionalities by alphaTab. The main api is the alphaTab.AlphaTabApi class which can be used to initialize and interface with alphaTab:

<div id="alphaTab"></div>

const element = document.getElementById('alphaTab');
const api = new alphaTab.AlphaTabApi(element);

Settings

The settings object is passed to the constructor of the API object as second parameter:

const api = new alphaTab.AlphaTabApi(element, {
    // any settings go here    
});

Events

Events of alphaTab should be either subscribed on the API object. Please refer to the API Reference to find a full list of events available.

Each event has an .on(handler) and .off(handler) function to subscribe or unsubscribe.

const api = new alphaTab.AlphaTabApi(element);
api.scoreLoaded.on( (score) => {
    console.log('Score was loaded!', score);
});

API

The main interaction with alphaTab happens through the API object. Simply use any available API to get/set details or trigger actions.

const api = new alphaTab.AlphaTabApi(element);
api.tex('\title "Hello AlphaTab" . 1.1*4')