Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

loadSoundFont doesn't work

See original GitHub issue

Your environment

Version used: 0.9.5-243
Platform used: JavaScript
Rendering engine used: SVG
Browser Name and Version: Firefox
Operating System and version (desktop or mobile): Arch Linux desktop

Expected Results

The function loadSoundFont should load the specified soundfont.

Observed Results

If a soundfont is specified when creating a new instance of alphatab, it will be loaded properly. But when an instance is created without a soundfont and one is loaded later with loadSoundFont, nothing happens. Setting the player setting to true and calling updateSettings doesn’t change anything either.

Steps to Reproduce (for bugs)

Create a page with the following code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>alphaTab test app</title>
	</head>
	<body>
		<div id="alphatab"></div>
		<script src="alphatab-0.9.5-243.js"></script>
		<script src="script.js"></script>
	</body>
</html>

(function()
{
	const settings = {
		// player: 'default.sf2',
		layout: 'horizontal',
		cursor: true,

		logging: 'warning',
	};

	let alphatab = new alphaTab.platform.javaScript.AlphaTabApi(document.getElementById('alphatab'), settings);

	alphatab.addSoundFontLoad(function(e)
	{
		console.log(`Loading soundfont... (${(e.loaded / e.total) * 100}%)`);
	});
	alphatab.addReadyForPlayback(function()
	{
		console.log('Player ready for playback');
		alphatab.play();
	});

	alphatab.tex('1.1 1.2 1.3 1.4');
	alphatab.settings.player = true;
	alphatab.updateSettings();
	alphatab.loadSoundFont('default.sf2');
})();

Issue Analytics

State:
Created 4 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

Danielku15commented, Dec 19, 2019

With the changes I added following sample with enabling/disabling the player dynamically works. Everything gets properly initialized and destroyed on request.

<button type="button" id="enable">Enable</button>
<button type="button" id="disable">Disable</button>
<div id="alphatab"></div>

<script>

const settings = {
	layout: 'horizontal',
	logging: 'warning',
};

let alphatab = new alphaTab.platform.javaScript.AlphaTabApi(document.getElementById('alphatab'), settings);

alphatab.addSoundFontLoad(function(e)
{
	console.log(`Loading soundfont... (${(e.loaded / e.total) * 100}%)`);
});
alphatab.addReadyForPlayback(function()
{
	console.log('Player ready for playback');
	alphatab.play();
});

alphatab.tex('1.1 1.2 1.3 1.4');

document.getElementById('enable').onclick = function() { 
	const settings = alphatab.settings;
	settings.enablePlayer = true;
	settings.enableCursor = true;
	alphatab.updateSettings();
	alphatab.loadSoundFont('soundfonts/default.sf2');
}
document.getElementById('disable').onclick = function() { 
	const settings = alphatab.settings;
	settings.enablePlayer = false;
	settings.enableCursor = false;
	alphatab.updateSettings();
}
</script>

0reactions

Danielku15commented, Dec 19, 2019

You should probably correct the doc then:

Jup, true. The reference docs are still quite new and not covering all details in 100% and the example in this case is not really correct.

My use case is pretty specific: I have a page that can display a lot of very short tablatures, and enabling the playback in each of them proves to be quickly overwhelming for the browser.

Thanks for the insight. in such cases it definitly makes sense to dynamically enable-disable the player. I will quickly check, maybe I can still provide it by today.