sampler/index.html at main · Mosquid/sampler · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Audio Sampler</title>
    <link rel="stylesheet" href="./styles/main.css" />
  </head>
  <body>
    <div class="container">
      <h1>Audio Sampler</h1>
      <div
        class="star-cta"
        style="
          display: flex;
          align-items: center;
          font-size: 12px;
          justify-content: flex-end;
        "
      >
        Who would want to&nbsp;
        <!-- Place this tag where you want the button to render. -->
        <a
          class="github-button"
          href="https://github.com/mosquid/sampler/"
          data-color-scheme="no-preference: light; light: light; dark: dark;"
          data-icon="octicon-star"
          data-size="large"
          aria-label="Star buttons/github-buttons on GitHub"
          >Star</a
        >&nbsp;this on GitHub..?
      </div>
      <div class="instructions">
        <p><strong>Instructions:</strong></p>
        <ol>
          <li>
            Click "Record" to start recording audio, and click again to stop.
          </li>
          <li>
            Use the play button to preview your recording and find the perfect
            sections.
          </li>
          <li>
            Click and drag on the waveform to select a region - each selection
            becomes a sample.
          </li>
          <li>Each sample is automatically assigned a keyboard key.</li>
          <li>
            Press the assigned keys to play your samples (you can press multiple
            keys at once to create "chords").
          </li>
          <li>Drag samples to reposition them within the recording.</li>
        </ol>
      </div>
      <!-- add non-english keys warning -->
      <div id="nonEnglishWarning" class="non-english-warning">
        <p>
          <strong>Note:</strong> Are you sure your keyboard is set to English?
        </p>
      </div>

      <div class="controls">
        <button id="recordBtn" class="record-btn">Record</button>
        <button id="playBtn" disabled>Play Full Recording</button>
        <button id="clearBtn">Clear All</button>
        <button id="clearSelectionsBtn">Clear Selections</button>
        <span id="timeDisplay" class="time-display">00:00.000</span>
      </div>

      <div id="waveform" class="waveform">
        <canvas id="waveformDisplay" class="waveform-display"></canvas>
        <div id="playhead" class="playhead" style="display: none"></div>
      </div>

      <div class="transport-controls">
        <button id="playPauseBtn" class="play-pause-btn" disabled>
          <div class="icon"></div>
        </button>
        <span id="currentTimeDisplay" class="time-display">00:00.000</span> /
        <span id="totalTimeDisplay" class="time-display">00:00.000</span>
      </div>

      <div id="keyBindings" class="key-bindings"></div>
      <!-- <button id="recordSample">Play and record</button> -->
    </div>

    <script src="./app/main.js"></script>
    <!-- Place this tag in your head or just before your close body tag. -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </body>
</html>