Issues integrating AlphaTab in Vite/React application - Iframe workaround successful

[vapingpost]

Hi everyone, I've spent significant time trying to integrate AlphaTab into a Vite + React + TypeScript application and encountered several persistent issues. I wanted to share my experience in case it helps others or if you have suggestions.

Environment:

• Vite 5.x
  

• React 18.3.1
  

• TypeScript
  

• AlphaTab 1.6.2 (installed via npm @coderline/alphatab)
  

Issues encountered:

Worker/Worklet loading errors: Despite trying multiple Vite configuration approaches (including vite-plugin-static-copy, manual public folder placement, and custom worker configurations), AlphaTab consistently failed to load its worker and worklet files properly.

• CORS issues: Even with files in the public directory, we got CORS-related errors when AlphaTab tried to load its internal resources.
• SoundFont loading problems: Various "Invalid Soundfont2 file" errors, even with properly formatted SF2 files hosted on our Supabase storage.

Build vs Dev inconsistencies:

Some approaches worked in dev mode but failed in production builds.

Solution that worked

We created a standalone HTML page (guitar-pro-player.html) that loads AlphaTab via CDN:
<script src="https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/alphaTab.js"></script>

Then we embedded this page in our React app using an iframe with postMessage communication for controls. This approach works perfectly and audio plays correctly.

Question: Is there a recommended way to integrate AlphaTab in modern Vite/React applications without using an iframe? Are there specific Vite configurations or AlphaTab initialization options we should use?

Thank you for this amazing library!

[Danielku15]

Have you looked into the following links?

• https://www.alphatab.net/docs/getting-started/installation-vite
• https://github.com/CoderLine/alphaTabSamplesWeb/tree/main/src/vite-react

The problems you mention indicate you have missed those references.

[vapingpost]

Hello! I apologize for the confusion in my previous issue. After further investigation, the performance problem was entirely due to my implementation choices, not AlphaTab itself. I was using ScrollMode.Continuous with scrollSpeed set to 300, and I also recently upgraded to Vite 6, which may have contributed to the issue. Switching to ScrollMode.OffScreen with a lower scroll speed (150) completely resolved the performance problems. AlphaTab is working beautifully now. Thank you for this excellent library!

[Danielku15]

Great to hear that you make progress. Regarding the scroll speed it might be best to rather rely on the default browser smooth scroll which should cause less performance impact.
https://alphatab.net/docs/reference/settings/player/nativebrowsersmoothscroll

Can you confirm things work properly when using the vite plugin?

Anything else you can share online helps. If the problem is likely in alphaTab l, I can do some profiling 😉

[vapingpost]

Hi! Thanks for the quick response and suggestions! Yes, I'm using it correctly in my vite.config.ts
`import { alphaTab } from "@coderline/alphatab/vite";

plugins: [
react(),
alphaTab(),
]
`
After switching from ScrollMode.Continuous to ScrollMode.OffScreen with reduced speed (150), the performance improved significantly. However, I'd like to try your nativeBrowserSmoothScroll suggestion as it seems like the more optimal approach. I'll test with nativeBrowserSmoothScroll enabled and report back. If I still encounter issues after that, I can share more detailed information.

Current config:
Vite 6.4.1
AlphaTab 1.6.3
React 18.3.1
Using ScrollMode.OffScreen with scrollSpeed: 150

Thanks again for your help! The library is working great overall.