TonicTwo/index.html at main · arantxa-garcri/TonicTwo · 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!-- SPDX-License-Identifier: GPL-3.0-only -->

<!--
  File: index.html
  Project: TonicTwo (Step Sequencer)
  Description:
    TonicTwo is a minimal 7x8 step sequencer with a left sidebar UI that groups:
      - SETTINGS (BPM + Transpose + Title)
      - RECORD YOUR MELODY (Record controls + REC indicator + playback)
    The main area contains the sequencer grid.

  Author: Arantxa Garayzar Cristerna
  Created: 2020 (original)
  Updated: 2026-02-20 (modernized as TonicTwo)

  Dependencies:
    - Tone.js (CDN)
    - app.js (local)
    - style.css (local)

  Notes:
    - Audio starts only after a user gesture (browser autoplay policy).
    - Recording exports OGG/WebM depending on browser support.
-->

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>TonicTwo</title>

  <link rel="stylesheet" href="./style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/15.3.5/Tone.js"></script>
</head>

<body>
  <!-- =========================================================================
       App Shell: Sidebar (left) + Main (right)
       ====================================================================== -->
  <div class="app">
    <!-- ===================== SIDEBAR ===================== -->
    <aside class="sidebar">
      <header class="brand">
        <div class="brand-title">TONICTWO</div>
        <div class="brand-subtitle">Step Sequencer</div>
      </header>

      <!-- --------------------- SECTION: SETTINGS --------------------- -->
      <section class="panel" aria-label="Settings">
        <h3 class="panel-title">SETTINGS</h3>

        <div class="field">
          <label class="label" for="bpm">BPM</label>
          <input id="bpm" type="number" value="120" min="40" max="240" step="1" />
        </div>

        <div class="field">
          <label class="label" for="transpose">Transpose</label>
          <div class="range-row">
            <input id="transpose" type="range" min="-12" max="12" value="0" step="1" />
            <span id="transposeValue" class="value">0</span>
          </div>
        </div>

        <div class="field">
          <label class="label" for="trackName">Title</label>
          <input id="trackName" type="text" placeholder="My riff..." maxlength="60" />
        </div>

        <div class="buttons-row">
          <button id="play" type="button">Play/Pause</button>
          <button id="clear" type="button">Clear</button>
        </div>
      </section>

      <!-- --------------------- SECTION: RECORD --------------------- -->
      <section class="panel" aria-label="Record your melody">
        <h3 class="panel-title">RECORD YOUR MELODY</h3>

        <div class="rec-row">
          <span id="recIndicator" class="rec-indicator" aria-live="polite">● REC</span>
        </div>

        <div class="buttons-row">
          <button id="record" type="button">Record</button>
          <button id="stoprecord" type="button">Stop</button>
        </div>

        <audio controls></audio>

        <p class="hint">
          Tip: Name your track before recording so the download file uses that title.
        </p>
      </section>
    </aside>

    <!-- ===================== MAIN ===================== -->
    <main class="main">
      <header class="main-header">
        <h2 class="main-title">SEQUENCER</h2>
        <p class="main-subtitle">Check steps to build a pattern. Transpose changes pitch globally.</p>
      </header>

      <!-- Sequencer grid: 7 rows (C..B) x 8 steps -->
      <div id="board" aria-label="Sequencer grid">
        <div>
          <div id="C">C
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
          </div>

          <div id="D">D
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
          </div>

          <div id="E">E
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
          </div>

          <div id="F">F
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
          </div>

          <div id="G">G
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
          </div>

          <div id="A">A
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
          </div>

          <div id="B">B
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
            <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
          </div>
        </div>
      </div>
    </main>
  </div>

  <script src="./app.js"></script>
</body>
</html>