I found that the latest version 1.4 seems to not support mobile devices, specifically when not using modules.

[goodgame365]

I found that the latest version 1.4 seems to not support mobile devices, such as Safari on iOS. It appears that the alphatab font is missing, but there is no issue when viewed in a PC browser. I'm not sure what the reason is. Attached are the relevant images.

This is a page that displays correctly on PC

This is a situation where it does not display correctly on mobile devices.：

Since the project was upgraded from the previous version 1.3, converting it to modules is quite complicated. It would be best if we could continue using type="text/javascript" as that would require the least amount of changes.

code:

`

<title>AlphaTab Simple Demo</title> <script src="https://cdn.jsdelivr.net/npm/@coderline/alphatab@alpha/dist/alphaTab.min.js"></script>

<script type="text/javascript">
    // initialize alphaTab
    const el = document.querySelector('#alphaTab');
    const at = new alphaTab.AlphaTabApi(el, {
        file: 'https://www.alphatab.net/files/canon.gp'
    });
</script>

`

[Danielku15]

Thanks for reporting, I'll look into it.

Its rather that it currently only works in Chrome because its the only browser supporting Symbol.dispose and we have some using statements in place now. Normally they should get replaced but it seems something broke.

I found that the latest version 1.4 seems to not support mobile devices, such as Safari on iOS. It appears that the alphatab font is missing, but there is no issue when viewed in a PC browser. I'm not sure what the reason is. Attached are the relevant images.

In your example you are using @coderline/alphatab@alpha this is not the @latest (released) 1.4.x version but rather the pre-release 1.5.0 version. I am currently in-development of various things and I don't expect it yet to work stable. Only use alpha for testing purposes and never in production, I cannot guarantee a functional versions for pre-releases.

Since the project was upgraded from the previous version 1.3, converting it to modules is quite complicated. It would be best if we could continue using type="text/javascript" as that would require the least amount of changes.

As of today we ship still both UMD and ESM versions of alphaTab. But generally I highly recommend moving to ESM. It is rather a dying practice to have UMD which spoil the global scope and with a future 2.x we will very likely remove support for CJS and UMD. Bundlers, Browsers and Node all have first class ESM support nowadays.

And even if you want to keep using the global scope and CDN you can use ESM without updating the rest of your code via code like this:

<script type="module">
import * as alphaTab from 'https://cdn.jsdelivr.net/npm/@coderline/alphatab@alpha/dist/alphaTab.mjs';
const global = typeof globalThis !== 'undefined' ? globalThis : global || self;
global.alphaTab = alphaTab;
</script>
<script type="text/javascript">
// you'll need to wait for onload, type="module" execute asynchronously, we need to wait for it
window.onload = () => {	
    alert(`Running alphaTab: ${alphaTab.meta.version}`)
}
</script>

[goodgame365]

Thank you very much, the issue has been resolved.