-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
195 lines (146 loc) · 7.52 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
185
186
187
188
189
190
191
192
193
194
195
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/frequency.js" type="text/javascript"></script>
<script src="js/midi.js" type="text/javascript"></script>
<script src="js/keyboard.js" type="text/javascript"></script>
<script src="js/timbre.js" type="text/javascript"></script>
<script src="js/mypianosounds.js" type="text/javascript"></script>
<script src="js/guisounds.js" type="text/javascript"></script>
<script src="js/guiscales.js" type="text/javascript"></script>
<script src="js/guimidiinput.js" type="text/javascript"></script>
<script src="js/guihelp.js" type="text/javascript"></script>
<script src="js/pythagorekeyboard.js" type="text/javascript"></script>
<script src="js/jasmid/midifile.js" type="text/javascript"></script>
<script src="js/jasmid/replayer.js" type="text/javascript"></script>
<script src="js/jasmid/stream.js" type="text/javascript"></script>
<script src="js/jasmid/mysynth.js" type="text/javascript"></script>
<script src="js/jasmid/audio.js" type="text/javascript"></script>
<script src="js/playmusic.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script src="js/main_crazypiano.js" type="text/javascript"></script>
<script src="js/noteanimation.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="css/jquery-ui.min.css" />
</head>
<body>
<center>
<h1>The crazy piano<img id="helpbutton" src="help.png"/></h1>
</br></br></br></br>
<canvas id="keyboard" width=1350px height=128px></canvas>
<div class="wrapper">
<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<h2>Scale</h2>
<input id="pythagoreanTuning" type="radio" name="scale" checked><label
for="pythagoreanTuning">Pythagorean tuning</label></br>
<input id="meantoneTemperament" type="radio" name="scale"><label
for="meantoneTemperament">Meantone temperament</label></br>
<input id="justIntonation" type="radio" name="scale"><label
for="justIntonation">Just intonation</label></br>
<input id="equalTemperament" type="radio" name="scale"><label
for="equalTemperament">Equal temperament</label></br>
<input id="quarterToneScale" type="radio" name="scale"><label
for="quarterToneScale">Quarter-tone scale</label></br>
<input id="bohlenPierceScale" type="radio" name="scale"><label
for="bohlenPierceScale">Bohlen–Pierce scale</label></br>
</td>
<td>
<h2>Fun</h2>
<input id="hammerhigher" type="checkbox"><label
for="hammerhigher">The more you hammer, the higher it gets</label></br>
<input id="pianoreversed" type="checkbox"><label
for="pianoreversed">Reverse the piano</label></br>
<input id="velocityreversed" type="checkbox"><label
for="velocityreversed">Reverse the velocity</label></br>
<input id="unstablepitch" type="checkbox"><label
for="unstablepitch">Unstable pitch</label></br>
</td>
<td>
<h2>Timbre</h2>
<input id="piano" type="radio" name="timbre" checked><label
for="piano">Piano</label></br>
<input id="clarinet" type="radio" name="timbre"><label
for="clarinet">Clarinet</label></br>
</td>
<td>
<button style="vertical-align:top" title="MIDI input information (plugged keyboard, etc.)" id="midiinputbutton">
MIDI input <br/>information
</button>
</td>
</tr>
</table>
<div id="midiinputdialog" title="MIDI inputs (plugged keyboard, etc.)">
<div>Warning: MIDI input only works under Chrome. Please plug your MIDI keyboard and restart Chrome.</div>
<div id="key_data"></div>
<div id="inputs"></div>
<div id="outputs"></div>
</div>
<div id="container" hidden>
<div id="panelbohlen-pierce">
<img style="vertical-align:top" height=380px src="bohlenpierce.png"/>
<button onmousedown="ecouterTritaveDown()" onmouseup="ecouterTritaveUp()">Ecouter une tritave (do-..sol)</br>Mais en Bohlen-Pierce, elle s'appelle do-do !</button>
</div>
<div id="panelpythagore">
<table><tr>
<td>
<img height=80px src="pythagore_start.png"/>
<div style="display: inline-block">
<canvas style="vertical-align:middle" id="pythagoreKeyboard" width=320px height=300px></canvas>
<img height=100px src="pythagore_quintejuste.png"/></div>
</td>
<td>
<button onmousedown="pythagoreAnimation()">Montre la construction !</button></br>
<button onmousedown="ecouterquintenormaleDown()" onmouseup="ecouterquintenormaleUp()">Ecouter une quinte juste <span style="color:green">do</span>-<span style="color:green">sol</span></button>
</td>
</tr><tr><td></br>
<button onmousedown="ecouterquinteloupDown()" onmouseup="ecouterquinteloupUp()" placeholder="Attention ! Ce n'est pas une quinte. C'est pourquoi c'est moche. L'intervalle sol#-mib s'appelle la quinte du loup.">Ecouter l'intervalle <span style="color:red">sol#</span>-<span style="color:blue">mib</span></br> (quinte du loup)</button></td></tr></table>
</div>
<div id="panelmesotonic">
<table><tr>
<td>
<img height=80px src="pythagore_start.png"/>
<div style="display: inline-block">
<canvas style="vertical-align:middle" id="mesotonicKeyboard" width=320px height=300px></canvas>
<img height=100px src="mesotonic_quinte.png"/></div>
</td>
<td>
<button onmousedown="pythagoreAnimation()">Montre la construction !</button></br>
<button onmousedown="ecouterquintenormaleDown()" onmouseup="ecouterquintenormaleUp()">Ecouter une quinte légèrement diminué d'un quart de comma <span style="color:green">do</span>-<span style="color:green">sol</span></button>
</td>
</tr><tr><td></br>
<button onmousedown="ecouterquinteloupDown()" onmouseup="ecouterquinteloupUp()" placeholder="L'intervalle sol#-mib s'appelle une quinte du loup.">Ecouter l'intervalle <span style="color:red">sol#</span>-<span style="color:blue">mib</span></br> (quinte du loup)</button></td></tr></table>
</div>
<div id="panelnatural">
<button onmousedown="ecouterquinteloupReLaDown()" onmouseup="ecouterquinteloupReLaUp()">Ecouter l'intervalle ré-la</br> (quinte du loup)</button>
<img style="vertical-align:middle" height=380px src="naturel.png"/>
</div>
<div id="panelwell-tempered">
<img height=400px src="temperament_egal.png"/>
</div>
<div id="panelquartertones">
<img style="vertical-align:middle" height=380px src="quartdeton.png"/>
</div>
</div>
<div id="helpdialog" title="Help">
This website enables to listen to different musical scales/tuning/temperaments. It also enables to have some fun with some effects.
</br>
</br>
To play sounds, 1) click on the keyboard 2) or press a key on your computer keyboard (letters are indicated on the musical keyboard on the screen) 3) or plug your MIDI instrument (only under Google Chrome, please plug first and then reload Chrome).
</br>
</br>
For more information, or if you want to leave a comment, do not hesitate to contact the author at francois.schwarzentruber[@]ens-rennes.fr.
</br>
</br>
François Schwarzentruber
</div>
</div>
</body>
</html>