### Install Dependencies and Start Development

Source: https://www.alphatab.net/docs/contributing

Run these commands after cloning the repository to install dependencies and start the development build process. This is essential for setting up your local development environment.

```bash
> npm install
> npm start
```

--------------------------------

### Check Playback Readiness and Start Playback

Source: https://www.alphatab.net/docs/reference/api/isreadyforplayback

Examples demonstrating how to verify if the player is ready before triggering playback.

```javascript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
if(api.isReadyForPlayback)) api.play();  
```

```csharp
var api = new AlphaTabApi<MyControl>(...);  
if(api.IsReadyForPlayback) api.Play();  
```

```kotlin
val api = AlphaTabApi<MyControl>(...)  
if (api.isReadyForPlayback) api.play()  
```

--------------------------------

### Kotlin Example

Source: https://www.alphatab.net/docs/reference/api/tracks

Example of initializing AlphaTab API and accessing tracks in Kotlin.

```APIDOC
## Kotlin Track Selector Example

### Description
This example illustrates initializing the AlphaTab API in Kotlin and subsequently employing the `tracks` property to highlight tracks in a track selector.

### Method
N/A (Client-side Kotlin/Android)

### Endpoint
N/A

### Parameters
None

### Request Body
None

### Request Example
```kotlin
val api = AlphaTabApi<MyControl>(...)
highlightCurrentTracksInTrackSelector(api.tracks)
```

### Response
N/A
```

--------------------------------

### Load Score Examples

Source: https://www.alphatab.net/docs/reference/api/load

Examples demonstrating how to initialize the API and load a file on different platforms.

```JavaScript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.load('/assets/MyFile.gp');
```

```C#
var api = new AlphaTabApi<MyControl>(...);  
api.Load(System.IO.File.OpenRead("MyFile.gp"));
```

```Android
val api = AlphaTabApi<MyControl>(...)  
contentResolver.openInputStream(uri).use {  
    api.load(it)  
}
```

--------------------------------

### C# Example

Source: https://www.alphatab.net/docs/reference/api/tracks

Example of initializing AlphaTab API and accessing tracks in C#.

```APIDOC
## C# Track Selector Example

### Description
This example demonstrates initializing the AlphaTab API in C# and then utilizing the `Tracks` property to highlight tracks within a track selector.

### Method
N/A (Server-side or Client-side C#)

### Endpoint
N/A

### Parameters
None

### Request Body
None

### Request Example
```csharp
var api = new AlphaTabApi<MyControl>(...);
HighlightCurrentTracksInTrackSelector(api.Tracks);
```

### Response
N/A
```

--------------------------------

### Kotlin Example

Source: https://www.alphatab.net/docs/reference/api/metronomevolume

Example of setting the metronome volume using the Kotlin API.

```APIDOC
## Kotlin Example

### Description
Demonstrates how to set the metronome volume in Kotlin.

### Method
SET

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **metronomeVolume** (Double) - Required - The volume of the metronome (0-1).

### Request Example
```kotlin
val api = AlphaTabApi<MyControl>(...)
api.metronomeVolume = 0.5
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Access start property

Source: https://www.alphatab.net/docs/reference/types/midi/beatticklookup

Gets or sets the start time in midi ticks for the beat.

```javascript
start: number;
```

```csharp
double Start { get; set; }
```

```kotlin
var start: Double
```

--------------------------------

### Play method usage examples

Source: https://www.alphatab.net/docs/reference/api/play

Examples demonstrating how to invoke the play method on an AlphaTabApi instance.

```JavaScript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.play();
```

```C#
var api = new AlphaTabApi<MyControl>(...);  
api.Play();
```

```Kotlin
val api = AlphaTabApi<MyControl>(...)  
api.play()
```

--------------------------------

### highlightPlaybackRange usage examples

Source: https://www.alphatab.net/docs/reference/api/highlightplaybackrange

Examples demonstrating how to retrieve beat objects and apply the highlight range in different environments.

```JavaScript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
const startBeat = api.score.tracks[0].staves[0].bars[0].voices[0].beats[0];  
const endBeat = api.score.tracks[0].staves[0].bars[3].voices[0].beats[0];  
api.highlightPlaybackRange(startBeat, endBeat);
```

```C#
var api = new AlphaTabApi<MyControl>(...);  
api.ChangeTrackVolume(new Track[] { api.Score.Tracks[0], api.Score.Tracks[1] }, 1.5);  
api.ChangeTrackVolume(new Track[] { api.Score.Tracks[2] }, 0.5);  
var startBeat = api.Score.Tracks[0].Staves[0].Bars[0].Voices[0].Beats[0];  
var endBeat = api.Score.Tracks[0].Staves[0].Bars[3].Voices[0].Beats[0];  
api.HighlightPlaybackRange(startBeat, endBeat);
```

```Kotlin
val api = AlphaTabApi<MyControl>(...)  
val startBeat = api.score.tracks[0].staves[0].bars[0].voices[0].beats[0]  
val endBeat = api.score.tracks[0].staves[0].bars[3].voices[0].beats[0]  
api.highlightPlaybackRange(startBeat, endBeat)
```

--------------------------------

### C# Example

Source: https://www.alphatab.net/docs/reference/api/metronomevolume

Example of setting the metronome volume using the C# API.

```APIDOC
## C# Example

### Description
Demonstrates how to set the metronome volume in C#.

### Method
SET

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **MetronomeVolume** (double) - Required - The volume of the metronome (0-1).

### Request Example
```csharp
var api = new AlphaTabApi<MyControl>(...);
api.MetronomeVolume = 0.5;
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Example: Setting up a Drum Track with Default Articulations

Source: https://www.alphatab.net/docs/alphatex/staff-metadata

This example demonstrates setting up a drum track with a tempo, clef, and registering default articulations. Ensure \instrument is set to percussion.

