WEBVTT

1
00:00:00.040 --> 00:00:01.960
<v Speaker 1>You know, it kind of blows my mind that JavaScript,

2
00:00:02.240 --> 00:00:05.360
<v Speaker 1>a language initially like hammered out in just eleven days

3
00:00:05.440 --> 00:00:09.480
<v Speaker 1>to make websites a bit more lively, now packs enough

4
00:00:09.560 --> 00:00:15.160
<v Speaker 1>punch to construct full blown audio applications, synthesizers, drum machines,

5
00:00:15.359 --> 00:00:16.440
<v Speaker 1>write in your web browser.

6
00:00:16.559 --> 00:00:17.600
<v Speaker 2>It really is something else.

7
00:00:17.679 --> 00:00:19.839
<v Speaker 1>Let's really dig into that, because today on the deep dive,

8
00:00:19.879 --> 00:00:24.320
<v Speaker 1>we're plunging into JavaScript for sound artists Learn to Code

9
00:00:24.559 --> 00:00:28.079
<v Speaker 1>with the Web Audio API. It's a super useful book

10
00:00:28.079 --> 00:00:31.800
<v Speaker 1>by William Turner, edited by Steve Leonard. Our goal to

11
00:00:32.039 --> 00:00:36.039
<v Speaker 1>basically connect what you already know about audio with the

12
00:00:36.960 --> 00:00:39.560
<v Speaker 1>fascinating possibilities of JavaScript programming.

13
00:00:39.719 --> 00:00:42.560
<v Speaker 2>Yeah, because instead of being stuck with desktop software, you

14
00:00:42.600 --> 00:00:47.000
<v Speaker 2>could potentially build and share a unique synth with anyone

15
00:00:47.079 --> 00:00:48.320
<v Speaker 2>just a weblink exactly.

16
00:00:48.439 --> 00:00:51.640
<v Speaker 1>That's a fundamentally different landscape for audio creation, isn't it.

17
00:00:51.640 --> 00:00:54.359
<v Speaker 2>It absolutely is, And it's remarkable how this book speaks

18
00:00:54.399 --> 00:00:57.479
<v Speaker 2>directly to that creative audio community. You don't see many

19
00:00:57.520 --> 00:01:02.280
<v Speaker 2>resources teaching programming to sound artartists using examples they get.

20
00:01:02.600 --> 00:01:05.959
<v Speaker 2>The beauty isn't just that these Web audio API tools exist,

21
00:01:06.040 --> 00:01:09.640
<v Speaker 2>but that they're accessible through JavaScript, which is just everywhere.

22
00:01:10.079 --> 00:01:14.239
<v Speaker 2>It really lowers the barrier for sound artists to experiment

23
00:01:14.280 --> 00:01:17.319
<v Speaker 2>with coding sound way less complex than it used to be.

24
00:01:17.560 --> 00:01:21.280
<v Speaker 1>Absolutely, and if you've ever gotten lost tweaking knobs on

25
00:01:21.319 --> 00:01:23.840
<v Speaker 1>a synth or programmed to MIDI sequence, or maybe just

26
00:01:23.879 --> 00:01:27.959
<v Speaker 1>wanted about the code behind interactive websites, then listen closely.

27
00:01:28.159 --> 00:01:30.359
<v Speaker 1>This deep dive is crafted just for you. We're going

28
00:01:30.439 --> 00:01:33.959
<v Speaker 1>to pull out the key ideas of those aha moments

29
00:01:34.000 --> 00:01:36.840
<v Speaker 1>to show you how JavaScript and the Web Audio API

30
00:01:37.120 --> 00:01:42.519
<v Speaker 1>can unlock totally new sonic territories and hopefully without drowning

31
00:01:42.519 --> 00:01:43.239
<v Speaker 1>you and tech speak.

32
00:01:43.640 --> 00:01:46.840
<v Speaker 2>Right, it's about making audio creation even more accessible, isn't

33
00:01:46.840 --> 00:01:50.359
<v Speaker 2>it like how democratized production? This brings coding for audio

34
00:01:50.480 --> 00:01:53.280
<v Speaker 2>right into the browser, which almost everyone has. What kind

35
00:01:53.280 --> 00:01:55.280
<v Speaker 2>of creative doors does that open up? Think about it?

36
00:01:55.400 --> 00:01:58.079
<v Speaker 1>Exactly? So, just to give you a roadmap, we'll explore

37
00:01:58.120 --> 00:02:01.079
<v Speaker 1>how the book cleverly uses these audio examples to teach

38
00:02:01.120 --> 00:02:06.000
<v Speaker 1>core JavaScript fundamentals. Yeah, we're talking variables, functions, and crucially

39
00:02:06.239 --> 00:02:09.159
<v Speaker 1>how they talk to the Web Audio API to make

40
00:02:09.240 --> 00:02:13.199
<v Speaker 1>and shape sound in real time. All your browser ready

41
00:02:13.199 --> 00:02:13.719
<v Speaker 1>to tune in?

42
00:02:13.800 --> 00:02:15.680
<v Speaker 2>Absolutely, let's lay the groundwork.

43
00:02:15.759 --> 00:02:20.400
<v Speaker 1>Okay. Chapter one laying the foundation. It starts with a

44
00:02:20.439 --> 00:02:23.599
<v Speaker 1>really interesting question what is a program?

45
00:02:23.800 --> 00:02:25.479
<v Speaker 2>And the answer they give is pretty broad.

46
00:02:25.919 --> 00:02:29.280
<v Speaker 1>Yeah, any set of instructions created or followed. They even

47
00:02:29.360 --> 00:02:31.719
<v Speaker 1>use early analog since you know, with the patch base

