JavaScript: Uncaught ReferenceError:

MIT App Inventor Help
, ,
1

I’m having problems getting some HTML / JavaScrip to execute correctly within the WebViewer component. The objective of the code is to render ‘abcNotation’ as a music score and then play the tune. An example of this can be found at https://editor.drawthedots.com/ and runs in my FireFox browser. If anyone out there has already done this in AI2 please let me know how.

Meantime, I’m trying to get the same kind of thing to run in WebViewer and also in WebView Custom Extension. The author of the above site has provided several examples of JavaScript embedded in HTML on https://www.abcjs.net/

I have loaded one of the examples into Assets in my code. But, after partial execution it halts with an error message "Uncaught ReferenceError: ABCJS is not defined Line:49". The context of this message is shown below and line 49 starts var visualObj = …. See also screen shot.

function load() {
	// First draw the music - this supplies an object that has a lot of information about how to create the synth.
	// NOTE: If you want just the sound without showing the music, use "*" instead of "paper" in the renderAbc call.
	var visualObj = ABCJS.renderAbc("paper", abc, {responsive: "resize" })[0];

I’m not extirely sure what this means, but guess it is looking for a function ABCJS.renderAbc(…)??
That function is not elsewhere in the HTML-JS example code, so how do I fix this? Elsewhere, within downloadable js code there are several scripts which I could search for that function? If I find it should that also be loaded into Assets and if so how does it get called or referenced?

I look forward to any suggestion as to how to procede.

Screenshot_20230501-173724
Screenshot_20230501-1737241600×2560 183 KB

2

We don't know how you made the code, have you added the necessary libraries in the asset or in a link?

3

The code is a download from Paul Rosen's site abcjs. I have used one of his example scripts. However, on inspection there is no link to a library - so clearly I need to fix that by inserting a 'Link...' early in the script prior to any function calls. I have yet to identify the necessary library. I assume I should upload it to Assets then point the 'Link..' to Assets. That raises the question to the correct syntax for the link and pathname. Maybe <link rel "preload" href= "/assets/Libraryname.js" or what??