dead-simple-synth/index.html at main · dbrian57/dead-simple-synth · 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
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
  <head>
    <title>Dead Simple Synth</title>
    <link rel="shortcut icon" href="#">
    <link rel="stylesheet" href="/src/styles/style.css">
    <!-- This is here to avoid a testing environment error for favicons.ico. REMOVE BEFORE PRODUCTION-->
    <script type="module" src="/src/scripts/synth.mjs"></script>
  </head>
  <body>
    <div id="keyboard">
      <h1 id="synthHeader">dead simple synth</h1>
      <div id="synthBg">
        <img src="/src/images/glowing-eyes.png" id="glowing-eyes"/>
        <img src="/src/images/synth.png" />
        <div id="synthScreen"></div>
        <button id="playBack"></button>
        <button id="clear"></button>
        <table id="playClear">
          <tr>
            <td class="playClearSpace" id="playCopy">PLAY BACK</td>
          </tr>
          <tr>
            <td class="playClearSpace" id="clearCopy"></td>
          </tr>
          <tr>
            <td class="playClearSpace" id="clearCopy"></td>
          </tr>
          <tr>
            <td class="playClearSpace" id="clearCopy">CLEAR</td>
          </tr>
        </table>
        <table id="synthOptions">
          <tr>
            <td class="synthOptionsSpace"><button class="synthButton" id="Poly"></button></td>
            <td class="synthOptionsSpace">poly synth</td>
          </tr>
          <tr>
            <td class="synthOptionsSpace"><button class="synthButton" id="Duo"></button></td>
            <td class="synthOptionsSpace">duo synth</td>
          </tr>
          <tr>
            <td class="synthOptionsSpace"><button class="synthButton" id="Metal"></button></td>
            <td class="synthOptionsSpace">metal synth</td>
          </tr>
          <tr>
            <td class="synthOptionsSpace"><button class="synthButton" id="FM"></button></td>
            <td class="synthOptionsSpace">FM synth</td>
          </tr>

        <div id="keyboard">
          <table id="naturals">
            <tr>
              <!-- First Octave -->
              <td class="naturalSpace"><button class="natural" id="C3"></button></td>
              <td class="naturalSpace"><button class="natural" id="D3"></button></td>
              <td class="naturalSpace"><button class="natural" id="E3"></button></td>
              <td class="naturalSpace"><button class="natural" id="F3"></button></td>
              <td class="naturalSpace"><button class="natural" id="G3"></button></td>
              <td class="naturalSpace"><button class="natural" id="A3"></button></td>
              <td class="naturalSpace"><button class="natural" id="B3"></button></td>
              <!-- Second Octave -->
              <td class="naturalSpace"><button class="natural" id="C4"></button></td>
              <td class="naturalSpace"><button class="natural" id="D4"></button></td>
              <td class="naturalSpace"><button class="natural" id="E4"></button></td>
              <td class="naturalSpace"><button class="natural" id="F4"></button></td>
              <td class="naturalSpace"><button class="natural" id="G4"></button></td>
              <td class="naturalSpace"><button class="natural" id="A4"></button></td>
              <td class="naturalSpace"><button class="natural" id="B4"></button></td>
              <!-- Third Octave -->
              <td class="naturalSpace"><button class="natural" id="C5"></button></td>
              <td class="naturalSpace"><button class="natural" id="D5"></button></td>
              <td class="naturalSpace"><button class="natural" id="E5"></button></td>
              <td class="naturalSpace"><button class="natural" id="F5"></button></td>
              <td class="naturalSpace"><button class="natural" id="G5"></button></td>
              <td class="naturalSpace"><button class="natural" id="A5"></button></td>
              <td class="naturalSpace"><button class="natural" id="B5"></button></td>
        </table>
        <table id="accidentals">
          <tr>
            <!-- First Octave -->
            <td class="accidentalSpace"><button class="accidental" id="C#3"></button></td>
            <td class="accidentalSpace"><button class="accidental" id="D#3"></button></td>
            <td class="accidentalSpace"></td>
            <td class="accidentalSpace"><button class="accidental" id="F#3"></button></td>
            <td class="accidentalSpace"><button class="accidental" id="G#3"></button></td>
            <td class="accidentalSpace"><button class="accidental" id="A#3"></button></td>
            <td class="accidentalSpace"></td>
            <!-- second octave -->
            <td class="accidentalSpace"><button class="accidental" id="C#4"></button></td>
            <td class="accidentalSpace"><button class="accidental" id="D#4"></button></td>
            <td class="accidentalSpace"></td>
            <td class="accidentalSpace"><button class="accidental" id="F#4"></button></td>
            <td class="accidentalSpace"><button class="accidental" id="G#4"></button></td>
            <td class="accidentalSpace"><button class="accidental" id="A#4"></button></td>
            <td class="accidentalSpace"></td>
            <!-- third octave -->
            <td class="accidentalSpace"><button class="accidental" id="C#5"></button></td>
            <td class="accidentalSpace"><button class="accidental" id="D#5"></button></td>
            <td class="accidentalSpace"></td>
            <td class="accidentalSpace"><button class="accidental" id="F#5"></button></td>
            <td class="accidentalSpace"><button class="accidental" id="G#5"></button></td>
            <td class="accidentalSpace"><button class="accidental" id="A#5"></button></td>
            <td class="accidentalSpace"></td>
          </tr>
      </div>
      </div>
    </keyboard>
    <form id="saveSong">
      <table id="tableForm">
        <tr>
          <td class="tableFormCell"><label class="formElement" for="username">Username:</label> <input type="text" name="username" id="username"  placeholder="Your name" required></td>
          <td class="tableFormCell"><label class="formElement" for="songTitle">Song Title:</label> <input type="text" name="songTitle" id="songTitle" placeholder="Your song's title" required></td>
          <td class="tableFormCell"><input class="formElement" id="submitSong" type="submit" value="Save Song"></td>
          <td class="tableFormCell"><button onclick="location.href='saved-songs.html'" type="button">View Saved Songs</button></td>
          <td class="tableFormCell" id="yourSongSaved"></td>
        </tr>
      </table>
      </form>
    <div class="explainer" id="how-to">
      <h2>How to Play</h2>
      <p><strong>dead simple synth</strong> is a simple synthesizer that generates audio using
        the very excellent <a href="https://tonejs.github.io/">tone.js web audio framework</a>. </p>

        <p>To begin playing, click on any of the keys on the keyboard. The synth captures the notes
        on its screen. If you add more notes than the screen can display, use the scroll bar on the
        the side of the screen to review notes outside of the display area.</p>

        <p>Once you have played your notes, play the song you've created by clicking the
        <strong>PLAY BACK</strong> button.</p>

        <p>You can delete the song at anytime by clicking the <strong>CLEAR</strong> button.</p>

        <p>You can also select different types of synths: <strong>poly</strong>, <strong>duo</strong>,
        <strong>metal</strong>, and <strong>FM</strong>.
    </div>
    <div class="explainer" id="aboutNotes">
      <h2>About the Notes on the Screen</h2>

      <p>When you click on a key, the synth displays the corresponding note on its screen with a number beside it,
        such as <strong>C4</strong>. The number beside each note specifies which octave, or pitch, the note was played in. A
        standard piano contains 77 keys devided into seven octaves. <strong>dead simple synth</strong> contains
        three octaves from the standard piano layout: three, four, and five.

      <p>For example, the fourth black key (known as a "sharp" or "accidental") from the left is a G sharp (#) note played
        played in the third octive.</p>
    </div>

    <footer>
      <table id="footer">
        <tr>
          <td class="footerSpace"><a class="footerLinks" href="https://deadsimplesynth.com">Synth</a></td>
          <td class="footerSpace"><a class="footerLinks" href="saved-songs.html">Saved Songs</a></td>
          <td class="footerSpace"><a class="footerLinks" href="project-requirements.html">Project Requirements</a></td>
          <td class="footerSpace"><a class="footerLinks" href="aboutme.html">About Me</a></td>
        </tr>
      </table>
    </footer>
  </body>
</html>