48
00:02:31.800 --> 00:02:32.120
<v Speaker 1>as an.

49
00:02:32.080 --> 00:02:34.879
<v Speaker 2>Example, which is such a great starting point. It connects

50
00:02:34.919 --> 00:02:38.520
<v Speaker 2>programming to something tangible for sound artists, they've basically been

51
00:02:38.560 --> 00:02:40.319
<v Speaker 2>programming with patch cables.

52
00:02:39.960 --> 00:02:42.800
<v Speaker 1>Already, right, just learning a different language for it now exactly?

53
00:02:42.919 --> 00:02:46.240
<v Speaker 1>Then what is JavaScript? And this origin story is wild

54
00:02:46.479 --> 00:02:50.520
<v Speaker 1>nineteen ninety five Netscape, Brenda Night, brendan Ike. Yeah, just

55
00:02:50.639 --> 00:02:53.719
<v Speaker 1>eleven days to cook up this language for web interactivity.

56
00:02:54.199 --> 00:02:56.039
<v Speaker 1>And it was called live script first.

57
00:02:56.319 --> 00:02:59.560
<v Speaker 2>Live script before it became JavaScript. And the book makes

58
00:02:59.599 --> 00:03:01.680
<v Speaker 2>it really good. Crucial point here. Oh yeah, it's got

59
00:03:01.719 --> 00:03:04.280
<v Speaker 2>nothing to do with Java, despite the name that trips

60
00:03:04.360 --> 00:03:05.159
<v Speaker 2>up so many people.

61
00:03:05.439 --> 00:03:06.879
<v Speaker 1>Right, super important distinction.

62
00:03:07.159 --> 00:03:12.319
<v Speaker 2>And today JavaScript is just well, it's everywhere, robotics, smart homes,

63
00:03:12.400 --> 00:03:12.919
<v Speaker 2>you name it.

64
00:03:13.039 --> 00:03:17.520
<v Speaker 1>Incredible versatility. And now the star of our show, what

65
00:03:17.680 --> 00:03:21.560
<v Speaker 1>is the Web Audio API? The toolkit exactly. Think of

66
00:03:21.599 --> 00:03:24.000
<v Speaker 1>it like a pre built code toolkit nestled right inside

67
00:03:24.039 --> 00:03:27.840
<v Speaker 1>your browser, specifically for making musical and audio tasks. Way

68
00:03:27.919 --> 00:03:30.840
<v Speaker 1>way simpler saves you building everything for the ground up.

69
00:03:30.879 --> 00:03:33.400
<v Speaker 2>And what's cool is you're writing in JavaScript, but the

70
00:03:33.439 --> 00:03:36.759
<v Speaker 2>api itself that's built using stuff like c plus plus

71
00:03:36.800 --> 00:03:40.479
<v Speaker 2>b a Java machine code, powerful stuff happening under the

72
00:03:40.520 --> 00:03:41.439
<v Speaker 2>hood in the browser.

73
00:03:41.560 --> 00:03:44.120
<v Speaker 1>So you're getting a friendly interface to some serious audio power.

74
00:03:44.199 --> 00:03:44.879
<v Speaker 2>Precisely.

75
00:03:45.039 --> 00:03:47.800
<v Speaker 1>Okay. So the chapter wraps up with practical first steps.

76
00:03:48.039 --> 00:03:50.639
<v Speaker 1>It recommends Brave as the browser and tells you how

77
00:03:50.639 --> 00:03:53.919
<v Speaker 1>to open the developer tools. That's cray L plus Shift

78
00:03:54.000 --> 00:03:57.080
<v Speaker 1>plus J or command plus option plus J on.

79
00:03:57.080 --> 00:03:58.000
<v Speaker 2>Mas the essential tool.

80
00:03:58.120 --> 00:04:01.240
<v Speaker 1>And they also point you to stackoverflow dot com specifically

81
00:04:01.319 --> 00:04:04.439
<v Speaker 1>the web audio api community. There like having a global.

82
00:04:04.080 --> 00:04:07.199
<v Speaker 2>Help desk, which is so vital for newcomers right. Knowing

83
00:04:07.240 --> 00:04:09.800
<v Speaker 2>where to get help when you inevitably hit a snag

84
00:04:10.280 --> 00:04:11.879
<v Speaker 2>makes a huge difference.

85
00:04:11.520 --> 00:04:14.639
<v Speaker 1>No kidding. Okay, let's move to chapter two, Getting started

86
00:04:14.680 --> 00:04:17.480
<v Speaker 1>with sound and code. Time to make some noise.

87
00:04:17.759 --> 00:04:21.319
<v Speaker 2>Literally. They contrast the classic Hello World.

88
00:04:21.000 --> 00:04:23.199
<v Speaker 1>Program yes, which just prints text.

89
00:04:23.199 --> 00:04:25.920
<v Speaker 2>With their Hello Sound program. Much more fun for.

90
00:04:25.959 --> 00:04:29.040
<v Speaker 1>This crowd, for sure. So instead of text you get sound.

91
00:04:29.680 --> 00:04:33.040
<v Speaker 1>The book gives you this simple snippet audio context New

92
00:04:33.079 --> 00:04:38.079
<v Speaker 1>Audio context letosciaudio context dot create oscillator audise dot type

93
00:04:38.360 --> 00:04:43.600
<v Speaker 1>sign ovc dot connect audio context dot destination, audio context

94
00:04:43.680 --> 00:04:44.439
<v Speaker 1>dot current time.

95
00:04:44.600 --> 00:04:45.959
<v Speaker 2>Let's break that down, maybe.