```AlphaTab
\track "Drums"
\instrument percussion
\tempo 120
\clef neutral
\articulation defaults

```

--------------------------------

### Basic Note Example

Source: https://www.alphatab.net/docs/alphatex/note-properties

A simple example showing notes with volume and tempo settings.

```alphatab
C4 {volume 8} D4 E4 {tempo 16} F4
```

--------------------------------

### JavaScript Example

Source: https://www.alphatab.net/docs/reference/api/tracks

Example of initializing AlphaTab API and accessing tracks in JavaScript.

```APIDOC
## JavaScript Track Selector Example

### Description
This example shows how to initialize the AlphaTab API in JavaScript and then use the `tracks` property to highlight tracks in a track selector.

### Method
N/A (Client-side JavaScript)

### Endpoint
N/A

### Parameters
None

### Request Body
None

### Request Example
```javascript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));
highlightCurrentTracksInTrackSelector(api.tracks);
```

### Response
N/A
```

--------------------------------

### getBeatStart

Source: https://www.alphatab.net/docs/reference/types/midi/miditicklookup

Gets the start time in midi ticks for a given beat at which the masterbar is played the first time.

```APIDOC
## getBeatStart

### Description
Gets the start time in midi ticks for a given beat at which the masterbar is played the first time.

### Parameters
#### Path Parameters
- **beat** (Beat) - Required - The beat to find the time period for.

### Response
- **Returns** (number/double) - The time in midi ticks at which the beat is played the first time or 0 if the beat is not contained.
```

--------------------------------

### Example Notation Settings Configuration

Source: https://www.alphatab.net/docs/reference/types/json/notationsettingsjson

An example of how to configure notation settings, including small grace tab notes, fingering mode, bend arrow extensions, and element-specific settings.

```json
{
    "notation": {
        "smallGraceTabNotes": false,
        "fingeringMode": alphaTab.FingeringMode.SingleNoteEffectBandm,
        "extendBendArrowsOnTiedNotes": false
    },
    "elements": {
        "parenthesisOnTiedBends": false,
        "tabNotesOnTiedBends": false,
        "zerosOnDiveWhammys": true
    }
}
```

--------------------------------

### Set playbackRange example

Source: https://www.alphatab.net/docs/reference/api/playbackrange

Examples of configuring the playback range on an AlphaTabApi instance.

```JavaScript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.playbackRange = { startTick: 1000, endTick: 50000 };  
```

```C#
var api = new AlphaTabApi<MyControl>(...);  
api.PlaybackRange = new PlaybackRange { StartTick = 1000, EndTick = 50000 };  
```

```Kotlin
val api = AlphaTabApi<MyControl>(...)  
api.playbackRange = PlaybackRange.apply {  
    startTick = 1000  
    endTick = 50000  
}  
```

--------------------------------

### NotationMode Examples

Source: https://www.alphatab.net/docs/reference/settings/notation/notationmode

Code examples demonstrating how to set the `NotationMode` in different programming languages.

```JavaScript
var notationMode = NotationMode.GuitarPro;
```

```C#
NotationMode NotationMode { get; set; } = NotationMode.GuitarPro;
```

```Kotlin
notationMode: NotationMode = NotationMode.GuitarPro;
```

--------------------------------

### changeTrackVolume Usage Examples

Source: https://www.alphatab.net/docs/reference/api/changetrackvolume

Examples demonstrating how to invoke changeTrackVolume to set track volumes in different environments.

```JavaScript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.changeTrackVolume([api.score.tracks[0], api.score.tracks[1]], 1.5);  
api.changeTrackVolume([api.score.tracks[2]], 0.5);
```

```C#
var api = new AlphaTabApi<MyControl>(...);  
api.ChangeTrackVolume(new Track[] { api.Score.Tracks[0], api.Score.Tracks[1] }, 1.5);  
api.ChangeTrackVolume(new Track[] { api.Score.Tracks[2] }, 0.5);
```

```Kotlin
val api = AlphaTabApi<MyControl>(...);  
api.changeTrackVolume(alphaTab.collections.List<alphaTab.model.Track>(api.score.tracks[0], api.score.tracks[1]), 1.5);  
api.changeTrackVolume(alphaTab.collections.List<alphaTab.model.Track>(api.score.tracks[2]), 0.5);
```

--------------------------------

### getMasterBarStart

Source: https://www.alphatab.net/docs/reference/types/midi/miditicklookup

Gets the start time in midi ticks for a given masterbar at which the masterbar is played the first time.

```APIDOC
## getMasterBarStart

### Description
Gets the start time in midi ticks for a given masterbar at which the masterbar is played the first time.

### Parameters
#### Path Parameters
- **bar** (MasterBar) - Required - The masterbar to find the time period for.

### Response
- **Returns** (number/double) - The time in midi ticks at which the masterbar is played the first time or 0 if the masterbar is not contained.
```

--------------------------------

### Accessing the start property

Source: https://www.alphatab.net/docs/reference/types/alphatex/alphatexasterisktokennode

Retrieves the start location of the node.

```javascript
start?: AlphaTexAstNodeLocation;
```

```csharp
AlphaTexAstNodeLocation Start { get; set; }
```

```kotlin
var start: AlphaTexAstNodeLocation
```

--------------------------------

### JavaScript Example

Source: https://www.alphatab.net/docs/reference/api/metronomevolume

Example of setting the metronome volume using the JavaScript API.

```APIDOC
## JavaScript Example

### Description
Demonstrates how to set the metronome volume in JavaScript.

### Method
SET

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **metronomeVolume** (number) - Required - The volume of the metronome (0-1).

### Request Example
```javascript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));
api.metronomeVolume = 0.5;
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Access start property

Source: https://www.alphatab.net/docs/reference/types/midi/miditicklookupfindbeatresult

