player play alphatex note

[sugizo]

Description

player play guitar pro file
https://www.alphatab.net/docs/tutorial-web/player

Question

can it play what was written using alphatex ?

thanks

[Danielku15]

Yes, all features of alphaTab are available when using alphaTex or any other file format. The player, datamodel etc. can all be used.

[sugizo]

tried before, just be able to play, pause and stop player, there is no song position
e.g.

<div id = "notation" data-tex = "true" data-tracks = "all" data-display-staveprofile = "ScoreTab" data-display-layoutmode = "Page" data-player-enableplayer = "true" data-player-soundfont = "https://cdn.jsdelivr.net/npm/@coderline/alphatab@alpha/dist/soundfont/sonivox.sf2">
.
:4 3.5{dy f} 0.4 2.4 0.3 2.3 1.2 
</div>

<script>
var notation = document.getElementById('notation');
var api = new alphaTab.AlphaTabApi(notation);

// main player controls
var playPause = document.querySelector(
    ".at-controls .at-player-play-pause"
);
var stop = document.querySelector(".at-controls .at-player-stop");
playPause.onclick = (e) => {
    if (e.target.classList.contains("disabled")) {
        return;
    }
    api.playPause();
};
stop.onclick = (e) => {
    if (e.target.classList.contains("disabled")) {
        return;
    }
    api.stop();
};
api.playerReady.on(() => {
    playPause.classList.remove("disabled");
    stop.classList.remove("disabled");
});
api.playerStateChanged.on((e) => {
    var icon = playPause.querySelector("i.fas");
    if (e.state === alphaTab.synth.PlayerState.Playing) {
        icon.classList.remove("fa-play");
        icon.classList.add("fa-pause");
    } else {
        icon.classList.remove("fa-pause");
        icon.classList.add("fa-play");
    }
});
</script>

Question

is it possible to show note position like in alphatab.net (the purple line) ?

thanks

[Danielku15]

According to your code you are missing the required CSS styles to see the cursors.

See:

1. https://www.alphatab.net/docs/guides/styling-player
2. https://www.alphatab.net/docs/tutorial-web/player (first code section second tab 'Cursor Styles')