Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
92 lines (84 loc) · 3.93 KB
/
Copy pathindex.html
File metadata and controls
92 lines (84 loc) · 3.93 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#0e141a">
<title>Bow parameters — a Schelleng workshop</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app">
<header class="top">
<h1>Bow parameters</h1>
<div class="top-actions">
<button id="themeToggle" class="btn btn-ghost" type="button" aria-label="Switch to light mode">
<span class="icon" aria-hidden="true">☀️</span><span class="label">light</span>
</button>
<button id="tourBtn" class="btn btn-ghost" type="button">Take the tour</button>
<button id="audioToggle" class="btn btn-audio" type="button" aria-pressed="false">
<span class="icon" aria-hidden="true">🔇</span><span class="label">sound off</span>
</button>
</div>
</header>
<main class="grid">
<figure class="diagram-wrap">
<svg id="plot" viewBox="0 0 600 600" role="img"
aria-label="Schelleng diagram of bow force against bow-bridge distance"></svg>
<div class="diagram-hint" id="diagramHint">drag anywhere · tap a chip</div>
</figure>
<aside class="sidebar">
<section class="readout" aria-live="polite">
<div class="region-name" id="regionName">ordinario</div>
<div class="coupling" id="coupling">Helmholtz corner motion — pitched tone.</div>
<dl class="params">
<div><dt>β</dt><dd><span id="betaVal">0.080</span><em id="betaDesc">mid</em></dd></div>
<div><dt>v</dt><dd><span id="vVal">0.35</span><em id="vDesc">moderato</em></dd></div>
<div><dt>F</dt><dd><span id="fVal">0.50</span><em id="fDesc">medium</em></dd></div>
</dl>
</section>
<section class="speed">
<label for="pitchSlider">
<span>pitch <em>— open-string fundamental</em></span>
<output id="pitchOut" for="pitchSlider">A3 · 220 Hz</output>
</label>
<input type="range" id="pitchSlider" min="-21" max="19" step="0.5" value="0">
<div class="ticks" aria-hidden="true"><span>C2</span><span>A3</span><span>E5</span></div>
</section>
<section class="speed">
<label for="vSlider">
<span>bow speed <em>— shifts both curves</em></span>
<output id="vOut" for="vSlider">1.05</output>
</label>
<input type="range" id="vSlider" min="0.15" max="3.6" step="0.015" value="1.05">
<div class="ticks" aria-hidden="true"><span>crawl</span><span>moderato</span><span>fast</span></div>
</section>
<section class="presets">
<div class="presets-label">named effects are coordinates</div>
<div class="chips" id="chips">
<button type="button" data-preset="tasto">sul tasto</button>
<button type="button" data-preset="flautando">flautando</button>
<button type="button" data-preset="ordinario">ordinario</button>
<button type="button" data-preset="ponticello">sul pont.</button>
<button type="button" data-preset="overpressure">overpressure</button>
<button type="button" data-preset="schnarr">Schnarrklang</button>
</div>
</section>
</aside>
</main>
<div id="audioStatus" class="audio-status hidden" role="status"></div>
</div>
<div id="tour" class="tour hidden" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="tourTitle">
<div class="tour-card">
<button class="tour-close" id="tourClose" type="button" aria-label="Close tour">×</button>
<div class="tour-body" id="tourBody"></div>
<nav class="tour-nav">
<button id="tourPrev" class="btn btn-ghost" type="button">back</button>
<div class="tour-dots" id="tourDots" aria-hidden="true"></div>
<button id="tourNext" class="btn btn-primary" type="button">next</button>
</nav>
</div>
</div>
<script type="module" src="app.js"></script>
</body>
</html>