midi/main.js at main · i06lmk/midi · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
function tocaSom (seletorAudio) {
  const elemento = document.querySelector(seletorAudio);

  if (elemento && elemento.localName === 'audio') {
      elemento.play();
  }
  else {
      //alert('Elemento não encontrado');
      console.log('Elemento não encontrado ou seletor inválido');
  }

}

const listaDeTeclas = document.querySelectorAll('.tecla');

//para
for (let contador = 0; contador < listaDeTeclas.length; contador++) {

  const tecla = listaDeTeclas[contador];
  const instrumento = tecla.classList[1];
  const idAudio = `#som_${instrumento}`; //template string

  tecla.onclick = function () {
      tocaSom(idAudio);
  }

//eventos do teclado onkeydowne onkeyup.
//adicionar e remover classes em um elemento HTML através do JavaScript, com as funções add e remove do classList.
  tecla.onkeydown = function (evento) {

      if (evento.code === 'Space' || evento.code === 'Enter') {
          tecla.classList.add('ativa');
      }

  }

  tecla.onkeyup = function () {
      tecla.classList.remove('ativa');
  }

}

/*Template string é uma forma de facilitar a exibição de texto no JavaScript,
ele permite agrupar textos (strings) com outros tipos de informação, como number, boolean, array, entre outros.

Estrutura de repetição for(significa para).
Estrutura condicional if(significa se).

Operador de igualdade ==, estritamente igual (===), e o operador or (||).

A estruturas condicionais if e else juntas.
O operador not equals (!=), operador lógico and (&&) e o valor null.*/


//Declarar e chamar a função, executar o som através do play
/*
querySelector para selecionar elementos
concede o acesso ao código, atribuir para tocar o som*/