-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
135 lines (108 loc) · 4.13 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
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>metronome</title>
<meta name="description" content="mobile-friendly javascript-powered metronome: visual and audible ticks, complex beat grouping, tap tempo, keyboard shortcuts">
<link rel="stylesheet" type="text/css" href="css/metronome.css">
<link rel="icon" type="image/png" href="favicon.png" />
</head>
<body>
<div id="metronome-advanced-controls">
<button id="popout">small window popout</button>
<button id="randomize-tempo">randomize tempo</button>
<button id="randomize-time">randomize beats per measure</button>
<button id="randomize-both">randomize both</button>
<div>
<label for="duration">duration</label>
<input name="duration" id="duration" type="number" min="0" step="0.01"> seconds
</div>
<div>
<label for="frequency-downbeat">downbeat</label>
<input name="frequency-downbeat" id="frequency-downbeat" type="number" min="0"> Hz
</div>
<div>
<label for="frequency-strong">strong beat</label>
<input name="frequency-strong" id="frequency-strong" type="number" min="0"> Hz
</div>
<div>
<label for="frequency-weak">weak beat</label>
<input name="frequency-weak" id="frequency-weak" type="number" min="0"> Hz
</div>
<div>
<label for="frequency-tuner">tuner</label>
<input name="frequency-tuner" id="frequency-tuner" type="number" min="0"> Hz
</div>
<p><input type="checkbox" id="multiply_time"> <label for="multiply_time">tempo buttons affect time</label></p>
<p><a id="reset" href="#">reset to defaults</a></p>
<div class="reference">
<p>beats per measure can be either of the following:</p>
<ul>
<li>empty or <code>0</code> (no groups)</li>
<li>one or more numbers separated by <code>+</code> e.g. <code>4</code>, <code>2+3</code>, <code>3+2+2</code></li>
</ul>
<dl>
<dt>space</dt>
<dd>start/stop</dd>
<dt>up</dt>
<dd>increment tempo by 1 (when input not focused)</dd>
<dt>down</dt>
<dd>decrement tempo by 1 (when input not focused)</dd>
<dt>left</dt>
<dd>decrement tempo by 10 (when input not focused)</dd>
<dt>right</dt>
<dd>increment tempo by 10 (when input not focused)</dd>
<dt>n</dt>
<dd>halve tempo</dd>
<dt>m</dt>
<dd>double tempo</dd>
<dt>j</dt>
<dd>third tempo</dd>
<dt>k</dt>
<dd>triple tempo</dd>
<dt>.</dt>
<dd>tap</dd>
<dt>b</dt>
<dd>focus beats per measure</dd>
<dt>t</dt>
<dd>focus tempo</dd>
<dt>u</dt>
<dd>start/stop tuner</dd>
</dl>
<p><a href="https://thenounproject.com/andrea.verzola1/uploads/?i=173952">favicon by Andrea Verzola from the Noun Project</a></p>
</div>
</div>
<div id="metronome">
<div id="tempo-helpers">
<button id="third">÷3</button>
<button id="halve">÷2</button>
<button id="minus10">-10</button>
<button id="minus1">-1</button>
<button id="plus1">+1</button>
<button id="plus10">+10</button>
<button id="double">×2</button>
<button id="triple">×3</button>
</div>
<div>
<input name="tempo" id="tempo" type="number" min="0" step="1" pattern="[0-9]*" inputmode="numeric" title="beats per minute" tabindex="1">
</div>
<div>
<label for="time"><input name="time" id="time" pattern="[0-9\+]*" title="e.g. 0 (no grouping), 2, 3+2, 3+5+2" tabindex="2"> beats per measure</label>
</div>
<div id="controls">
<button id="start" tabindex="3">start</button>
<button id="stop" style="display: none;" tabindex="3">stop</button>
<button id="tap" tabindex="4">tap</button>
</div>
<div id="visual-target"> </div>
<a id="start-tuner" href="#">start tuner</a>
<a id="stop-tuner" href="#" style="display: none;">stop tuner</a>
</div>
<script src="js/mousetrap.min.js"></script>
<script src="js/mousetrap-global-bind.min.js"></script>
<script src="js/metronome.js"></script>
<script>Metronome.init();</script>
</body>
</html>