JSFiddle - React, Tailwind, and code Playground

by Daniel Kuschny

HTML

<script src="https://cdn.jsdelivr.net/npm/@coderline/alphatab@alpha/dist/alphaTab.js"></script>
<button id="play">
Play
</button>
<div id="alphaTab">   
 </div>

CSS

/* 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;
}

JavaScript

const el = document.getElementById('alphaTab');
let at = new alphaTab.AlphaTabApi(el, {
	player: {
  	enablePlayer: true,
    soundFont: 'https://cdn.jsdelivr.net/npm/@coderline/alphatab@alpha/dist/soundfont/sonivox.sf2'
  }
});

at.tex(
  "\\tempo 100 . \\track  5.5.4*4 |  5.5.4*4 |  5.5.4*4 |  5.5.4*4 |  5.5.4*4 |  5.5.4*4", "all"
);

document.getElementById('play').onclick = function(e) {
  e.stopPropagation();
  at.countInVolume = 1;
  at.playPause();
};