Read-only property for the start position.

```javascript
readonly start: number;
```

```csharp
double Start { get; }
```

```kotlin
val start: Double
```

--------------------------------

### render

Source: https://www.alphatab.net/docs/reference/types/alphatabapi

Initiates a re-rendering of the current setup.

```APIDOC
## render

### Description
Initiates a re-rendering of the current setup. If rendering is not yet possible, it will be deferred.

### Parameters
#### Request Body
- **renderHints** (RenderHints) - Optional - Additional hints to respect during layouting and rendering.
```

--------------------------------

### Start Playback

Source: https://www.alphatab.net/docs/reference/types/synth/iexternalmediahandler

Instructs the external media handler to begin playback.

```typescript
play(): void
```

```csharp
void Play()
```

```kotlin
fun play(): Unit
```

--------------------------------

### playPause Usage Examples

Source: https://www.alphatab.net/docs/reference/api/playpause

Practical examples of invoking the playPause method on an AlphaTabApi instance.

```JavaScript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.playPause();
```

```C#
var api = new AlphaTabApi<MyControl>(...);  
api.PlayPause();
```

```Android
val api = AlphaTabApi<MyControl>(...)  
api.playPause()
```

--------------------------------

### Usage Examples for clearPlaybackRangeHighlight

Source: https://www.alphatab.net/docs/reference/api/clearplaybackrangehighlight

Demonstrates how to invoke the method on an AlphaTabApi instance.

```JavaScript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.clearPlaybackRangeHighlight();  
```

```C#
var api = new AlphaTabApi<MyControl>(...);  
api.clearPlaybackRangeHighlight();  
```

```Android
val api = AlphaTabApi<MyControl>(...)  
api.clearPlaybackRangeHighlight()  
```

--------------------------------

### changeTrackSolo Usage Examples

Source: https://www.alphatab.net/docs/reference/api/changetracksolo

Examples demonstrating how to invoke the changeTrackSolo method to solo specific tracks in an alphaTab instance.

```JavaScript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.changeTrackSolo([api.score.tracks[0], api.score.tracks[1]], true);
```

```C#
var api = new AlphaTabApi<MyControl>(...);  
api.ChangeTrackSolo(new Track[] { api.Score.Tracks[0], api.Score.Tracks[1] }, true);
```

```Android
val api = AlphaTabApi<MyControl>(...)  
api.changeTrackSolo(alphaTab.collections.List<alphaTab.model.Track>(api.score.tracks[0], api.score.tracks[1]), true);
```

--------------------------------

### Get Master Bar Start Time

Source: https://www.alphatab.net/docs/reference/types/midi/miditicklookup

Gets the start time in midi ticks for a given masterbar. Returns 0 if the masterbar is not contained.

```JavaScript
getMasterBarStart(bar: MasterBar): number
```

```C#
double GetMasterBarStart(MasterBar bar)
```

```Kotlin
fun getMasterBarStart(bar: MasterBar): Double
```

--------------------------------

### Get Beat Start Time

Source: https://www.alphatab.net/docs/reference/types/midi/miditicklookup

Gets the start time in midi ticks for a given beat. Returns 0 if the beat is not contained within the lookup.

```JavaScript
getBeatStart(beat: Beat): number
```

```C#
double GetBeatStart(Beat beat)
```

```Kotlin
fun getBeatStart(beat: Beat): Double
```

--------------------------------

### play

Source: https://www.alphatab.net/docs/reference/types/synth/iaudioelementbackingtracksynthoutput

Called when the output should start the playback.

```APIDOC
## play

### Description
Called when the output should start the playback.
```

--------------------------------

### Get visible beat at start

Source: https://www.alphatab.net/docs/reference/types/midi/beatticklookup

Finds the first visible beat starting at this lookup for cursor placement.

```javascript
getVisibleBeatAtStart(visibleTracks: Set<number>): Beat | null
```

```csharp
Beat? GetVisibleBeatAtStart(Set<double> visibleTracks)
```

```kotlin
fun getVisibleBeatAtStart(visibleTracks: Set<Double>): Beat?
```

--------------------------------

### Initialize UI

Source: https://www.alphatab.net/docs/reference/types/platform/iuifacade

Sets up the UI using the provided API wrapper and settings.

```JavaScript
initialize(api: AlphaTabApiBase<TSettings>, settings: TSettings): void
```

```C#
void Initialize(AlphaTabApiBase<TSettings> api, TSettings settings)
```

```Kotlin
fun initialize(api: AlphaTabApiBase<TSettings>, settings: TSettings): Unit
```

--------------------------------

### Access beat property

Source: https://www.alphatab.net/docs/reference/types/midi/miditicklookupfindbeatresult

Gets or sets the beat used for cursor animation start positions.

```javascript
beat: Beat;
```

```csharp
Beat Beat { get; set; }
```

```kotlin
var beat: Beat
```

--------------------------------

### Example Key Signature Usage

Source: https://www.alphatab.net/docs/alphatex/bar-metadata

Demonstrates setting various key signatures including Cb, C, C#, Aminor, Dmajor, and Bminor.

```alphatab
\ks Cb | \ks C | \ks C# |  
\ks Aminor | \ks Dmajor | \ks Bminor
```

--------------------------------

### After: Using a Settings Instance

Source: https://www.alphatab.net/docs/migration/data-attributes

Create a new Settings instance to manage configuration, useful for sharing settings across multiple instances.

```javascript
<div id="alphaTab"></div>  
<script type="module">  
import * as alphaTab from '@coderline/alphaTab';  
const element = document.querySelector('#alphaTab');  
const settings = new alphaTab.Settings();  
settings.core.file = "test.gp";  
settings.display.layoutMode = alphaTab.LayoutMode.Horizontal;  
settings.player.enablePlayer = true;  
const api = new alphaTab.AlphaTabApi(element, settings);  
</script>
```

