Multiple Canvas instances lead to TypeError: Cannot read properties of undefined (reading 'length')

[tbreuss]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When putting more than one alphaTab instances on a webpage and using engine = html5, the following error occurs: [AlphaTab][API] An unexpected error occurred[TypeError: Cannot read properties of undefined (reading 'length')]. If I'm using svg, everything works as expected.

Expected Behavior

Both examples should be rendered.

Steps To Reproduce

HTML:

<h3>Score 1</h3>
<div id="at1">
G4 B4 D5 G5
</div>
<h3>Score 2</h3>
<div id="at2">
G4 B4 D5 G5
</div>

JS

// here we use JsDelivr as source (notice the .mjs extension which indicates the module variant)
import * as alphaTab from 'https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/alphaTab.min.mjs'
// initialize alphaTab on the prepared element
new alphaTab.AlphaTabApi(document.getElementById('at1'), {
    "tex": true,
    "engine": "html5",
});
new alphaTab.AlphaTabApi(document.getElementById('at2'), {
    "tex": true,
    "engine": "html5",
});

Working Example

Here is a link to an example reproducing the issue.

Link to jsFiddle, CodePen, Project

No response

Version and Environment

• 1.8.1
• https://cdn.jsdelivr.net/npm/@coderline/alphatab

Platform

Web

Anything else?

No response

[Danielku15]

DevNote: the problem is in the smufl font handling and CSS style creation. Fix needs to ensure we fill smuflFontFamilyName in all paths.