-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
211 lines (208 loc) · 11.2 KB
/
Copy pathindex.html
File metadata and controls
211 lines (208 loc) · 11.2 KB
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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html>
<head>
<title>Musical Harmony Analysis Tool</title>
<meta name="description"
content="An interactive tool that lets you explore the interplay between harmonic series and tuning systems in terms of dissonance and scale alignment errors.">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$']]
}
};
</script>
<link rel="stylesheet" href="style.css?v=2025.07.29-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="container">
<div class="graph">
<div class="graph-header">
<div class="enlarge-icon" title="Enlarge"><i class="fas fa-search-plus"></i></div>
<h3>Harmonic Series</h3>
</div>
<div id="harmonics"></div>
<div class="edo-input-container">
</div>
</div>
<div class="graph">
<div class="graph-header">
<div class="enlarge-icon" title="Enlarge"><i class="fas fa-search-plus"></i></div>
<h3>Dissonance Graph</h3>
</div>
<div id="dissonance"></div>
<div class="edo-input-container">
<label for="base-frequency">Base frequency (Hz): </label>
<input type="number" id="base-frequency" min="20" max="20000" step="0.1" value="220">
</div>
</div>
<div class="graph">
<div class="graph-header">
<div class="enlarge-icon" title="Enlarge"><i class="fas fa-search-plus"></i></div>
<h3>EDO Alignment Error</h3>
</div>
<div id="edo-error"></div>
<div class="edo-input-container">
<label for="min-edo-input">Min EDO: </label>
<input type="number" id="min-edo-input" min="1" max="10000" value="3">
</div>
<div class="edo-input-container">
<label for="max-edo-input">Max EDO: </label>
<input type="number" id="max-edo-input" min="1" max="10000" value="53">
</div>
</div>
<div class="graph">
<div class="graph-header">
<div class="enlarge-icon" title="Enlarge"><i class="fas fa-search-plus"></i></div>
<h3>Harmonic Circle</h3>
</div>
<div id="harmonic-circle"></div>
<div class="edo-input-container">
<label for="edo-input">EDO: </label>
<input type="number" id="edo-input" min="5" max="100" value="12">
</div>
</div>
</div>
<div class="scroll-indicator">
<i class="fas fa-chevron-down"></i>
</div>
<div class="description">
<h1>Musical Harmony Analysis Tool</h1>
<div class="desc-overview">
<p class="desc-intro">This interactive tool allows you to explore the relationship between harmonic series
and tuning systems in terms of dissonance and scale alignment errors.</p>
<p class="desc-intro">Visualize and experiment with harmonics, dissonances, EDO alignment errors, and more,
with real-time audio and graphical feedback.</p>
</div>
<div class="desc-features">
<h2><i class="fas fa-sliders-h"></i> Features</h2>
<div class="feature-card">
<h3>Harmonic Series</h3>
<p>Drag the blue bars to adjust the strength of each harmonic. These changes affect how the sound will
be produced.</p>
</div>
<div class="feature-card">
<h3>Dissonance Graph</h3>
<p>Shows how pleasant or harsh two notes sound together at different intervals. Click anywhere on the
line to hear the sound. You can change the base note frequency below the graph.</p>
<div class="formula-block">
<span class="formula-label">The dissonance formula:</span>
<p>The dissonance graph is based on a model of an empirical Plomp-Levelt dissonance curve. Sethares
models it as a difference of the exponential functions:</p>
<div class="formula-math">$$d(x)=e^{-b_1 x} - e^{-b_2 x}$$</div>
<p>where $b_1$ and $b_2$ are constants that define the curve's shape ($b_1=3.5$ and $b_2=5.75$ are
the default values used in the model). The dissonance between two tones of frequencies $f_1$ and
$f_2$ and loudness $l_1$ and $l_2$, respectively, is given by:</p>
<div class="formula-math">
$$d(f_1,f_2,l_1,l_2)=l_{12}\left[e^{-b_1s(f_2-f_1)}-e^{-b_2s(f_2-f_1)}\right]$$</div>
<p>where:</p>
<ul>
<li>$f_1 < f_2$</li>
<li>$l_{12} = \min(l_1,l_2)$</li>
<li>$s = \frac{0.24}{0.0207 f_1+18.96}$</li>
</ul>
</div>
</div>
<div class="feature-card">
<h3>EDO Error Graph</h3>
<p>Displays how well different Equal Division of Octave (EDO) systems match our harmonic series.
Common
Western music uses 12-EDO. Click any point to see its representation in the circle.</p>
<div class="formula-block">
<span class="formula-label">Error formula:</span>
<div class="formula-math">$$e = \sqrt{\sum_{n=1}^{+\infty}a_{n} (x_{n} - [x_{n}])^2}$$</div>
<ul>
<li>$a_n$ is the <em>n</em>-th harmonic amplitude</li>
<li>$x_n$ is the pitch value (in "semitones"):
$\textrm{EDO} \times \left(\log_2 n \pmod{1}\right)$</li>
</ul>
</div>
</div>
<div class="feature-card">
<h3>Harmonic Circle</h3>
<p>Shows harmonics arranged in a circle, with colors indicating how well they match the selected EDO
system (<span style="color:#4daf4a;font-weight:bold;">green</span> — good match, <span
style="color:#e41a1c;font-weight:bold;">red</span> — poor match). <span
style="color:#1f77b4;font-weight:bold;">Blue</span> lines show the EDO divisions.</p>
<p>Click on the circle to hear the sound of the selected note/harmonic.</p>
</div>
</div>
<div class="desc-advanced">
<h2><i class="fas fa-tools"></i> Advanced editing</h2>
<div class="advanced-card">
<h3>Number of harmonics</h3>
<p>To set more harmonics than the default range, set the <code>harmonics</code> variable in the URL.
For
example, to set 80 harmonics, enter:</p>
<pre
class="code-block"><code><a href="https://edo.jakim.it/?harmonics=80" target="_blank" rel="noopener">https://edo.jakim.it/?harmonics=80</a></code></pre>
</div>
<div class="advanced-card">
<h3>Custom series</h3>
<p>If you want to provide non-standard (fractional) harmonics, or harmonics beyond the given range,
you
may use the console and edit the <code>harmonicSeries</code> variable directly. For example, you
can
add a single harmonic by:</p>
<pre class="code-block"><code>harmonicSeries[1.5] = 0.5;</code></pre>
<p>You can also provide the entire harmonic series as a dictionary:</p>
<pre
class="code-block"><code>harmonicSeries = {1: 1.0, 1.75: 0.25, 2.44: 0.1, 3: 0.05, 4.47: 0.02};</code></pre>
<p>Update all graphs by calling:</p>
<pre class="code-block"><code>updateAll();</code></pre>
<p>Finally, you can provide a custom series via a URL in the following format:</p>
<pre
class="code-block"><code><a href="https://edo.jakim.it/?1.0=1.0&1.75=0.25&2.44=0.1&3=0.05&4.47=0.02" target="_blank" rel="noopener">https://edo.jakim.it/?1.0=1.0&1.75=0.25&2.44=0.1&3=0.05&4.47=0.02</a></code></pre>
<p>where each harmonic is set by <code>harmonic=amplitude</code> pairs, joined by <code>&</code>.
</p>
</div>
<div class="advanced-card">
<h3>Custom scale</h3>
<p>You can examine non-standard scales. You can provide a custom scale as a series of frequency
ratios
separated by a comma:</p>
<pre
class="code-block"><code><a href="https://edo.jakim.it/?scale=1.0,1.2,1.4,1.6,1.8" target="_blank" rel="noopener">https://edo.jakim.it/?scale=1.0,1.2,1.4,1.6,1.8</a></code></pre>
<p>Since the error calculation method is counted in the number of tones, the formula for custom
scales
cease to make sense as it assumes that each interval is of the same length.</p>
<p>A distance-based formula is being used instead:</p>
<div class="formula-block">
<span class="formula-label">Error formula:</span>
<div class="formula-math">$$e = \sum_{n=1}^{+\infty}|S|\sqrt{a_n \min_{s\in S}\left(x_n -
s\right)^2}$$</div>
<ul>
<li>$S$ is the scale: a set composed of $\log_2$-values of the scale frequency ratios
(modulo 1)
</li>
<li>$x_n$ is the pitch value: $\log_2 n \pmod{1}$</li>
</ul>
</div>
</div>
</div>
<div class="desc-references">
<h2><i class="fas fa-book"></i> References</h2>
<ul class="references-list">
<li class="reference-item">
Plomp, R., & Levelt, W. J. M. (1965). <b>Tonal Consonance and Critical Bandwidth</b>. <i>Journal
of
the Acoustical Society of America, 38</i>(4), 548–560. <a
href="https://doi.org/10.1121/1.1909741" target="_blank"
rel="noopener">doi:10.1121/1.1909741</a>
</li>
<li class="reference-item">
Sethares, W. A. (2005). <b>Tuning, Timbre, Spectrum, Scale</b> (2nd ed.). Springer. <a
href="https://link.springer.com/book/10.1007/b138848" target="_blank" rel="noopener">Springer
Link</a>
</li>
</ul>
</div>
</div>
<script src="audio.js?v=2025.07.29-1"></script>
<script src="dissonance.js?v=2025.07.29-1"></script>
<script src="analysis.js?v=2025.07.29-1"></script>
</body>
</html>