Internationalization issue (Y and Z)

[TimDaub]

Hey,

I have a German keyboard and so when I use your module (which is amazing btw) with keyboard shortcuts enabled, I have to press Y even though for me the respective black key should be Z. Is there some parameter that can handle that today already, or would we have to make a change for this? Happy to help if necessary.

[kevinsqi]

Hi @TimDaub, thanks for reporting the issue! I do know how you could fix your immediate issue. The keyboard configurations are specified in KeyboardShortcuts.js, which provides a few defaults (BOTTOM_ROW, HOME_ROW, and QWERTY_ROW).

If, for instance, you wanted to swap y and z keys, you could create your own keyboard config based on e.g. HOME_ROW:

const HOME_ROW_QWERTZ = [
    { natural: 'a', flat: 'q', sharp: 'w' },
    { natural: 's', flat: 'w', sharp: 'e' },
    { natural: 'd', flat: 'e', sharp: 'r' },
    { natural: 'f', flat: 'r', sharp: 't' },
    { natural: 'g', flat: 't', sharp: 'z' }, // swapped y => z
    { natural: 'h', flat: 'z', sharp: 'u' }, // swapped y => z
    { natural: 'j', flat: 'u', sharp: 'i' },
    { natural: 'k', flat: 'i', sharp: 'o' },
    { natural: 'l', flat: 'o', sharp: 'p' },
    { natural: ';', flat: 'p', sharp: '[' },
    { natural: "'", flat: '[', sharp: ']' },
]

And then use this config to generate keyboard shortcuts to pass to <Piano />:

import { KeyboardShortcuts, MidiNumbers, Piano } from 'react-piano';

const keyboardShortcuts = KeyboardShortcuts.create({
  firstNote: MidiNumbers.fromNote('c3'),
  lastNote: MidiNumbers.fromNote('c6'),
  keyboardConfig: HOME_ROW_QWERTZ,
});

<Piano
  {...}
  keyboardShortcuts={keyboardShortcuts}
/>

As for how to solve this for alternate keyboard layouts in general, I think it might involve changing how keyboard events are handled in react-piano. Right now, I use event.key to determine which key is pressed, but if I want it to be layout-independent, it seems like I should use event.code instead. I'll keep this in mind for a future change.

Does this help you get what you need?