envelope-tool/index.html at main · bitshifters/envelope-tool · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BBC Micro ENVELOPE editor</title>
  </head>
  <body>
    <main id="app">
      <header>
        <h1>BBC Micro <code>ENVELOPE</code> editor</h1>
        <p class="subtitle">
          Edit, visualise, and audition <code>ENVELOPE</code> parameters for
          the BBC Micro <code>SOUND</code> command.
        </p>
      </header>

      <div class="layout">
        <div class="controls">
          <section class="panel" id="envelope-panel">
            <h2>Envelope <span class="env-n-wrap"><code>N</code>=<input type="number" id="env-n" min="1" max="4" value="1" /></span></h2>
            <h3>Pitch envelope</h3>
            <div class="grid" id="pitch-grid"></div>
            <h3>Amplitude envelope</h3>
            <div class="grid" id="amp-grid"></div>
            <div class="basic-row">
              <input type="text" class="basic-line" id="envelope-line" spellcheck="false" autocomplete="off" />
              <button class="copy-btn" data-copy="envelope-line" title="Copy ENVELOPE statement" aria-label="Copy ENVELOPE statement"></button>
            </div>
          </section>

          <section class="panel">
            <h2>Sound parameters</h2>
            <div class="grid" id="sound-grid"></div>
            <div class="basic-row">
              <input type="text" class="basic-line" id="sound-line" spellcheck="false" autocomplete="off" />
              <button class="copy-btn" data-copy="sound-line" title="Copy SOUND statement" aria-label="Copy SOUND statement"></button>
            </div>
          </section>
        </div>

        <div class="viz-col">
          <section class="panel viz-panel">
            <h2>Visualisation</h2>
            <canvas id="viz" width="900" height="320"></canvas>
            <div class="transport">
              <button id="play">Play</button>
              <button id="stop">Stop</button>
              <label class="hold-toggle" title="Hold the note indefinitely (BBC SOUND duration -1). Also use this to audition AR=0 envelopes — on a real BBC AR=0 means the note continues indefinitely, but this tool otherwise caps the release tail at 2 s."><input type="checkbox" id="hold" /> Hold</label>
              <button id="share-link" title="Copy a shareable URL with auto-play that reproduces the current envelope and sound">Copy share link</button>
              <button id="run-emulator" title="Open bbc.xania.org with the current ENVELOPE and SOUND auto-running">Run in BBC emulator ↗</button>
            </div>
            <h3>Presets</h3>
            <div class="presets" id="presets"></div>
          </section>
        </div>
      </div>

      <footer>
        By Kieran Connell and Claude. Thanks to
        <a href="https://tobylobster.github.io/mos/mos/index.html" target="_blank" rel="noopener noreferrer">Toby Lobster's MOS disassembly</a>,
        the authoritative reference used to nail down the BBC's pitch and envelope timing.
      </footer>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>