Converting MIDI to JSON

Posted on 2017-08-18 by Jan Vantomme
Tags: music, webgl

I’ve been working on a generative WebGL music video on and off for the past few weeks, and I needed a good way to synchronise visuals to audio. Realtime audio analysis can be useful, but it isn’t always precise enough. Since I’m creating the music as well as the visuals, I decided to export the music as audio and MIDI, so I could use the MIDI NOTE ON events to trigger animations.

I looked at some online tools to convert MIDI to something text-based, and some broken node.js modules, but didn’t find anything that worked for me. So I decided to create my own tools. The result is a Processing sketch that can convert a MIDI file into a JSON structure with timestamps, note numbers, velocity, … The JSON file looks like this:

{
  "PPQN": 96,
  "messages": [
    {
      "octave": 2,
      "noteName": "C2",
      "tick": 0,
      "velocity": 100,
      "noteNumber": 36,
      "timestamp": 0
    },
    {
      "octave": 3,
      "noteName": "D#3",
      "tick": 0,
      "velocity": 103,
      "noteNumber": 51,
      "timestamp": 0
    },
    {
      "octave": 2,
      "noteName": "C2",
      "tick": 96,
      "velocity": 101,
      "noteNumber": 36,
      "timestamp": 455
    },
    {
      ...
    }
  ],
  "BPM": 132
}    

I’ve also created a small WebGL project with BabylonJS to show you how this data can be used to trigger animations in sync with audio. Note that this small demo project was only tested in Chrome on Mac OS X, running on a local web server. I haven’t optimised anything yet for mobile devices or other browsers/operating systems, so there’s a chance that it may not fully work. The code is documented quite well, and should be clear enough to give you an idea on how to get started.

You can see the result right here: https://playground.vormplus.be/webgl-music-video/.

The repository with all code can be found on Github.

I still have a lot of work to do on the full music video. I’ll publish the project online once I’m finished mixing and mastering my new album. So keep an eye on this blog if you want to stay up to date.

Tweet this article