funkcja, która zatrzymuje aktualne audio po naciśnieciu przycisku i zaczyna odtwarzać inny dźwięk.

Witam.

Potrzebuje pomocy w zadaniu podobnym do JavaScript Drum Kit.
Po wciśnieciu przycisku odtwarzany zostaje dzwięk.
Jest on dosyć długi, wieć jeśli nacisne przycisk kolejny te dźwięki po prostu nachodzą na siebie.
Chciałbym aby odtwarzany dźwięk wyłączył się po kliknięciu na kolejny.
Tylko niestety mam problem jak to zrobić.
Będę wdzieczny jeśli ktoś podsunie jakiś pomyśł
Dzieki :)

window.addEventListener('keydown', function(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    if(!audio) {
        return;
    } else if(audio) {
        audio.play();
        audio.currentTime = 0;
});

Może coś takiego? https://www.w3schools.com/jsref/met_audio_pause.asp

Coś w stylu:

<div id="controls">
  <button data-for="sample1">Sample 1</button>
  <button data-for="sample2">sample 2</button>
</div>

<audio data-sound="sample1" src="sample1.mp3"></audio>
<audio data-sound="sample2" src="sample1.mp3"></audio>

let sound

document
  .getElementById('controls')
  .addEventListener('click', ({ target }) => {
    if (sound) {
      sound.pause()
      sound.currentTime = 0
    }
  
    sound = document
      .querySelector(`[data-sound=${target.dataset.for}]`)
  
    sound.play()
})

CodePen: https://codepen.io/caderek/pen/NMaXNN?editors=1010

Źle sprecyzowałem moje pytanie.
Wygląda to tak:

<div class="keys">
    <div data-key="65" class="key">
        <img src="img/dog.jpg" alt="dog" width="100" height="100">
        <div class="animals">
            <kbd>A</kbd>
            <span class="sound">Pies</span>
        </div>
    </div>

Ten kod jest powielony 9 razy.
Po naciśnieciu danego klawisza zostanie dodana klasa, która zmieni tylko i wyłącznie transform elementu
Z tym że naciskając klawisz, jak zatrzymać audio przechodząc na inny przycisk?

Tutaj załączam przykład bez img i audio.
(https://codepen.io/Machnik/pen/ZoXvxx)

Ogólnie dzieki za pomoc:)

Z tym że naciskając klawisz, jak zatrzymać audio przechodząc na inny przycisk?

Nie rozumiem. Jeśli chcesz zatrzymać dźwięk po naciśnięciu danego przycisku, to w obsłudze zdarzenia click dodaj odpowiednie wywołanie funkcji, która to zrobi (np. jak wyżej pause). Co to znaczy "przechodząc na inny przycisk"?

Również nie rozumiem - obojętnie czy zmiana jest aktywowana kliknięciem w button czy naciśnięciem klawisza - w przykładzie pokazałem jak zatrzymać poprzedni dźwięk - trzeba go zapamiętać i spauzować (ewentualnie bez zapamiętywania odpalić pause na wszystkich elementach audio, ale to gorsza opcja).

Drum Kit powinien mieć kilka dźwięków. To chyba oczywiste - np. werbel, talerz, hi-hat. Każdy taki dźwięk powinien mieć osobny obiekt audio (nie ważne czy w DOM jako <audio>, czy bezpośrednio w JS jako nowy obiekt Audio). Każdy dźwięk powinien mieć przypisany swój własny klawisz lub tez przycisk (albo div, img, czy co tam jeszcze sobie zapragniesz) - jak wolisz. Dopiero wtedy martwisz się nakładaniem się dźwięku na siebie. Dźwięki powinny się nakładać, jeżeli sa innego typu. Niby dlaczego nie może grać jednocześnie stopa i talerz? Dźwięk nie powinien się nakładać tylko wtedy kiedy jest tego samego typu - np. ciagle bicie w stopę powinno pauzować ostatnie uderzenie, wracać do początku i odtwarzać od nowa. Znika Ci dodatkowo problem podmiany źródła dźwięku mając jeden obiekt audio.

Oczywiście , zgadzam się z tobą tylko to jest projekt "Podobny" do Drum Kit.
Aplikacja jest skierowana do osób najmłodszych gdzie naciskajac klawisz dziecko uczy się dźwięków jakie wydają zwierzęta :)