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.

Grab your Copy​

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.

Using 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.

You can also find various sample projects for different usage types over at:

https://github.com/CoderLine/alphaTabSamplesWeb/

You can import alphaTab from within the browser as JavaScript Module (ESM). The following code illustrates the setup in a script tag but you can also use imports from within any other JavaScript module file.

<div id="alphaTab">
   \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>
<script type="module">
     // here we use JsDelivr as source (notice the .mjs extension which indicates the module variant)
     import * as alphaTab from 'https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/alphaTab.min.mjs'
     // initialize alphaTab on the prepared element
     const element = document.getElementById('alphaTab');
     const api = new alphaTab.AlphaTabApi(element, {
      tex: true
     });
 </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.