-1

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>

2

1 Resposta 1

4

Existe sim! o String Concatenation que utiliza-se também o operador binário + (mais)

Exemplo do String Concat:

const data = new Date();
// fazendo o uso do String Concat
document.write("<body>" + "<article>" + "<time datetime='" + data.toISOString() + "'>" + data + "</time>" + "</article>" + "</body>");

Exemplo com Template Literals (ou Template Strings):

const data = new Date();
// fazendo o uso do Template Strings
document.write(`<body><article><time datetime='${data.toISOString()}'>${data}</time></article></body>`);

e entre outros benefícios de seu uso.


Visivelmente existe também uma diferença em quantidades de caracteres..

Fazendo com que seu código tenha um ganho em redução de linhas/caracteres. Para outros (em pesquisa), está incluso também um ganho em performance melhor nos resultados do que a concatenação normal em alguns casos!

Desde do ES6, a adição de literais de modelo nos permite INTERPOLAR strings

Ou seja, Interpolar nada mais é do que misturar uma ou mais expressões com Strings, da seguinte maneira tornando-se bastante eficaz:

console.log(`É igual á ${2 + 2}`); // quanto é? com resultado

var calc = 2 + 2; // quanto é?
console.log("É igual á " + calc); // resultado

diferente de executar da maneira acima!


Vale ressaltar que a propriedade KeyboardEvent.keyCode foi depreciada! Veja algumas outras alternativas como:

e entre outros..

Fica ai uma pequena sugestão do código limpo com o uso de Template Strings!

// dispara o evento ao qualquer tecla ser pressionada
window.addEventListener('keydown', e => {
  // dar play na tag audio referente a tecla pressionada!
  document.querySelector(`audio[data-key=${e.key}]`).play();
});
<audio data-key="c" src="https://assets.mixkit.co/sfx/download/mixkit-one-clap-481.wav" />
<audio data-key="t" src="http://soundescapestudios.com/SESAudio/SES%20Site%20Sounds/PercussiveChimes/Crystal-02.wav" />

Execute o código snippet e pressione as teclas c ou t para ouvir os sons..

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .