Keyboard Warrior

Simple music domain specific language. Includes a game where you slay monsters by placing notes down. Has MIDI support.

Comment

Inspiration

I saw the UNT robotics challenge and started thinking about everything I carry in my backpack. I wanted to program something using MIDI for a while, but never had the reason to.

What it does

On the left, there is piano buttons for people who don't have a MIDI keyboard. If you drag a note into the text editor, it will paste the key name of that note. If you have a MIDI keyboard, you can hold a key down for 1 second to paste it in the editor. That lets you try out a bunch of notes before deciding on the right one.

In the center is a small text editor. There is a sample script already in the editor so that you can review the syntax.

How we built it

It's running off a single, html, js, and css file. You can host it using the bash script, or just double-click the html file to open it in a browser. Tested on Chromium browsers and it works well.

I included ace-editor as a git submodule. https://github.com/ajaxorg/ace-builds/ https://github.com/ajaxorg/ace

The piano roll viewport is made using the HTML Canvas API.

It also uses Twemoji, which is CC-BY 4.0. Copyright 2019 Twitter, Inc and other contributors.

Challenges we ran into

I thought that octaves started at A, and that the "C4 Octave" was just the octave that included C4. Turns out, C4 excludes the A, A#, and B notes to the left of C4, and runs until the next C4 note. This is why I am a computer science major instead of a music theory major.

Accomplishments that we're proud of

I like the animations. I like how the script will hot-reload while you're typing it. It's just a side effect of the script getting compiled interpreted after every change.

What we learned

Monolithic single-branch, single-page, single-file projects can be easy to work on if you're coding by yourself.

What's next for Keyboard Warrior

Accessibility for the blind and visually impaired. I think ace-editor has some keyboard shortcut or setting you can enable to give a voice over, but I want to also have it speak the letters of the notes, or something along those lines.

Share this project:

Updates