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.
The web version of alphaTab is primarily meant for usage in Browser. For usage in Node.js refer to this guide.
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.
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.
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.
Then unpack the assets to your project and you're all set to start developing.
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.
<!-- Include alphaTab -->
<!-- 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 |
<!-- Initialize alphaTab -->
const element = document.getElementById('alphaTab');
const api = new alphaTab.AlphaTabApi(element);
The output of this is:
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.
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.
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.