Issues with the in-built cursor starting and when adding new bars during MIDI recording

[roscopeeco]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

I'm encountering issues when using the in-built cursor while MIDI recording in my app.

The cursor is working fine elsewhere in the app playing html5 audio or web api drum beat samples.

There 2 issues:

When recording the notation a single empty bar created when entering the page before recording starts. When recording starts the cursor does not move on the empty bar. I edited the notation and created a bar with notation and when I start the recording again the cursor moves ok.
New bars are created and rendered 1 second ahead of time. However when the cursor reaches the new bar point it stops and doesn't continue.
includeNoteBounds = true in the settings

the render update code is:
this.alphaTabApi.score.finish(this.alphaTabApi.settings);
this.alphaTabApi.updateSyncPoints();
this.alphaTabApi.render();

to update the cursor i am using:
this.alphaTabApi.timePosition = elapsedMs;

I have checked in logs and elapsedMs is increasing as expected when hew bars are added.

Is there a setting I am missing or a function call I need to make to let the cursor move to the new bars?

Expected Behavior

I would expect the cursor to move in the empty 1st bar and past it into the newly created bars as recording proceeds s the bars are being created 1 second ahead of time and re rendered in the next 100ms batch processing.

Steps To Reproduce

1. /* To re-create cursor not playing on 1st empty bar */

2. Start playing with 1 empty bar and cursor enabled

3. Start Loop

4. Add a new bar after 1st half of bar has played 
   

5. Update ui via render and updateSyncPoints
   

6. Loop

7. /* To re-create cursor not proceeding past end of 1st bar */

8. Start playing with 1 bar containing notes and cursor enabled

9. Start Loop

10. Add a new bar after 1st half of bar has played 
    

11. Update ui via render and updateSyncPoints
    

12. Loop

Link to jsFiddle, CodePen, Project

No response

Version and Environment

===========================
useAlphaTabSimplified.ts:91 [AlphaTab][VersionInfo] alphaTab 1.7.1
useAlphaTabSimplified.ts:91 [AlphaTab][VersionInfo] commit: e487b958158892679a115693547661dc49a78e16
useAlphaTabSimplified.ts:91 [AlphaTab][VersionInfo] build date: 2025-12-02T16:54:46.381Z
useAlphaTabSimplified.ts:91 [AlphaTab][VersionInfo] High DPI: 2
useAlphaTabSimplified.ts:91 [AlphaTab][VersionInfo] Platform: BrowserModule
useAlphaTabSimplified.ts:91 [AlphaTab][VersionInfo] WebPack: false
useAlphaTabSimplified.ts:91 [AlphaTab][VersionInfo] Vite: false
useAlphaTabSimplified.ts:91 [AlphaTab][VersionInfo] Browser: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Mobile Safari/537.36
useAlphaTabSimplified.ts:91 [AlphaTab][VersionInfo] Window Size: 2160x1688
useAlphaTabSimplified.ts:91 [AlphaTab][VersionInfo] Screen Size: 2160x1688

Platform

Web

Anything else?

No response

[Danielku15]

When recording the notation a single empty bar created when entering the page before recording starts. When recording starts the cursor does not move on the empty bar. I edited the notation and created a bar with notation and when I start the recording again the cursor moves ok.

This is the expected behavior. The cursor follows the playback. If there is no notation and nothing being played, there is nothing for the cursor to move. I'll check if I can improve things for your usecase of recording. Alternatively you could start with bars which have rests and then fill-in notes.

New bars are created and rendered 1 second ahead of time. However when the cursor reaches the new bar point it stops and doesn't continue.

alphaTab currently doesn't support on-the-fly updates of notation during playback.

---

If I interpret your actual needs correctly: You do not actually need the "playback" feature, but you use it to get a real-time cursor experience for your recording functionality. You start with an empty music sheet and "play it" to get the cursor functionality. As time progresses you add bars to have space for new notes. Whenever your external source tells to insert notes, you add them based on the time information.

Is my interpretation correct? If yes I could think of some feature that serves your need better and avoid that you need to rely on some workarounds.

[roscopeeco]

yes your interpretation of my requirement is correct. I am using a metronome but I just have an elapsed time from start of the recording to pass to update the cursor.

I can create bars and fill them but that is getting into workaround territory...and if the user goes past the create bars total then the cursor will stop working again. The other way maybe to look at beatbounds and get the current position to move to.

[roscopeeco]

Is my interpretation correct? If yes I could think of some feature that serves your need better and avoid that you need to rely on some workarounds.

@Danielku15 is it an existing feature you have in mind that could help me with this?

[Danielku15]

@roscopeeco

I am currently implementing improvements regarding the recording workflow on this branch: https://github.com/CoderLine/alphaTab/tree/feature/recording-updates

The integration part is in https://github.com/CoderLine/alphaTab/blob/feature/recording-updates/packages/playground/recorder.ts This page demos a small fake recorder flow going with various assumptions on the recording flow.

I made now some small extensions to alphaTab which allow more optimized re-render of the displayed notation using the rendering hints. The result looks like this:

recording-demo.mp4

It's basically a 30min player which dynamically adds new systems (rows) when reaching 80% of the second-last bar in the system. For recording I listen to 0-9 keys on the keyboard and update some content. It has various assumptions and simplifications to focus on the use-case of dynamic appending of new bars and dynamic updates of the current bar.

Do you have some further code-snippets or even an example project showing how you handle the recording parts in your app? As of now the trickiest part around the recorder is to fill the bars with proper content before initiating. If you can share more insights on how you update the model during recording I can try to optimize these flows as well.