musicXML importing

p5.js Libraries
1

Hello, I need to import a musicXML file into p5js por parsing

I found this post
https://forum.processing.org/two/discussion/22417/a-couple-of-processing-powered-music-vids

Do you have any hints for doing this?

2

hi! have you tried this?

if you import with CDN

<script src="https://cdn.jsdelivr.net/npm/musicxml-interfaces@0.0.20/lib/index.min.js"></script>

the functions seem to be exposed to global (like p5.js).

2 Likes
3

Thank you, yes.
Apparently there’s an issue when importing XML files into p5.js
I’m getting all sorts of issues.

This worked with musicXML files

let img, button, stringy;

function setup() {
  img = createCanvas(300,300);
  button = createButton('2. show string');
  button.mousePressed(printy);
  button.position(0,35);
  
//https://riptutorial.com/javascript/example/7081/read-file-as-string?fbclid=IwAR15en-wov_STPVGY49g4m6QqALNhtaHDBYAiUYmpjbkgu-YTC3s28PLVYo
  document.getElementById('upload').addEventListener('change', readFileAsString)
}

function draw() {
  background(220);
}

function readFileAsString() {
    var files = this.files;
    var reader = new FileReader();
    reader.onload = function(event) {
        console.log('File content:', event.target.result);
      stringy = event.target.result;
    };
    reader.readAsText(files[0]);
}

function printy(){
  print(stringy);
}

For those of you that want to work with another type of XML files that doesn’t have the XML extension, this is a solution.

1 Like
4

I got in touch with the people of OpenSheetMusicDisplay that unites Vexflow.js and musicXML
Thank you!