-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
169 lines (159 loc) · 11 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
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
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="app.css">
<script src="app.js"></script>
<title>KlattSyn - Klatt Formant Synthesizer</title>
</head>
<body class="klattSynApp">
<script>
if (!window.Promise) {
document.write('<p style="color: red; font-size: 20px; font-weight: bold;">Sorry, your web browser is outdated and cannot run this application!</p>'); }
</script>
<h1>KlattSyn - Klatt Formant Synthesizer</h1>
<div class="parmBlock" id="inputParms">
<div class="parmLine">
<label class="width1g" for="glottalSourceType">Glottal source:</label>
<select class="width1" id="glottalSourceType">
<option value="impulsive">Impulsive</option>
<option value="natural">Natural</option>
<option value="noise">White noise</option>
</select>
<label class="width1g gap1" for="sampleRate">Sample rate [Hz]:</label>
<input class="width1" id="sampleRate" type="number" step="any" required>
<label class="width1g gap1" for="fadingDuration" title="Duration of fade-in and fade-out.">Fading [s]:</label>
<input class="width1" id="fadingDuration" type="number" step="any" min="0" required>
<label class="width1g gap1" for="windowFunction" title="Window function for displaying the spectrum.">Window function:</label>
<select class="width1" id="windowFunction"></select>
</div>
<div class="parmHeading2">Frame</div>
<div class="parmLine">
<label class="width1g" for="duration">Duration [s]:</label>
<input class="width1" id="duration" type="number" step="any" min="0" required>
<label class="width1g gap1" for="f0" title="Fundamental frequency.">F0 [Hz]:</label>
<input class="width1" id="f0" type="number" step="any" min="0" required>
<label class="width1g gap1" for="flutterLevel" title="F0 flutter level. A value between 0 and normally 1.">Flutter:</label>
<input class="width1" id="flutterLevel" type="number" step="any" min="0" required>
<label class="width1g gap1" for="openPhaseRatio" title="Open phase ratio. Relative length of the open phase of the glottis. A value between 0 and 1.">Open phase:</label>
<input class="width1" id="openPhaseRatio" type="number" step="any" min="0" max="1" required>
</div>
<div class="parmLine">
<label class="width1g" for="breathinessDb" title="Breathiness in voicing (turbulence) in dB. Positive to amplify, negative to attenuate.">Breathiness [dB]:</label>
<input class="width1" id="breathinessDb" type="number" step="any" required>
<label class="width1g gap1" for="tiltDb" title="Spectral tilt for glottal source in dB. A positive number that specifies the attenuation at 3 kHz. 0 = no tilt.">Tilt [dB]:</label>
<input class="width1" id="tiltDb" type="number" step="any" min="0" required>
<label class="width1g gap1" for="gainDb" title="Overall gain (output gain) in dB. Positive to amplify or negative to attenuate the signal, empty for automatic gain (AGC).">Gain [dB]:</label>
<input class="width1" id="gainDb" type="number" step="any" placeholder="(auto)">
<label class="width1g gap1" for="agcRmsLevel" title="RMS level for automatic gain control (AGC), only relevant when the gain parameter field is empty.">AGC RMS level:</label>
<input class="width1" id="agcRmsLevel" type="number" step="any" min="0" required>
</div>
<div class="parmLine">
<label class="width1g" title="Formant frequencies">Formant freq. [Hz]</label>
<label class="widthF" for="f1Freq" title="Oral formant 1 frequency in Hz.">F1:</label>
<input class="widthF" id="f1Freq" type="number" step="any" min="0">
<label class="widthF gap1" for="f2Freq" title="Oral formant 2 frequency in Hz.">F2:</label>
<input class="widthF" id="f2Freq" type="number" step="any" min="0">
<label class="widthF gap1" for="f3Freq" title="Oral formant 3 frequency in Hz.">F3:</label>
<input class="widthF" id="f3Freq" type="number" step="any" min="0">
<label class="widthF gap1" for="f4Freq" title="Oral formant 4 frequency in Hz.">F4:</label>
<input class="widthF" id="f4Freq" type="number" step="any" min="0">
<label class="widthF gap1" for="f5Freq" title="Oral formant 5 frequency in Hz.">F5:</label>
<input class="widthF" id="f5Freq" type="number" step="any" min="0">
<label class="widthF gap1" for="f6Freq" title="Oral formant 6 frequency in Hz.">F6:</label>
<input class="widthF" id="f6Freq" type="number" step="any" min="0">
<label class="widthF gap1" for="nasalFormantFreq" title="Nasal formant frequency in Hz.">Nasal:</label>
<input class="widthF" id="nasalFormantFreq" type="number" step="any" min="0">
</div>
<div class="parmLine">
<label class="width1g" title="Formant bandwidths">Formant bw. [Hz]</label>
<label class="widthF" for="f1Bw" title="Oral formant 1 bandwidth in Hz.">B1:</label>
<input class="widthF" id="f1Bw" type="number" step="any" min="0">
<label class="widthF gap1" for="f2Bw" title="Oral formant 2 bandwidth in Hz.">B2:</label>
<input class="widthF" id="f2Bw" type="number" step="any" min="0">
<label class="widthF gap1" for="f3Bw" title="Oral formant 3 bandwidth in Hz.">B3:</label>
<input class="widthF" id="f3Bw" type="number" step="any" min="0">
<label class="widthF gap1" for="f4Bw" title="Oral formant 4 bandwidth in Hz.">B4:</label>
<input class="widthF" id="f4Bw" type="number" step="any" min="0">
<label class="widthF gap1" for="f5Bw" title="Oral formant 5 bandwidth in Hz.">B5:</label>
<input class="widthF" id="f5Bw" type="number" step="any" min="0">
<label class="widthF gap1" for="f6Bw" title="Oral formant 6 bandwidth in Hz.">B6:</label>
<input class="widthF" id="f6Bw" type="number" step="any" min="0">
<label class="widthF gap1" for="nasalFormantBw" title="Nasal formant bandwidth in Hz.">Nasal:</label>
<input class="widthF" id="nasalFormantBw" type="number" step="any" min="0">
</div>
<div class="parmHeading2">Cascade branch</div>
<div class="parmLine">
<label class="width1g" for="cascadeEnabled" title="Enable the cascade branch of the synthesizer.">Cascade enable:</label>
<div class="width1"><input id="cascadeEnabled" type="checkbox"></div>
<label class="width1g gap1" for="cascadeVoicingDb" title="Voicing amplitude for cascade branch in dB. Positive to amplify or negative to attenuate.">Voicing amp. [dB]:</label>
<input class="width1" id="cascadeVoicingDb" type="number" step="any" required>
<label class="width1g gap1" for="cascadeAspirationDb" title="Aspiration (glottis noise) for cascade branch in dB. Positive to amplify, negative to attenuate.">Aspiration [dB]:</label>
<input class="width1" id="cascadeAspirationDb" type="number" step="any" required>
<label class="width1g gap1" for="cascadeAspirationMod" title="Amplitude modulation factor for aspiration in cascade branch, 0 = no modulation, 1 = maximum modulation.">Aspiration mod.:</label>
<input class="width1" id="cascadeAspirationMod" type="number" step="any" min="0" max="1" required>
</div>
<div class="parmLine">
<label class="width1g" for="nasalAntiformantFreq" title="Nasal antiformant frequency in Hz.">Nasal anti freq. [Hz]:</label>
<input class="width1" id="nasalAntiformantFreq" type="number" step="any" min="0">
<label class="width1g gap1" for="nasalAntiformantBw" title="Nasal antiformant bandwidth in Hz.">Nasal anti bw. [Hz]:</label>
<input class="width1" id="nasalAntiformantBw" type="number" step="any" min="0">
</div>
<div class="parmHeading2">Parallel branch</div>
<div class="parmLine">
<label class="width1g" for="parallelEnabled" title="Enable the parallel branch of the synthesizer.">Parallel enable:</label>
<div class="width1"><input id="parallelEnabled" type="checkbox"></div>
<label class="width1g gap1" for="parallelVoicingDb" title="Voicing amplitude for parallel branch in dB. Positive to amplify or negative to attenuate.">Voicing amp. [dB]:</label>
<input class="width1" id="parallelVoicingDb" type="number" step="any" required>
<label class="width1g gap1" for="parallelAspirationDb" title="Aspiration (glottis noise) for parallel branch in dB. Positive to amplify, negative to attenuate.">Aspiration [dB]:</label>
<input class="width1" id="parallelAspirationDb" type="number" step="any" required>
<label class="width1g gap1" for="parallelAspirationMod" title="Amplitude modulation factor for aspiration in parallel branch, 0 = no modulation, 1 = maximum modulation.">Aspiration mod.:</label>
<input class="width1" id="parallelAspirationMod" type="number" step="any" min="0" max="1" required>
</div>
<div class="parmLine">
<label class="width1g" for="fricationDb" title="Frication noise level in dB.">Frication [dB]:</label>
<input class="width1" id="fricationDb" type="number" step="any">
<label class="width1g gap1" for="fricationMod" title="Amplitude modulation factor for frication noise in parallel branch, 0 = no modulation, 1 = maximum modulation.">Frication mod.:</label>
<input class="width1" id="fricationMod" type="number" min="0" max="1" step="any">
<label class="width1g gap1" for="parallelBypassDb" title="Parallel bypass level in dB, used to bypass differentiated glottal and frication signals around resonators F2 to F6.">Bypass [dB]:</label>
<input class="width1" id="parallelBypassDb" type="number" step="any">
</div>
<div class="parmLine">
<label class="width1g">Formant levels [dB]</label>
<label class="widthF" for="f1Db" title="Oral formant 1 level in DB.">L1:</label>
<input class="widthF" id="f1Db" type="number" step="any">
<label class="widthF gap1" for="f2Db" title="Oral formant 2 level in DB.">L2:</label>
<input class="widthF" id="f2Db" type="number" step="any">
<label class="widthF gap1" for="f3Db" title="Oral formant 3 level in DB.">L3:</label>
<input class="widthF" id="f3Db" type="number" step="any">
<label class="widthF gap1" for="f4Db" title="Oral formant 4 level in DB.">L4:</label>
<input class="widthF" id="f4Db" type="number" step="any">
<label class="widthF gap1" for="f5Db" title="Oral formant 5 level in DB.">L5:</label>
<input class="widthF" id="f5Db" type="number" step="any">
<label class="widthF gap1" for="f6Db" title="Oral formant 6 level in DB.">L6:</label>
<input class="widthF" id="f6Db" type="number" step="any">
<label class="widthF gap1" for="nasalFormantDb" title="Nasal formant level in DB.">Nasal:</label>
<input class="widthF" id="nasalFormantDb" type="number" step="any">
</div>
</div>
<div class="actionButtons">
<button id="synthesizeButton">Synthesize</button>
<button id="playButton">Play</button>
<button id="wavFileButton">WAV file</button>
<button id="resetButton">Reset</button>
<label class="width1g" for="reference" title="An arbitrary text which will be stored in the URL and used in the name of the WAV file.">Reference:</label>
<input class="width3" id="reference" type="text">
</div>
<div class="resultBlock">
<div class="title">Signal</div>
<canvas id="signalViewer" tabindex="-1"></canvas>
</div>
<div class="resultBlock">
<div class="title">Spectrum</div>
<canvas id="spectrumViewer" tabindex="-1"></canvas>
</div>
<div class="footer">
Source code on GitHub: <a href="https://github.com/chdh/klatt-syn">KlattSyn</a>, <a href="https://github.com/chdh/klatt-syn-app">KlattSynApp</a>
</div>
</body>
</html>