webAudio/howto.html at master · Fishbite/webAudio · 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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!-- /* // ****** LICENSE NOTICE ****** \\
      COPYRIGHT: 2020 Stuart Peel
      This PROGRAM is distributed under the terms of the:
      AGPL-3.0-or-later
*/ -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Music Machine</title>
    <link rel="stylesheet" href="./styles/homeV2.css" />
    <script src="https://kit.fontawesome.com/3d17bee77c.js" crossorigin="anonymous"></script>
  </head>

  <body>
    <div class="headWrap">
      <header>
        <h2 class="title">Digital Audio Synth</h2>
      </header>

      <!-- Navigation -->
      <nav>
        <div class="linkWrap">
          <a href="./index.html">Home</a>

          <a href="./dasynthV3.html">DA Synth App</a>

          <a href="./testPlaySelectedFile.html">Test</a>
        </div>
      </nav>
    </div>

    <main>
      <div class="mainWrap">
        <h3>How Do I Use This App?</h3>
        <p><b>turn your volume down</b> and plug in your earphones</p>
        <p>
          select a voice from the drop-down list play a tune using the keyboard
          keys <b>Q</b> through <b>P</b>
        </p>
        <p>
          experiment with the <b>wave forms</b> (sine, triangle, square,
          sawtooth) <b>decay</b> (in half second steps) and
          <b>octave</b> settings for each voice, you will hear dramatic changes.
          perhaps we will change the default start settings of each voice at a
          later date
        </p>
        <p>when you've put a little tune together, it's time to record it!</p>
        <h4>Start Recording</h4>
        <p>press <b>ALT+Z</b></p>
        <p>
          you will hear a single beat of the kick drum and the
          <b>"Ready To Record"</b> button will show <b>"Stop Recording"</b>
        </p>

        <h4>Play That Tune</h4>
        <p>play the little tune that you want to record</p>

        <h4>Stop Recording</h4>
        <p>click the <b>"Stop Recording"</b> button when done</p>

        <h4 id="testRecording">Test Your Recording</h4>
        <p>
          hit the play button on the media recorder to listen to your recording
        </p>

        <h4>Play Continuously</h4>
        <p>
          right click the media recorder and select "Loop" from the to repeat
          continuously
        </p>

        <h4>Save Your Recording</h4>
        <p>
          if you are happy! Right click the media player and save the music file
          to somewhere on your computer. You can at this point load the file
          into music editing software, such as
          <a href="https://www.audacityteam.org/download/" target="_blank"
            ><b>Audacity</b></a
          >
          to trim the start and end points
        </p>

        <h4>Play Your Saved Recording</h4>
        <p>
          click the "Browse" button to select the file you have just saved to
          disc
        </p>
        <p>play the selected file by clicking key <b>A</b></p>
        <p>the music will loop continuously</p>

        <h4>Change The Playback Volume</h4>
        we added a slider control so that you can balance the volume of the
        recording with that of another voice or instrument</p>

        <p>why?</p>

        <p>
          we found that when you come to play additional music/beats on top of
          your recording, the other instrument/s may be too loud or quiet, drums
          drown out the music for example
        </p>

        <h4>Try Out The Drums Etc.</h4>
        <p>
          try out the drums, keys <b>Z, X, C, V</b> and <b>M.</b> Key
          <b>K</b> plays a hi-hat, key <b>L</b> plays a triangle
        </p>

        <h4>Stop Playing Your Recording</h4>
        <p>click key <b>D</b> to stop playing the selected file</p>

        <h4>Record More Stuff</h4>
        <p>
          now! If you are all happy! You can start recording additional tunes
          and stuff on top of the recording you just made
        </p>
        <p>when you are ready, click <b>ALT+Z</b> to start recording again</p>
        <p>
          click key A to start playing the recording back and play some drum
          beats, or additional music
        </p>

        <h4>Play Back The Composition</h4>
        <p>
          go back to <a href="#testRecording"><b>Test Your Recording</b></a> above and don't forget to save
          it to your computer
        </p>

        <h4>Samples</h4>
        <!-- need to pre-load audio files - Of Course!!! -->
        <p>if you want to hear the recorded samples demonstrating how you can build a tune, please download the samples first</p>
        <ul >
          <li class="pblist">download <span id="loadingSpan"> =></span> <i id="downloadBtn" class="fa-solid fa-download"></i></li>
          <li class="pblist">first tune recorded <div class="player"><i id="playBtn00" class="fa fa-solid fa fa-play playBtn"></i></div></li>

            <li class="pblist">add a another tune <div class="player"><i id="playBtn01" class="fa fa-solid fa fa-play playBtn"></i></div></li>

            <li class="pblist">add a third tune! <div class="player"><i id="playBtn02" class="fa fa-solid fa fa-play playBtn"></i></div></li>

            <li class="pblist">add drums <div class="player"><i id="playBtn03" class="fa fa-solid fa fa-play playBtn"></i></div></li>

            <li class="pblist">add some bass tune <div class="player"><i id="playBtn04" class="fa fa-solid fa fa-play playBtn"></i></div></li>
        </ul>

        <h4>how did we do this?</h4>
        <p>well, we just recorded some notes played on the keyboard, saved our recording to the computer, then played it back (the program automatically loops the tune continuously)</p>
        <p>OK! CONFESSION! we trimmed the original recording in <a href="https://www.audacityteam.org/download/" target="_blank"
          ><b>Audacity</b></a> so that it played back in a near-perfect loop</p>
        <p>then, when we were happy with our first tune we hit <b>ALT+Z</b> to start recording again, then, we played the same tune / notes as in the first tune, just timed slightly off from the first (that's where the 'echoee' sound comes from, however, it is the same voice used for the first recording) then we hit the <b>STOP RECORDING</b> button and saved the result to our computer, after checking it out first of course!</p>
        <p>we then selected another voice from the drop down list and played some more notes along with our mix whilst recording</p>
        <p>this process was repeated adding drums and then some bass notes (all of two!) yep! the bass notes were created using another voice from the list</p>
        <p></p>

        <button class="btn">
          <a href="./dasynthV3.html">Enter Da Synth Dude App</a>
        </button>
      </div>
    </main>

    <footer>
      <div class="footer">
        <p>
          Digital Audio Synth, an open source project maintained: fishbite 2022
        </p>
        <p>
          Source code available here:
          <a href="https://github.com/Fishbite/webAudio" target="_blank"
            >GitHub WebAudio Repo</a
          >
        </p>
      </div>
    </footer>

    <!-- <script src="./src/AudioContextMonkeyPatch.js"></script> -->
    <script src="./src/actx.js"></script>
    <script src="./src/howto.js" type="module"></script>

  </body>
</html>