forked from surikov/webaudiofont
-
Notifications
You must be signed in to change notification settings - Fork 0
/
WebAudioFontExampleFlute.html
66 lines (66 loc) · 3.76 KB
/
WebAudioFontExampleFlute.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
<html>
<head>
<script src='WebAudioFontPlayer.js'></script>
<script src='webaudiofont/75.0.Pan_32Flute000126_461_460_45127.js'></script>
<script>
var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContextFunc();
var player=new WebAudioFontPlayer();
var pipe1={key:4*12+0};
var pipe2={key:4*12+2};
var pipe3={key:4*12+4};
var pipe4={key:4*12+5};
var pipe5={key:4*12+7};
var pipe6={key:4*12+9};
var pipe7={key:4*12+11};
var pipe8={key:5*12+0};
var pipe9={key:5*12+2};
var pipe10={key:5*12+4};
var pipe11={key:5*12+5};
var pipe12={key:5*12+7};
var pipe13={key:5*12+9};
function playPipe(pipe){
stopPipe(pipe);
pipe.envelope=player.queueWaveTable(audioContext, audioContext.destination, _tone_Pan_32Flute000126_461_460_45127, 0, pipe.key, 999,true);
}
function stopPipe(pipe){
if(pipe.envelope){
pipe.envelope.cancel();
}
}
</script>
<style type="text/css">
.p1 {position: absolute;left: 210px;top: 10px;width: 30px;height: 600px;}
.p2 {position: absolute;left: 240px;top: 10px;width: 30px;height: 550px;}
.p3 {position: absolute;left: 270px;top: 10px;width: 40px;height: 520px;}
.p4 {position: absolute;left: 310px;top: 10px;width: 30px;height: 490px;}
.p5 {position: absolute;left: 340px;top: 10px;width: 40px;height: 450px;}
.p6 {position: absolute;left: 380px;top: 10px;width: 40px;height: 420px;}
.p7 {position: absolute;left: 420px;top: 10px;width: 30px;height: 390px;}
.p8 {position: absolute;left: 450px;top: 10px;width: 40px;height: 360px;}
.p9 {position: absolute;left: 490px;top: 10px;width: 30px;height: 330px;}
.p10 {position: absolute;left: 520px;top: 10px;width: 30px;height: 310px;}
.p11 {position: absolute;left: 550px;top: 10px;width: 20px;height: 270px;}
.p12 {position: absolute;left: 570px;top: 10px;width: 25px;height: 240px;}
.p13 {position: absolute;left: 595px;top: 10px;width: 25px;height: 210px;}
</style>
</head>
<body>
<p><img src="img/panflute.jpg" width="800" height="600"></p>
<div class="p1" onmousedown="playPipe(pipe1);" onmouseup="stopPipe(pipe1);" onmouseout="stopPipe(pipe1);"> </div>
<div class="p2" onmousedown="playPipe(pipe2);" onmouseup="stopPipe(pipe2);" onmouseout="stopPipe(pipe2);"> </div>
<div class="p3" onmousedown="playPipe(pipe3);" onmouseup="stopPipe(pipe3);" onmouseout="stopPipe(pipe3);"> </div>
<div class="p4" onmousedown="playPipe(pipe4);" onmouseup="stopPipe(pipe4);" onmouseout="stopPipe(pipe4);"> </div>
<div class="p5" onmousedown="playPipe(pipe5);" onmouseup="stopPipe(pipe5);" onmouseout="stopPipe(pipe5);"> </div>
<div class="p6" onmousedown="playPipe(pipe6);" onmouseup="stopPipe(pipe6);" onmouseout="stopPipe(pipe6);"> </div>
<div class="p7" onmousedown="playPipe(pipe7);" onmouseup="stopPipe(pipe7);" onmouseout="stopPipe(pipe7);"> </div>
<div class="p8" onmousedown="playPipe(pipe8);" onmouseup="stopPipe(pipe8);" onmouseout="stopPipe(pipe8);"> </div>
<div class="p9" onmousedown="playPipe(pipe9);" onmouseup="stopPipe(pipe9);" onmouseout="stopPipe(pipe9);"> </div>
<div class="p10" onmousedown="playPipe(pipe10);" onmouseup="stopPipe(pipe10);" onmouseout="stopPipe(pipe10);"> </div>
<div class="p11" onmousedown="playPipe(pipe11);" onmouseup="stopPipe(pipe11);" onmouseout="stopPipe(pipe11);"> </div>
<div class="p12" onmousedown="playPipe(pipe12);" onmouseup="stopPipe(pipe12);" onmouseout="stopPipe(pipe12);"> </div>
<div class="p13" onmousedown="playPipe(pipe13);" onmouseup="stopPipe(pipe13);" onmouseout="stopPipe(pipe13);"> </div>
<hr/>
<p><a href="WebAudioFontExampleAll.html">back</a></p>
</body>
</html>