-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
184 lines (179 loc) · 9.59 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title data-translation-key="Overtones Spiral">Overtones Spiral</title>
<meta property="og:url" content="http://www.suonoterapia.org/overtones" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Overtones Spiral" />
<meta property="og:description" content="Interactive visualization of the Overtone series on the Octave Spiral, with sound and information about tunings and frequencies" />
<meta property="og:image" content="http://www.suonoterapia.org/overtones/assets/images/meta-image.png" />
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<link rel="canonical" href="http://www.suonoterapia.org/overtones">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="theme-color" content="#0080a3">
<link rel="stylesheet" href="assets/styles/style.css" type="text/css">
</head>
<body>
<!--=include components/_analytics.html -->
<script src="assets/js/webfont.js" async></script>
<header id="main-header">
<a href="//www.suonoterapia.org">
<!--=include assets/images/logo.svg -->
</a>
<nav>
<ul class="asmi-nav">
<li>
<a href="https://suonoterapia.org/sound-of-color/">
<!--=include assets/images/logo-sound-of-color.svg -->
<span data-translation-key="The Sound of Color">The Sound of Color</span>
</a>
</li>
</ul>
</nav>
<div class="header-buttons">
<a href="#" class="option-button" id="info" data-toggle="#faq-panel"></a>
<a href="https://www.facebook.com/suonoterapia">
<!--=include assets/images/ico-facebook.svg -->
</a>
</div>
</header>
<main>
<!--=include components/_faq-panel.html -->
<div id="options">
<h2 data-translation-key="Options">Options</h2>
<div class="section-content">
<div class="input-wrapper" id="base-wrapper">
<input type="range" min="100" max="1000" id="base" value="220" data-frequency="220Hz"/>
<div class="input-wrapper" id="base-detail-wrapper">
<input type="number" id="base-detail" value="220" min="100" max="1000">
<span>Hz</span>
</div>
</div>
<div class="input-wrapper" id="volume-control-wrapper">
<input type="range" min="0" max="50" id="volume-control" value="25"/>
</div>
<!-- @todo Refactor those as hidden checkboxes with labels -->
<div class="options-buttons">
<a href="#" id="group-notes" class="option-button grouped" data-option="groupNotes"></a>
<a href="#" id="reduce-to-octave" class="option-button off" data-option="octaveReduction"></a>
<a href="#" id="sustain" class="option-button off" data-option="sustain"></a>
<a href="#" id="record" class="option-button off" data-option="record"></a>
<a href="#" id="microphone" class="option-button off" data-option="microphone"></a>
</div>
</div>
<!--=include components/_keyboard.html -->
</div>
<div id="sound-details">
<div id="interval"
data-intro-en-US="The ratio between the two frequencies"
data-intro-it-IT="La proporzione tra le due frequenze"
data-intro-da-DK="Ratio – talforholdet – mellem de to frekvenser"
data-intro-hu-HU="A két frekvencia aránya"
data-position="left">
<sup></sup><span>⁄</span><sub></sub>
</div>
<div id="note"
data-intro-en-US="The note name in the <a href='https://en.wikipedia.org/wiki/Scientific_pitch_notation' target='_blank'>modern scientific pitch notation</a>"
data-intro-it-IT="Il nome della nota nel <a href='https://it.wikipedia.org/wiki/Solfeggio' target='_blank'>sistema di solfeggio</a>"
data-intro-da-DK="Tonenavnet i <a href='https://en.wikipedia.org/wiki/Scientific_pitch_notation' target='_blank'>SPN (Scientific Pitch Notation)</a>"
data-intro-hu-HU="A hang <a href='https://en.wikipedia.org/wiki/Scientific_pitch_notation' target='_blank'>nemzetközi ábécés neve</a>"
data-position="left">
<span id="note-name"></span><span id="note-accidentals" class="accidental"></span><sub></sub>
</div>
<div id="interval-name" class="note-detail"
data-intro-en-US="The name of the interval"
data-intro-it-IT="Il nome dell'invervallo"
data-intro-da-DK="Intervallets navn"
data-intro-hu-HU="A hangköz neve"
data-position="left"></div>
<div id="note-frequency" class="note-detail"
data-intro-en-US="The exact frequency"
data-intro-it-IT="La frequenza esatta"
data-intro-da-DK="Den nøjagtige frekvens"
data-intro-hu-HU="Pontos frekcencia"
data-position="left">0 Hz</div>
<div class="cents-difference tuning"
data-intro-en-US="The difference in <a href='https://en.wikipedia.org/wiki/Cent_(music)' target='_blank'>cents</a> between the sound played and the note in <a href='https://en.wikipedia.org/wiki/Equal_temperament' target='_blank'>12 Equal Temperament</a>"
data-intro-it-IT="La differenza in <a href='https://it.wikipedia.org/wiki/Cent_(musica)' target='_blank'>cent</a> tra il suono riprodotto e la nota nel <a href='https://it.wikipedia.org/wiki/Temperamento_equabilet' target='_blank'>Temperamento equabile</a>"
data-intro-da-DK="Forskellen i <a href='https://en.wikipedia.org/wiki/Cent_(music)' target='_blank'>cent</a> mellem partialtonen og tonen fra <a href='https://www.musikipedia.dk/leksikon/ligesvaevende-stemning' target='_blank'>ligesvævende stemning</a>"
data-intro-hu-HU="A lejátszott hang és annak <a href='https://hu.wikipedia.org/wiki/Kiegyenl%C3%ADtett_hangol%C3%A1s' target='_blank'>kiegyenlített hangolás</a>-béli változata közti eltérés <a href='https://hu.wikipedia.org/wiki/Cent_(zene)' target='_blank'>centekben</a>"
data-position="left">
<span class="cents">0</span>
<div class="cent-bar"></div>
</div>
<div class="cents-difference interval"
data-intro-en-US="The interval measured in cents"
data-intro-it-IT="L'intervallo misurato in cent"
data-intro-da-DK="Intervallet målt i cent"
data-intro-hu-HU="A hangköz centekben mérve"
data-position="left">
<span class="cents">1200</span>
<div class="cent-bar"></div>
</div>
</div>
<div id="play-panel">
<a href="#" id="settings-button" data-toggle="#play-panel .panel"></a>
<a href="#" id="play-sequence" class="option-button off"></a>
<div class="panel">
<div class="input-wrapper" id="sequence-speed-wrapper">
<input type="range" min="0.20" max="1" step="0.05" id="sequence-speed" value="1" />
</div>
<a href="#" id="sequence-prev" class="option-button off"></a>
<a href="#" id="sequence-next" class="option-button off"></a>
</div>
</div>
<!--=include assets/images/overtone-spiral.svg -->
</main>
<footer>
<button href="#" id="help">?</button>
<!--=include components/_language-switcher.html -->
<p class="credits" data-translation-key="credits">
<span class="hide-on-small">Designed and crafted with joy</span> by
<a href="https://facebook.com/sunyatasattva">Marco Lucio Giannotta</a> and
<a href="https://www.facebook.com/skye.lofvander">Skye Løfvander</a>.
<span class="hide-on-medium version">Version
<a href="https://github.com/sunyatasattva/overtones/releases/">2.1.0</a>
</span>
</p>
<div class="social">
<a href="https://paypal.me/sunyatasattva" class="donate-button">
<!--=include assets/images/logo-paypal.svg -->
<span data-translation-key="Donate">Donate</span>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?app_id=895291693921891&kid_directed_site=0&sdk=joey&u=http%3A%2F%2Fwww.suonoterapia.org%2Fovertones&display=popup&ref=plugin&src=share_button" class="facebook-button">
<!--=include assets/images/logo-facebook.svg -->
<span data-translation-key="Share">Share</span>
<span class="btn-count"></span>
</a>
<a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fsuonoterapia.org%2Fovertones%2F&ref_src=twsrc%5Etfw&text=Overtones%20Spiral&url=http:%2F%2Fwww.suonoterapia.org%2Fovertones&hashtags=music,visualization,overtoneSinging,ASMI" class="twitter-button">
<!--=include assets/images/logo-twitter.svg -->
<span data-translation-key="Tweet">Tweet</span>
</a>
<a href="https://github.com/sunyatasattva/overtones/issues" class="feedback-button">
<!--=include assets/images/ico-issue.svg -->
<span data-translation-key="Feedback">Feedback</span>
<span class="btn-count"></span>
</a>
</div>
<!--=include components/_easter-egg.html -->
</footer>
<script src="assets/js/script.js"></script>
</body>
</html>