rveciana - representing-a-midi-file-with-d3js

Representing a MIDI file with D3js

Open raw page in new tab

Just playing with a MIDI reader: https://github.com/grimmdude/MidiPlayerJS that triggers events that D3 uses to draw an SVG.

A better option would be using d3 to trigger the events too (it would be cleaner).

The “song” score is taken from this page: http://www0.cpdl.org/wiki/index.php/Jesu,_meine_Freude,_BWV_227_(Johann_Sebastian_Bach) and converted to MIDI with MuseScore.

<!DOCTYPE html>
<meta charset="utf-8">

<body>
    
  <script src="app.js"></script>