--------------------------------

### isHammerPullOrigin Property

Source: https://www.alphatab.net/docs/reference/types/model/note

Gets or sets whether this note starts a hammer-on or pull-off. Available in JavaScript, C#, and Kotlin.

```JavaScript
isHammerPullOrigin: boolean;
```

```C#
bool IsHammerPullOrigin { get; set; }
```

```Kotlin
var isHammerPullOrigin: Boolean
```

--------------------------------

### Example of Instrument and Bank Change

Source: https://www.alphatab.net/docs/alphatex/beat-properties

This example shows how to change both the instrument and the bank within a sequence of notes. It sets instrument 25 and bank 2.

```alphatex
C4 C4 C4 {instrument 25 bank 2} C4
```

--------------------------------

### Get visible beat at start with checker

Source: https://www.alphatab.net/docs/reference/types/midi/beatticklookup

Finds the first visible beat using a custom visibility checker.

```javascript
getVisibleBeatAtStartWithChecker(checker: IBeatVisibilityChecker): Beat | null
```

```csharp
Beat? GetVisibleBeatAtStartWithChecker(IBeatVisibilityChecker checker)
```

```kotlin
fun getVisibleBeatAtStartWithChecker(checker: IBeatVisibilityChecker): Beat?
```

--------------------------------

### Custom Language Server Worker Setup

Source: https://www.alphatab.net/docs/alphatex/monaco

Defines a custom worker file to start the alphaTab language server. This approach allows for more control over the worker's initialization and environment.

```typescript
// Variant 1  
import '@coderline/alphatab-monaco/worker';  
// Variant 2:   
import { startWebWorkerLanguageServer } from '@coderline/alphatab-language-server';  
  
const workerGlobalThis = globalThis as unknown as DedicatedWorkerGlobalScope;  
startWebWorkerLanguageServer(workerGlobalThis, workerGlobalThis);

```

--------------------------------

### play

Source: https://www.alphatab.net/docs/reference/types/alphatabapi

Starts the playback of the current song.

```APIDOC
## play

### Description
Starts the playback of the current song.

### Response
#### Success Response (200)
- **result** (boolean) - Returns true if playback was started.
```

--------------------------------

### Handle Before-Beat Grace Notes (alphaTex)

Source: https://www.alphatab.net/docs/releases/release1_8

Grace notes marked as 'before-beat' ({gr bb}) can cause issues at the song start. This example shows how to use them, with alphaTab now handling the duration stealing internally.

```alphatex
\subtitle "Before-Beat Grace Note"  
C4 {gr bb} C4 C4 C4 C4  

```

--------------------------------

### IsSectionStart Property

Source: https://www.alphatab.net/docs/reference/types/model/masterbar

Indicates if the bar is a section start.

```JavaScript
readonly isSectionStart: boolean;
```

```C#
bool IsSectionStart { get; }
```

```Kotlin
val isSectionStart: Boolean
```

--------------------------------

### open

Source: https://www.alphatab.net/docs/reference/types/synth/iexternalmediasynthoutput

Initializes the output with a specified buffer time.

```APIDOC
## open

### Description
Called when the output should be opened.

### Parameters
#### Path Parameters
- **bufferTimeInMilliseconds** (number/double) - Required - The buffer time in milliseconds.
```

--------------------------------

### Get Current Output Device (Kotlin)

Source: https://www.alphatab.net/docs/reference/api/getoutputdevice

Retrieves the current audio output device using the AlphaTab API within a Kotlin coroutine. This example demonstrates how to use the suspend function within a runBlocking block.

```kotlin
fun init() = kotlinx.coroutines.runBlocking {
  val api = AlphaTabApi<MyControl>(...)  
  updateOutputDeviceUI(api.getOutputDevice().await())  
}
```

--------------------------------

### Handle midiLoad event

Source: https://www.alphatab.net/docs/reference/api/midiload

Examples of subscribing to the midiLoad event to perform custom initialization logic.

```javascript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.midiLoad.on(file => {  
    initializePianoPractice(file);  
});
```

```csharp
var api = new AlphaTabApi<MyControl>(...);  
api.MidiLoad.On(file =>  
{  
    InitializePianoPractice(file);  
});
```

```kotlin
val api = AlphaTabApi<MyControl>(...)  
api.midiLoad.on { file ->  
    initializePianoPractice(file)  
}
```

--------------------------------

### initialize Method

Source: https://www.alphatab.net/docs/reference/types/synth/iaudioexporterworker

Initializes the audio exporter worker with the specified options, MIDI file, sync points, and transposition pitches.

```APIDOC
## initialize(options, midi, syncPoints, transpositionPitches)

Initializes the worker.

### JavaScript
```javascript
initialize(options: AudioExportOptions, midi: MidiFile, syncPoints: BackingTrackSyncPoint[], transpositionPitches: Map<number, number>): Promise<void>
```

### C#
```csharp
System.Threading.Task<void> Initialize(AudioExportOptions options, MidiFile midi, IList<BackingTrackSyncPoint> syncPoints, Map<double, double> transpositionPitches)
```

### Kotlin
```kotlin
suspend fun initialize(options: AudioExportOptions, midi: MidiFile, syncPoints: alphaTab.collections.List<BackingTrackSyncPoint>, transpositionPitches: alphaTab.collections.DoubleDoubleMap<Double, Double>): Unit
```

### Parameters

| Parameter | Summary |
|---|---|
| `options` | The options to use |
| `midi` | The midi file to load |
| `syncPoints` | The sync points of the song (if any) |
| `transpositionPitches` | The initial transposition pitches for the midi file. |
```

--------------------------------

### Handle renderStarted event

Source: https://www.alphatab.net/docs/reference/api/renderstarted