96
00:04:45.759 --> 00:04:48.800
<v Speaker 1>Yeah, good IDEA. First line gets the audio engine ready

97
00:04:49.120 --> 00:04:51.959
<v Speaker 1>new audio context right. Second line creates an oscillator that's

98
00:04:52.000 --> 00:04:55.680
<v Speaker 1>your sound source. Create oscillator, got it. Third sets the

99
00:04:55.680 --> 00:04:58.040
<v Speaker 1>sound type here it's a pure sign wave offc dot

100
00:04:58.079 --> 00:05:01.399
<v Speaker 1>type sign. Fourth connects it to your speaker. Connect audio

101
00:05:01.399 --> 00:05:03.839
<v Speaker 1>context dot destination, yeah output. And the last one says,

102
00:05:03.839 --> 00:05:07.279
<v Speaker 1>go right now start audiocontext dot current time.

103
00:05:07.439 --> 00:05:10.319
<v Speaker 2>And the cool thing is that immediate feedback you type that,

104
00:05:10.720 --> 00:05:13.759
<v Speaker 2>run it and bam sound. That direct code to audio

105
00:05:13.800 --> 00:05:15.319
<v Speaker 2>link is super motivating.

106
00:05:15.480 --> 00:05:18.160
<v Speaker 1>Definitely. And they mentioned you need their web audio template

107
00:05:18.199 --> 00:05:20.480
<v Speaker 1>and a local web server like the one in Sublime

108
00:05:20.560 --> 00:05:21.839
<v Speaker 1>text to actually hear it.

109
00:05:22.000 --> 00:05:23.720
<v Speaker 2>Right, crucial practical step.

110
00:05:23.839 --> 00:05:27.560
<v Speaker 1>Next up variables. Think of them like labeled boxes for

111
00:05:27.639 --> 00:05:28.360
<v Speaker 1>storing info.

112
00:05:29.000 --> 00:05:29.560
<v Speaker 2>Containers.

113
00:05:29.680 --> 00:05:33.199
<v Speaker 1>Yeah, containers. The book uses let waveform type equal saw

114
00:05:33.279 --> 00:05:36.800
<v Speaker 1>too as an example. Let is the keyword saying new

115
00:05:36.879 --> 00:05:40.800
<v Speaker 1>variable coming up declaration right. Then waveform type is the name.

116
00:05:41.600 --> 00:05:45.240
<v Speaker 1>Notice the capital T that's CamelCase. You need it because

117
00:05:45.480 --> 00:05:47.000
<v Speaker 1>variable names can't have spaces.

118
00:05:47.199 --> 00:05:49.240
<v Speaker 2>Try it with the space let waveform type and you'll

119
00:05:49.240 --> 00:05:52.240
<v Speaker 2>see an error right away in the console. Good lesson

120
00:05:52.319 --> 00:05:54.680
<v Speaker 2>in precision definitely and at equals.

121
00:05:54.759 --> 00:05:56.519
<v Speaker 1>It's not equals like in math.

122
00:05:56.600 --> 00:05:58.360
<v Speaker 2>It's the assignment operator exactly.

123
00:05:58.600 --> 00:06:00.959
<v Speaker 1>It takes the value on the right. Yeah, the string

124
00:06:01.000 --> 00:06:03.480
<v Speaker 1>saw tooth in quotes and stores it in the variable

125
00:06:03.519 --> 00:06:04.360
<v Speaker 1>waveform type on.

126
00:06:04.319 --> 00:06:08.000
<v Speaker 2>The left, and those quotes tell JavaScript it's a string,

127
00:06:08.160 --> 00:06:09.399
<v Speaker 2>you know, text data.

128
00:06:09.439 --> 00:06:11.680
<v Speaker 1>They also bring in const. It's like let, but for

129
00:06:11.759 --> 00:06:13.199
<v Speaker 1>variables you don't want to change later.

130
00:06:13.439 --> 00:06:14.600
<v Speaker 2>Immutable sort of.

131
00:06:14.879 --> 00:06:18.160
<v Speaker 1>Yeah, try reassigning a const variable of the book shows

132
00:06:18.839 --> 00:06:21.920
<v Speaker 1>constant oscu one thousand off key eel some thousand and boom.

133
00:06:22.160 --> 00:06:22.319
<v Speaker 2>Error.

134
00:06:22.800 --> 00:06:23.839
<v Speaker 1>Keeps your code predictable.

135
00:06:23.879 --> 00:06:24.480
<v Speaker 2>Good practice.

136
00:06:24.519 --> 00:06:27.279
<v Speaker 1>Then there's declaring without a value like let waveform type.

137
00:06:27.560 --> 00:06:30.639
<v Speaker 1>JavaScript automatically assigns it the special value.

138
00:06:30.439 --> 00:06:33.160
<v Speaker 2>Undefined, which is its own data type, not a string.

139
00:06:33.360 --> 00:06:33.959
<v Speaker 2>No quotes.

140
00:06:34.240 --> 00:06:38.879
<v Speaker 1>Right, These little differences let const undefined. They seem small,

141
00:06:39.439 --> 00:06:41.800
<v Speaker 1>but they're fundamental to how JavaScript works.

142
00:06:41.879 --> 00:06:43.759
<v Speaker 2>Absolutely foundational, okay.

143
00:06:43.519 --> 00:06:48.319
<v Speaker 1>Making code human readable. Comments, potential use for single lines

144
00:06:48.399 --> 00:06:50.480
<v Speaker 1>or for multiple lines. The computer ignores them, but they

145
00:06:50.519 --> 00:06:54.759
<v Speaker 1>tell you what's going on. Let waveform type saw tooth oscillator.

