title: Audio does not play on keyboard event with JS?
body: <p>I have a key (s) that I want to press in order to create a keyboard event which would be a sound that I have linked in my file. The sound src is correct, and from what I know, so is my JavaScript. Is there a step that I am not aware of for adding sound in a HTML file?</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;!-- Required meta tags --&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
          &lt;!-- Bootstrap CSS --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
          &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
  
                  &lt;div class="col-12"&gt;
                      &lt;div data-key="83" class="key"&gt;
                          &lt;kbd&gt;s&lt;/kbd&gt;
                          &lt;span class="sound"&gt;clap&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;audio data-key="83" src="jap/big_taiko.wav"&gt;&lt;/audio&gt;
  
  
  
          &lt;script&gt;
              window.addEventListener('keydown', function(e) {
                  const audio = document.querySelector('audio[data-key="${e.keyCode}"]');
                  if (!audio) return;
                  audio.play();
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>