P5js open MIDI file

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

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

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

1 Like

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:

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:

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


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.

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() {
  text('drop a MIDI file in the canvas', 100, 200)
  const midi = new Midi();
  let fileMidi = Midi.fromUrl('./bach_846.mid').then( (result) => {

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