https://github.com/Wally869/VisualMidi

Webapp for midi visualisations using Python and Javascript. Based on MusiStrata
https://github.com/Wally869/VisualMidi

barchart electron heatmap javascript midi music music-analysis music-composition music-information-retrieval music-theory music-visualizer plots python visualization visuals webapp

Last synced: 3 months ago
JSON representation

Webapp for midi visualisations using Python and Javascript. Based on MusiStrata

• Host: GitHub
• URL: https://github.com/Wally869/VisualMidi
• Owner: Wally869
• Created: 2020-05-04T09:37:58.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T16:29:15.000Z (about 2 years ago)
• Last Synced: 2024-08-01T02:33:26.721Z (6 months ago)
• Topics: barchart, electron, heatmap, javascript, midi, music, music-analysis, music-composition, music-information-retrieval, music-theory, music-visualizer, plots, python, visualization, visuals, webapp
• Language: JavaScript
• Homepage: https://www.noveltech.dev/work/music-utilities/
• Size: 787 KB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# VisualMIDI

### Overview

I am working on computer generated music and wanted to have a visualizer for midi files.

This web app allows to easily import a midi and vizualize the following:

- Scatterplot of (Time, Frequency) of midi note_on events

- BarChart of ticks between note_on events

- BarChart of intervals between note_on events

Can also toggle to include Drums track or not

!["A quick look"](readmeImages/mainAppView.png)

Notes: it's a WIP. Chords have been filtered out

### Installation

Install python dependencies (pip for mido, git clone and pip -e for MidiStructurer)

then

```

git clone https://github.com/Wally869/VisualMidi

cd VisualMidi

npm install

// start electron app

npm start

// Can also start in webonly mode

npm run startwebonly 

```

### Dependencies

Python:

- mido

- MusiStrata (my repo: https://github.com/Wally869/MusiStrata)

Javascript:

- Express

- Chart.js

- Electron

### Plot Colors

There is no set colors for the plots.

Colors are chosen at random when needed by the ColorPool in jsfiles/frontside.js

If you want to specify your own color set, override the colors attribute of the ColorPool class

```javascript

class ColorPool {

  constructor() {

    this.colors = [];

  }

  getColor(id) {

    while (id > this.colors.length - 1) {

      this.colors.push(randomColorString());

    }

    return this.colors[id];

  }

}

```

### To Do

- Color Palette instead of random pick

- Change plotting library, tooltip not working for heatmap, and custom recipe for heatmap has issues

- Maybe use brython instead of relying on user python install