-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
test.html
72 lines (67 loc) · 2.14 KB
/
test.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
<!DOCTYPE html>
<html>
<head>
<title>JZZ.input.Kbd test</title>
<script src="node_modules/jzz/javascript/JZZ.js"></script>
<script src="node_modules/jzz-synth-tiny/javascript/JZZ.synth.Tiny.js"></script>
<script src="javascript/JZZ.input.Kbd.js"></script>
<style type="text/css">
.inner {position:absolute; bottom:0; left:0; width:100%; text-align:center;}
</style>
</head>
<body>
<h1>JZZ.input.Kbd test</h1>
<span id=pad></span>
<span id=piano></span>
<script><!--
JZZ.synth.Tiny.register('Web Audio');
var piano = JZZ.input.Kbd({at: 'piano', from:'C5', to:'B5', onCreate: function(){
this.getBlackKeys().setStyle({color:'#fff'});
this.getKey('C5').setInnerHTML('<span class=inner>Z</span>');
this.getKey('C#5').setInnerHTML('<span class=inner>S</span>');
this.getKey('D5').setInnerHTML('<span class=inner>X</span>');
this.getKey('D#5').setInnerHTML('<span class=inner>D</span>');
this.getKey('E5').setInnerHTML('<span class=inner>C</span>');
this.getKey('F5').setInnerHTML('<span class=inner>V</span>');
this.getKey('F#5').setInnerHTML('<span class=inner>G</span>');
this.getKey('G5').setInnerHTML('<span class=inner>B</span>');
this.getKey('G#5').setInnerHTML('<span class=inner>H</span>');
this.getKey('A5').setInnerHTML('<span class=inner>N</span>');
this.getKey('A#5').setInnerHTML('<span class=inner>J</span>');
this.getKey('B5').setInnerHTML('<span class=inner>M</span>');
}});
var pad = JZZ.input.Pad({at: 'pad'});
var ascii = JZZ.input.ASCII({Z:'C5', S:'C#5', X:'D5', D:'D#5', C:'E5', V:'F5', G:'F#5', B:'G5', H:'Ab5', N:'A5', J:'Bb5', M:'B5', '+': plus, '-': minus});
piano.connect(JZZ().openMidiOut());
pad.connect(piano);
ascii.connect(pad);
var pb = 0;
var pbto = 0;
function plus(on) {
pbto = on ? 1 : 0;
movepb();
}
function minus(on) {
pbto = on ? -1 : 0;
movepb();
}
function movepb() {
if (pb < pbto) {
pb += 0.1;
if (pb > pbto) pb = pbto;
ascii.pitchBendF(0, pb);
setTimeout(movepb, 100);
}
if (pb > pbto) {
pb -= 0.1;
if (pb < pbto) pb = pbto;
ascii.pitchBendF(0, pb);
setTimeout(movepb, 100);
}
}
--></script>
<p>
<a href=https://jazz-soft.net>https://jazz-soft.net</a>
</p>
</body>
</html>