Show MusicXML file in app inventor

MIT App Inventor Help
1

Hi dears,
I need to show some information from MusicXML file in my app.
are there any solution for this?
for example :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE score-partwise PUBLIC
    "-//Recordare//DTD MusicXML 4.0 Partwise//EN"
    "http://www.musicxml.org/dtds/partwise.dtd">
<score-partwise version="4.0">
  <part-list>
    <score-part id="P1">
      <part-name>Music</part-name>
    </score-part>
  </part-list>
  <part id="P1">
    <measure number="1">
      <attributes>
        <divisions>1</divisions>
        <key>
          <fifths>0</fifths>
        </key>
        <time>
          <beats>4</beats>
          <beat-type>4</beat-type>
        </time>
        <clef>
          <sign>G</sign>
          <line>2</line>
        </clef>
      </attributes>
      <note>
        <pitch>
          <step>C</step>
          <octave>4</octave>
        </pitch>
        <duration>4</duration>
        <type>whole</type>
      </note>
    </measure>
  </part>
</score-partwise>

must be show following image:
C4

2

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?

image

1 Like
3

..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
4

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
5

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 ?

6

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?

7

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:
SVG Demo
webviewer_SVG.aia (3.7 KB)
circle
pad
viewbox

when button1 click
when button1 click987×636 55.4 KB

P.S. This is not for the faint of heart.

3 Likes
8

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
9

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.

10

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
11

Thank you ABG.
I will check it and say you the results

12

you are Right, but I have to upload all 360 image of book into the app, Ok?

13

Thank you ChrisWard
I wish you have good time in your life
I will test your suggestion next week and take you the results

14

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'.

15

It seems, This method is very good.
Can you please tell me how can I use Verovio conversation Tool in AI2?

16

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
17

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>```
18

I would search Google for
how to run JavaScript offline

Let us know what works for you?

19

Thanks ABG,

In this script, the developer used simple method for notation.
I would like, my app works offline and does not require internet.

20

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.

blocks
blocks958×180 17.8 KB

Capture
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