Examples of subscribing to the renderStarted event to trigger UI updates when rendering begins.

```JavaScript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.renderStarted.on(() => {  
    updateProgressBar("Rendering");  
});  
```

```C#
var api = new AlphaTabApi<MyControl>(...);  
api.RenderStarted.On(resized =>  
{  
    UpdateProgressBar("Rendering");  
});  
```

```Kotlin
val api = AlphaTabApi<MyControl>(...)  
api.renderStarted.on { resized ->  
    updateProgressBar("Rendering");  
}  
```

--------------------------------

### initialize

Source: https://www.alphatab.net/docs/reference/types/platform/iuifacade

Initializes the UI using the given alphaTab API and settings object.

```APIDOC
## initialize

### Description
Initializes the UI using the given alphaTab API and settings object.

### Parameters
#### Request Body
- **api** (AlphaTabApiBase) - Required - The alphaTab API wrapper responsible for UI interaction.
- **settings** (TSettings) - Required - The settings object holding the settings from the UI layer.
```

--------------------------------

### Initialize alphaTab and Manage SoundFont Loading

Source: https://www.alphatab.net/docs/guides/multiple-soundfonts

Sets up the alphaTab API with player support and implements a progress-tracking mechanism for soundfont downloads.

```html
<div>Progress <span id="progressValue">0%</div>  
<button id="playPause" disabled="disabled">Play/Pause</button>  
<div id="alphaTab"></div>  
<script type="text/javascript">  
	const el = document.querySelector('#alphaTab');  
	const playPause = document.querySelector('#playPause');  
	const at = new alphaTab.AlphaTabApi(el, {  
		file: 'guitar-only.gp',  
		player: {  
			enablePlayer: true  
		}  
	});			  
	playPause.onclick = e => {  
		e.preventDefault();  
		at.playPause();  
	};
	  
	  
	const progress = new Map();  
	function updateLoadingIndicator() {  
		let loaded = 0;  
		let total = 0;  
		progress.forEach(value => {  
			loaded += value.loaded;  
			total += value.total;  
		});  
	  
		document.querySelector('#progressValue').innerText = Math.floor( (loaded / total) * 100 ) + '%';  
		if(total === loaded) {  
			playPause.removeAttribute('disabled');  
		}  
	}  
	  
	function loadSoundFont(url) {  
		// only load once  
		if(progress.has(url)) {  
			return;   
		}  
		  
		// assume 100KB as avg. size before we actually know it.   
		progress.set(url, { loaded: 0, total: 100 * 1024});  
	  
		// load via ajax  
		const request = new XMLHttpRequest();  
		request.open('GET', url, true);  
		request.responseType = 'arraybuffer';  
		request.onload = () => {  
			const buffer = new Uint8Array(request.response);  
			at.loadSoundFont(buffer, true);  
		};  
		request.onprogress = e => {  
			progress.set(url, e);  
			updateLoadingIndicator();  
		};  
		request.send();  
	}			  
	  
	// when a score is loaded, trigger load of soundfonts depending on programs.   
	at.scoreLoaded.on(score => {  
		score.tracks.forEach(track => {  
			const program = track.playbackInfo.program;  
			if(track.playbackInfo.primaryChannel === 9 /* drums */ || (program >= 24 && program <= 31)) {  
				loadSoundFont('sonivox-main.sf2');  
			} else {  
				loadSoundFont('sonivox-others.sf2');  
			}  
		});  
	});  
</script>
```

--------------------------------

### Method: init

Source: https://www.alphatab.net/docs/reference/types/exporter/gp7exporter

Initializes the exporter with the given data and settings.

```APIDOC
## init

### Description
Initializes the importer with the given data and settings.

### Parameters
- **data** (IWriteable) - Required
- **settings** (Settings) - Required
```

--------------------------------

### Set metronomeVolume example

Source: https://www.alphatab.net/docs/reference/api/metronomevolume

Examples of setting the metronome volume to 0.5 on an AlphaTabApi instance.

```JavaScript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.metronomeVolume = 0.5;  
```

```C#
var api = new AlphaTabApi<MyControl>(...);  
api.MetronomeVolume = 0.5;  
```

```Kotlin
val api = AlphaTabApi<MyControl>(...)  
api.metronomeVolume = 0.5  
```

--------------------------------

### Download MIDI in JavaScript

Source: https://www.alphatab.net/docs/reference/api/downloadmidi

Example of initializing the AlphaTab API and triggering a MIDI download.

```javascript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.downloadMidi();
```

--------------------------------

### start Property in JavaScript

Source: https://www.alphatab.net/docs/reference/types/alphatex/alphatexbraceclosetokennode

Represents the start location of the node in the source file. This property is optional.

```javascript
start?: AlphaTexAstNodeLocation;
```

--------------------------------

### Initialize MainActivity for alphaTab

Source: https://www.alphatab.net/docs/tutorial-android/viewport

Kotlin activity setup to initialize the AlphaTabView and handle file selection triggers.

```kotlin
package net.alphatab.tutorial.android  
  
import alphaTab.AlphaTabView  
import alphaTab.core.ecmaScript.Uint8Array  
import alphaTab.importer.ScoreLoader  
import alphaTab.model.Score  
import android.annotation.SuppressLint  
import android.net.Uri  
import android.os.Bundle  
import android.util.Log  
import android.view.View  
import android.widget.TextView  
import android.widget.Toast  
import androidx.activity.enableEdgeToEdge  
import androidx.activity.result.contract.ActivityResultContracts  
import androidx.appcompat.app.AppCompatActivity  
import androidx.core.view.ViewCompat  
import androidx.core.view.WindowInsetsCompat  
import java.io.ByteArrayOutputStream  
import kotlin.contracts.ExperimentalContracts  
  
@OptIn(ExperimentalContracts::class, ExperimentalUnsignedTypes::class)  
@SuppressLint("SetTextI18n")  
class MainActivity : AppCompatActivity() {  
  
    private lateinit var mAlphaTabView: AlphaTabView  
    private lateinit var mTrackName: TextView  
    private lateinit var mSongName: TextView  
  
    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        enableEdgeToEdge()  
        setContentView(R.layout.activity_main)  
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->  
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())  
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)  
            insets  
        }  
  
        mAlphaTabView = findViewById(R.id.alphatab)  
        mTrackName = findViewById(R.id.trackName)  
        mSongName = findViewById(R.id.songName)  
        findViewById<View>(R.id.info).setOnClickListener {  
            mOpenFile.launch(arrayOf("*/*"))  
        }  
    }
```

