Q:

Click,trigger animation and play sound.Going from keydown to click

Following this drumkit tutorial but wanted to change it to where I could click instead of pressing key(in this example pressing A triggers the animation and sound). Tried changing the 'keydown' in the window.addEventListener to 'click' but nothing happened. What am I doing wrong? 
Extra details if needed.There are two functions. The first one plays the corresponding audio tag that matches the keycode of the data-key div.
The second function just returns the transformation in the css back to its original state.

function playSound(e) {

  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  if (!audio) return; //stop the function from running all together
  audio.currentTime = 0; // rewind to the start
  audio.play();
  key.classList.add('playing');


}


function removeTransition(e) {

  if (e.propertyName !== 'transform') return; // skip it if its not a transform

  this.classList.remove('playing');

}


const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

window.addEventListener('keydown', playSound);
@charset "UTF-8";

/* CSS Document */

html {
  font-size: 10px;
  /*background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;*/
  /* background-size: cover;*/
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.keys {
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.key {
  border: .4rem solid mistyrose;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  width: 10rem;
  text-align: center;
  color: white;
  background: rgba(245, 245, 220, 0.4);
  text-shadow: 0 0 .5rem black;
}

.playing {
  transform: scale(1.1);
  border-color: black;
  box-shadow: 0 0 1rem black;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS Drum Kit</title>
  <link rel="stylesheet" href="soundpad.css">
</head>

<body>


  <div class="keys">
    <div data-key="65" class="key">      
    </div>
  </div>

  <audio data-key="65" src="clap.wav"></audio>




</body>

</html>

A:

The issue you've got lays down under wrong propperty you are trying to use to get data from.
keyCode attribute can be used when you pressing buttons on keyboard but your goal is to get it from data-key attribute. 
So first you have to change:
e.keyCode

To
e.target.dataset.key

Like this:
const audio = document.querySelector(`audio[data-key="${e.target.dataset.key}"]`);
const key = document.querySelector(`.key[data-key="${e.target.dataset.key}"]`);

Plus you need to add listener of click not on window object, but on certain html element. For example could be used same forEach loop
keys.forEach((key) => {
    key.addEventListener('transitionend', removeTransition);
    key.addEventListener('click', playSound);
});

