javascript - 没有关联的音频元素

Question

我正在做 Wes Bos 30 天挑战，当我按下键时第一个是架子鼓，总是说 null 就像音频没有关联，但它是。我错过了一些非常明显的东西吗？路径是正确的，文件是一个有效的 wav。

<div class="keys">
  <div data-key="65" class="key">
    <kbd>A</kbd>
    <span class="sound">clap</span>
  </div>
  <div data-key="83" class="key">
  <kbd>S</kbd>
  <span class="sound">hihat</span>
  </div>
   <div data-key="68" class="key">
  <kbd>D</kbd>
  <span class="sound">Kick</span>
  </div>
   <div data-key="70" class="key">
  <kbd>F</kbd>
  <span class="sound">openhat"</span>
  </div>
   <div data-key="71" class="key">
  <kbd>G</kbd>
  <span class="sound">boom</span>
  </div>
   <div data-key="72" class="key">
  <kbd>H</kbd>
  <span class="sound">ride</span>
  </div>
   <div data-key="74" class="key">
  <kbd>J</kbd>
  <span class="sound">snare</span>
  </div>
   <div data-key="75" class="key">
  <kbd>K</kbd>
  <span class="sound">tom</span>
  </div>
   <div data-key="76" class="key">
  <kbd>L</kbd>
  <span class="sound">tink</span>
  </div>
</div>

<audio data-key="65" src="Sounds/banjo.wav"></audio>
<audio data-key="83" src="Sounds/bass_guitar1.wav"></audio>
<audio data-key="68" src="Sounds/banjo.wav"></audio>
<audio data-key="70" src="Sounds/banjo.wav"></audio>
<audio data-key="71" src="Sounds/banjo.wav"></audio>
<audio data-key="72" src="Sounds/banjo.wav"></audio>
<audio data-key="74" src="Sounds/banjo.wav"></audio>
<audio data-key="75" src="Sounds/banjo.wav"></audio>
<audio data-key="76" src="Sounds/banjo.wav"></audio>

JS

window.addEventListener('keydown', function(e){
    const audio = document.querySelector('audio[data-key="${e.keyCode}"]');
    console.log(audio);


});

标签： javascriptaudio