146
00:06:54.240 --> 00:06:57.040
<v Speaker 2>Value it's like leaving notes for your future self or

147
00:06:57.079 --> 00:07:00.720
<v Speaker 2>your collaborators, so important. As things get complex totally.

148
00:07:00.600 --> 00:07:03.600
<v Speaker 1>Then they revisit hello sound to show variables in action.

149
00:07:03.680 --> 00:07:06.959
<v Speaker 1>They make variables for different waveforms saw tooth, sign, triangle square.

150
00:07:07.600 --> 00:07:10.000
<v Speaker 1>Then they assign one of these to another variable like

151
00:07:10.079 --> 00:07:12.879
<v Speaker 1>current waveform. And the cool part is you can change

152
00:07:12.879 --> 00:07:16.399
<v Speaker 1>current waveform later without using lead again. Just assign a

153
00:07:16.439 --> 00:07:17.199
<v Speaker 1>new value.

154
00:07:17.319 --> 00:07:21.079
<v Speaker 2>That's mutability, the ability to change the variables value.

155
00:07:21.160 --> 00:07:23.439
<v Speaker 1>And if you actually do this in the browser, change

156
00:07:23.439 --> 00:07:26.839
<v Speaker 1>current waveform from signed to saw tooth, you hear the

157
00:07:26.839 --> 00:07:28.519
<v Speaker 1>difference instantly, it gets buzzier.

158
00:07:28.720 --> 00:07:33.399
<v Speaker 2>That's the magic. Connecting code changes to audible results makes

159
00:07:33.439 --> 00:07:36.439
<v Speaker 2>abstract concepts totally concrete for sound folks.

160
00:07:36.519 --> 00:07:39.199
<v Speaker 1>Okay, so we covered string and undefined. They briefly mention

161
00:07:39.360 --> 00:07:43.560
<v Speaker 1>null two, another data type often used to intentionally show

162
00:07:43.959 --> 00:07:45.000
<v Speaker 1>a variable.

163
00:07:44.600 --> 00:07:46.920
<v Speaker 2>Has no value, right, deliberately empty.

164
00:07:47.240 --> 00:07:49.399
<v Speaker 1>Then back to strings. You can stick them together with

165
00:07:49.439 --> 00:07:51.879
<v Speaker 1>the plus sign that's concatenation.

166
00:07:51.480 --> 00:07:52.720
<v Speaker 2>Or use template literals.

167
00:07:52.800 --> 00:07:55.720
<v Speaker 1>Yeah, template literals with the backticks. They let you embed

168
00:07:55.839 --> 00:07:58.879
<v Speaker 1>variables right inside the string, like yeah to phrase sound

169
00:07:58.959 --> 00:08:02.759
<v Speaker 1>type cleaner, somethe times, and yes, strings can have spaces.

170
00:08:02.360 --> 00:08:04.720
<v Speaker 2>Crucial for interfaces handling text data.

171
00:08:05.079 --> 00:08:07.279
<v Speaker 1>And if you need the length of a string, just

172
00:08:07.439 --> 00:08:11.759
<v Speaker 1>use length like mystring dot length counts spaces too handy property.

173
00:08:11.920 --> 00:08:15.079
<v Speaker 1>Then they introduce built in string methods tools for manipulating

174
00:08:15.120 --> 00:08:18.319
<v Speaker 1>strings like to uppercase or to lower case.

175
00:08:18.399 --> 00:08:20.519
<v Speaker 2>You don't need to memorize them all no way, but

176
00:08:20.680 --> 00:08:24.720
<v Speaker 2>know they exist. Check what slice slice tools in the

177
00:08:24.759 --> 00:08:25.639
<v Speaker 2>toolbox for when.

178
00:08:25.480 --> 00:08:30.480
<v Speaker 1>You need them exactly. Next, numbers, key thing no quotes.

179
00:08:30.639 --> 00:08:33.039
<v Speaker 1>Put quotes around one hundred and twenty three and it's

180
00:08:33.039 --> 00:08:36.240
<v Speaker 1>a string, not a number. You can do math with right.

181
00:08:36.080 --> 00:08:41.120
<v Speaker 2>And the basic math operators plus from multiply for divide

182
00:08:41.200 --> 00:08:41.759
<v Speaker 2>and percent.

183
00:08:41.799 --> 00:08:43.720
<v Speaker 1>The modulo gives you the remainder after division.

184
00:08:43.759 --> 00:08:46.879
<v Speaker 2>And if you're ever unsure what data type of variable holds,

185
00:08:47.120 --> 00:08:49.399
<v Speaker 2>use type of type of my variable.

186
00:08:49.120 --> 00:08:51.759
<v Speaker 1>Super useful for debugging. Okay, then boolean data type just

187
00:08:51.960 --> 00:08:54.519
<v Speaker 1>true or false perfect for on off states.

188
00:08:54.879 --> 00:08:57.440
<v Speaker 2>Let synth this on true fundamental for logic.

189
00:08:57.559 --> 00:09:00.440
<v Speaker 1>They quickly mentioned assignment operators like plus or not as

190
00:09:00.480 --> 00:09:04.480
<v Speaker 1>shorthand compound assignment, and then comparison operators. These compare values

191
00:09:04.519 --> 00:09:07.120
<v Speaker 1>and give back a booleion true or false like for.

192
00:09:07.120 --> 00:09:09.679
<v Speaker 2>Strict equality checks value and type.

193
00:09:09.559 --> 00:09:13.080
<v Speaker 1>Right, and for strict inequality CEO too. Yeah, the book