--------------------------------

### Example: Track Name and Bar Line Configuration

Source: https://www.alphatab.net/docs/alphatex/score-metadata

Demonstrates configuring track name modes and orientations, and extending bar lines across staves.

```alphatab
\singletracktracknamepolicy AllSystems
\firstsystemtracknamemode fullname
\othersystemstracknamemode shortname
\track "Piano 1" "pno1" { defaultsystemslayout 3 }
C4 D4 E4 F4 | C4 D4 E4 F4 | C4 D4 E4 F4 | C4 D4 E4 F4 | C4 D4 E4 F4 |
```

```alphatab
\singletracktracknamepolicy AllSystems
\firstsystemtracknamemode fullname
\othersystemstracknamemode shortname
\firstsystemtracknameorientation horizontal
\othersystemstracknameorientation vertical

\track "Piano 1" "pno1" { defaultsystemslayout 3 }
\staff {score}
C4 D4 E4 F4 | C4 D4 E4 F4 | C4 D4 E4 F4 | C4 D4 E4 F4 | C4 D4 E4 F4 |
```

```alphatab
\singletracktracknamepolicy AllSystems
\firstsystemtracknamemode fullname
\othersystemstracknamemode shortname
\firstsystemtracknameorientation horizontal
\othersystemstracknameorientation vertical

\track "Piano 1" "pno1" { defaultsystemslayout 3 }
  \staff {score}
  C4 D4 E4 F4 | C4 D4 E4 F4 | C4 D4 E4 F4 | C4 D4 E4 F4 | C4 D4 E4 F4 |
```

--------------------------------

### Set timePosition Example

Source: https://www.alphatab.net/docs/reference/api/timeposition

Examples of setting the playback position to 4000 milliseconds using the AlphaTabApi.

```JavaScript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.timePosition = 4000;  
```

```C#
var api = new AlphaTabApi<MyControl>(...);  
api.TimePosition = 4000;  
```

```Kotlin
val api = AlphaTabApi<MyControl>(...)  
api.timePosition = 4000  
```

--------------------------------

### startNewTrack Method

Source: https://www.alphatab.net/docs/reference/types/alphatex/ialphateximporter

Starts a new track within the importer. Available in JavaScript, C#, and Kotlin.

```typescript
startNewTrack(): Track
```

```csharp
Track StartNewTrack()
```

```kotlin
fun startNewTrack(): Track
```

--------------------------------

### Initialize alphaTab Base Structure

Source: https://www.alphatab.net/docs/guides/handling-midi-events

Sets up the HTML container, CSS styles for player cursors, and basic API initialization for playback.

```html
<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="utf-8" />  
    <!-- Using the alpha builds for testing here -->  
    <script src="https://cdn.jsdelivr.net/npm/@coderline/alphatab@alpha/dist/alphaTab.min.js"></script>  
    <style>  
        html,  
        body {  
            margin: 0;  
            padding: 0;  
        }  
  
        #controls {  
            position: sticky;  
            top: 0;  
            z-index: 10000;  
            width: 100%;  
            height: 30px;  
            background: #E4E5E6;  
            padding: 0.5rem;  
            display: flex;  
            align-items: center;  
        }  
  
        #controls>* {  
            margin-right: 5px;  
        }  
  
        /* Styles for player */  
        .at-cursor-bar {  
            /* Defines the color of the bar background when a bar is played */  
            background: rgba(255, 242, 0, 0.25);  
        }  
  
        .at-selection div {  
            /* Defines the color of the selection background */  
            background: rgba(64, 64, 255, 0.1)  
        }  
  
        .at-cursor-beat {  
            /* Defines the beat cursor */  
            background: rgba(64, 64, 255, 0.75);  
            width: 3px;  
        }  
  
        .at-highlight * {  
            /* Defines the color of the music symbols when they are being played (svg) */  
            fill: #0078ff;  
            stroke: #0078ff;  
        }  
    </style>  
</head>  
  
<body>  
    <div id="controls">  
        <button id="playPause">Play/Pause</button>  
        <span id="counter">1</span>  
        <span id="and">and</span>  
    </div>  
    <div id="alphaTab">  
        	s 3 4   
        1.4.8 1.4{g}.8 2.4.8 2.4{g}.8 3.4.8 3.4{g}.8 |   
        1.4.8 1.4{g}.8 2.4.8 2.4{g}.8 3.4.8 3.4{g}.8 |   
        1.4.8 1.4{g}.8 2.4.8 2.4{g}.8 3.4.8 3.4{g}.8  
    </div>  
  
    <script type="text/javascript">  
        const el = document.getElementById('alphaTab');  
        let api = new alphaTab.AlphaTabApi(el, {  
            core: {  
                tex: true  
            },  
            player: {  
                playerMode: alphaTab.PlayerMode.EnabledAutomatic,  
                scrollOffsetY: -30,  
                soundFont: "https://cdn.jsdelivr.net/npm/@coderline/alphatab@alpha/dist/soundfont/sonivox.sf2"  
            }  
        });  
        api.metronomeVolume = 1;  
        api.playbackSpeed = 0.5;  
  
        document.getElementById('playPause').onclick = () => {  
            api.playPause();  
        };  
    </script>  
</body>
```

