sonido-en-javascript/index.html at main · vyk2rr/sonido-en-javascript · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <title>Atril Sonoro Pentatónico</title>
  <link rel="stylesheet" href="./styles.css">
</head>

<body>

  <h1>Atril Sonoro Pentatónico</h1>

  <div class="poetry" id="poetryBox">—</div>

  <p>Toca una nota. Deja que te hable.</p>

  <div id="noteButtons"></div>

  <hr />

  <div class="key" onclick="playChord(['C4', 'E4', 'G4'], 'Acorde DO (Raíz) – Tres caminos se funden en uno.')">C Mayor (C–E–G)</div>
  <div class="key" onclick="playChord(['E4', 'G4', 'C5'], 'Primera inversión – El viaje comienza desde el corazón.')">C – 1ra inversión (E–G–C)</div>
  <div class="key" onclick="playChord(['G4', 'C5', 'E5'], 'Segunda inversión – La luz desciende, firme y clara.')">C – 2da inversión (G–C–E)</div>

  <hr />

  <div class="key" onclick="playChord(['C4', 'Ab4', 'F4'], 'Armonía negativa – Lo que fuiste, vuelve desde otro cielo.')">C en armonía negativa (C–Ab–F)</div>
  <div class="key" onclick="playChord(['Ab4','F4','C5'], '1ra inversión negativa – El corazón se abre desde la sombra.')">C negativa – 1ra inversión (Ab–F–C)</div>
  <div class="key" onclick="playChord(['F4', 'C5', 'Ab5'], '2da inversión negativa – La raíz canta desde el revés del alma.')">C negativa – 2da inversión (F–C–Ab)</div>

  <hr />

  <div class="key" onclick="playCScaleNotes()">play C Major Scale (Notas)</div>
  <div class="key" onclick="playDScaleNotes()">play D Major Scale (Notas)</div>

  <hr />

  <div class="key" onclick="playCScaleChords()">play C Major Scale (Acordes)</div>
  <div class="key" onclick="playDScaleChords()">play D Major Scale (Acordes)</div>

  <div id="progressionBox" style="margin: 2em 0; padding: 1em; border: 1px solid #ccc;">
    <h2>
      Ear trainer (
      <select id="scaleSelector" style="font-size:1em;">
        <option value="C">C</option>
        <option value="D">D</option>
      </select>
      scale)
    </h2>
    <div id="progressionDisplay" style="font-size: 1.5em; margin-bottom: 1em;">I → V → I</div>
    <button class="key" onclick="playProgression()">Reproducir secuencia</button>
    <button class="key" onclick="refreshProgression()" style="margin-left:1em;">Secuencia aleatoria</button>
  </div>

<div class="piano-container">
  <div class="piano">
    <!-- Teclas blancas (2 octavas: C to B x2) -->
    <div class="white-key" data-note="C4"></div>
    <div class="white-key" data-note="D4"></div>
    <div class="white-key" data-note="E4"></div>
    <div class="white-key" data-note="F4"></div>
    <div class="white-key" data-note="G4"></div>
    <div class="white-key" data-note="A4"></div>
    <div class="white-key" data-note="B4"></div>
    <div class="white-key" data-note="C5"></div>
    <div class="white-key" data-note="D5"></div>
    <div class="white-key" data-note="E5"></div>
    <div class="white-key" data-note="F5"></div>
    <div class="white-key" data-note="G5"></div>
    <div class="white-key" data-note="A5"></div>
    <div class="white-key" data-note="B5"></div>

    <!-- Teclas negras con posición absoluta -->
    <div class="black-key" data-note="C#4" style="left: 40px;"></div>
    <div class="black-key" data-note="D#4" style="left: 100px;"></div>
    <div class="black-key" data-note="F#4" style="left: 220px;"></div>
    <div class="black-key" data-note="G#4" style="left: 280px;"></div>
    <div class="black-key" data-note="A#4" style="left: 340px;"></div>
    <div class="black-key" data-note="C#5" style="left: 460px;"></div>
    <div class="black-key" data-note="D#5" style="left: 520px;"></div>
    <div class="black-key" data-note="F#5" style="left: 640px;"></div>
    <div class="black-key" data-note="G#5" style="left: 700px;"></div>
    <div class="black-key" data-note="A#5" style="left: 760px;"></div>
  </div>
</div>

  <script src="./script.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
        const selector = document.getElementById('scaleSelector');
        if (selector) {
          selector.value = earTrainerScale;
          selector.addEventListener('change', (e) => {
            earTrainerScale = e.target.value;
            updateCurrentProgression(); // Solo cambia los acordes, no los grados
          });
        }

        document.querySelectorAll('.white-key, .black-key').forEach(key => {
        key.onclick = () => {
          const note = key.getAttribute('data-note');
          // Busca la frecuencia en el array scale
          const noteObj = window.scale.find(n => n.note + (note.length > 2 ? note.slice(1) : '') === note.replace(/\d/, ''));
          // Si no encuentra por enharmonía, busca por nombre exacto
          const found = noteObj || window.scale.find(n => n.note === note.replace(/\d/, ''));
          if (found) {
            playNote(found.freq, `Nota ${note} – Vibración: ${found.freq.toFixed(2)} Hz`);
            highlightPianoKey(note);
          }
        };
      });
    });
  </script>


</body>

</html>