194
00:09:13.080 --> 00:09:15.639
<v Speaker 1>stress is using the strict ones because the non strict

195
00:09:15.639 --> 00:09:18.320
<v Speaker 1>ones can do weird automatic type conversions.

196
00:09:18.399 --> 00:09:22.159
<v Speaker 2>Yeah, strict equality avoids surprises. It's essential for making decisions

197
00:09:22.159 --> 00:09:24.080
<v Speaker 2>in your code. If this condition is true, do that.

198
00:09:24.399 --> 00:09:28.440
<v Speaker 1>Okay, let's jump to chapter five. Functions encapsulating actions. This

199
00:09:28.559 --> 00:09:30.080
<v Speaker 1>is where code gets organized.

200
00:09:30.200 --> 00:09:33.279
<v Speaker 2>Right, we've got our data building blocks, Now how do

201
00:09:33.320 --> 00:09:37.200
<v Speaker 2>we organize actions on that data? Functions they're the workhorses.

202
00:09:37.480 --> 00:09:40.600
<v Speaker 1>The book calls them reusable blocks of code. Yeah, stop

203
00:09:40.639 --> 00:09:43.840
<v Speaker 1>repeating yourself. They do specific tasks based on inputs.

204
00:09:43.960 --> 00:09:47.360
<v Speaker 2>Yeah, like a synth module takes inputs, does something gives

205
00:09:47.399 --> 00:09:47.960
<v Speaker 2>an output.

206
00:09:48.120 --> 00:09:52.960
<v Speaker 1>Good analogy. They start simple function effectsbox. Input takes an input,

207
00:09:53.000 --> 00:09:54.120
<v Speaker 1>returns it doubled.

208
00:09:54.000 --> 00:09:57.840
<v Speaker 2>And you call it or invoke it with affectsbox one twenty.

209
00:09:57.639 --> 00:09:59.840
<v Speaker 1>Right, it gives you two forty. The book breaks down

210
00:09:59.879 --> 00:10:05.240
<v Speaker 1>the parts function keyword the name effects box, barenthes for parameters.

211
00:10:04.679 --> 00:10:06.600
<v Speaker 2>Like input placeholders for input.

212
00:10:06.360 --> 00:10:08.879
<v Speaker 1>Curly braces for the code block, and the optional return

213
00:10:08.960 --> 00:10:11.799
<v Speaker 1>statement for the output. They even mention js dot comments

214
00:10:11.799 --> 00:10:13.200
<v Speaker 1>for documenting parameters.

215
00:10:12.879 --> 00:10:15.919
<v Speaker 2>That input output idea parameters in return value out is

216
00:10:15.960 --> 00:10:18.200
<v Speaker 2>core programming stuff makes code modular.

217
00:10:18.360 --> 00:10:20.799
<v Speaker 1>You run it with the name and parentheses. Values you

218
00:10:20.840 --> 00:10:23.279
<v Speaker 1>pass in when you call it are arguments, and if

219
00:10:23.320 --> 00:10:24.200
<v Speaker 1>you give too many.

220
00:10:24.080 --> 00:10:26.159
<v Speaker 2>Arguments, jobscript just ignores the extras.

221
00:10:26.480 --> 00:10:31.120
<v Speaker 1>Interesting. They also show function expressions assigning a function to

222
00:10:31.200 --> 00:10:34.240
<v Speaker 1>a variable like let add function ab return a plus

223
00:10:34.279 --> 00:10:37.080
<v Speaker 1>b shows functions are like data.

224
00:10:37.120 --> 00:10:39.720
<v Speaker 2>Which is super powerful, especially for callbacks.

225
00:10:39.759 --> 00:10:42.840
<v Speaker 1>Later on, Yeah, and they mentioned functions help abstract way

226
00:10:42.879 --> 00:10:47.200
<v Speaker 1>complex stuff like playing that oscillator makes code cleaner definitely.

227
00:10:47.360 --> 00:10:50.039
<v Speaker 1>They show a working effects box with a multiplier parameter

228
00:10:50.120 --> 00:10:53.440
<v Speaker 1>to make it flexible, and default arguments, setting a fallback

229
00:10:53.519 --> 00:10:54.879
<v Speaker 1>value if an argument.

230
00:10:54.559 --> 00:10:57.919
<v Speaker 2>Isn't provided useful and they touch on the arguments object,

231
00:10:57.919 --> 00:10:59.679
<v Speaker 2>but quickly move to the modern.

232
00:10:59.440 --> 00:11:03.399
<v Speaker 1>Rest para right. The syntax lets you gather multiple arguments

233
00:11:03.399 --> 00:11:06.039
<v Speaker 1>into an array function some dot numbers.

234
00:11:05.799 --> 00:11:09.519
<v Speaker 2>Cleaner, more flexible way to handle varying numbers of inputs.

235
00:11:09.759 --> 00:11:13.639
<v Speaker 1>Now a big one function scope Variables you declare inside

236
00:11:13.639 --> 00:11:16.440
<v Speaker 1>a function with let or const. They're local they don't

237
00:11:16.440 --> 00:11:18.440
<v Speaker 1>clash with variables outside.

238
00:11:17.960 --> 00:11:21.080
<v Speaker 2>But the function can see its on variables and variables

239
00:11:21.080 --> 00:11:23.519
<v Speaker 2>in outer scopes, including the global scope.

240
00:11:23.240 --> 00:11:26.360
<v Speaker 1>Which is why the book Cammer's home. Always declare variables

241
00:11:26.440 --> 00:11:30.759
<v Speaker 1>with let or constant inside functions. Avoids accidental globals and

242
00:11:30.799 --> 00:11:31.600
<v Speaker 1>weird bugs.

