note that it use data-* attribute to assign correspondent keycode to each button on keyboard, and also to each correspondent audio link.
use HTML tag <kbr></kbr> to let browser know it’s a keyboard-triggered event.
CSS
Note .playing carries the CSS style after button being triggered.
JavaScript
Use IIFE to wrap all of the function inside it.
Use keydown event instead of keyup, because we want to trigger it continuously.
Since it’s a keyboard event, therefore, we bind the event on window.
Use querySelector and template literal to bind audio DOM.
Due to each audio file has different length, we need to set currentTime to 0 to reach continuous displaying.
Use classlist to add, remove CSS class.
If use querySelectorAll, be aware that it will return an array-like node list, not a real array. It can use Array.from() to transform it to real array.
Use transitionend event as a deciding moment for removing .playing CSS class.