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: about 1 year 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 (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T16:29:15.000Z (over 3 years ago)
- Last Synced: 2024-10-28T16:12:58.414Z (over 1 year 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
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