Custom Renderer

[andre-lima]

Hello,
I'd like to visualize the songs in a different way.
What would be the most efficient way of writing a custom Renderer for the score? Modifying the current renderer methods or completely bypassing them?

Thanks!

[Danielku15]

alphaTab currently doesn't have a pluggable way of writing custom (bar-) renderers. This is a bit due to the nature of alphaTab running primarily as Web Worker (unless disabled) and therefore it is not so straight forward to load additional custom code within the worker scope. Techncially there would be some approaches (e.g. injecting ES or classical loadScript modules loaded by the worker) but until now there was simply no request around that.

The complexity behind rendering the music notation is quite high but there are some utilities and base classes in alphaTab which help in this process. While some things are nowdays rather fixed, there are still some extension points around the code to allow adding new features like new renderers.

As a start I would recommend to:

1. Use alphaTab as it is.
2. Disable the web worker rendering to allow plugging in custom code easier.
3. Register a custom stave profile in the Environment. (reference here) where you would also register your own BarRendererFactory creating your own BarRenderer implementations .
4. Implement your custom layouting and rendering by inheriting from BarRendererBase

The rendering pipeline is organized by creating a hierarchy of glyph objects which represent the drawn information. These glyphs might be replaced as part of the resizing and re-rendering processes. Depending on what exactly you plan to draw the TabBarRenderer or ScoreBarRenderer might be good references to check how things are done.

Of course this is super high level but depending on your skills it might get you kick-started. The more insights you share in your plans what you want to exactly draw and achieve, the better I might be able to give you further hints how to achieve your goals 😉

[andre-lima]

Thanks for your detailed answer.

What I want to do is to create this here, but with Alphatab: https://www.youtube.com/watch?v=jKaqy7XU0GI

On this video I created a json file with all the information needed in the song and the song is a mp3 file not controlled by any buttons.

The reason I looked into Alphatab was because I could manage to import a Guitar Pro file and play it in the browser (removing the need for a custom json file per song), meaning I should also be able to sync it to my custom sheet music rendering.

[Danielku15]

I see. I think for this kind of UI you might be better set with a complete custom rendering system. But still you should be able to use some modules of alphaTab:

1. You can use the [ScoreLoader](https://alphatab.net/docs/guides/lowlevel-apis#loading-files-via-scoreloader) to load various file formats into our data model.
2. You can generate the midi files and let them play via the audio player.
3. Via the playerPositionChanged event you can then synchronize your custom rendered UI (scroll offset) with the player position.

I have to admit that the guides might not be fully up to date but depending on your skill level you could look into the AlphaTabApi and AlphaTabApiBase classes to see how things are hooked up there. Those classes are basically the "make it easy to use" wrappers around the low level bits.

[andre-lima]

Great stuff. Thanks, @Danielku15 . This should help me get started.