Skip to main content

Installation (Web)

The web version of alphaTab is suitable for building websites displaying and playing musicsheets in different fashions. You can create websites that offer Guitar Tabs for download, provide lessons to students or just if you want to share your composed music with others. It's up to you what you make out of alphaTab.

You can either install alphaTab wia NPM or just download the package manually and place it in your project. So far we do not offer a CDN.

note

The web version of alphaTab is primarily meant for usage in Browser. For usage in Node.js refer to this guide.

Grab your Copy​

NPM​

We provide NPM packages via npmjs.com. Just install the package via:

npm install @coderline/alphatab

And alphaTab is downloaded to your node_modules for usage in your application.

CDN​

We currently do not provide a CDN on our own but there are various CDNs on top of NPM. You can use one of these to integrate alphaTab to your installation.

https://www.jsdelivr.com/package/npm/@coderline/alphatab

https://unpkg.com/@coderline/alphatab

Local Copy​

The easiest way to obtain a local copy is to use the download button over at jsdelivr.com. Select the version you want to have and press the download button on the top right side.

https://www.jsdelivr.com/package/npm/@coderline/alphatab

Then unpack the assets to your project and you're all set to start developing.

Initializing alphaTab​

Once you have alphaTab in your project simply include it and start using it. The next pages will explain you how to configure alphaTab and use it. You can also check out our tutorials to learn in a more stepwise approach how to continue.

<script src="https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/alphaTab.min.js"></script>
<!-- Include alphaTab -->
<script src="alphaTab.js"></script>
<!-- Create Element which should contain alphaTab -->
<div id="alphaTab" data-tex="true">
\title "Hello alphaTab"
.
:4 0.6 1.6 3.6 0.5 2.5 3.5 0.4 2.4 |
3.4 0.3 2.3 0.2 1.2 3.2 0.1 1.1 |
3.1.1
</div>
<!-- Initialize alphaTab -->
<script type="text/javascript">
const element = document.getElementById('alphaTab');
const api = new alphaTab.AlphaTabApi(element);
</script>

The output of this is:

\title "Hello alphaTab" . :4 0.6 1.6 3.6 0.5 2.5 3.5 0.4 2.4 | 3.4 0.3 2.3 0.2 1.2 3.2 0.1 1.1 | 3.1.1

Additional Notes​

Dependencies​

AlphaTab does not need any other libraries as dependency. It ships with everything it needs out of the box. But to operate alphaTab in the web with all features there are still 2 dependencies involved:

  • Bravura is the Music Font of our choice. It is a free font containing music notation symbols. AlphaTab bundles this font and it is placed right beside the script files.
  • To play audio a SoundFont2 file is needed. It contains the audio samples for the instruments to be played via the midi synthesizer of alphaTab. AlphaTab comes with a copy of a SONiVOX based SoundFont which is part of the Android Open Source Project and available for free under Apache License.

Bundling​

It is very important to understand that alphaTab cannot be bundled with other scripts unless they can run within a Web Worker. AlphaTab uses Web Workers to do all rendering and audio synthesis operations in the background without blocking the browser window.

To do this, alphaTab is launching a Web Worker with the JavaScript file it is contained in. If AlphaTab is bundled together with a script that accesses the DOM, this will fail as soon as AlphaTab spawns a worker with the file it is contained in.

AlphaTab cannot provide an out-of-the-box solution to this problem as it strongly depends on what bundling and compilation infrastructure your project is using. To avoid issues we recommend to simply include alphaTab normally in your project or ensure that your bundling system keeps alphaTab in a standalone file which is reachable via AJAX.