forked from surikov/webaudiofont
-
Notifications
You must be signed in to change notification settings - Fork 0
/
WebAudioFontExamplePiano.html
71 lines (71 loc) · 4.37 KB
/
WebAudioFontExamplePiano.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
<html>
<head>
<script src='WebAudioFontPlayer.js'></script>
<script src='webaudiofont/2.0.Piano_323000005_461_460_45127.js'></script>
<script>
var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContextFunc();
var player=new WebAudioFontPlayer();
function playKey(pitch){
player.queueWaveTable(audioContext, audioContext.destination, _tone_Piano_323000005_461_460_45127, 0, pitch, 0.75);
}
</script>
<style type="text/css">
.c4 {position: absolute;left: 180px;top: 262px;width: 33px;height: 50px;}
.c_4 {position: absolute;left: 180px;top: 220px;width: 38px;height: 40px;}
.d4 {position: absolute;left: 215px;top: 262px;width: 33px;height: 50px;}
.d_4 {position: absolute;left: 220px;top: 220px;width: 38px;height: 40px;}
.e4 {position: absolute;left: 250px;top: 262px;width: 33px;height: 50px;}
.f4 {position: absolute;left: 285px;top: 262px;width: 33px;height: 50px;}
.f_4 {position: absolute;left: 280px;top: 220px;width: 38px;height: 40px;}
.g4 {position: absolute;left: 320px;top: 262px;width: 33px;height: 50px;}
.g_4 {position: absolute;left: 320px;top: 220px;width: 38px;height: 40px;}
.a4 {position: absolute;left: 355px;top: 262px;width: 33px;height: 50px;}
.a_4 {position: absolute;left: 360px;top: 220px;width: 38px;height: 40px;}
.b4 {position: absolute;left: 390px;top: 262px;width: 33px;height: 50px;}
.c5 {position: absolute;left: 425px;top: 262px;width: 33px;height: 50px;}
.c_5 {position: absolute;left: 420px;top: 220px;width: 38px;height: 40px;}
.d5 {position: absolute;left: 460px;top: 262px;width: 33px;height: 50px;}
.d_5 {position: absolute;left: 460px;top: 220px;width: 38px;height: 40px;}
.e5 {position: absolute;left: 495px;top: 262px;width: 33px;height: 50px;}
.f5 {position: absolute;left: 530px;top: 262px;width: 33px;height: 50px;}
.f_5 {position: absolute;left: 520px;top: 220px;width: 38px;height: 40px;}
.g5 {position: absolute;left: 565px;top: 262px;width: 33px;height: 50px;}
.g_5 {position: absolute;left: 560px;top: 220px;width: 38px;height: 40px;}
.a5 {position: absolute;left: 600px;top: 262px;width: 33px;height: 50px;}
.a_5 {position: absolute;left: 600px;top: 220px;width: 38px;height: 40px;}
.b5 {position: absolute;left: 635px;top: 262px;width: 33px;height: 50px;}
.c6 {position: absolute;left: 670px;top: 262px;width: 33px;height: 50px;}
</style>
</head>
<body>
<p><img src="img/piano.jpg" width="800" height="652"></p>
<a href="javascript:playKey(4*12+0);"><div class="c4"> </div></a>
<a href="javascript:playKey(4*12+1);"><div class="c_4"> </div></a>
<a href="javascript:playKey(4*12+2);"><div class="d4"> </div></a>
<a href="javascript:playKey(4*12+3);"><div class="d_4"> </div></a>
<a href="javascript:playKey(4*12+4);"><div class="e4"> </div></a>
<a href="javascript:playKey(4*12+5);"><div class="f4"> </div></a>
<a href="javascript:playKey(4*12+6);"><div class="f_4"> </div></a>
<a href="javascript:playKey(4*12+7);"><div class="g4"> </div></a>
<a href="javascript:playKey(4*12+8);"><div class="g_4"> </div></a>
<a href="javascript:playKey(4*12+9);"><div class="a4"> </div></a>
<a href="javascript:playKey(4*12+10);"><div class="a_4"> </div></a>
<a href="javascript:playKey(4*12+11);"><div class="b4"> </div></a>
<a href="javascript:playKey(5*12+0);"><div class="c5"> </div></a>
<a href="javascript:playKey(5*12+1);"><div class="c_5"> </div></a>
<a href="javascript:playKey(5*12+2);"><div class="d5"> </div></a>
<a href="javascript:playKey(5*12+3);"><div class="d_5"> </div></a>
<a href="javascript:playKey(5*12+4);"><div class="e5"> </div></a>
<a href="javascript:playKey(5*12+5);"><div class="f5"> </div></a>
<a href="javascript:playKey(5*12+6);"><div class="f_5"> </div></a>
<a href="javascript:playKey(5*12+7);"><div class="g5"> </div></a>
<a href="javascript:playKey(5*12+8);"><div class="g_5"> </div></a>
<a href="javascript:playKey(5*12+9);"><div class="a5"> </div></a>
<a href="javascript:playKey(5*12+10);"><div class="a_5"> </div></a>
<a href="javascript:playKey(5*12+11);"><div class="b5"> </div></a>
<a href="javascript:playKey(6*12+0);"><div class="c6"> </div></a>
<hr/>
<p><a href="WebAudioFontExampleAll.html">back</a></p>
</body>
</html>