--------------------------------

### Muting Tracks Examples

Source: https://www.alphatab.net/docs/reference/api/changetrackmute

Examples demonstrating how to mute specific tracks using the AlphaTabApi instance.

```JavaScript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.changeTrackMute([api.score.tracks[0], api.score.tracks[1]], true);
```

```C#
var api = new AlphaTabApi<MyControl>(...);  
api.ChangeTrackMute(new Track[] { api.Score.Tracks[0], api.Score.Tracks[1] }, true);
```

```Android
val api = AlphaTabApi<MyControl>(...)  
api.changeTrackMute(alphaTab.collections.List<alphaTab.model.Track>(api.score.tracks[0], api.score.tracks[1]), true);
```

--------------------------------

### Get Sample Rate (Kotlin)

Source: https://www.alphatab.net/docs/reference/types/synth/iexternalmediasynthoutput

Gets the sample rate required by the output. Inherited from ISynthOutput.

```kotlin
val sampleRate: Double
```

--------------------------------

### Get Sample Rate (C#)

Source: https://www.alphatab.net/docs/reference/types/synth/iexternalmediasynthoutput

Gets the sample rate required by the output. Inherited from ISynthOutput.

```csharp
double SampleRate { get; }
```

--------------------------------

### Get Sample Rate (JavaScript)

Source: https://www.alphatab.net/docs/reference/types/synth/iexternalmediasynthoutput

Gets the sample rate required by the output. Inherited from ISynthOutput.

```javascript
readonly sampleRate: number;
```

--------------------------------

### startNewStaff Method

Source: https://www.alphatab.net/docs/reference/types/alphatex/ialphateximporter

Starts a new staff within the importer. Available in JavaScript, C#, and Kotlin.

```typescript
startNewStaff(): Staff
```

```csharp
Staff StartNewStaff()
```

```kotlin
fun startNewStaff(): Staff
```

--------------------------------

### Playback in Kotlin

Source: https://www.alphatab.net/docs/reference/types/synth/iaudioelementbackingtracksynthoutput

Starts audio playback in Kotlin. This function takes no arguments and returns Unit.

```kotlin
fun play(): Unit
```

--------------------------------

### AlphaTab stop() Usage Examples

Source: https://www.alphatab.net/docs/reference/api/stop

Examples demonstrating how to invoke the stop method on the AlphaTab API instance.

```JavaScript
const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));  
api.stop();
```

```C#
var api = new AlphaTabApi<MyControl>(...);  
api.Stop();
```

```Kotlin
val api = AlphaTabApi<MyControl>(...)  
api.stop()
```

--------------------------------

### startNewVoice Method

Source: https://www.alphatab.net/docs/reference/types/alphatex/ialphateximporter

Starts a new voice within the importer. Available in JavaScript, C#, and Kotlin.

```typescript
startNewVoice(): void
```

```csharp
void StartNewVoice()
```

```kotlin
fun startNewVoice(): Unit
```

--------------------------------

### start Property in Kotlin

Source: https://www.alphatab.net/docs/reference/types/alphatex/alphatexbraceclosetokennode

Represents the start location of the node in the source file. This property is declared as a mutable variable.

```kotlin
var start: AlphaTexAstNodeLocation
```

--------------------------------

### MainViewModel Setup

Source: https://www.alphatab.net/docs/tutorial-android/player

Defines a ViewModel for managing the application's state, including score data, track information, and playback settings like metronome and looping.

```kotlin
package net.alphatab.tutorial.android  
  
import alphaTab.LayoutMode  
import alphaTab.Settings  
import alphaTab.model.Score  
import alphaTab.model.Track  
import androidx.lifecycle.MutableLiveData  
import androidx.lifecycle.ViewModel  
import kotlin.contracts.ExperimentalContracts  
  
@ExperimentalUnsignedTypes  
@ExperimentalContracts  
class MainViewModel  : ViewModel() {  
    val score = MutableLiveData<Score?>()  
    val tracks = MutableLiveData<List<Track>?>()  
    val countIn = MutableLiveData(false)  
    val metronome = MutableLiveData(false)  
    val looping = MutableLiveData(false)  
    val zoomLevel = MutableLiveData(100)  
    val layout = MutableLiveData(LayoutMode.Page)  
    val settings = MutableLiveData<Settings>().apply {  
        value = Settings().apply {  
            this.player.enableCursor = true  
            this.player.enablePlayer = true  
            this.player.enableUserInteraction = true  
            this.display.barCountPerPartial = 4.0  
            this.display.resources.barNumberFont  
        }  
    }  
}
```

--------------------------------

### Initialize AlphaTab and UI Elements in Android

Source: https://www.alphatab.net/docs/tutorial-android/player

Sets up the main activity, initializes AlphaTabView and other UI components, and configures basic view listeners. This is the entry point for integrating AlphaTab into an Android app.

