-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathP09-audio-oscillator.js
137 lines (92 loc) · 4.05 KB
/
P09-audio-oscillator.js
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
/*=================================================
PART 09: Oscillator sound effects
In this lesson we are going to make the audio
effects of our game. Check more about web audio
API in this link:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API
=================================================*/
var audio = {
start: function () {
/*=================================================
If there's no audio context we need to ceate it.
=================================================*/
if (!audio.ctx) {
audio.ctx = new AudioContext();
/*=================================================
We save the current audio timestamp in seconds.
https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/currentTime
=================================================*/
var now = audio.ctx.currentTime;
/*=================================================
We need a gain node to control de volume.
https://developer.mozilla.org/en-US/docs/Web/API/GainNode
=================================================*/
audio.volume = new GainNode(audio.ctx);
audio.volume.connect(audio.ctx.destination);
audio.volume.gain.setValueAtTime(0.2, now);
/*=================================================
We will use an oscillator to make all our audio.
https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode
=================================================*/
audio.oscillator = audio.ctx.createOscillator();
audio.oscillator.type = 'sine';
var frequency = audio.oscillator.frequency;
frequency.setValueAtTime(0, now);
/*=================================================
The oscillator node needs to be connected to the
gain node if we want to control it's volume.
=================================================*/
audio.oscillator.connect(audio.volume);
audio.oscillator.start();
} /* close audio.start function */
},
/*=================================================
Now we can create a quick low volume beeb sound to
be played whenever the player shoots.
=================================================*/
shoot: function () {
var now = audio.ctx.currentTime;
audio.volume.gain.setValueAtTime(0.1, now);
var frequency = audio.oscillator.frequency;
frequency.setValueAtTime(800, now);
frequency.setValueAtTime(0, now+0.1);
},
/*=================================================
Now we do the same but let's use two frequencies
for when the asteroids get hit and make the sound
just a little bit lowder.
=================================================*/
hit: function () {
var now = audio.ctx.currentTime;
audio.volume.gain.setValueAtTime(0.2, now);
var frequency = audio.oscillator.frequency;
frequency.setValueAtTime(400, now);
frequency.setValueAtTime(600, now+0.1);
frequency.setValueAtTime(0, now+0.2);
},
/*=================================================
Let's go crazy with our game start sound!
=================================================*/
toggle: function () {
var now = audio.ctx.currentTime;
audio.volume.gain.setValueAtTime(0.1, now);
var frequency = audio.oscillator.frequency;
frequency.setValueAtTime(1500, now);
frequency.setValueAtTime(1000, now+0.1);
frequency.setValueAtTime(200, now+0.2);
frequency.setValueAtTime(500, now+0.3);
frequency.setValueAtTime(0, now+0.5);
}
}; /* close audio global var */
/*=================================================
And let's attach our start functions to the player
input. We want to follow audio best practices and
avoid being blocking policies.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices
=================================================*/
addEventListener('mousedown', audio.start);
addEventListener('keydown', audio.start);
/*=================================================
That's all! Next lesson "P10-game-network.js" is the
last one. Keep going, you are almost there!
=================================================*/