Load MXL files

[efreja]

Hello,

I'm trying to have Verovio loading MXL files with the toolkit as explained here:

https://book.verovio.org/toolkit-reference/input-formats.html#musicxml

As 'Input of MXL files is auto detected' I thought it would work effortless like any other MusicXML file.

Unfortunately, with some code like:

jQuery.ajax({
                    url: "/wp-content/uploads/2017/05/moon_river_easy.mxl"
                    , success: function(data) {
                				vrvToolkit.loadData(data);
                                }
	});

NB : Unused ajax's DataType setting so that it can be infered.

I get two errors :

[Error] The tree of the MEI data cannot be parsed (no root found)
[Error] Error importing data

in the loadData method.

I double checked the MXL file:

1. I have META-INF/container.xml
2. It contains:

<?xml version="1.0" encoding="UTF-8"?>
<container>
  <rootfiles>
    <rootfile full-path="moon_river_easy.xml">
      </rootfile>
    </rootfiles>
  </container>

3. I have the moon_river_easy.xml file at the first level of the zip

Am I missing something ?
Or do you have examples to make it run properly ?

NB : I use V 3.9.0 (but it is maybe only 3.8.1 see my previous discussion)

Thanks

[samuelbradshaw]

Hi! I'm using MXL files to load sheet music as well.

I think you need to convert the response to an ArrayBuffer or Base64 string, then use vrvToolkit.loadZipDataBuffer() or vrvToolkit.loadZipDataBase64() to load it, instead of using vrvToolkit.loadData(). Here's an example using the JavaScript Fetch API, loading the file as an ArrayBuffer:

fetch(mxlUrl)
  .then(response => response.arrayBuffer())
  .then(data => {
    vrvToolkit.loadZipDataBuffer(data)
    // Do anything else you want with the file here
  }).catch(e => {
    console.log(e);
  });

If you have various files to load in different formats, something like this might be helpful:

if (data instanceof ArrayBuffer) {
  // MXL (ArrayBuffer)
  vrvToolkit.loadZipDataBuffer(data);
} else if (data.startsWith('<')) {
  // MusicXML or MEI string
  vrvToolkit.loadData(data);
} else if (data.includes('base64')) {
  // MXL (Base64 data URI)
  vrvToolkit.loadZipDataBase64(data.split(',')[1]);
} else {
  // MXL (Base64)
  vrvToolkit.loadZipDataBase64(data);
}

You can see an example here: https://singpraises.net/collections/en/hymns/the-spirit-of-god?tab=sheet-music-interactive

Hope this helps!
– Samuel

[lpugin]

Thanks! I added a note in https://book.verovio.org/toolkit-reference/input-formats.html#musicxml

[efreja]

Great, just changed my code like :

jQuery.ajax({
                    url: "/wp-content/uploads/2017/05/moon_river_easy.mxl"
                    , xhrFields: { responseType: "arraybuffer"}
                    , success: function(data) {
                				vrvToolkit.loadZipDataBuffer(data);
                                }
	});

and it worked perfectly!

Thanks!

[samuelbradshaw]

Awesome, I'm glad it worked! :)