243
00:11:32.000 --> 00:11:36.039
<v Speaker 2>Absolutely vital advice for organization and preventing side effects. They

244
00:11:36.080 --> 00:11:38.840
<v Speaker 2>also mention hoisting for function declarations.

245
00:11:38.879 --> 00:11:42.080
<v Speaker 1>Briefly, Yeah, they get moved to the top conceptually. Then

246
00:11:42.440 --> 00:11:46.200
<v Speaker 1>anonymous functions functions without names often used on.

247
00:11:46.120 --> 00:11:48.559
<v Speaker 2>The fly, like in callbacks or expressions, which.

248
00:11:48.440 --> 00:11:51.679
<v Speaker 1>Leads to closures. This one's a bit more advanced.

249
00:11:51.759 --> 00:11:52.679
<v Speaker 2>Yeah, it can be tricky.

250
00:11:52.879 --> 00:11:54.759
<v Speaker 1>Think of it as an inner function that remembers the

251
00:11:54.799 --> 00:11:57.799
<v Speaker 1>variables from its outer function even after the outer one

252
00:11:57.840 --> 00:11:58.559
<v Speaker 1>is done running.

253
00:11:58.679 --> 00:11:59.840
<v Speaker 2>It keeps its environment.

254
00:12:00.080 --> 00:12:02.720
<v Speaker 1>They use the effects box example again showing the inner

255
00:12:02.759 --> 00:12:05.799
<v Speaker 1>functions still accessing the component variable from the outer scope.

256
00:12:06.039 --> 00:12:08.039
<v Speaker 1>Whoa kind of mind bending it.

257
00:12:07.960 --> 00:12:11.639
<v Speaker 2>Is, but it's super powerful. Allows functions to maintain state.

258
00:12:11.919 --> 00:12:14.360
<v Speaker 2>Essentially crucial for lots of patterns.

259
00:12:14.600 --> 00:12:19.879
<v Speaker 1>Okay. Next, callback functions functions you pass as arguments to

260
00:12:20.000 --> 00:12:20.759
<v Speaker 1>other functions.

261
00:12:21.000 --> 00:12:23.240
<v Speaker 2>Enables flexibility asynchronous stuff.

262
00:12:23.279 --> 00:12:26.000
<v Speaker 1>They show a calculate frequencies example that can use a

263
00:12:26.039 --> 00:12:29.440
<v Speaker 1>default calculation or a custom callback you provide, and then

264
00:12:29.480 --> 00:12:31.720
<v Speaker 1>built in JavaScript callbacks.

265
00:12:31.279 --> 00:12:33.879
<v Speaker 2>Like array methods, dot filter, and map.

266
00:12:34.120 --> 00:12:37.559
<v Speaker 1>Yeah, these let you operate on array elements really elegantly

267
00:12:37.679 --> 00:12:41.279
<v Speaker 1>using callback functions. Imagine filtering audio samples with that.

268
00:12:41.399 --> 00:12:44.360
<v Speaker 2>Oh yeah, filter and dot map are incredibly expressive for

269
00:12:44.440 --> 00:12:48.000
<v Speaker 2>working with data collections. Fundamental for event handling too.

270
00:12:48.320 --> 00:12:53.879
<v Speaker 1>Chapter five wraps with function aerosyntax the expressive just a

271
00:12:53.919 --> 00:12:55.440
<v Speaker 1>shorter way to write function.

272
00:12:55.159 --> 00:12:58.720
<v Speaker 2>Expressions, especially concise for single parameters or simple returns.

273
00:12:58.799 --> 00:13:01.360
<v Speaker 1>And finally, recursion. A function calling.

274
00:13:01.159 --> 00:13:04.000
<v Speaker 2>Itself need that base case absolutely.

275
00:13:03.600 --> 00:13:06.240
<v Speaker 1>To stop it from looping forever and crashing your browser.

276
00:13:06.279 --> 00:13:09.480
<v Speaker 1>As they hilariously warn, they show a loop from two.

277
00:13:09.320 --> 00:13:11.919
<v Speaker 2>Example all again for some problems, but maybe not your

278
00:13:11.919 --> 00:13:12.840
<v Speaker 2>everyday tool.

279
00:13:12.919 --> 00:13:15.720
<v Speaker 1>Starting out right, okay, big jump out to chapter ten

280
00:13:16.320 --> 00:13:18.720
<v Speaker 1>Simplifying DOM programming with jQuery.

281
00:13:19.120 --> 00:13:22.240
<v Speaker 2>Okay, so we got JavaScript basics down. Now interacting with

282
00:13:22.279 --> 00:13:23.840
<v Speaker 2>the web page itself exactly.

283
00:13:23.879 --> 00:13:27.679
<v Speaker 1>The book introduces jquerys library to make interacting with the

284
00:13:27.720 --> 00:13:30.399
<v Speaker 1>DOM the document object model way easier.

285
00:13:30.519 --> 00:13:32.559
<v Speaker 2>The DOM is like the page of structure, right, all

286
00:13:32.559 --> 00:13:34.320
<v Speaker 2>the HTML elements, yeah, the.

287
00:13:34.320 --> 00:13:39.080
<v Speaker 1>Blueprint and manipulating it directly with just JavaScript can be verbose.

288
00:13:39.480 --> 00:13:42.440
<v Speaker 1>jQuery is like a set of shortcuts. Pre written code.

289
00:13:42.200 --> 00:13:46.200
<v Speaker 2>Handles browser differences too. Simplify subtax write less, Do more

290
00:13:46.320 --> 00:13:46.840
<v Speaker 2>is the motto.

