Estou desenvolvendo uma página que ao pressionar algumas teclas do teclado, acionamos alguns sons, tipo batidas, claps e etc.
Esta linha dá play
no audio ao disparar um evento:
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
Mas não entendi porque tem um cifrão, e queria saber também se há alguma forma mais fácil e/ou clara e didática. Por exemplo, tem como obter o áudio a partir do atributo data-key
sem que seja ${e.keyCode}
?
window.addEventListener('keydown',function (e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
if (!audio) {
return false;
} else {
audio.play();
}
});
<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">hithat</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/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>
KeyboardEvent.keyCode
foi depreciado! veja alternativas como:KeyboardEvent.key
eKeyboardEvent.code
ambas têm suporte na maioria dos browsers (qualquer dúvida verifique suporte em caniuse.com)