P5js open MIDI file

[patricio1979]

Is there a way to open MIDI files in P5js? I’ve found a library but is written in typescript
Tonejs

Also, is there a way to integrate that typescript library with P5js?

[KumuPaul]

Most TypeScript libraries are transpiled into JavaScript (with TypeScript definition files and source maps) for distribution. You can access the compile source for such libraries via a CDN (content distribution network): tone - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

[GoToLoop]

@patricio1979

Also, is there a way to integrate that typescript library with P5js?

All TS source code is transpiled to JS before it’s able to run on a browser.

Thus they have this CDN link for it posted on their GitHub repo:
<script src="https://Unpkg.com/@tonejs/midi"></script>

You can check its content on this link below:
Unpkg.com/browse/@tonejs/midi/

If you prefer you can code in TS in place of JS by installing their package in order to access their “.d.ts” typing files:
Unpkg.com/browse/@tonejs/midi/dist/

Also check my previous post about coding in TS w/ p5js along w/ 3rd-party libraries:

Autocomplete and documentation for "imported" p5js

When we use import in JS 2 things happen: The file becomes a JS module and it needs a <script type=module> to load inside the HTML. JS checks the import line if a file w/ that exactly path & name exists so it can load it as a module. As we can note the file “ml-matrix” doesn’t exist. Instead there are “matrix.js” & “matrix.umd.js”. However neither is a JS module but just vanilla JS code. The library’s types is called “matrix.d.ts”. But to make things worse “matrix.umd.js” is exposed as …

[patricio1979]

Ok I’ve digged into this and I found this website that, as you say, uses the Typescript for Javascript. Thank you.

Now, when I want to implement it on the P5js editor i success when I drop the file, but I’m not able to load the MIDI file with loadBytes, loadStrings, or else.
What method or function should I use to load the MIDI file like drop() does?

Here’s the code for the successful integration with drop.

[patricio1979]

Sorry, it wasn’t necessary to load the midi file, with its location was fine.

let midi = null, fileName;

function setup() {
  let c = createCanvas(400, 400);
}

function draw() {
  background(220);
  noLoop();
  text('drop a MIDI file in the canvas', 100, 200)
  const midi = new Midi();
  //print(fileName)
  
  let fileMidi = Midi.fromUrl('./bach_846.mid').then( (result) => {
    print(result)
  });
}

Thanks for the responses, hope that this works for anyone else.