291
00:13:47.000 --> 00:13:49.039
<v Speaker 1>So how do you use it? Two ways to include it?

292
00:13:49.440 --> 00:13:53.320
<v Speaker 1>Download the file or use a CDN, a content delivery network.

293
00:13:53.360 --> 00:13:55.639
<v Speaker 2>CDN needs internet though, good point.

294
00:13:55.799 --> 00:13:58.879
<v Speaker 1>Then the basic pattern select an HTML element, then do

295
00:13:59.000 --> 00:14:00.240
<v Speaker 1>something to it and select.

296
00:14:00.000 --> 00:14:04.159
<v Speaker 2>Acting is where jQuery shines. Uses syntax like CSS selectors.

297
00:14:04.320 --> 00:14:07.039
<v Speaker 1>Right, if you know CSS, this feels familiar. The sign

298
00:14:07.120 --> 00:14:10.559
<v Speaker 1>is the key. You can select elements like dive child elements,

299
00:14:10.559 --> 00:14:14.440
<v Speaker 1>t span descendants, p span, multiple types, dive span p.

300
00:14:14.799 --> 00:14:18.519
<v Speaker 2>Or by id, hashtag item or class night item.

301
00:14:18.679 --> 00:14:20.039
<v Speaker 1>They're very powerful.

302
00:14:20.320 --> 00:14:23.519
<v Speaker 2>Once selected, you use jQuery methods like dot CSS to

303
00:14:23.600 --> 00:14:26.360
<v Speaker 2>change styles. You can set one property or multiple using

304
00:14:26.360 --> 00:14:27.200
<v Speaker 2>an object.

305
00:14:27.000 --> 00:14:31.559
<v Speaker 1>And CSS is just one of many methods for changing content, attributes, styles, everything.

306
00:14:31.679 --> 00:14:34.399
<v Speaker 2>So the book does this great practical thing refactors. The

307
00:14:34.440 --> 00:14:36.360
<v Speaker 2>early Oscillator player code using.

308
00:14:36.279 --> 00:14:39.879
<v Speaker 1>jQuery shows the different side by side. Yeah, the longer

309
00:14:39.960 --> 00:14:42.879
<v Speaker 1>JavaScript for finding the on off button or the frequency

310
00:14:42.879 --> 00:14:47.080
<v Speaker 1>slider gets much shorter with jQuery selectors like hashtag on

311
00:14:47.240 --> 00:14:49.519
<v Speaker 1>off or input dot eq one.

312
00:14:49.399 --> 00:14:53.399
<v Speaker 2>To vowel explaining eq for selecting by position and dot

313
00:14:53.480 --> 00:14:55.799
<v Speaker 2>vowel for getting form element values.

314
00:14:55.960 --> 00:14:58.639
<v Speaker 1>It really shows how much cleaner and more readable jQuery

315
00:14:58.679 --> 00:15:00.320
<v Speaker 1>can make that dom interaction.

316
00:15:00.440 --> 00:15:03.200
<v Speaker 2>Drives home the benefit immediately. See the code shrink All.

317
00:15:03.200 --> 00:15:07.120
<v Speaker 1>Right, well more leap Chapter twenty three Building a step sequencer.

318
00:15:07.320 --> 00:15:09.879
<v Speaker 1>This is where it all comes together, a real interactive

319
00:15:09.879 --> 00:15:11.159
<v Speaker 1>audio app in the browser.

320
00:15:11.279 --> 00:15:14.879
<v Speaker 2>Yeah, building your own sequencer. That's about designing custom rhythm logic.

321
00:15:15.120 --> 00:15:17.440
<v Speaker 2>Huge potential beyond standard sequencers.

322
00:15:17.600 --> 00:15:21.240
<v Speaker 1>But the chapter starts with a problem precise musical timing

323
00:15:21.240 --> 00:15:24.320
<v Speaker 1>in JavaScript. Standard set interval and set timeout aren't quite

324
00:15:24.399 --> 00:15:25.320
<v Speaker 1>reliable enough, right.

325
00:15:25.360 --> 00:15:27.879
<v Speaker 2>They drift, and once you schedule something, it's hard to

326
00:15:27.960 --> 00:15:28.840
<v Speaker 2>unschedule cleanly.

327
00:15:29.080 --> 00:15:32.120
<v Speaker 1>So the books solution a custom schedule function. It doesn't

328
00:15:32.159 --> 00:15:34.480
<v Speaker 1>just fire and forget. It constantly checks if it's time

329
00:15:34.480 --> 00:15:36.080
<v Speaker 1>for the next event. More control.

330
00:15:36.200 --> 00:15:39.759
<v Speaker 2>The core idea uses a future tick time variable. It

331
00:15:39.879 --> 00:15:43.080
<v Speaker 2>tracks when the next tick should happen. The scheduler uses

332
00:15:43.120 --> 00:15:46.600
<v Speaker 2>set time out to repeatedly call itself, comparing future tick

333
00:15:46.679 --> 00:15:50.200
<v Speaker 2>time to the Web audio API's current time, so.

334
00:15:50.159 --> 00:15:53.039
<v Speaker 1>It's like a self correcting loop for timing exactly keeps

335
00:15:53.080 --> 00:15:53.519
<v Speaker 1>it accurate.

336
00:15:53.759 --> 00:15:58.039
<v Speaker 2>In tempo changing, the BPM adjusts a countertime value which

337
00:15:58.120 --> 00:15:59.960
<v Speaker 2>directly changes the timing within them.

338
00:16:00.480 --> 00:16:04.159
<v Speaker 1>Makes sense. Then they build the sequencer logic using JavaScript arrays,

