Нужно привязать клавишу клавиатуры к button с помощью javascript

const arr = [] 
let sum = 0 
const keys = document.querySelectorAll('.key') 
keys.forEach(key => key.addEventListener('transitionend', removeTransition)) 
window.addEventListener('keydown', playSound) 
 
 
function playSound(e) { 
  const attr = `[data-key="${e.key}"]` 
  const audio = document.querySelector('audio' + attr) 
  const key = document.querySelector('div' + attr) 
   
  if (!key) 
    return 
   
  key.classList.add('playing') 
  audio.currentTime = 0 
  audio.play() 
 
  arr.push(event.key) 
  document.querySelector('.output').innerHTML = arr.join(', ') 
  document.querySelector('.sum').innerHTML = sum += +event.key 
} 
 
function removeTransition(e) { 
  if (e.propertyName !== 'transform') return 
  this.classList.remove('playing') 
}

body, html { 
  margin: 0; 
  padding: 0; 
  font-family: sans-serif; 
  font-size: 10px; 
} 
 
.output { 
  text-align: center; 
  font-size: 20px 
} 
 
.output-sum { 
  text-align: center; 
  font-size: 30px 
} 
 
.keys { 
  display: flex; 
  flex: 1; 
  min-height: 100vh; 
  align-items: center; 
  justify-content: center; 
} 
 
.key { 
  border: .4rem solid black; 
  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(0,0,0,0.4); 
  text-shadow: 0 0 .5rem black; 
} 
 
.playing { 
  transform: scale(1.1); 
  border-color: #ffc600; 
  box-shadow: 0 0 1rem #ffc600; 
} 
 
kbd { 
  display: block; 
  font-size: 4rem; 
} 
 
.sound { 
  font-size: 1.2rem; 
  text-transform: uppercase; 
  letter-spacing: .1rem; 
  color: #ffc600; 
}

<div class="output">Нажмите цифру</div> 
    <div class="output-sum">Сумма цифр: <sapn class="sum">0</span></div> 
     
    <div class="keys"> 
      <div data-key="1" class="key"> 
        <kbd>1</kbd> 
        <span class="sound">clap</span> 
      </div> 
    <div data-key="2" class="key"> 
        <kbd>2</kbd> 
        <span class="sound">hihat</span> 
      </div> 
    <div data-key="3" class="key"> 
        <kbd>3</kbd> 
        <span class="sound">kick</span> 
      </div> 
       <div data-key="4" class="key"> 
        <kbd>4</kbd> 
        <span class="sound">openhat</span> 
      </div> 
      <div data-key="5" class="key"> 
        <kbd>5</kbd> 
        <span class="sound">boom</span> 
      </div> 
      <div data-key="6" class="key"> 
        <kbd>6</kbd> 
        <span class="sound">ride</span> 
      </div> 
      <div data-key="7" class="key"> 
        <kbd>7</kbd> 
        <span class="sound">snare</span> 
      </div> 
      <div data-key="8" class="key"> 
        <kbd>8</kbd> 
        <span class="sound">tom</span> 
      </div> 
      <div data-key="9" class="key"> 
        <kbd>9</kbd> 
        <span class="sound">tink</span> 
      </div> 
      <div data-key="0" class="key"> 
        <kbd>0</kbd> 
        <span class="sound">clap</span> 
      </div> 
    </div> 
     
    <audio data-key="1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CP.mp3"></audio> 
    <audio data-key="2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/OH25.mp3"></audio> 
    <audio data-key="3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/SD0025.mp3"></audio> 
    <audio data-key="4" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CY0010.mp3"></audio> 
    <audio data-key="5" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CP.mp3"></audio> 
    <audio data-key="6" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CH.mp3"></audio> 
    <audio data-key="7" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/SD0010.mp3"></audio> 
    <audio data-key="8" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/OH25.mp3"></audio> 
    <audio data-key="9" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CB.mp3"></audio> 
    <audio data-key="0" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CP.mp3"></audio>

// создадим коллецию клавиша > кнопка 
const $buttons = $('.dramm-mashine-box__top button'); 
const keyMap = new Map(); 
$buttons.each((i, btn) => { 
  // либо через id получать код к которому должна кнопка подключаться 
  // либо через data-attribute 
  keyMap.set(btn.innerHTML, btn); 
}); 
 
function handleButtonPress() { 
  // делаем с кнопкой что хотим 
  // кнопка доступна по this 
  $(this).addClass('pressed'); 
} 
 
function handleButtonUnPress() { 
  $(this).removeClass('pressed'); 
} 
 
$(document).on('keypress', function (event) { 
  const code = event.key; 
  const button = keyMap.get(code); 
  if(button) handleButtonPress.call(button); 
}); 
 
 
$(document).on('keyup', function (event) { 
  const code = event.key; 
  const button = keyMap.get(code); 
  if(button) handleButtonUnPress.call(button); 
});

button.pressed { 
   outline: 1px solid yellow; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="dramm-mashine-box__top"> 
    <button type="button" class="btn" id="btn-1">1</button> 
    <button type="button" class="btn" id="btn-2">2</button> 
    <button type="button" class="btn" id="btn-3">3</button> 
    <button type="button" class="btn" id="btn-4">4</button> 
    <button type="button" class="btn" id="btn-5">5</button> 
    <button type="button" class="btn" id="btn-6">6</button> 
    <button type="button" class="btn" id="btn-7">7</button> 
    <button type="button" class="btn" id="btn-8">8</button> 
    <button type="button" class="btn" id="btn-9">9</button> 
    <button type="button" class="btn" id="btn-0">0</button> 
</div>