search

CoderLine / alphaTab

alphaTab is a cross platform music notation and guitar tablature rendering library.
http://www.alphatab.net
Mozilla Public License 2.0
1.23k stars 199 forks source link

How do you play the song at a specific time? #372

Closed christofolo closed 4 years ago

christofolo commented 4 years ago

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)

Danielku15 commented 4 years ago

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:

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: https://github.com/CoderLine/alphaTab/blob/0b9f46c6c05b575472db645e251ee48656e530c9/src/AlphaTabApiBase.ts#L645

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 commented 4 years ago

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 commented 4 years ago

I know that Soundslice (a "competitor" product) is following a similar approach that's why I suggested this marker approach :wink: . 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 commented 4 years ago

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 commented 4 years ago

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

Danielku15 commented 4 years ago

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.