339
00:16:04.519 --> 00:16:06.200
<v Speaker 1>kick tracks and air track, et cetera.

340
00:16:06.480 --> 00:16:09.080
<v Speaker 2>Each number in the array is a step in say

341
00:16:09.159 --> 00:16:13.279
<v Speaker 2>a sixteenth note sequence. Simple way to represent patterns position

342
00:16:13.399 --> 00:16:16.360
<v Speaker 2>is time, value is on off or velocity maybe gen.

343
00:16:16.399 --> 00:16:19.360
<v Speaker 1>To play the sounds a schedule sound function. It loops

344
00:16:19.360 --> 00:16:21.519
<v Speaker 1>through the track arrays based on a counter and triggers

345
00:16:21.559 --> 00:16:22.639
<v Speaker 1>the right sound at the right time.

346
00:16:22.879 --> 00:16:26.480
<v Speaker 2>Then the UI the grid. They use jQuery to dynamically

347
00:16:26.480 --> 00:16:29.919
<v Speaker 2>create HTML deve elements. Each row is an instrument.

348
00:16:30.080 --> 00:16:33.799
<v Speaker 1>Columns are steps dynamically generating HML. That's powerful. jQuery makes

349
00:16:33.799 --> 00:16:37.000
<v Speaker 1>adding those elements easy totally and making it interactive. jQuery

350
00:16:37.080 --> 00:16:40.960
<v Speaker 1>is on click clicks on the grid cells dot grid item.

351
00:16:40.840 --> 00:16:43.519
<v Speaker 2>Yet dot index figures out which cell in the row

352
00:16:43.600 --> 00:16:44.559
<v Speaker 2>was clicked right.

353
00:16:44.720 --> 00:16:47.480
<v Speaker 1>That index tells you the musical step. Clicking toggles the

354
00:16:47.480 --> 00:16:50.519
<v Speaker 1>step number and the corresponding track array adds or removes it.

355
00:16:51.039 --> 00:16:53.279
<v Speaker 1>And they toggle CSS classes too, so you see the

356
00:16:53.320 --> 00:16:54.200
<v Speaker 1>active steps light.

357
00:16:54.159 --> 00:16:56.720
<v Speaker 2>Up, visual feedback. Hello crucial.

358
00:16:57.120 --> 00:17:00.320
<v Speaker 1>Finally, they mentioned jQuery listeners for a metronome but and

359
00:17:00.360 --> 00:17:04.279
<v Speaker 1>a tempo slider, so user interaction controls the whole thing

360
00:17:04.319 --> 00:17:04.960
<v Speaker 1>in real time.

361
00:17:05.079 --> 00:17:09.640
<v Speaker 2>It's a fantastic example pulling everything together. JavaScript fundamentals, Web

362
00:17:09.680 --> 00:17:13.480
<v Speaker 2>Audio API for sound and timing, jQuery for the interactive UI,

363
00:17:13.799 --> 00:17:15.359
<v Speaker 2>a full browser audio app.

364
00:17:15.799 --> 00:17:19.839
<v Speaker 1>So wrapping up our deep dives, what a journey from

365
00:17:20.000 --> 00:17:25.359
<v Speaker 1>what's a program to JavaScript basics functions, simplifying with jQuery

366
00:17:25.559 --> 00:17:29.480
<v Speaker 1>and building a step sequencer. JavaScript for Sound Artists really

367
00:17:29.519 --> 00:17:32.880
<v Speaker 1>does connect audio thinking with programming concepts effectively.

368
00:17:33.000 --> 00:17:35.319
<v Speaker 2>Yeah, it demystifies. It shows you don't need to be

369
00:17:35.359 --> 00:17:37.920
<v Speaker 2>a coding guru to start making cool sonic tools in

370
00:17:37.920 --> 00:17:40.960
<v Speaker 2>the browser with the Web Audio API and libraries like jQuery.

371
00:17:41.000 --> 00:17:43.119
<v Speaker 1>So if this sparked your curiosity, If making your own

372
00:17:43.119 --> 00:17:45.880
<v Speaker 1>web audio tool sounds exciting, definitely check out the book.

373
00:17:45.920 --> 00:17:48.960
<v Speaker 2>There's way more in their audio files, effects, building sense.

374
00:17:49.079 --> 00:17:52.400
<v Speaker 1>Loads more, which leads to a final thought, go on,

375
00:17:52.680 --> 00:17:56.200
<v Speaker 1>just like early hardware sense opened up sound creation, could

376
00:17:56.279 --> 00:17:59.920
<v Speaker 1>JavaScript and the Web Audio API be this new way

377
00:18:00.079 --> 00:18:03.519
<v Speaker 1>of accessible, shareable audio innovation online.

378
00:18:03.640 --> 00:18:06.559
<v Speaker 2>That's a really interesting question. What kinds of tools and

379
00:18:06.599 --> 00:18:10.039
<v Speaker 2>experiences could you the listener build with this? What does

380
00:18:10.079 --> 00:18:12.279
<v Speaker 2>audio creation look like when it's native to the web.

381
00:18:12.440 --> 00:18:15.279
<v Speaker 1>Definitely food for a thought. To explore more, check the

382
00:18:15.319 --> 00:18:18.839
<v Speaker 1>book's companion side JavaScript for Sound Artists, dot com code

383
00:18:18.880 --> 00:18:21.680
<v Speaker 1>examples resources. It's all there, yep, and let us know

384
00:18:21.720 --> 00:18:24.319
<v Speaker 1>what parts of web audio interest you. Your questions might

385
00:18:24.359 --> 00:18:25.559
<v Speaker 1>just spark our next deep dive