-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (97 loc) · 4.58 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Todo Tones</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/med-large.css">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.4.9/Tone.js"></script>-->
<!-- In that version, Tone.Loop is not a function! -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.4.10/Tone.min.js"></script>
<!-- <script src="Tone.min.study.js"></script>-->
</head>
<body>
<div id="root"></div>
<!--Modal help section-->
<div id="about">
<a href="#root" class="close-modal-background"></a>
<div class="about-display">
<a href="#root" class="close-modal-x">X</a>
<div class="about-info">
<h1>Todo Tones</h1>
<br>
<p>
Todo Tones is an app for algorithmic music generation.
Pitches and other sound settings are controlled by the text of each Todo-item.
To get started, enter any of the 12 chromatic pitch-names (C, F#, Bb, etc.)
When playing, those pitches are selected at random.
</p>
<p>
Each "Todo" is editable by clicking. ('Enter' starts a new line,
so use 'Tab' or click elsewhere to finish.)
Default settings are used if they are not specified.
Text entry is case-insensitive. Some formatting (such as '<>', or '{}')
is applied for clarity (but you don't need to use it).
</p>
<p><u>SOUND SETTINGS</u>:</p>
<ul>
<li> "lo": The low range of the set of pitches. Minimum is C1.</li>
<li>"hi": The high range of the set of pitches. Maximum is C8.</li>
<li>"t": The tempo of payback, in beats-per-minute.</li>
<li>"%": The chance in percent that a note will be played each beat ("00" is 100%).</li>
<li>"n": The duration in seconds that each note is held.</li>
<li>"pt": The time in seconds that each Todo plays before waiting.</li>
<li>"wt": The wait-time in seconds before re-playing or moving on to the next Todo.</li>
<!-- <br><br>-->
<li>
"saw / sin / squ / tri": There are four synthesizers, each with a different waveform
(sawtooth, sine, square, triangle). If more than one waveform is chosen,
one is picked at random to play each note - with longer note durations,
this produces a faux-counterpoint effect.<br>
</li>
<li>
"mono / poly": Specifies whether the synthesizers are monophonic (one note at a time)
or polyphonic (able to play multiple notes.) Poly-synths can produce a nice sustain
effect with one wave-type, but get muddy quickly with multiple wave-types.<br>
</li>
<li>
"p": Portamento, the "bend" time between each note in seconds. Only applies to mono-synths.<br>
</li>
<li>
"a / d / s / r": The sound "<a href="https://en.wikipedia.org/wiki/Envelope_(music)">envelope</a>"
(attack, decay, sustain, release). Timing in seconds. Note that a long attack time and short duration
will result in notes too quiet to hear.
</li>
</ul>
<br><br>
<p><u>PLAY MODES</u></p>
<p>
There are four play modes: On "Stay", the currently playing Todo will repeat after its wait time.
On "Loop", each Todo is played in order until the app is stopped, returning to the beginning of the list.
On "Once", the app automatically stops after the list has been played through once.
"Random" picks a new Todo each time until the app is stopped.
</p>
<br><br>
<p>Creative Commons 2019 Gregory N. Tippett</p>
<p><a href="https://gntsketches.com" target="_blank">www.gntsketches.com</a>
<p>on <a href="https://www.youtube.com/channel/UCsewkoqCYikz9Iy3fN4S9BA" target="_blank">Youtube</a>
<p>on <a href="https://github.com/gntsketches/" target="_blank">Github</a>
<p>
</p>
</div>
</div>
</div>
<script src="js/helpers.js"></script>
<script src="js/constants.js"></script>
<script src="js/Todo.js"></script>
<script src="js/Model.js"></script>
<!-- <script src="js/Model_prev.js"></script>-->
<script src="js/View.js"></script>
<script src="js/Audio.js"></script>
<script src="js/Connector.js"></script>
<script src="js/App.js"></script>
</body>
</html>