Gigant Piano- podstawa

/////////////////////HTML///////////////////////
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Gigant Piano</title>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Marck+Script&display=swap" rel="stylesheet">
    <link rel="icon" href="https://cdn.glitch.com/e6f75690-14f3-45bb-b1a5-c6b79067ed8a%2Ff41836b1-31a2-465c-8336-ebb31c366ce3.obraz.png?v=1619041963483">
  </head>
  <body>


  <div class="pianino">

    <div id="C" class="klawisz bialy"></div>
    <div id="Cis" class="klawisz czarny"></div>
    <div id="D" class="klawisz bialy"></div>
    <div id="Dis" class="klawisz czarny"></div>
    <div id="E" class="klawisz bialy"></div>
    <div id="F" class="klawisz bialy"></div>
    <div id="Fis" class="klawisz czarny"></div>
    <div id="G" class="klawisz bialy"></div>
    <div id="Gis" class="klawisz czarny"></div>
    <div id="A" class="klawisz bialy"></div>
    <div id="Ais" class="klawisz czarny"></div>
    <div id="H" class="klawisz bialy"></div>

  </div>

    <audio id="dzwiek-C" src="https://cdn.glitch.com/e6f75690-14f3-45bb-b1a5-c6b79067ed8a%2FC.wav?v=1619035637279"></audio>
    <audio id="dzwiek-Cis" src="https://cdn.glitch.com/e6f75690-14f3-45bb-b1a5-c6b79067ed8a%2FCis.wav?v=1619036320764"></audio>
    <audio id="dzwiek-D" src="https://cdn.glitch.com/e6f75690-14f3-45bb-b1a5-c6b79067ed8a%2FD.wav?v=1619036321087"></audio>
    <audio id="dzwiek-Dis" src="https://cdn.glitch.com/e6f75690-14f3-45bb-b1a5-c6b79067ed8a%2FDis.wav?v=1619036320982"></audio>
    <audio id="dzwiek-E" src="https://cdn.glitch.com/e6f75690-14f3-45bb-b1a5-c6b79067ed8a%2FE.wav?v=1619036320832"></audio>
    <audio id="dzwiek-F" src="https://cdn.glitch.com/e6f75690-14f3-45bb-b1a5-c6b79067ed8a%2FF.wav?v=1619036320970"></audio>
    <audio id="dzwiek-Fis" src="https://cdn.glitch.com/e6f75690-14f3-45bb-b1a5-c6b79067ed8a%2FFis.wav?v=1619036320584"></audio>
    <audio id="dzwiek-G" src="https://cdn.glitch.com/e6f75690-14f3-45bb-b1a5-c6b79067ed8a%2FG.wav?v=1619036321078"></audio>
    <audio id="dzwiek-Gis" src="https://cdn.glitch.com/e6f75690-14f3-45bb-b1a5-c6b79067ed8a%2FGis.wav?v=1619036320668"></audio>
    <audio id="dzwiek-A" src="https://cdn.glitch.com/e6f75690-14f3-45bb-b1a5-c6b79067ed8a%2FA.wav?v=1619036320613"></audio>
    <audio id="dzwiek-Ais" src="https://cdn.glitch.com/e6f75690-14f3-45bb-b1a5-c6b79067ed8a%2FAis.wav?v=1619036320410"></audio>
    <audio id="dzwiek-H" src="https://cdn.glitch.com/e6f75690-14f3-45bb-b1a5-c6b79067ed8a%2FH.wav?v=1619036320929"></audio>
  </body>
</html>


/////////////////////CSS/////////////////////////////

body {
  background-color: #2a2a2a;/*kolor tła dla całej strony*/
}

/*wygląd pianina*/
.pianino{
  display:flex;/*ustawiamy kontener na elastyczny model pudełkowy dzięki temu domyślnie elementu w nim będą układać się wzdłuż poziomej osi głównej jeden obok drugiego*/
  background-color:#121212;/*kolor pianina*/
  border-radius: 15px;/*zaokrąglenie rogów pianina*/
  justify-content:center;/*wyśrodkowanie zawartości czyli klawiszy*/
  margin-left:auto;/*wyśrodkowanie pianina*/
  margin-right:auto;/*wyśrodkowanie pianina*/
  margin-top:100px;
  width:1000px;
  height:395px;
  padding-top:100px;


}

/*wygląd białego klawisza*/
.bialy{

  width:100px;
  height:400px;
  background-color: white;
  border: 1px solid #333;
  border-radius: 0px 0px 7px 7px;/*zaokrąglamy przycisk tylko z dołu*/
}
/*wygląd czarnego klawisza*/
.czarny{
  width:60px;
  height:240px;
  background-color: black;
  margin-right:-30px;/*ustawiamy ujemny margines, aby nasunąć czarny przycisk na biały*/
  margin-left:-30px;/*ustawiamy ujemny margines, aby nasunąć czarny przycisk na biały*/
  z-index:2;/*ustawiamy żeby czarny klawisz wyświetlał się na białym a nie pod nim*/
  border-radius: 0px 0px 7px 7px;/*zaokrąglamy przycisk tylko z dołu*/
}


/////////////////////////JS///////////////////////////


/*zwracamy listę wszystkich elementów które posiadają klase .klawisz w naszym przypadku są to wszystkie klawisze w naszym pianinie*/
const klawisze = document.querySelectorAll('.klawisz');

/*dla każdego elementu czyli naszego każdego klawisza dodajemy zdarzenie na kliknięcie myszką, następnie wywołujemy funkcję zagrajDzwiek do któej przekzujemy konkretny obiekt/klawisz*/
klawisze.forEach(function(klawisz){


    klawisz.addEventListener('mousedown',function(){

    zagrajDzwiek(klawisz);

    });

});


 /*dla każdego elementu czyli naszego każdego klawisza dodajemy zdarzenie na kliknięcie myszką, następnie wywołujemy funkcję zagrajDzwiek do któej przekzujemy konkretny obiekt/klawisz*/
function zagrajDzwiek(klawisz){
   /*uzyskujemy dostęp do konkretnego dźwięku czyli jeżeli przekazany obiekt do funkcji to klawisz Cis to jego id jest ustawione na Cis a w efekcie konkatenacji mamy getElementById(dzwiek-Cis) czyli zmienna dzwiek ma dostęp do konkretnego elementu audio na stronie*/
  const dzwiek= document.getElementById('dzwiek-'+klawisz.id);
 //żeby można było odtwarzać dźwięk wielokrotnie od początku nie czakając aż się skończy ustawaimy jego resetowanie za każdym razem kiedy klikniemy
  dzwiek.currentTime = 0;
  //gramy dany dźwięk
  dzwiek.play();

}