# P5js open MIDI file

**URL:** <https://discourse.processing.org/t/p5js-open-midi-file/36259>\
**Category:** Libraries\
**Created:** [April 10, 2022, 4:21pm UTC](https://discourse.processing.org/t/p5js-open-midi-file/36259 "2022-04-10T16:21:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![patricio1979](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/patricio1979/32/13609_2.png) [@patricio1979](https://discourse.processing.org/u/patricio1979)\
**Post date:** [April 10, 2022, 4:21pm UTC](https://discourse.processing.org/t/p5js-open-midi-file/36259/1 "2022-04-10T16:21:30Z")

</div>

Is there a way to open MIDI files in P5js? I’ve found a library but is written in typescript  
[Tonejs](https://github.com/Tonejs/Midi)

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

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [April 10, 2022, 5:04pm UTC](https://discourse.processing.org/t/p5js-open-midi-file/36259/2 "2022-04-10T17:04:00Z")

</div>

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](https://cdnjs.com/libraries/tone)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 10, 2022, 5:07pm UTC](https://discourse.processing.org/t/p5js-open-midi-file/36259/3 "2022-04-10T17:07:43Z")

</div>

> [@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/](https://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/](https://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](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/14):
>
> 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 …

---

<div class="post-metadata">

**Author:** ![patricio1979](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/patricio1979/32/13609_2.png) [@patricio1979](https://discourse.processing.org/u/patricio1979)\
**Post date:** [April 10, 2022, 11:36pm UTC](https://discourse.processing.org/t/p5js-open-midi-file/36259/4 "2022-04-10T23:36:22Z")

</div>

Ok I’ve digged into this and I found [this website](https://tonejs.github.io/Midi/) 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](https://editor.p5js.org/patricio1979/sketches/wMGt8SguA) for the successful integration with drop.

---

<div class="post-metadata">

**Author:** ![patricio1979](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/patricio1979/32/13609_2.png) [@patricio1979](https://discourse.processing.org/u/patricio1979)\
**Post date:** [April 10, 2022, 11:44pm UTC](https://discourse.processing.org/t/p5js-open-midi-file/36259/5 "2022-04-10T23:44:24Z")

</div>

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

```auto
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.