I need help on drum Drum machine

Hellow fellow campers, I believe you are all well and fine

recently i took a break from freecodecamp challenges and getting tough time on javascripts sections but atleast i managed to finish and i decided to start Javascript30 before starting Front End Libraries Certification to be more familiar on javascript but things is not going so well. the first project i started and i cant get any functionality(my drum does not work) despite following all the steps of the tutor and here is the exact code from the tutorial and i would appreciate your advice and recommendations.

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <title>DRUM MACHINE</title>
  <link rel="stylesheet" href="style.css">
    <div class="keys">
      <div data-key="65" class="key">
        <span class="sound">clap</span>
      <div data-key="83" class="key">
        <span class="sound">hihat</span>
      <div data-key="68" class="key">
        <span class="sound">kick</span>
      <div data-key="70" class="key">
        <span class="sound">openhat</span>
      <div data-key="71" class="key">
        <span class="sound">boom</span>
      <div data-key="72" class="key">
        <span class="sound">ride</span>
      <div data-key="74" class="key">
        <span class="sound">snare</span>
      <div data-key="75" class="key">
        <span class="sound">tom</span>
      <div data-key="76" class="key">
        <span class="sound">tink</span>

    <audio data-key="65" src="sounds/clap.mp3"></audio>
    <audio data-key="83" src="sounds/hihat.mp3"></audio>
    <audio data-key="68" src="sounds/kick.mp3"></audio>
    <audio data-key="70" src="sounds/openhat.mp3"></audio>
    <audio data-key="71" src="sounds/boom.mp3"></audio>
    <audio data-key="72" src="sounds/ride.mp3"></audio>
    <audio data-key="74" src="sounds/snare.mp3"></audio>
    <audio data-key="75" src="sounds/tom.mp3"></audio>
    <audio data-key="76" src="sounds/mp3.mp3"></audio>


    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 function from running altogether
      audio.currentTime = 0; //rewind to the start
    function removeTransition(e){
      if (event.propertyName !== 'transform') return; //skip if its not a transform
    const keys = document.querySelectorAll('.key')
    keys.forEach(key => key.addEventListener('transionend', removeTransition));
    window.addEventListener('keydown', playSound);


what tutorial is that ? and what don’t you understand specifically ?

tutorial is on Javascript30 project an i have followed every step of the lecture but my codes does not work

Is that all the code or is there something missing ?, can you wrap this in codepen and show where exactly it is failing at ?

this is the exact code exept the html part where the tutorial is using .wav and i used .mp3 for audios

It should be e.keyCode - with capital C

also no such event as ‘transionend’

still nothing is changing

actually you change those things above and you can at least play a sound which before you couldn’t (I just used an fcc resource for pressing ‘a’ since you did not provide your sound files) .

However, you have to be specific on what you want. right now, your request is vague…

Does it realy work for you coz on my side the sounds are not working

I changed them and i provided my sound files and saved the sounds/audios on the same folder with my html/css files but still i cant play the sounds even with your example you gave me

@Abdi1, yes the sounds work when you make those changes, provide the sound files and then press on a key, can’t say why it is not working for you without seeing your updated code.

here is the entire code

again, you need to camelCase keycode.

no such event as transionend

you did not make the above changes

yes already done but not yet

so what’s the problem ? still not working for you?

yes not working for me

Is your volume up? I can hear it…

yes my volume is 100% coz am watching some other tutorials as well