```kotlin
package net.alphatab.tutorial.android

import alphaTab.AlphaTabView
import alphaTab.core.ecmaScript.Uint8Array
import alphaTab.importer.ScoreLoader
import alphaTab.model.Score
import alphaTab.synth.PlayerState
import android.annotation.SuppressLint
import android.net.Uri
import android.os.Bundle
import android.util.Log
import android.view.Gravity
import android.view.View
import android.view.ViewGroup
import android.widget.ImageButton
import android.widget.TextView
import android.widget.Toast
import androidx.activity.enableEdgeToEdge
import androidx.activity.result.contract.ActivityResultContracts
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import androidx.lifecycle.ViewModelProvider
import java.io.ByteArrayOutputStream
import kotlin.contracts.ExperimentalContracts
import kotlin.time.Duration
import kotlin.time.DurationUnit
import kotlin.time.toDuration

@OptIn(ExperimentalContracts::class, ExperimentalUnsignedTypes::class)
@SuppressLint("SetTextI18n")
class MainActivity : AppCompatActivity() {

    private lateinit var mAlphaTabView: AlphaTabView
    private lateinit var mTrackName: TextView
    private lateinit var mSongName: TextView

    private lateinit var mViewModel: MainViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        mAlphaTabView = findViewById(R.id.alphatab)
        mTrackName = findViewById(R.id.trackName)
        mSongName = findViewById(R.id.songName)
        findViewById<View>(R.id.info).setOnClickListener {
            val popup = ControlsPopupWindow(
                this, mViewModel,
            ) {
                mOpenFile.launch(arrayOf("*/*"))
            }
            popup.width = ViewGroup.LayoutParams.MATCH_PARENT
            popup.height = ViewGroup.LayoutParams.MATCH_PARENT
            popup.showAtLocation(mAlphaTabView, Gravity.CENTER, 0, 0)
        }

        mViewModel = ViewModelProvider(this)[MainViewModel::class.java]
        mViewModel.settings.observe(this) {
            mAlphaTabView.settings = it
        }
        mViewModel.tracks.observe(this) {
            mAlphaTabView.tracks = it
            val first = it?.firstOrNull()
            if (first != null) {
                mTrackName.text = first.name
                mSongName.text = "${first.score.title} - ${first.score.artist}"
            }
        }
        mViewModel.countIn.observe(this) {
            mAlphaTabView.api.countInVolume = if (it) 1.0 else 0.0
        }
        mViewModel.metronome.observe(this) {
            mAlphaTabView.api.metronomeVolume = if (it) 1.0 else 0.0
        }
        mViewModel.looping.observe(this) {
            mAlphaTabView.api.isLooping = it
        }
        mViewModel.zoomLevel.observe(this) {
            mAlphaTabView.settings.display.scale = it / 100.0
            mAlphaTabView.api.updateSettings()
            mAlphaTabView.renderTracks()
        }
        mViewModel.layout.observe(this) {
            mAlphaTabView.settings.display.layoutMode = it
            mAlphaTabView.api.updateSettings()
            mAlphaTabView.renderTracks()
        }

        val playPause = findViewById<ImageButton>(R.id.playPause)
        playPause.setOnClickListener {
            mAlphaTabView.api.playPause()
        }

        mAlphaTabView.api.playerStateChanged.on {
            val image =  
                if (it.state == PlayerState.Playing) R.drawable.baseline_pause_24 else R.drawable.baseline_play_arrow_24  
            playPause.setImageResource(image)
        }
        mAlphaTabView.api.playerReady.on {
            playPause.visibility = View.VISIBLE
        }

        val timePosition = findViewById<TextView>(R.id.timePosition)
        var previousTime = -1
        mAlphaTabView.api.playerPositionChanged.on {
            // prevent too many UI updates  
            val currentSeconds = (it.currentTime / 1000).toInt()
            if (currentSeconds == previousTime) {
                return@on
            }

            previousTime = currentSeconds;  

            val currentTimePosition = it.currentTime.toDuration(DurationUnit.MILLISECONDS)
            val totalTimePosition = it.endTime.toDuration(DurationUnit.MILLISECONDS)

```

--------------------------------

### Stop Playback - Kotlin

Source: https://www.alphatab.net/docs/reference/types/alphatabapi

Stops playback and resets the position to the start. If a playback range is set, it resets to the start of that range.

```kotlin
fun stop(): Unit
```

--------------------------------

### Displaying and Interacting with a Popup Window

Source: https://www.alphatab.net/docs/tutorial-android/track-selector

Sets up a click listener to display a custom popup window and launch a file picker upon interaction. The popup is configured to fill the screen.

```kotlin
findViewById<View>(R.id.info).setOnClickListener {  
    val popup = ControlsPopupWindow(  
        this, mViewModel,  
    ) {  
        mOpenFile.launch(arrayOf("*/*"))  
    }  
    popup.width = ViewGroup.LayoutParams.MATCH_PARENT  
    popup.height = ViewGroup.LayoutParams.MATCH_PARENT  
    popup.showAtLocation(mAlphaTabView, Gravity.CENTER, 0, 0)  
}
```

--------------------------------

### Stop Playback - C#

Source: https://www.alphatab.net/docs/reference/types/alphatabapi

Stops playback and resets the position to the start. If a playback range is set, it resets to the start of that range.

```csharp
void Stop()
```

--------------------------------

### Initialize Rendering Resources (.NET)

Source: https://www.alphatab.net/docs/reference/settings/display/resources

Initialize rendering resources to false for .NET.

```csharp
RenderingResources Resources { get; set; } = false
```

--------------------------------

### AlphaTab Example: Instrument and Bank Configuration

Source: https://www.alphatab.net/docs/alphatex/structural-metadata

Demonstrates setting the instrument by program number and by name, along with defining a tuning and track.

```AlphaTab
\track { instrument 0 } 
C4 C5 r r
```

```AlphaTab
\track { instrument "Acoustic Steel Guitar" } 
\tuning (E4 B3 G3 D3 A2 E2) 
r r 12.1 13.1
```

--------------------------------

### Stop Playback - JavaScript

Source: https://www.alphatab.net/docs/reference/types/alphatabapi

Stops playback and resets the position to the start. If a playback range is set, it resets to the start of that range.

```javascript
stop(): void
```

--------------------------------

### First Fret Property

Source: https://www.alphatab.net/docs/reference/types/model/chord

Indicates the starting fret for the chord diagram. Useful for chords that don't start on the first fret.

```typescript
firstFret: number;
```

```csharp
double FirstFret { get; set; }
```

```kotlin
var firstFret: Double
```