Chromatic Button Accordion web app that can be played using a computer keyboard

[okathira]

I have created a web application that allows you to play a chromatic button accordion using your computer keyboard.
https://okathira-dev.github.io/client-web-api-sandbox/button-accordion-with-keyboard/index.html
Note: Currently, the application's interface is available only in Japanese.
source

I suddenly realized that the chromatic button accordion is similar to a computer keyboard, so I created this application. I didn't see many that implemented the stradella bass and register switches, so I was personally pleased with the results.
Also, I have never played an actual accordion, so I am wondering especially about the way the stradella bass sounds. Please let me know if you have any other questions or opinions.
My test performance(YouTube)
I hope you enjoy it.

How to Play​

1. Click "音声を有効化" (Enable Audio) to initialize the audio.
2. Select either the right-hand or left-hand system using the toggle switch at the top of the screen.
3. Start playing using your computer keyboard.

the images are google translated

Features​

System Switch
- Toggle button group at the top of the screen ("左手（伴奏）" / "右手（メロディー）").
- Switch between the right-hand (C-system) and left-hand (Stradella bass 12x4) systems.

Volume Control
- Horizontal slider at the top of the main section ("音量").
- Adjust the overall volume for each system.

Pitch Controls
- Number input fields located below the volume control.
- Overall reed pitch adjustments in cents/Hz ("基準ピッチ").
- Individual reed pitch adjustments in cents ("相対ピッチ").

Reed Controls
- Toggle button groups located below the pitch controls.
- Right-hand: toggle L1, M1, M2, M3, and H1 reeds on/off ("各リードのオンオフ").
- Left-hand: toggle Soprano, Alto, Tenor and Bass reeds on/off for chord ("コードのリード") and bass note ("ベース音のリード").

Register Switches
- Draggable button group located below the reed controls ("レジスタースイッチ (F1-F12, ドラッグで並び替え可能)").
- F1-F12 reed combination presets with drag & drop support.

Keyboard Layout
- Above the keyboard, two control elements:
- A left-side toggle button group that switches the display labels between keyboard keys ("キーボード (QWERTY)") and musical notes ("音階 (C4, C#4, D4...)").
- A right-side select menu ("キーボードレイアウト") that lets you choose between English (US) and Japanese keyboard layouts.

 

[CC_PDX]

Very cool! I could see this as being handy for entry into midi programs for notation. The 100-200ms lagtime from the browser makes it a little hard for playing in real time, but it functions as described.

 

[okathira]

Very cool! I could see this as being handy for entry into midi programs for notation. The 100-200ms lagtime from the browser makes it a little hard for playing in real time, but it functions as described.

Thank you for trying!
I noticed that using a Bluetooth device causes a lot of lag. Therefore, I made it possible to easily change the audio output device on the UI. Some browsers do not support this feature (e.g. Firefox).
Also, the latency time is now displayed.

In my environment, the Bluetooth output device has a lag time of about 200ms, but the other method has a lag time of about 50ms!
Also, Firefox does not allow you to change the audio output device, but the basic lag time may be smaller than chrome (though I could not recognize it...).

chrome: 62ms


chrome + Bluetooth: 212ms


Firefox: 41.33ms

 

[David A]

Thankyou for this. I'm a piano accordionist but have often wondered how the finger patterns work on a button accordion, so I've saved your link and will try to learn from it. It seems a very "complete" imitation of the functions of a real button accordion. Well done!