• If you haven't done so already, please add a location to your profile. This helps when people are trying to assist you, suggest resources, etc. Thanks (Click the "X" to the top right of this message to disable it)

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

okathira

Newbie
Joined
Dec 9, 2024
Messages
4
Reaction score
3
Location
Japan
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.
1739896688005.png1739896729379.png1739896752725.png
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.
 
Last edited:
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.
 
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
1740218397393.png

chrome + Bluetooth: 212ms
1740218450993.png

Firefox: 41.33ms
1740218661310.png
 
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!
 
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.
1739896688005.png1739896729379.png1739896752725.png
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.
Why does your app need access to my microphone? I stopped as soon as it requested that.
 
Why does your app need access to my microphone? I stopped as soon as it requested that.
Sorry for making you worry about the microphone.

This accordion app only requires microphone access to detect and manage audio output devices on your system, and the microphone stream (audio data) is immediately stopped after device detection.
You can also use this app without allowing the use of the microphone if you still have doubts.

This app does not record, listen to, or store any audio from your microphone.
You can verify this by watching your browser's address bar after "ENABLE AUDIO". If you use chrome, when you grant permission, you'll briefly see the microphone icon appear in the address bar, but it will quickly turn gray or disappear completely.
This confirms that the microphone is only used momentarily for device detection and is then fully deactivated. By observing the address bar at the top of your screen, you can confirm that the app does not continuously use your microphone. This is easy to understand if you compare it to other online recording web apps.

Technically speaking, I guess what browser is asking is not permission to use your microphone for recording, but access to your audio input/output devices. (ref: discussion about this, chrome document)

If I get some time, I'd like to update the UI to make this clearer later.
 
Last edited:
Back
Top