How do you play the song at a specific time?

[christofolo]

Question

I'd like to "sync" a youtube video to my alphaTab score. But the song in the video (my video) doesn't start right away. I'd like to call an alphaTab api method to start playing (and stop). Am I able to do that?

Your environment (if applicable)

• Version used: master branch
• Platform used: JavaScript
• Rendering engine used: HTML5
• Browser Name and Version: Chrome (latest)
• Operating System and version (desktop or mobile): desktop
• Link to your project: localhost (no link)

[Danielku15]

The master branch you are using is rather outdated and I'd recommend to update to develop for any further development. The latest version can be consumed via NPM.

Currently there is no built-in way to synchronize alphaTab with any external audio/video source but the direkt answer to your question is: Yes there is a way to tell alphaTab to start/stop playing on demand.
It's all described in the player section of the tutorial: https://www.alphatab.net/docs/tutorial-web/player

The related API calls related to playback state and time are:

• https://www.alphatab.net/docs/reference/api/play/
• https://www.alphatab.net/docs/reference/api/pause/
• https://www.alphatab.net/docs/reference/api/playpause/
• https://www.alphatab.net/docs/reference/api/tickposition/
• https://www.alphatab.net/docs/reference/api/timeposition/
• https://www.alphatab.net/docs/reference/api/playerstatechanged/
• https://www.alphatab.net/docs/reference/api/playerpositionchanged/

But of course it strongly depends on how you are building the YT synchronization if these API calls match your needs. alphaTab has an own player system. So unless the music notation matches 100% the YT video, the cursor display might easily get out of sync if you just trigger play based on some known YT start position. Until alphaTab supports synchronizing the cursor with an external media source it might be the more realistic approach to to build your own cursor display which positions a cursor based on the media position and disable the alphaTab player.

Best might be to define an array of "timestamp/bar-index combiations" which define when each bar/measure of the music sheet starts. Then take the media position and interpolate at which position in the song the cursor should be displayed and animate it accordingly.

The cursor related setup code starts here:

alphaTab/src/AlphaTabApiBase.ts

Line 645 in 0b9f46c

private setupCursors(): void {

You might take this as a reference how the cursor positioning is done using the internal midi synthesizer: We listen to the time change events, use some midi lookup cache to find out at which bar/beat the current playback is, and position the cursor accordingly.

[christofolo]

Wow thank you so much for the thorough answer! I am a high school guitar teacher and a self-taught programmer. Those are great ideas. I will see what I can come up with...

[Danielku15]

I know that Soundslice (a "competitor" product) is following a similar approach that's why I suggested this marker approach 😉 . They have an editor where you just let the song play and press some keys at the right time when the measures start. Based on this they will align the cursor during playback. I plan to provide a similar approach in the future.

https://www.youtube.com/watch?v=PAN9p6-_AxM

[christofolo]

Wow, Soundslice is a really cool app. Yeah that's pretty much exactly what I'd like to do on my own website.

BTW, I noticed a small typo on the page https://www.alphatab.net/docs/tutorial-web/player

Under the "Loading Indicator" section, new JavaScript has this line:

const playerIndicator = wrapper.querySelector(
  ".at-controls .at-player .at-player-progress"
);

but later in the Final File, that line is corrected:

const playerIndicator = wrapper.querySelector(
        ".at-controls .at-player-progress"
      );

[Danielku15]

Thanks for reporting. I corrected the part in the docs a few mins ago.

[Danielku15]

I will close this issue as the open questions seem to be clarified. Official built-in support for linking alphaTab to external audio/video sources is planned as potential feature in 1.5

https://github.com/orgs/CoderLine/projects

Feel free to open new issues for other dedicated questions.