-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
149 lines (136 loc) · 7.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=922">
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="app.css">
<script src="app.js"></script>
<title>HarmSyn - Harmonic Synthesizer</title>
</head>
<body>
<script>
try {
eval("(async function() {})"); }
catch (e) {
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>HarmSyn - Harmonic Synthesizer</h1>
<h2>Analysis</h2>
<div class="functionCurveViewerFrame canvasFrame">
<canvas id="inputSignalViewer" class="functionCurveViewer" tabindex="-1"></canvas>
</div>
<div class="actionButtons">
<button id="loadAudioFileButton">Load audio file</button>
<button id="playInputButton">Play</button>
</div>
<div class="parmBlock">
<div class="parmLine">
<label class="w" for="startFrequency" title="Start value for the fundamental frequency F0. If not specified, pitch detection is used.">Start freq. [Hz]:</label>
<input class="w" id="startFrequency" type="number" step="any" placeholder="(auto)">
<label class="wg" for="startFrequencyMin" title="Minimal value for the automatic start frequency.">Start freq. min. [Hz]:</label>
<input class="w" id="startFrequencyMin" type="number" step="any" required>
<label class="wg" for="startFrequencyMax" title="Maximum value for automatic startFrequency.">Start freq. max. [Hz]:</label>
<input class="w" id="startFrequencyMax" type="number" step="any" required>
</div>
<div class="parmLine">
<label class="w" for="trackingStartPos" title="Start position for frequency tracking. Automatically determined if not specified. Tracking proceeds from this position in both directions.">Tracking st. pos. [s]:</label>
<input class="w" id="trackingStartPos" type="number" step="any" placeholder="(auto)">
<label class="wg" for="trackingStartLevel" title="Minimal signal level for automatically finding the start position for frequency tracking. Only used when trackingStartPos is not specified.">Tracking st. lvl [dB]:</label>
<input class="w" id="trackingStartLevel" type="number" step="any" required>
<label class="wg" for="trackingInterval" title="Step size for the tracking algorithm.">Tracking interval [ms]:</label>
<input class="w" id="trackingInterval" type="number" step="any" required>
</div>
<div class="parmLine">
<label class="w" for="maxFrequencyDerivative" title="Maximum relative frequency derivative per second.">Max. freq. deriv. [/s]:</label>
<input class="w" id="maxFrequencyDerivative" type="number" step="any" required>
<label class="wg" for="minTrackingAmplitude" title="Minimum tracking amplitude. Harmonics with a lower amplitude are ignored for frequency tracking.">Min. trk. ampl. [dB]:</label>
<input class="w" id="minTrackingAmplitude" type="number" step="any" required>
</div>
<div class="parmLine">
<label class="w" for="harmonics" title="Number of harmonic frequencies to track.">Harmonics:</label>
<input class="w" id="harmonics" type="number" min="1" required>
<label class="wg" for="fCutoff" title="Upper frequency limit for the harmonics.">Cutoff freq. [Hz]:</label>
<input class="w" id="fCutoff" type="number" step="any" required>
<label class="wg" for="shiftFactor" title="Shift factor, relative to the wavelength of the frequency. Used for measuring the phase delta.">Shift factor:</label>
<input class="w" id="shiftFactor" type="number" step="any" required>
</div>
<div class="parmLine">
<label class="w" for="trackingRelWindowWidth" title="Window width for frequency tracking, relative to F0 wavelength.">Trk. rel. win. width:</label>
<input class="w" id="trackingRelWindowWidth" type="number" step="any" required>
<label class="wg" for="trackingWindowFunctionId" title="Window function for computing the instantaneous frequencies during tracking.">Trk. window func.:</label>
<select class="w" id="trackingWindowFunctionId"></select>
<label class="wg" for="interpolationInterval" title="Interpolation interval as a multiple of the tracking interval.">Interpolation int.:</label>
<input class="w" id="interpolationInterval" type="number" step="any" required>
</div>
<div class="parmLine">
<label class="w" for="ampRelWindowWidth" title="Window width relative to F0 wavelength for computing the harmonic amplitudes.">Amp. rel. win. width:</label>
<input class="w" id="ampRelWindowWidth" type="number" step="any" required>
<label class="wg" for="ampWindowFunctionId" title="Window function for computing the harmonic amplitudes.">Amp. window func.:</label>
<select class="w" id="ampWindowFunctionId"></select>
<label class="wg" for="minRelevantAmplitude" title="Minimum relevant amplitude. Lower amplitude values are omitted in the text output file.">Min. amplitude [dB]</label>
<input class="w" id="minRelevantAmplitude" type="number" step="any" required value="-70">
</div>
</div>
<div class="actionButtons">
<button id="analyzeButton">Analyze</button>
<button id="saveTextFileButton">Save text file</button>
</div>
<h2>Synthesis</h2>
<div id="synParms">
<div class="parmLine">
<label class="w" for="interpolationMethod">Interpolation:</label>
<select class="w" id="interpolationMethod">
<option value="akima">Akima</option>
<option value="cubic">Cubic</option>
<option value="linear">Linear</option>
<option value="nearestNeighbor">Nearest neighbor</option>
</select>
<label class="wg" for="f0Multiplier" title="Multiplicative factor for the fundamental frequency.">F0 multiplier:</label>
<input class="w" id="f0Multiplier" type="number" step="any" required>
<label class="wg" for="outputSampleRate">Sample rate [Hz]:</label>
<input class="w" id="outputSampleRate" type="number" step="any" required>
</div>
<div class="parmLine">
<label class="w" title="The checkboxes can be used to filter individual harmonics.">Harmonics:</label>
<div id="harmonicCheckboxes"></div>
<div id="enableAllHarmonicsButton" class="pseudoButton">all</div>
<div id="disableAllHarmonicsButton" class="pseudoButton">none</div>
</div>
</div>
<div class="actionButtons">
<button id="synthesizeButton">Synthesize</button>
<button id="playOutputButton">Play</button>
<button id="saveWavFileButton">Save WAV file</button>
<button id="loadTextFileButton">Load text file</button>
</div>
<div class="resultBlock">
<div class="title">Signal</div>
<div class="functionCurveViewerFrame canvasFrame">
<canvas id="outputSignalViewer" class="functionCurveViewer" tabindex="-1"></canvas>
</div>
</div>
<div class="resultBlock">
<div class="title">Frequency</div>
<div class="functionCurveViewerFrame canvasFrame">
<canvas id="frequencyViewer" class="functionCurveViewer" tabindex="-1"></canvas>
</div>
</div>
<div class="resultBlock">
<div class="title">Amplitudes over frequency</div>
<div class="functionCurveViewerFrame canvasFrame">
<canvas id="amplOverFrequencyViewer" class="functionCurveViewer" tabindex="-1"></canvas>
</div>
</div>
<div class="resultBlock">
<div class="title">Amplitudes over time</div>
<div class="functionCurveViewerFrame canvasFrame">
<canvas id="amplitudesViewer" class="functionCurveViewer" tabindex="-1"></canvas>
</div>
</div>
<div class="footer">
Source code: <a href="https://github.com/chdh/harm-syn">Github</a><br>
Command line version: <a href="harmsyn.js">harmsyn.js</a> (<a href="https://nodejs.org">Node</a>-based)
</div>
</body>
</html>