title: Piano Keys/ Audio Files do not run
body: <p>I am trying to build a basic piano that plays a sound when you click on the key of the piano. I am using HTML, CSS and Javascript and when I click on the piano keys, it does not respond and there is no sound. I have checked the path way for the audio and const in my JS code but cannot figure anything out...Can someone explain whats wrong with the code?</p>
  <pre><code>HTML CODE: 
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;magicPiano.css&quot;&gt;
      &lt;script src=&quot;magicPiano.js&quot; defer&gt;&lt;/script&gt;
      &lt;title&gt;Magic Piano&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;piano&quot;&gt;
          &lt;div data-note=&quot;C&quot; class=&quot;key white&quot;&gt;&lt;/div&gt;
          &lt;div data-note=&quot;Db&quot; class=&quot;key black&quot;&gt;&lt;/div&gt;
          &lt;div data-note=&quot;D&quot; class=&quot;key white&quot;&gt;&lt;/div&gt;
          &lt;div data-note=&quot;E&quot; class=&quot;key black&quot;&gt;&lt;/div&gt;
          &lt;div data-note=&quot;Eb&quot; class=&quot;key white&quot;&gt;&lt;/div&gt;
          &lt;div data-note=&quot;F&quot; class=&quot;key white&quot;&gt;&lt;/div&gt;
          &lt;div data-note=&quot;Gb&quot; class=&quot;key black&quot;&gt;&lt;/div&gt;
          &lt;div data-note=&quot;G&quot; class=&quot;key white&quot;&gt;&lt;/div&gt;
          &lt;div data-note=&quot;Ab&quot; class=&quot;key black&quot;&gt;&lt;/div&gt;
          &lt;div data-note=&quot;A&quot; class=&quot;key white&quot;&gt;&lt;/div&gt;
          &lt;div data-note=&quot;Bb&quot; class=&quot;key black&quot;&gt;&lt;/div&gt;
          &lt;div data-note=&quot;B&quot; class=&quot;key white&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;audio&quot;&gt;&lt;/div&gt;
      &lt;audio id=&quot;C&quot; src=&quot;/Users/admin/Projects/Magic Piano/notes_C.mp3&quot;&gt;&lt;/audio&gt;
      &lt;audio id=&quot;Db&quot; src=&quot;/Users/admin/Projects/Magic Piano/notes_Db.mp3&quot;&gt;&lt;/audio&gt;
      &lt;audio id=&quot;D&quot; src=&quot;/Users/admin/Projects/Magic Piano/notes_D.mp3&quot;&gt;&lt;/audio&gt;
      &lt;audio id=&quot;E&quot; src=&quot;/Users/admin/Projects/Magic Piano/notes_E.mp3&quot;&gt;&lt;/audio&gt;
      &lt;audio id=&quot;Eb&quot; src=&quot;/Users/admin/Projects/Magic Piano/notes_Eb.mp3&quot;&gt;&lt;/audio&gt;
      &lt;audio id=&quot;F&quot; src=&quot;/Users/admin/Projects/Magic Piano/notes_F.mp3&quot;&gt;&lt;/audio&gt;
      &lt;audio id=&quot;Gb&quot; src=&quot;/Users/admin/Projects/Magic Piano/notes_Gb.mp3&quot;&gt;&lt;/audio&gt;
      &lt;audio id=&quot;G&quot; src=&quot;/Users/admin/Projects/Magic Piano/notes_Gb.mp3&quot;&gt;&lt;/audio&gt;
      &lt;audio id=&quot;Ab&quot; src=&quot;/Users/admin/Projects/Magic Piano/notes_Ab.mp3&quot;&gt;&lt;/audio&gt;
      &lt;audio id=&quot;A&quot; src=&quot;/Users/admin/Projects/Magic Piano/notes_A.mp3&quot;&gt;&lt;/audio&gt;
      &lt;audio id=&quot;Bb&quot; src=&quot;/Users/admin/Projects/Magic Piano/notes_Bb.mp3&quot;&gt;&lt;/audio&gt;
      &lt;audio id=&quot;B&quot; src=&quot;/Users/admin/Projects/Magic Piano/notes_B.mp3&quot;&gt;&lt;/audio&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <pre><code>CSS CODE:
  
  *, *::before, *::after{
      box-sizing: border-box;
  }
  body{
      background-color: rgb(0, 174, 255);
      margin: 0;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .piano{
      display: flex;
  
  }
  
  .key {
  height: calc(var(--width) * 4);
  width: var(--width);
  }
  
  .white{
      width: 100px;
      height: 400px;
      background-color: white;
      border: 1px solid #333;
  }
  
  .black{
      width: 60px;
      height: 240px;
      background-color: black;
      margin-left: -30px;
      margin-right: -30px;
      z-index: 2;
  
  }
  </code></pre>
  <pre><code>JS CODE:
  
  const white_keys = ['z', 'x', 'c', 'v', 'b', 'n', 'm']
  const black_keys = ['s', 'd', 'g', 'h', 'j']
  
  const keys = document.querySelectorAll('.key')
  
  const whiteKeys = document.querySelectorAll('.key.white')
  const blackKeys = document.querySelectorAll('.key.black')
  
  keys.forEach(key =&gt; {
      key.addEventListener('click', () =&gt; playNote(key))
  })
  
  document.addEventListener('keydown', @ =&gt; {
      if (e.repeat) return
      const key = e.key
      const whiteKeyIndex = white_keys.indexOf(key)
      const blackKeyIndex = black_keys.indexOf(key)
  
      if (whiteKeyIndex &gt; -1) playNote(whiteKeys[whiteKeyIndex])
      if (blackKeyIndex &gt; -1) playNote(blackKeys[blackKeyIndex])
  
  })
  
  function playNote(key) {
      const noteAudio = (document.getElementById(key.dataset.note));
      noteAudio.currentTime = 0
      noteAudio.play()
      key.classList.add('active')
      noteAudio.addEventListener('ended', () =&gt; {
          key.classList.remove('active')
  
      })
  
  </code></pre>