An open API service indexing awesome lists of open source software.

https://github.com/benc-uk/midi-toolkit

A HTML5 & JS based static web app for working with MIDI
https://github.com/benc-uk/midi-toolkit

alpinejs midi web-midi

Last synced: 2 months ago
JSON representation

A HTML5 & JS based static web app for working with MIDI

Awesome Lists containing this project

README

        

# 🎹 MIDI Toolkit

MIDI Toolkit is a web based set of tools, utilities and debugging aids for working with MIDI, features:

- Realtime monitor & logging for incoming MIDI messages, with decoding
- Configurable input & output devices, & MIDI channel setting
- Clock & sync: detect & send MIDI clock
- Send MIDI CC and NRPN messages
- Two octave keyboard for sending & testing note data
- Send & test MIDI program change and bank select (new in v1.2!)

It's 100% browser based, nothing to install and being a static web app it requires no backend. [Alpine.js](https://alpinejs.dev/) was used (and slightly abused) as a lightweight framework for all DOM interaction and reactivity and provides a SPA like experience without React or Vue.js!

There is no build or webpack bundling required as modern ES6 modules are used.

## 🚀 Try it out!

Deployed is hosted on GitHub Pages here: https://code.benco.io/midi-toolkit/

Note. You will need a MIDI device attached to your machine 😁. The app is not designed for mobile use, don't even think about it.

## 🖼️ Screenshots

![image](https://user-images.githubusercontent.com/14982936/146958577-e8490cc0-34d7-4245-ab5b-580d5192a010.png)

![image](https://user-images.githubusercontent.com/14982936/146958622-6d9ef08a-7939-4079-be30-495b16f9aa61.png)

![image](https://user-images.githubusercontent.com/14982936/146958648-d135243f-29ae-4cba-a10f-e9ba98d390e4.png)

![image](https://user-images.githubusercontent.com/14982936/146958689-c04bbb63-19ff-4986-8f9c-7ba9456bbfa6.png)