If you have a style document to go with the xml, this may display correctly in a webviewer. This might possibly be in the originating app, or from some other resource?
1 Like
..it doesn't need to be an image, there are Unicode musical symbols. You may need to add a font to your Project that supports them, but that could be the way to go - extract the XML data, convert it to symbols.
2 Likes
Is the MusicXML file pre-cooked?
I see MusicXML to SVG converters like MusicXML to SVG download | SourceForge.net that you could use to convert your files to SVG format.
I have seen SVG work in the MIT WebViewer.
1 Like
Thanks for your reply,
In fact, I would like to create an app to play music sheets of a book, the book have more than 360 pages, If I insert the book pictures into the app, the size of file will be very big,
I want to add book notes, in musicxml format , and then play it.
what is your suggestion ?
Thanks for your reply,
I wrote a music book , the book have more than 360 pages. now, I want to create an app to play the opus .
I think if I insert opus note as musicxml, the size of app will be decrease.
Are you have any suggestions for this reason?
I suggest investigating
as a free cross conversion tool.
AI2 does have some JavaScript support.
See FAQ Section: JavaScript Stunts
for examples.
Here is a sample of SVG in an AI2 WebViewer:
webviewer_SVG.aia (3.7 KB)
P.S. This is not for the faint of heart.
3 Likes
Well, definitely smaller than using images if the App is to display the equivalent of 360 pages, but you do not need an App with 360 pages, you can use one page (one screen) and load each page of data on demand.
The challenge is the interpretation of the XML.
2 Likes
I have tried some examples in Chrome and Firefox - Chrome just displays the XML as-is, FireFox converts it into a giant human readable string.
I think ABG's idea of converting the MusicXML to SVG and displaying in a WebView (no internet connection required) is the most practical.
The 'start' of the SVG file will always be the Stave (Staff), so the pre-drawing of that can be determined by verifying the size of the device screen. It is then a matter of reading the first XML page, translating it into Unicode characters then 'writing' the notes on the Stave (The co-ordinates of each Stave section being known), saving the SVG file, then finally loading it into the WebView. Sounds like a long-winded process but once automated it should be lighting fast and SVG presents very high quality definition. I think it should be possible to do this in App Inventor without the aid of a library or JavaScript, but JavaScript can be used if more expedient.
So I have broken the process down but obviously there is a fair amount of work involved to reach the goal. I'd love to have a go myself but I'm way too busy.
1 Like
Thank you ABG.
I will check it and say you the results
you are Right, but I have to upload all 360 image of book into the app, Ok?
Thank you ChrisWard
I wish you have good time in your life
I will test your suggestion next week and take you the results
Not all at once, just 'on demand'. This means they can be stored in a Shared folder on the device rather than within the App, allowing the App to have the capability of reading any MusicXML file required, not just the one, and at the same time staying 'lean and mean'.
It seems, This method is very good.
Can you please tell me how can I use Verovio conversation Tool in AI2?
I recommend reading their book, and using their web site to convert just one page from MusicXML to SVG, then trying to display that one SVG file in a WebViewer.
This is just a feasibilty study.
3 Likes
there is an script here(see following Html code) .
It is work good.
Is there any way to use this script OFFLINE?
<html>
<head>
<title>An example</title>
<script src="https://plugin.humdrum.org/scripts/humdrum-notation-plugin-worker.js"></script>
</head>
<body>
<p> Using the worker version of the Humdrum Notation Plugin. </p>
<script>displayHumdrum({source: "note"})</script>
<script type="text/x-humdrum" id="note">
**kern
*M2/4
=1
1c;
==
*-
</script>
</body>
</html>```Thanks ABG,
In this script, the developer used simple method for notation.
I would like, my app works offline and does not require internet.
I have advanced my JavaScript practice enough to capture the humdrum plugin and run it in an AI2 Companion on an emulator.
Here is my source, for you to test offline, as I have run out of time.
javascript_humdrum_test.aia (33.8 KB)
testfile.txt (381 Bytes)
My html code:
<html>
<head>
<title>An example</title>
<script src="file://localhost/humdrum-notation-plugin-worker.js"></script>
</head>
<body>
<p> Using the worker version of the Humdrum Notation Plugin. </p>
<script>displayHumdrum({source: "note"})</script>
<script type="text/x-humdrum" id="note">
**kern
*M2/4
=1
1c;
==
*-
</script>
</body>
</html>
Notice how I changed my references to external URLs to file://localhost/ , which points to the Media folder where I uploaded a copy of the humdrum plugin.js and my html file.
1 Like
Thank you ABG,
But, if you be Offline, when the App is running for the first time, it is NOT work and don't display any think.
when I connect to the internet and run the app, it work correctly, after this time, (it dont need to internet to display the output. I think it will read from browser cash.
can you check it?
Thanks a lot