[Dilettante_Pro]

Не дождался HTML и CSS от автора, пришлось сделать свой простенький макетик - без аудио.
Однако, все работает - и по цифровым клавишам, и по клику по кнопкам

<style>
.active {
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
	transition: all 1s linear;
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
}
</style>
<button class="key" data-key="48">0</button>
<button class="key" data-key="49">1</button>
<button class="key" data-key="50">2</button>
<script>
	function makeSound(e) {
		var code = e.keyCode ? e.keyCode : this.getAttribute("data-key");  
		var activeKey = document.querySelector('.key[data-key="'+code+'"]');
	//	var activeAudio = document.querySelector('audio[data-key="'+code+'"]');
	//	if (!activeAudio) return;
	//	activeAudio.currentTime = 0;
	//	activeAudio.play();
		activeKey.classList.add('active');
	}

  window.addEventListener('keydown', makeSound); //(1)

  var allKeys = document.querySelectorAll(".key"); 

  allKeys.forEach(function (key) {
  	key.addEventListener('click', makeSound);	
  })

  allKeys.forEach(function (key) { //(2)
  	key.addEventListener('transitionend', function (e) {
             	if(e.propertyName !== 'transform') return;
  		this.classList.remove("active");
  	});
  });
</script>