Grab Midi Data from a parsed Midi File

p5.js Libraries
1

Hi , I am trying to grab midi information from a parsed midi file, the code easily parses any midi file to JSON using tone.js but I don’t know how they extracted the midi information like note, velocity, time etc. I want to grab them myself so that I can modify them,please help me.

This is the link to my project.

You can download midi files from this link to test the app.

https://www.midiworld.com/files/

Thanks

Show less

1 Like
2

Hi @Chigoz,

Did you saw this…
(The Json format is pretty straight forward if you are familiar with midi)
https://tonejs.github.io/Midi/

Cheers
— mnse

3

Thank you very much for the link, I will check it out. I was thinking I can grab them using id or class selectors from the divs but I couldn’t find that information on the source code.

4

Oh I’ve checked that code but couldn’t grab midi data from it, please check out yourself, just show me how to grab one information and I’ll be ok to do the rest. Thanks

5

Hi @Chigoz,

I don’t understand? Do you mean how to access the JsonObject and its content ?

First of all I would take out the js code from the html an put it into the sketch.js.
Start simple by putting a single midi to the data folder and load from there.
The midi object is the Json which can be accessed the way shown in the parseFile function line ~153+.

Hope that helps…

Cheers
— mnse

6

I’ve looked at that to the best of my abilities but I couldn’t determine the variable that contains the data. Please help me just grab one property e.g velocity, name, ticks, time etc

I will really appreciate that.

7

Hi @Chigoz,

That’s fairly simple … :slight_smile:

function setup() {
    let mybytes = loadBytes("index.mid", () => {
    let mymidi = new Midi(mybytes.bytes);
    mymidi.tracks.forEach((track) => {
      track.notes.forEach((note) => {
        let msg = `Note: ${note.name} `;
        msg += `Pitch: ${note.midi} `;
        msg += `Velocity: ${note.velocity} `;
        msg += `Duration: ${note.duration}`;
        console.log(msg);
      });
    });
  });
}

Console ie:

Note: F5 Pitch: 77 Velocity: 0.2440944881889764 Duration: 2.5511217031249998 
Note: D5 Pitch: 74 Velocity: 0.48031496062992124 Duration: 2.551121703125 
Note: F5 Pitch: 77 Velocity: 0.5039370078740157 Duration: 2.5243030781249995 
Note: D#5 Pitch: 75 Velocity: 0.5118110236220472 Duration: 2.52095075 
Note: G4 Pitch: 67 Velocity: 0.5118110236220472 Duration: 2.537712390625 
...

EDIT: Added loading example from asset file and from file drop for web editor below.

Cheers
— mnse

1 Like
8

Thank you very much sir, you have done a very great job and I appreciate your efforts for a task well done. I will also like to add a file upload button so the app can upload a local file into it when clicked.

God bless you for your invaluable help. Have a great weekend.

9

Hi @Chigoz,

No need! You can just use the drop functionality I tinkered into. Just drop a local file onto the canvas.

Cheers
— mnse

1 Like
10

OK, thanks a million. I was thinking of implementing that because it is what most web users are familiar with.

11

Hi @Chigoz,

Glad it helped!
Would you please be kind and mark the answer as a solution to your question to show that it solves your problem if so.
Also it might help other people which are looking for it to see that it isn’t an open question.

Cheers
— mnse

2 Likes