Skip to main content

Setup Project

First we will set the stage for our new component. For simplicity, we will put all our code into one index.html file. We will also be using the Content Delivery Network (CDN) jsdelivr.net to serve alphaTab into our project so there will not be a need for any webserver. Simply opening this index.html file in your browser of choice will work for all steps in this tutorial.

If you prefer, you can also organize the project already into individual JavaScript and CSS files. For the sake of simplicity in this tutorial, we will put everything together in one file.

As a first step, create an index.html file in any folder and open it in the text editor of your choice and in your browser.

Then, we will add the basic wireframe of our page and include alphaTab. Put the following code into your index.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>AlphaTab Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/alphaTab.js"></script>
    <style type="text/css">
      /* Our Styles will go here */
    </style>
  </head>
  <body>
    <div class="at-wrap">
      <!-- Our whole component will go into this wrapper -->
    </div>
    <script type="text/javascript">
      // Our JavaScript code will go here
    </script>
  </body>
</html>

But now the page is still empty. In the next step we will setup alphaTab and show some music notation.