1
00:00:00,000 --> 00:00:05,900

2
00:00:05,900 --> 00:00:07,170
>> SAM GREEN: Hej, alla.

3
00:00:07,170 --> 00:00:08,640
Välkommen till vårt seminarium.

4
00:00:08,640 --> 00:00:10,009
Mitt namn är Sam.

5
00:00:10,009 --> 00:00:11,050
HUGH Zabriskie: Jag är Hugh.

6
00:00:11,050 --> 00:00:17,420
SAM GREEN: Och vi kommer att prata idag
om JavaScript och webben Audio API.

7
00:00:17,420 --> 00:00:21,180
Bara för att börja, är detta ett utkast
av vår dagordning för seminariet.

8
00:00:21,180 --> 00:00:25,350
Vi ska börja med att tala om
varför du bör vara intresserad av webben

9
00:00:25,350 --> 00:00:30,130
Audio API, varför är JavaScript
det språk du behöver för det,

10
00:00:30,130 --> 00:00:32,619
och sedan prata om JavaScript
essentials-- så som,

11
00:00:32,619 --> 00:00:34,800
gå igenom några
grunderna i språket,

12
00:00:34,800 --> 00:00:37,290
och sedan prata om
audio API på en hög nivå.

13
00:00:37,290 --> 00:00:41,140
Då kommer Hugh tala om några
led i ljudproduktion

14
00:00:41,140 --> 00:00:45,509
och sedan demo denna enorma sequencer
Projektet byggde han och visar dig koden.

15
00:00:45,509 --> 00:00:48,050
Och då kommer vi att ha tid för
frågor i slutet för människor

16
00:00:48,050 --> 00:00:49,593
som är här lever.

17
00:00:49,593 --> 00:00:50,540
>> HUGH Zabriskie: Cool.

18
00:00:50,540 --> 00:00:50,990
>> SAM GREEN: Cool.

19
00:00:50,990 --> 00:00:51,383
>> HUGH Zabriskie: Cool.

20
00:00:51,383 --> 00:00:52,170
Jag kommer tillbaka upp.

21
00:00:52,170 --> 00:00:54,960
>> SAM GREEN: Så, det viktigaste först.

22
00:00:54,960 --> 00:00:57,840
Så en av de stora sakerna
om Web Audio API

23
00:00:57,840 --> 00:01:00,480
är att det finns ingen uppsättning upp krävs.

24
00:01:00,480 --> 00:01:04,230
Den levereras inbyggt i
de flesta moderna webbläsare,

25
00:01:04,230 --> 00:01:08,630
inklusive Chrome, Edge, en hel
gäng mot andra, alla de som

26
00:01:08,630 --> 00:01:12,650
att stora delar av
människor använder idag.

27
00:01:12,650 --> 00:01:14,807
Så det finns ingen inrättas,
bortsett från att bara få

28
00:01:14,807 --> 00:01:16,890
en webbserver går för
dig att komma igång att arbeta

29
00:01:16,890 --> 00:01:18,420
på ditt projekt, vilket är bra.

30
00:01:18,420 --> 00:01:21,500

31
00:01:21,500 --> 00:01:24,190
>> Vi rekommenderar ganska
tungt som du anser

32
00:01:24,190 --> 00:01:26,530
med hjälp av Chrome för
JavaScript webbutveckling,

33
00:01:26,530 --> 00:01:30,260
bara för att dess utvecklare
verktyg är riktigt stark.

34
00:01:30,260 --> 00:01:33,220
Som ett exempel på just vad vi menar
genom att säga öppnar JavaScript

35
00:01:33,220 --> 00:01:38,600
console-- om du går in Chrome
och du tittar på en webbsida,

36
00:01:38,600 --> 00:01:43,897
och du vänsterklicka
Inspektera Element, och sedan

37
00:01:43,897 --> 00:01:46,730
du går till denna lilla rullgardins
här och du klickar på Console

38
00:01:46,730 --> 00:01:50,660
ser du vad öppnar ser
mycket som en kommandotolk som du

39
00:01:50,660 --> 00:01:53,720
kan se på din Mac, eller på ID.

40
00:01:53,720 --> 00:01:59,260
Och precis som vi kan
typ kommandon här, liksom Klar,

41
00:01:59,260 --> 00:02:01,350
och andra kommandon som.

42
00:02:01,350 --> 00:02:04,267
Vi kan skapa variabler, som
vi får se senare i JavaScript.

43
00:02:04,267 --> 00:02:07,100
Och så allt vi kan göra i
JavaScript, kan vi göra med konsolen,

44
00:02:07,100 --> 00:02:11,430
och det är en super praktiskt sätt att
börja spela runt med API: er

45
00:02:11,430 --> 00:02:15,760
och att få bekväm med
JavaScript höger utanför bat.

46
00:02:15,760 --> 00:02:18,290
Ingen inrättats krävs,
vilket är riktigt nice.

47
00:02:18,290 --> 00:02:18,790
Häftigt.

48
00:02:18,790 --> 00:02:22,064

49
00:02:22,064 --> 00:02:22,880
Grymt bra.

50
00:02:22,880 --> 00:02:24,780
>> Så bara en sak att tillägga.

51
00:02:24,780 --> 00:02:27,780
Om du har några questions-- finns
många av er som inte är här bor,

52
00:02:27,780 --> 00:02:31,232
gärna kontakta oss-- dessa
är våra e-postadresser.

53
00:02:31,232 --> 00:02:33,190
Om du har frågor
du inte vill att fråga oss,

54
00:02:33,190 --> 00:02:36,160
som, åh jag har en bugg
i min kod, eller något

55
00:02:36,160 --> 00:02:39,270
som är lite mer specifikt,
kanske Google det först.

56
00:02:39,270 --> 00:02:42,340
Det finns en hel del stora resurser
om Web Audio API ute.

57
00:02:42,340 --> 00:02:44,089
Det är riktigt bra
dokumenterat och det är att vara

58
00:02:44,089 --> 00:02:47,194
används av massor av människor i
industri, och människor som är precis

59
00:02:47,194 --> 00:02:48,610
bygga roliga saker för sig själva.

60
00:02:48,610 --> 00:02:51,306
Så det borde finnas en hel del
resurser ute.

61
00:02:51,306 --> 00:02:53,040
Grymt bra.

62
00:02:53,040 --> 00:02:56,100
>> Cool, så varför Web Audio API?

63
00:02:56,100 --> 00:02:59,840
Detta diagram är lite
av en utveckling av det sätt

64
00:02:59,840 --> 00:03:04,100
ljud på nätet har ökat över tid.

65
00:03:04,100 --> 00:03:13,080
Bgsound var som den ursprungliga HTML-tagg
att Internet Explorer används för att stödja.

66
00:03:13,080 --> 00:03:16,790
Det tillät bara ganska grundläggande ljud,
funktionaliteten var inte mycket robust,

67
00:03:16,790 --> 00:03:19,380
och du kan inte göra
komplicerad sekvensering,

68
00:03:19,380 --> 00:03:21,890
eller kontrollera när ljudet började
och slutade mycket robust.

69
00:03:21,890 --> 00:03:23,930
Så var det inte särskilt
väl utvecklad.

70
00:03:23,930 --> 00:03:27,470
Sedan efter det, Flash
kom along-- som,

71
00:03:27,470 --> 00:03:31,712
Jag är säker på att ni alla känner
med Flash-- kanske inte hur det fungerar,

72
00:03:31,712 --> 00:03:32,920
men du har säkert sett det.

73
00:03:32,920 --> 00:03:35,586
Du har fått för att uppdatera din Flash
Plug-in, alla såna saker,

74
00:03:35,586 --> 00:03:40,110
och som verkligen förlängde intervallet
funktionalitet som fanns.

75
00:03:40,110 --> 00:03:45,370
Men att användaren installera
en plug-in är definitivt

76
00:03:45,370 --> 00:03:48,480
en nackdel att inkludera Flash
i programmet, eller hur?

77
00:03:48,480 --> 00:03:52,410
För då är du beroende av
användaren går och hitta denna plug-in,

78
00:03:52,410 --> 00:03:54,660
och förmodligen vrids
upp genom detta extra steg

79
00:03:54,660 --> 00:03:56,640
de måste vidta för att använda din app.

80
00:03:56,640 --> 00:04:01,270
Och då det kan finnas en uppdatering
som kommer att bryta hela din ansökan,

81
00:04:01,270 --> 00:04:03,880
och det slutar upp att vara en mardröm
för utvecklare, också.

82
00:04:03,880 --> 00:04:06,230
Så det var en barrikad.

83
00:04:06,230 --> 00:04:10,480
>> Och sedan efter det kom,
HTML ljud taggen, som

84
00:04:10,480 --> 00:04:16,579
är en funktion av mer moderna HTML-- som
säkert tillåtet för en mycket mer grejer,

85
00:04:16,579 --> 00:04:20,050
men även de saker du kan göra
Det var lite begränsad just

86
00:04:20,050 --> 00:04:22,730
som ett resultat av de saker
att HTML var kapabel till.

87
00:04:22,730 --> 00:04:26,060
Så när JavaScript
API, Web Audio API,

88
00:04:26,060 --> 00:04:29,290
blev en standard
öva i olika webbläsare,

89
00:04:29,290 --> 00:04:32,490
som verkligen breddat uppsättningen
möjligheter för utvecklare

90
00:04:32,490 --> 00:04:36,590
att verkligen komma in byggnaden
coola grejer för webben.

91
00:04:36,590 --> 00:04:39,220
Under en lång tid hade
varit riktigt robusta verktyg

92
00:04:39,220 --> 00:04:44,360
för infödda ljudprogram,
like-- alla vet Garageband

93
00:04:44,360 --> 00:04:48,360
och då är det uppenbart finns det mer
professionella ljudmixning applikationer,

94
00:04:48,360 --> 00:04:49,640
och sånt.

95
00:04:49,640 --> 00:04:52,690
Men det var inte en
riktigt bra Cloud-- inte

96
00:04:52,690 --> 00:04:55,811
Moln, ja, antar jag
Cloud-- webbaserad plattform

97
00:04:55,811 --> 00:04:58,310
som skulle tillåta utvecklare att
bygga applikationer för människor

98
00:04:58,310 --> 00:05:00,570
att göra ljudmixning.

99
00:05:00,570 --> 00:05:03,960
Och som han kommer att visa dig
senare, Web Audio API

100
00:05:03,960 --> 00:05:07,470
möjliggör riktigt kraftfull
saker att hända riktigt enkelt,

101
00:05:07,470 --> 00:05:09,597
vilket är ganska coolt.

102
00:05:09,597 --> 00:05:12,680
Så det är instruktionen att varför du
bör se resten av seminariet

103
00:05:12,680 --> 00:05:14,350
i grund och botten.

104
00:05:14,350 --> 00:05:17,880
>> Och nu kommer jag att tala om
vissa JavaScript-- bara grundläggande element

105
00:05:17,880 --> 00:05:20,240
av språket, så att
vi kan vara på samma sida

106
00:05:20,240 --> 00:05:22,470
när vi talar om
API lite senare.

107
00:05:22,470 --> 00:05:23,260
Häftigt.

108
00:05:23,260 --> 00:05:26,192
>> Så detta är ett sammandrag.

109
00:05:26,192 --> 00:05:27,150
Jag glömde det var här.

110
00:05:27,150 --> 00:05:27,510
Ja.

111
00:05:27,510 --> 00:05:27,870
>> HUGH Zabriskie: Det finns två bilder här.

112
00:05:27,870 --> 00:05:30,245
>> SAM GRÖN: Detta är sammanfattningen
av vissa av de begränsningar

113
00:05:30,245 --> 00:05:35,220
av de andra bindande, gamla metoder.

114
00:05:35,220 --> 00:05:37,828
Och så nu har vi dessa saker.

115
00:05:37,828 --> 00:05:40,011
Häftigt.

116
00:05:40,011 --> 00:05:40,510
Grymt bra.

117
00:05:40,510 --> 00:05:43,200
>> Så JavaScript väsentligheter.

118
00:05:43,200 --> 00:05:47,230
Första saker först, det finns en
ganska signifikant skillnad

119
00:05:47,230 --> 00:05:49,940
i JavaScript kontra in ett
språk som C, på det sätt

120
00:05:49,940 --> 00:05:52,050
att variabler skapas.

121
00:05:52,050 --> 00:05:55,634
Så i C, vi vana vid att ha
att skriva våra variabler, eller hur?

122
00:05:55,634 --> 00:05:57,800
Och jag menar inte typen som
skriver dem, menar jag typ

123
00:05:57,800 --> 00:06:01,900
som tilldela dem en Motortyp- betydelse
liknande, en int, en flottör, en röding.

124
00:06:01,900 --> 00:06:05,210
I C, var vi verkligen används för att
att behöva skapa en variabel

125
00:06:05,210 --> 00:06:09,690
och sedan hålla sig till denna typ för
hela tiden att vi använder den variabeln.

126
00:06:09,690 --> 00:06:13,990
Och det är inte nödvändigtvis sämre,
men det är nog svårare att använda.

127
00:06:13,990 --> 00:06:16,190
En av de häftiga funktioner
JavaScript är

128
00:06:16,190 --> 00:06:19,740
att variabler är vad som kallas
"dynamiskt skrivit", som

129
00:06:19,740 --> 00:06:22,500
betyder att jag kan skapa en
variabel med den syntax,

130
00:06:22,500 --> 00:06:25,800
varX lika 5, till exempel.

131
00:06:25,800 --> 00:06:27,790
Som ursprungligen skapar
ett heltal variable--

132
00:06:27,790 --> 00:06:29,870
rätt under
huva somewhere-- men jag

133
00:06:29,870 --> 00:06:33,040
kan ändra denna variabel
att hänvisa till en sträng

134
00:06:33,040 --> 00:06:35,820
utan att göra något liknande
skapa en ny variabel.

135
00:06:35,820 --> 00:06:37,880
Jag behöver inte oroa dig
om typen förändras.

136
00:06:37,880 --> 00:06:45,440
JavaScript vet att den typ s
förändrats, och det händer dynamiskt.

137
00:06:45,440 --> 00:06:48,510
>> Så, det finns fördelar
och nackdelar med det,

138
00:06:48,510 --> 00:06:51,250
som alla som arbetat i
JavaScript för ett tag kanske vet.

139
00:06:51,250 --> 00:06:53,600
Det finns tillfällen när
du kanske av misstag

140
00:06:53,600 --> 00:06:57,720
ändra typ av en variabel och
inte hantera den typen förändras,

141
00:06:57,720 --> 00:07:01,120
och sedan ditt JavaScript
kan crash-- eller ett undantag

142
00:07:01,120 --> 00:07:06,070
kastas, eftersom du har
fel typ när du förväntar dig en typ.

143
00:07:06,070 --> 00:07:07,040
Häftigt.

144
00:07:07,040 --> 00:07:11,470
>> Så är scoping-- vilka samma, om vi
minns de första veckorna i kursen,

145
00:07:11,470 --> 00:07:15,420
hänvisar till hur synlig en variabel
är och i vilken del av koden.

146
00:07:15,420 --> 00:07:18,400
Allt detta är mycket lik
till hur det ser ut i C.

147
00:07:18,400 --> 00:07:24,755
Så variabler är i allmänhet scoped
inom klamrar inom en funktion,

148
00:07:24,755 --> 00:07:27,005
och sedan finns det också
globalt Scoped variabler som

149
00:07:27,005 --> 00:07:29,171
är-- om du skriver en variabel
utsidan av en funktion,

150
00:07:29,171 --> 00:07:31,790
det kommer att vara synlig i hela texten.

151
00:07:31,790 --> 00:07:35,840
>> En skillnad mellan
JavaScript och C i synnerhet,

152
00:07:35,840 --> 00:07:40,280
är att om du deklarerar en global
variabel som helst i en textfil

153
00:07:40,280 --> 00:07:43,324
det är synlig i någon funktion
inom denna textfil.

154
00:07:43,324 --> 00:07:44,240
Det stämmer, eller hur?

155
00:07:44,240 --> 00:07:46,330
>> HUGH Zabriskie: Japp.

156
00:07:46,330 --> 00:07:49,120
>> SAM GREEN: Så det är också lite
bit funky i jämförelse med C,

157
00:07:49,120 --> 00:07:52,660
där vi alltid måste ha vår
variabla definitionerna ovan platserna

158
00:07:52,660 --> 00:07:53,770
de användes.

159
00:07:53,770 --> 00:07:57,957
Det är inte en regel som är verk
längre, så lite annorlunda.

160
00:07:57,957 --> 00:08:00,540
Och återigen bara reemphasize,
globala kontra lokal variables--

161
00:08:00,540 --> 00:08:03,457
mycket lik C. Du kunde ha
två variabler med samma namn,

162
00:08:03,457 --> 00:08:06,540
och har en av sina namn skuggas
av en lokal variabel om en av dem

163
00:08:06,540 --> 00:08:07,546
var global.

164
00:08:07,546 --> 00:08:09,420
Så, liknande typ av
problem som vissa av er

165
00:08:09,420 --> 00:08:11,920
kan ha stött på i vissa
av problemet sätter hittills.

166
00:08:11,920 --> 00:08:14,450
Cool, så det är variabler.

167
00:08:14,450 --> 00:08:20,310
>> Flödeskontroll, vilket innebär liknande,
if-else-- logisk stuff-- och loopar.

168
00:08:20,310 --> 00:08:24,510
Så till att börja med, är detta vad if-else
uttalanden ser ut i JavaScript.

169
00:08:24,510 --> 00:08:29,750
Placeringen av de olika aktiviteterna
på linjerna är inte viktigt.

170
00:08:29,750 --> 00:08:34,409
Detta är bara ett av de konventioner
för hur vi strukturen kod.

171
00:08:34,409 --> 00:08:38,634
Precis som i C, har vi en
"om" en parentes uttalande.

172
00:08:38,634 --> 00:08:40,840

173
00:08:40,840 --> 00:08:42,090
Det är inte vad jag menade att göra.

174
00:08:42,090 --> 00:08:44,860

175
00:08:44,860 --> 00:08:45,550
Jag gjorde det igen.

176
00:08:45,550 --> 00:08:46,841
>> HUGH Zabriskie: Försöker att avsluta?

177
00:08:46,841 --> 00:08:49,770
SAM GREEN: Nej, jag är
försöker bara zooma in.

178
00:08:49,770 --> 00:08:50,660
Det spelar ingen roll.

179
00:08:50,660 --> 00:08:54,730

180
00:08:54,730 --> 00:08:59,370
>> Så har vi en "om" uttalande och
Vi har ett tillstånd inne i det

181
00:08:59,370 --> 00:09:03,130
som utvärderas till sant eller falskt,
och som avgör om eller inte

182
00:09:03,130 --> 00:09:04,510
Vi anger att kodblocket.

183
00:09:04,510 --> 00:09:09,860
Och på samma sätt, vi har en annan-om, och
en annan, precis som vi är vana vid i C.

184
00:09:09,860 --> 00:09:14,010
>> Du bör också vara ganska bekväm
just off the bat med öglor,

185
00:09:14,010 --> 00:09:16,440
eftersom de också ser
en hel del som C ser ut.

186
00:09:16,440 --> 00:09:19,600
Men du kommer att märka en gång att vi
har, i stället för int initieringar,

187
00:09:19,600 --> 00:09:22,570
vi har Var initieringar.

188
00:09:22,570 --> 00:09:24,650
Och jag antar att du har
vara noga med att göra

189
00:09:24,650 --> 00:09:28,460
att du inte ändra värdet
av I från en int till en sträng,

190
00:09:28,460 --> 00:09:31,780
till exempel, eftersom det kommer att
orsaka konstigt beteende som du kanske inte

191
00:09:31,780 --> 00:09:32,280
förvänta.

192
00:09:32,280 --> 00:09:35,750
Men detta bör se
ganska bekant, liksom.

193
00:09:35,750 --> 00:09:39,460
>> Så det här är där saker börjar
få lite galen i JavaScript

194
00:09:39,460 --> 00:09:44,920
för någon som kommer från en
bakgrund av C. Det finns funktioner

195
00:09:44,920 --> 00:09:48,070
i JavaScript, och det finns ett sätt
att deklarera en funktion som ser

196
00:09:48,070 --> 00:09:50,361
slags liknar C och
så finns det en annan som

197
00:09:50,361 --> 00:09:52,450
ser typ av annorlunda.

198
00:09:52,450 --> 00:09:54,930
>> Den första versionen,
som vi kan se här,

199
00:09:54,930 --> 00:09:59,260
är typ av C-liknande, där
vi säga att detta är en funktion,

200
00:09:59,260 --> 00:10:01,490
ge den ett namn, ge
antalet argument,

201
00:10:01,490 --> 00:10:05,150
och sedan innehållet i funktion
gå in dessa klammerparentes.

202
00:10:05,150 --> 00:10:08,850
Vi får se ett exempel på
argument på bara en sekund.

203
00:10:08,850 --> 00:10:13,420
>> Medan på nästa rad ser vi, oh,
Här är en variabel som heter "myFunction"

204
00:10:13,420 --> 00:10:17,546
och vi lika till detta
generisk thing-- function-- som

205
00:10:17,546 --> 00:10:19,170
verkar inte ha något på gång.

206
00:10:19,170 --> 00:10:22,780

207
00:10:22,780 --> 00:10:26,080
Anledningen till att är annorlunda
än C är att JavaScript

208
00:10:26,080 --> 00:10:30,040
är vad som kallas en funktionellt språk,
eller har funktionella element, vilket innebär

209
00:10:30,040 --> 00:10:33,510
som fungerar faktiskt värden.

210
00:10:33,510 --> 00:10:39,520
Och det innebär att vi kan ställa in
en variabel till lika en funktion

211
00:10:39,520 --> 00:10:43,210
och sedan flytta den funktionen
runt, skicka den som ett argument,

212
00:10:43,210 --> 00:10:46,550
göra alla typer av saker
sånt med funktioner.

213
00:10:46,550 --> 00:10:49,682
>> En annan sak att note--
funktioner skrivs

214
00:10:49,682 --> 00:10:51,140
med ett visst antal argument.

215
00:10:51,140 --> 00:10:54,056
Vi får se ett exempel på en funktion
med ett argument på nästa bild.

216
00:10:54,056 --> 00:10:56,720
Men JavaScript kommer inte
skrika på dig om du försöker

217
00:10:56,720 --> 00:10:59,330
att använda en funktion med
fel antal argument.

218
00:10:59,330 --> 00:11:05,310
Det kommer bara att göra sitt bästa för att göra
gör, vilket innebär att om du passerar,

219
00:11:05,310 --> 00:11:09,410
du kallar en funktion som förväntar sig en
argument utan argument, allt

220
00:11:09,410 --> 00:11:13,990
kommer att hända är att det kommer att göra sitt bästa
att försöka köra denna kod,

221
00:11:13,990 --> 00:11:16,541
och om det så småningom går
till ett undantag eller ett fel,

222
00:11:16,541 --> 00:11:19,790
det ska kasta detta undantag och bara hålla
going-- som är bara ett av de sätt

223
00:11:19,790 --> 00:11:21,070
att JavaScript fungerar.

224
00:11:21,070 --> 00:11:21,781
Ja.

225
00:11:21,781 --> 00:11:24,207
>> PUBLIK: Vad händer om
det finns för många argument?

226
00:11:24,207 --> 00:11:26,040
SAM GRÖN: Så
Frågan var, vad händer

227
00:11:26,040 --> 00:11:27,380
om det finns för många argument?

228
00:11:27,380 --> 00:11:29,171
Och svaret är att
JavaScript kommer bara

229
00:11:29,171 --> 00:11:32,120
ignorera de som är
efter de den förväntar sig.

230
00:11:32,120 --> 00:11:36,420
Det ska försöka utföra funktionen
kalla som om det var bara de två första.

231
00:11:36,420 --> 00:11:37,075
Höger?

232
00:11:37,075 --> 00:11:37,700
>> HUGH Zabriskie: Det stämmer, ja.

233
00:11:37,700 --> 00:11:39,449
Likaså om det
är för få argument,

234
00:11:39,449 --> 00:11:42,640
det bara typ av ger null till alla
argument som inte har några värden

235
00:11:42,640 --> 00:11:43,660
för.

236
00:11:43,660 --> 00:11:45,810
>> SAM GREEN: Vilket kan
faktiskt vara praktiskt om du

237
00:11:45,810 --> 00:11:49,060
vill skriva en funktion som
tar ett variabelt antal argument.

238
00:11:49,060 --> 00:11:55,830
Du kan ställa in standardvärden i
definitionen av funktionen,

239
00:11:55,830 --> 00:11:59,060
och det kan bortse från det faktum
att ingången inte är där.

240
00:11:59,060 --> 00:12:01,584

241
00:12:01,584 --> 00:12:04,000
Så jag vill prata lite
mer om detta sista kulan

242
00:12:04,000 --> 00:12:05,541
punkten, som är funktioner är värden.

243
00:12:05,541 --> 00:12:07,930

244
00:12:07,930 --> 00:12:11,010
Detta är ett exempel som är
lite mind-blowing

245
00:12:11,010 --> 00:12:14,880
Om du bara läsa det, och tror inte
om vad som händer på en sekund.

246
00:12:14,880 --> 00:12:17,910
Så, låt oss titta bara på
den första raden här.

247
00:12:17,910 --> 00:12:24,360
Vi har denna variabel, f1, att vi säger
är en funktion som gör det här.

248
00:12:24,360 --> 00:12:28,535
Och innehållet i funktionen
är console.log ("hej").

249
00:12:28,535 --> 00:12:32,220
Du kan tänka på console.log som
JavaScript ekvivalent printf.

250
00:12:32,220 --> 00:12:35,510
Så vad kommer att hända är, om vi
kör den här koden i våra webbläsare,

251
00:12:35,510 --> 00:12:37,530
det ska skriva ut en sträng.

252
00:12:37,530 --> 00:12:39,342
Jag kan visa det.

253
00:12:39,342 --> 00:12:42,300
PUBLIK: Genom log, men gör det
menar det spelas in någonstans?

254
00:12:42,300 --> 00:12:42,550
SAM GREEN: Ja.

255
00:12:42,550 --> 00:12:44,216
Så jag ska visa dig vad som kommer att hända.

256
00:12:44,216 --> 00:12:48,085
Så frågan var, vad logga detta?

257
00:12:48,085 --> 00:12:51,262
>> HUGH Zabriskie: Så console.log
är som printf för C.

258
00:12:51,262 --> 00:12:52,970
SAM GREEN: Så console.log
är som printf,

259
00:12:52,970 --> 00:12:59,240
så om jag har denna console.log ("hej"),
och jag kallar det, strängen "hello"

260
00:12:59,240 --> 00:13:00,730
får skrivas ut till konsolen.

261
00:13:00,730 --> 00:13:03,340
Detta är konsolen.

262
00:13:03,340 --> 00:13:05,930
Det är precis som printf, där
Det skriver till standard ut.

263
00:13:05,930 --> 00:13:09,050

264
00:13:09,050 --> 00:13:11,230
Och vi får se i en minut,
men detta är faktiskt

265
00:13:11,230 --> 00:13:16,529
hänvisning till konsolen objektet,
och anropa en metod på det objektet.

266
00:13:16,529 --> 00:13:18,320
Det kommer att göra mer meningsfullt
i en minut när vi

267
00:13:18,320 --> 00:13:20,660
få tala om
objekt i JavaScript,

268
00:13:20,660 --> 00:13:22,509
men jag tänkte att jag skulle nämna det.

269
00:13:22,509 --> 00:13:24,300
HUGH Zabriskie: Vi är
brukade i C, right--

270
00:13:24,300 --> 00:13:27,580
vi brukar skriva ett stort program
i huvud att göra någonting.

271
00:13:27,580 --> 00:13:30,700
Men vad är hett i JavaScript är du
har denna typ av tolk som

272
00:13:30,700 --> 00:13:33,620
körs i realtid, så det
tar bara rad för rad,

273
00:13:33,620 --> 00:13:35,320
Det kan bara tolka det på plats.

274
00:13:35,320 --> 00:13:37,403
Och det håller reda på
saker som har kört tidigare,

275
00:13:37,403 --> 00:13:41,620
så det är ett ganska användbart verktyg för att
använda console.log eller konsolen,

276
00:13:41,620 --> 00:13:46,870
i allmänhet, för att bara spela
runt med JavaScript.

277
00:13:46,870 --> 00:13:51,420
>> SAM GREEN: Så gå tillbaka till denna
example-- den andra kodraden

278
00:13:51,420 --> 00:13:55,320
här är ganska häpnadsväckande i mitt huvud.

279
00:13:55,320 --> 00:13:59,790
Första gången jag läste detta,
det var som, vad som händer?

280
00:13:59,790 --> 00:14:04,580
Så vad som händer är detta
funktionsdeklarationen säger,

281
00:14:04,580 --> 00:14:10,170
Jag har en funktion som kallas f2
som är förväntar sig ett argument, f,

282
00:14:10,170 --> 00:14:12,990
och sedan kallar det att
funktion, f, som

283
00:14:12,990 --> 00:14:17,652
leddes till det som ett argument
utan argument själv.

284
00:14:17,652 --> 00:14:19,110
Så, det kan ha varit förvirrande.

285
00:14:19,110 --> 00:14:21,890

286
00:14:21,890 --> 00:14:28,400
Om vi ​​förstår detta som f2 tar f1
som ett argument, och sedan inne i f2,

287
00:14:28,400 --> 00:14:31,190
f får called-- som medel
att den här kodraden,

288
00:14:31,190 --> 00:14:34,192
efter dessa två rader av
kod, resulterar i "Hej"

289
00:14:34,192 --> 00:14:35,400
skrivs ut till konsolen.

290
00:14:35,400 --> 00:14:41,660

291
00:14:41,660 --> 00:14:44,910
>> Det faktum att vi kan passera
funktioner runt som värden

292
00:14:44,910 --> 00:14:47,870
slutar upp att vara ett av de mest
kraftfulla funktioner för JavaScript

293
00:14:47,870 --> 00:14:49,700
som ett programmeringsspråk.

294
00:14:49,700 --> 00:14:52,782
Utanför alla av
grymma saker man kan göra,

295
00:14:52,782 --> 00:14:54,990
precis som ett särdrag hos
språket i fråga om det sätt

296
00:14:54,990 --> 00:14:58,400
att det gör det enkelt
att programmera och medger

297
00:14:58,400 --> 00:15:01,060
för saker som inte är särskilt
väl lämpad för webben,

298
00:15:01,060 --> 00:15:04,500
funktionell programmering och funktionell
programmering aspekter av JavaScript

299
00:15:04,500 --> 00:15:07,130
är en av de mest
kraftfulla begrepp som

300
00:15:07,130 --> 00:15:11,030
existerar i JavaScript-- om du frågar mig.

301
00:15:11,030 --> 00:15:11,960
Häftigt.

302
00:15:11,960 --> 00:15:13,534
>> Så, nästa sak.

303
00:15:13,534 --> 00:15:16,450
Förutom att vara funktionella,
Det finns också inslag av JavaScript

304
00:15:16,450 --> 00:15:20,510
som är objektorienterat,
vilket är ett av de mycket

305
00:15:20,510 --> 00:15:23,800
populära modeord i datavetenskap.

306
00:15:23,800 --> 00:15:27,040
Objektorienterad programmering
är en riktigt populär sak.

307
00:15:27,040 --> 00:15:34,210
JavaScript har en version av det,
där jag tror att varje värde är också

308
00:15:34,210 --> 00:15:41,475
ett objekt, vilket innebär att varje objekt
sveper ihop ett visst antal värden.

309
00:15:41,475 --> 00:15:44,020

310
00:15:44,020 --> 00:15:49,750
Så för värden som är enkla, som
ett heltal, som varX lika 5,

311
00:15:49,750 --> 00:15:52,250
objektet sveper just det ett värde.

312
00:15:52,250 --> 00:15:54,760

313
00:15:54,760 --> 00:15:59,036
>> Men vi kan också tänka sig en situation
where-- vi kan tänka på situationer i C

314
00:15:59,036 --> 00:16:00,910
där vi ville göra
något med structs,

315
00:16:00,910 --> 00:16:03,285
till exempel, wraps flera som
värden ihop och skapar

316
00:16:03,285 --> 00:16:05,870
det verkligen lätt att passera på kuttingen.

317
00:16:05,870 --> 00:16:09,270
Det är när ett föremål är i JavaScript.

318
00:16:09,270 --> 00:16:12,340
>> Det är viktigt att komma ihåg
när jag säger att föremål insvept

319
00:16:12,340 --> 00:16:15,330
några antal värden tillsammans,
att funktioner är också

320
00:16:15,330 --> 00:16:21,506
värden, som betyder att funktioner kan
också vara inne i ett JavaScript-objekt.

321
00:16:21,506 --> 00:16:26,910
Och anledningen till att är viktigt
är att, medan vi ofta

322
00:16:26,910 --> 00:16:30,290
tror att kalla en metod
på ett objekt som är

323
00:16:30,290 --> 00:16:35,200
en populär term från andra
populära objektorienterade språk,

324
00:16:35,200 --> 00:16:39,330
en av skillnaderna här är att
allt som en metod i JavaScript

325
00:16:39,330 --> 00:16:47,270
är ett värde som lagras inne i ett objekt
som utför vissa action-- möjligen

326
00:16:47,270 --> 00:16:51,850
med hjälp av de andra värdena som är inne
av det objektet, men inte nödvändigtvis.

327
00:16:51,850 --> 00:16:56,930
Så du kan föreställa sig en situation, jag
gissa i en liten bit av en galen sätt,

328
00:16:56,930 --> 00:17:02,990
där du kallas en metod för en
invändningar på ett annat objekt, till exempel.

329
00:17:02,990 --> 00:17:06,010
Så det är lite funky på det sättet.

330
00:17:06,010 --> 00:17:09,369
>> Och du kan också ändra metoderna
som är associerade med ett objekt

331
00:17:09,369 --> 00:17:13,740
genom att tilldela denna metod en
ny funktion, som också är

332
00:17:13,740 --> 00:17:18,250
ganska annorlunda från andra
objektorienterade språk, där

333
00:17:18,250 --> 00:17:21,410
när vi deklarerar ett objekt
och initiera det,

334
00:17:21,410 --> 00:17:25,839
Vi kan inte ändra de metoder som är
associerad med det objektet längre.

335
00:17:25,839 --> 00:17:28,680
Så det är ganska annorlunda.

336
00:17:28,680 --> 00:17:29,570
Häftigt.

337
00:17:29,570 --> 00:17:34,010
>> Så här är ett exempel, först,
av ett objekt i aktion.

338
00:17:34,010 --> 00:17:36,390
Detta är vad som kallas
ett generiskt objekt, som

339
00:17:36,390 --> 00:17:39,460
innebär att den inte har någon
visst namn, inte har en klass,

340
00:17:39,460 --> 00:17:42,190
Det är bara några omslag av värden.

341
00:17:42,190 --> 00:17:49,790
Och sättet som ser är att vi har
denna yttre par lockigt hängslen här

342
00:17:49,790 --> 00:17:57,950
som indikerar att JavaScript
och säga att detta är ett objekt.

343
00:17:57,950 --> 00:18:02,130
Värdena inuti det
är varje värden inne

344
00:18:02,130 --> 00:18:04,590
på det objekt som ska
lindas tillsammans.

345
00:18:04,590 --> 00:18:09,180
Och inne i objektet,
Vi har sedan nyckelpar värde,

346
00:18:09,180 --> 00:18:13,880
där nyckeln refererar till namnet
av värdet på insidan av föremålet,

347
00:18:13,880 --> 00:18:16,790
och den andra side--
mittemot kolon här--

348
00:18:16,790 --> 00:18:19,850
är det faktiska värdet
som ska lagras.

349
00:18:19,850 --> 00:18:26,210
>> Så du ser här att vi har en
nyckel kallas fn med värde sam,

350
00:18:26,210 --> 00:18:29,430
följt av ett kommatecken,
säger till nästa post.

351
00:18:29,430 --> 00:18:33,560
Då en nyckel kallas ln,
med ett värde av grönt,

352
00:18:33,560 --> 00:18:35,840
följt av ett kommatecken,
följt av "tryck"

353
00:18:35,840 --> 00:18:43,209
som kommer att ha en funktion värde
som kommer att göra den här kodraden.

354
00:18:43,209 --> 00:18:45,500
Låt oss ta ett steg tillbaka och
packa vad som händer här.

355
00:18:45,500 --> 00:18:47,280
Så det här är lite komplicerat,
och vi ser något nytt

356
00:18:47,280 --> 00:18:48,071
för första gången.

357
00:18:48,071 --> 00:18:51,190

358
00:18:51,190 --> 00:18:55,065
Den "detta" nyckelordet är den nya sak
vi ser här, och vad detta innebär

359
00:18:55,065 --> 00:19:00,540
är, hänvisar till det nuvarande
invändningar i omfattning, eller hur?

360
00:19:00,540 --> 00:19:03,990
Så när vi säger, det här
Parlamentet hela vägen tillbaka

361
00:19:03,990 --> 00:19:08,140
till hela denna object--
när vi gör this.fn,

362
00:19:08,140 --> 00:19:11,990
vi kommer att gå hela vägen tillbaka
till detta objekt, går till fn värdet

363
00:19:11,990 --> 00:19:16,471
och få sam, dra den hela vägen
tillbaka, hålla den här, och sedan gå vidare.

364
00:19:16,471 --> 00:19:19,838
>> PUBLIK: Så med hämtning, är
det gjort på grund av parametern

365
00:19:19,838 --> 00:19:20,621
definition?

366
00:19:20,621 --> 00:19:23,870
SAM GRÖN: Så frågan var, är det
hämtning gjort på grund av parametern

367
00:19:23,870 --> 00:19:24,727
definition?

368
00:19:24,727 --> 00:19:25,435
Ja, absolut.

369
00:19:25,435 --> 00:19:29,660

370
00:19:29,660 --> 00:19:32,470
Vad kommer att hända här är,
denna punkt säger till JavaScript

371
00:19:32,470 --> 00:19:39,990
OK, jag får något värde
från objektet från mig själv.

372
00:19:39,990 --> 00:19:46,375
Och då kommer det att leta efter en post
kallas fn, och om den finner det,

373
00:19:46,375 --> 00:19:48,470
det kommer tillbaka som value-- så, det är sam.

374
00:19:48,470 --> 00:19:51,540
Men jag kunde också ha skrivit
något som inte definieras här,

375
00:19:51,540 --> 00:19:54,090
och sedan skulle det bara
returnera undefined-- som

376
00:19:54,090 --> 00:19:58,250
är en sak som JavaScript kan
gör, vilket kan ha fördelar,

377
00:19:58,250 --> 00:20:03,190
men det är also-- om du gör ett stavfel,
kan det resultera i konstiga fel.

378
00:20:03,190 --> 00:20:05,617
Så det ska bara försöka hitta
vad du berättar det för att hitta

379
00:20:05,617 --> 00:20:07,700
och det kommer inte att
klaga om inte hitta den.

380
00:20:07,700 --> 00:20:11,390
Det ska bara säga, jag gjorde inte
tycker att det är, och sedan gå vidare.

381
00:20:11,390 --> 00:20:17,581
Så det skulle vara odefinierad,
plus tom, plus efternamn.

382
00:20:17,581 --> 00:20:18,080
Ja.

383
00:20:18,080 --> 00:20:21,070
Och då kan vi se att om vi
kunde sedan gå ner och access--

384
00:20:21,070 --> 00:20:25,450
och vi kallar tf.print () med parenteser.

385
00:20:25,450 --> 00:20:30,000
Det kommer att kalla det tryck
funktion utan argument, eller hur?

386
00:20:30,000 --> 00:20:34,490
Men om vi just sagt tf.print ()
semikolon, utan parenteser,

387
00:20:34,490 --> 00:20:37,480
allt som skulle ha gjort är att dra
ut funktionen från värdet,

388
00:20:37,480 --> 00:20:40,609
men egentligen inte kallade det.

389
00:20:40,609 --> 00:20:41,162
Häftigt.

390
00:20:41,162 --> 00:20:42,870
HUGH Zabriskie: Bör
Vi gör ett objekt?

391
00:20:42,870 --> 00:20:44,161
SAM GREEN: Visst, låt oss göra det.

392
00:20:44,161 --> 00:20:48,750
Så jag kan flytta
exempel till konsolen.

393
00:20:48,750 --> 00:20:51,380

394
00:20:51,380 --> 00:20:55,466
Vi kan föreställa oss att jag har ett objekt.

395
00:20:55,466 --> 00:21:03,026

396
00:21:03,026 --> 00:21:04,150
Så det här är ett enkelt objekt.

397
00:21:04,150 --> 00:21:06,910

398
00:21:06,910 --> 00:21:11,050
Detta är ett objekt som innehåller två
värden med två nycklar, två nyckelvärde

399
00:21:11,050 --> 00:21:12,710
par.

400
00:21:12,710 --> 00:21:21,850
Så jag kan sedan komma åt lagrade värdet
insidan av detta objekt genom att göra x.x1,

401
00:21:21,850 --> 00:21:23,400
till exempel, och jag får en tillbaka.

402
00:21:23,400 --> 00:21:29,590
På samma sätt, x.x2, får detta värde tillbaka.

403
00:21:29,590 --> 00:21:33,330
>> Och nu riktigt cool sak är, jag kan
faktiskt lägga till något till det här objektet

404
00:21:33,330 --> 00:21:34,316
efter att jag har skapat den.

405
00:21:34,316 --> 00:21:36,315
Så ni kan föreställa er, låt oss
säga att jag har en funktion.

406
00:21:36,315 --> 00:21:44,430

407
00:21:44,430 --> 00:21:46,352
>> HUGH Zabriskie: Du
måste göra Shift-Enter.

408
00:21:46,352 --> 00:21:47,643
>> SAM GREEN: Åh, det är irriterande.

409
00:21:47,643 --> 00:22:02,460

410
00:22:02,460 --> 00:22:04,324
Vad gjorde det inte som?

411
00:22:04,324 --> 00:22:04,824
Åh.

412
00:22:04,824 --> 00:22:07,532

413
00:22:07,532 --> 00:22:08,691
Nu kör vi.

414
00:22:08,691 --> 00:22:09,190
Häftigt.

415
00:22:09,190 --> 00:22:12,840
>> Så jag har just skapat
denna funktion, f, som

416
00:22:12,840 --> 00:22:17,590
kommer att gå till den aktuella
objekt och skriva ut this.x1.

417
00:22:17,590 --> 00:22:20,330
Så om jag bara ringa f av
själv, är ingenting händer

418
00:22:20,330 --> 00:22:26,970
hända, rätt, eftersom det inte finns någon x1
fält i objektet det hänvisar till.

419
00:22:26,970 --> 00:22:39,710
Men, om jag säger, x.f = f, och då jag
ring x.f (), jag kommer att få tillbaka en.

420
00:22:39,710 --> 00:22:42,990

421
00:22:42,990 --> 00:22:46,530
Att f funktion är nu
associerad med objektet x,

422
00:22:46,530 --> 00:22:51,800
som har en nyckel kallas x1
associerad med värdet 1,

423
00:22:51,800 --> 00:22:54,570
så när vi kallar this.x1, är det
kommer att hitta vad det är du letar efter

424
00:22:54,570 --> 00:22:56,450
och kunna skriva ut ett värde ur.

425
00:22:56,450 --> 00:22:58,700
Så det är bara ett exempel
av typ av galna saker

426
00:22:58,700 --> 00:23:01,190
du kan göra med objekt i JavaScript.

427
00:23:01,190 --> 00:23:03,870

428
00:23:03,870 --> 00:23:07,560
>> Så att versionen var den
generisk version, menande

429
00:23:07,560 --> 00:23:13,780
att vi har skapat ett objekt med detta
parenteser notation-- stag notation,

430
00:23:13,780 --> 00:23:16,880
rather-- och det är
praktiskt om vi bara vill

431
00:23:16,880 --> 00:23:21,440
en instans av ett visst objekt, men
tänk om vi vill ha mer än en

432
00:23:21,440 --> 00:23:22,210
av samma slag?

433
00:23:22,210 --> 00:23:24,440
Och svaret på den
Frågan är, det finns saker

434
00:23:24,440 --> 00:23:26,760
kallas klasser i JavaScript liksom.

435
00:23:26,760 --> 00:23:31,470

436
00:23:31,470 --> 00:23:36,420
Vi kan skapa en funktion som
gör någon form av initiering

437
00:23:36,420 --> 00:23:41,690
för ett främmande föremål,
och vi skulle säga, liksom,

438
00:23:41,690 --> 00:23:44,550
min class-- så namnet
av den återanvändbara object--

439
00:23:44,550 --> 00:23:47,100
lika funktion som ställer upp.

440
00:23:47,100 --> 00:23:52,280
Så vad detta skulle motsvara
till skapar ett objekt som

441
00:23:52,280 --> 00:23:55,930
skulle vara precis som,
klammerparentes, str, kolon,

442
00:23:55,930 --> 00:23:59,630
detta är en sträng,
semikolon, klammerparentes.

443
00:23:59,630 --> 00:24:01,880
Det skulle vara den generiska
objektet vi initiera,

444
00:24:01,880 --> 00:24:06,380
med en skillnad att vara på
nästa linjer skapar vi en prototyp, som

445
00:24:06,380 --> 00:24:11,190
betyder att det är en standardnyckel som
vi till vår objekt som

446
00:24:11,190 --> 00:24:13,970
har värdet visas här.

447
00:24:13,970 --> 00:24:20,570
Vilket innebär att, när jag skapar en ny
exempel på detta Minklass objekt,

448
00:24:20,570 --> 00:24:27,440
det kommer att ha färdiga insida
det ett värde som kallas str och ett annat värde

449
00:24:27,440 --> 00:24:32,418
kallas myPrint, som är
kommer att vara en funktion.

450
00:24:32,418 --> 00:24:32,918
Grymt bra.

451
00:24:32,918 --> 00:24:37,410

452
00:24:37,410 --> 00:24:37,990
>> Bra.

453
00:24:37,990 --> 00:24:40,710
Så det sista till
säga om JavaScript

454
00:24:40,710 --> 00:24:46,430
är att det är riktigt bra för vad
kallas asynkrona åtgärder.

455
00:24:46,430 --> 00:24:52,500
Asynkron sätt är att vi
kan vänta en operation

456
00:24:52,500 --> 00:24:57,870
att slutföra innan vi flyttar
på, men gå vidare medan vi väntar

457
00:24:57,870 --> 00:24:59,690
och sedan har något hända senare.

458
00:24:59,690 --> 00:25:03,480
Och vad jag menar med det är du
kan föreställa sig en situation där

459
00:25:03,480 --> 00:25:06,850
du skicka en begäran till
vissa web server någonstans,

460
00:25:06,850 --> 00:25:09,670
och det kommer att skicka dig tillbaka
några stora bit av data, eller hur?

461
00:25:09,670 --> 00:25:13,320
Och ditt användarnamn kunde vänta i
Under tiden för att det ska hända,

462
00:25:13,320 --> 00:25:15,200
och ingenting kunde vara
pågår vid den tidpunkten.

463
00:25:15,200 --> 00:25:18,110
Men det är inte en stor design, eller hur?

464
00:25:18,110 --> 00:25:20,214
Du vill inte webbsidan att frysa.

465
00:25:20,214 --> 00:25:22,380
Vad händer om användaren vill
klicka på en rullgardinsmeny?

466
00:25:22,380 --> 00:25:24,870
Det är inte en stor designmönster.

467
00:25:24,870 --> 00:25:29,290
Istället, i princip vad
JavaScript gör är att säga,

468
00:25:29,290 --> 00:25:31,870
OK, gör denna operation asynkront.

469
00:25:31,870 --> 00:25:36,520
Så som väntar i bakgrunden,
och sedan när operationen är klar,

470
00:25:36,520 --> 00:25:39,420
ring återuppringning function--
ringa någon funktion,

471
00:25:39,420 --> 00:25:43,800
gör några action-- att signalera att
operation vi väntade på att avsluta

472
00:25:43,800 --> 00:25:45,520
är över.

473
00:25:45,520 --> 00:25:51,240
Och anledningen till det är super kraftfull är,
vi kan göra något, passera ett argument,

474
00:25:51,240 --> 00:25:54,440
göra något, och sedan vänta
för att något ska hända.

475
00:25:54,440 --> 00:25:58,970
Sedan, en gång att något
slutför, kan vi kalla en återuppringning.

476
00:25:58,970 --> 00:26:03,300
Det är verkligen praktiskt eftersom det låter
oss att göra saker med Web Audio API,

477
00:26:03,300 --> 00:26:07,490
till exempel, som last en
ljudfil från en fjärrserver

478
00:26:07,490 --> 00:26:11,660
utan att behöva vänta på
hela ljudfilen som ska läsas,

479
00:26:11,660 --> 00:26:14,440
vilket skulle vara riktigt
dåligt för användarupplevelse.

480
00:26:14,440 --> 00:26:17,080
Häftigt.

481
00:26:17,080 --> 00:26:19,460
>> Sista paret anteckningar om
felsökning, eftersom detta

482
00:26:19,460 --> 00:26:23,682
är en sak som du kommer att behöva göra
som en del av projektet, garanterat.

483
00:26:23,682 --> 00:26:25,140
Jag nämnde JavaScript-konsolen.

484
00:26:25,140 --> 00:26:27,550
Det är en super användbar funktion
av alla moderna webbläsare,

485
00:26:27,550 --> 00:26:30,300
Och vi verkligen uppmuntra dig att få
bekväm med din konsol,

486
00:26:30,300 --> 00:26:33,660
Om du vill bli bra på JavaScript.

487
00:26:33,660 --> 00:26:36,320
Det är super praktiskt för
felsökning, men det är också

488
00:26:36,320 --> 00:26:39,440
verkligen användbart för att räkna
ut hur man använder en API.

489
00:26:39,440 --> 00:26:41,950
Det möjliggör för riktigt
enkel experimentering

490
00:26:41,950 --> 00:26:45,910
utan att behöva skriva någon
kod, och sedan sammanställa det.

491
00:26:45,910 --> 00:26:47,500
Du behöver inte göra alla dessa steg.

492
00:26:47,500 --> 00:26:49,619
Du kan bara skriva
lite kod till en linje,

493
00:26:49,619 --> 00:26:52,410
och sedan få omedelbar feedback på
huruvida denna kodrad eller inte

494
00:26:52,410 --> 00:26:55,230
worked-- mycket praktiskt.

495
00:26:55,230 --> 00:26:59,760
>> Och bara en teknisk note--
JavaScript-konsolen är ett exempel

496
00:26:59,760 --> 00:27:05,680
av en REPL-- så det är R-E-P-L, REPL,
som står för läsning, utvärdera,

497
00:27:05,680 --> 00:27:06,180
trycket slinga.

498
00:27:06,180 --> 00:27:09,100

499
00:27:09,100 --> 00:27:12,120
Du kommer att skriva några saker
i, det ska läsa vad du skrev in,

500
00:27:12,120 --> 00:27:17,280
det ska utvärdera det, och det kommer att skriva ut
utgång, och då börjar igen.

501
00:27:17,280 --> 00:27:22,056
Som tillåter dig att snabbt gå in
cirklar iteration, vilket är riktigt coolt.

502
00:27:22,056 --> 00:27:25,150

503
00:27:25,150 --> 00:27:28,930
>> Jag antar att verkliga sista note-- detta
är den faktiska sista anmärkning, ja.

504
00:27:28,930 --> 00:27:30,780
Hur kan vi faktiskt använder JavaScript?

505
00:27:30,780 --> 00:27:34,040
Så först, kan vi importera
den med en script-tagg

506
00:27:34,040 --> 00:27:39,500
på toppen eller botten av en HTML file--
någonstans inne i en HTML-fil,

507
00:27:39,500 --> 00:27:40,440
verkligen.

508
00:27:40,440 --> 00:27:47,390
Och inom en script-tagg, finns
två under sätt att importera JavaScript.

509
00:27:47,390 --> 00:27:51,370
Den första är genom att ha en
separat JavaScript-fil

510
00:27:51,370 --> 00:27:58,010
att vi importerar i sin helhet, eller
genom att ha ett område med kod liknande script

511
00:27:58,010 --> 00:28:00,290
att starta, och sedan
backslash skript för att avsluta.

512
00:28:00,290 --> 00:28:02,620
Och sedan skriver vi bara
JavaScript inne i HTML-filen.

513
00:28:02,620 --> 00:28:03,790
De är de två sätt.

514
00:28:03,790 --> 00:28:05,165
Du kan inte ha det inne i HTML.

515
00:28:05,165 --> 00:28:06,502

516
00:28:06,502 --> 00:28:08,126
PUBLIK: Är en bättre än den andra?

517
00:28:08,126 --> 00:28:10,542
SAM GRÖN: Frågan var,
är en bättre än den andra.

518
00:28:10,542 --> 00:28:18,306
Så, ja, som en kodning stil praxis,
och även det är som en designpraktik.

519
00:28:18,306 --> 00:28:20,180
Det finns två skäl
varför det kan vara bättre.

520
00:28:20,180 --> 00:28:23,934
Den första är, det gör din kod en
mycket mer lättläst om alla dina HTML

521
00:28:23,934 --> 00:28:27,100
är på ett ställe, är alla dina CSS i
en annan plats, alla dina JavaScript

522
00:28:27,100 --> 00:28:28,420
är på en tredjeplats.

523
00:28:28,420 --> 00:28:28,920
Höger?

524
00:28:28,920 --> 00:28:32,370
Jag tycker att vi borde har redan talat
om det i sections-- liknande CSS-- vad

525
00:28:32,370 --> 00:28:35,220
som är-- och det går
ofta i en annan fil.

526
00:28:35,220 --> 00:28:37,090
Så, liknande typ av koncept här.

527
00:28:37,090 --> 00:28:42,410
Du kan också tänka sig att JavaScript
skulle återanvändas på mer än en

528
00:28:42,410 --> 00:28:47,350
HTML-sida, eller kanske en
många HTML-sidor,

529
00:28:47,350 --> 00:28:49,340
och med att JavaScript
refactored till en

530
00:28:49,340 --> 00:28:51,950
fil som du kan importera
till mer än ett ställe

531
00:28:51,950 --> 00:28:54,570
gör koden för att vara
sätt mer utrymme för detta.

532
00:28:54,570 --> 00:28:57,930
Du kan tänka sig en
byta till JavaScript

533
00:28:57,930 --> 00:29:00,070
och att behöva ändra det
i 100 olika filer.

534
00:29:00,070 --> 00:29:04,070
Och i stället vi kan bara ändra det
i en, som är mycket mer kraftfull.

535
00:29:04,070 --> 00:29:05,420
Har jag besvara din fråga?

536
00:29:05,420 --> 00:29:07,950
Häftigt.

537
00:29:07,950 --> 00:29:10,830
>> Vi kan också skriva in i konsolen,
som vi har nämnt tidigare.

538
00:29:10,830 --> 00:29:15,070
Och återigen, en sista note--
Web Audio är inbyggd,

539
00:29:15,070 --> 00:29:16,978
du behöver inte läsa in något.

540
00:29:16,978 --> 00:29:17,478
Häftigt.

541
00:29:17,478 --> 00:29:20,519
Finns det några frågor, har du
något fler frågor om JavaScript,

542
00:29:20,519 --> 00:29:21,930
innan vi går vidare?

543
00:29:21,930 --> 00:29:24,286
>> PUBLIK: [OHÖRBAR]

544
00:29:24,286 --> 00:29:25,410
SAM GREEN: Okej, cool.

545
00:29:25,410 --> 00:29:27,200
Så nu kommer han att tala om API.

546
00:29:27,200 --> 00:29:28,490
>> HUGH Zabriskie: Cool.

547
00:29:28,490 --> 00:29:28,990
Tack, Sam.

548
00:29:28,990 --> 00:29:30,184
>> SAM GREEN: Visst.

549
00:29:30,184 --> 00:29:32,600
HUGH Zabriskie: Awesome, så
vi ska gå vidare från JavaScript.

550
00:29:32,600 --> 00:29:35,350
Så vi har pratat om några av
det viktigaste i JavaScript,

551
00:29:35,350 --> 00:29:41,105
och de är de variabler, funktioner,
objekt, fungerar som variabler,

552
00:29:41,105 --> 00:29:41,980
asynkron lastning.

553
00:29:41,980 --> 00:29:46,100
Dessa är alla saker som du kommer
se när du använder webben Audio.

554
00:29:46,100 --> 00:29:49,230
Så vi ska bara prata
om det först på en hög nivå.

555
00:29:49,230 --> 00:29:52,120
>> Det är ett API, så det är något
som är byggd, som Sam sa,

556
00:29:52,120 --> 00:29:57,010
rakt in JavaScript
som du använder i konsolen.

557
00:29:57,010 --> 00:30:01,020
Och det är faktiskt precis som C ++ kod
som verkligen inbyggt i Chrome

558
00:30:01,020 --> 00:30:04,470
och Firefox, och alla dessa webbläsare.

559
00:30:04,470 --> 00:30:07,060
Så den huvudsakliga idén med webb
Audio är att du har

560
00:30:07,060 --> 00:30:09,440
denna typ av pipeline av ljud, eller hur?

561
00:30:09,440 --> 00:30:13,670
Så din ljuddata
kommer in i någon form.

562
00:30:13,670 --> 00:30:16,690
>> Det är typ av tre huvud forms--
du har oscillator, som

563
00:30:16,690 --> 00:30:21,340
skapar en sinusvåg, cosinusvåg,
Vi kommer att se hur det fungerar.

564
00:30:21,340 --> 00:30:23,890
En annan mycket vanlig en,
är naturligtvis en MP3.

565
00:30:23,890 --> 00:30:25,810
Så kanske du börjar med
en sång, och sedan

566
00:30:25,810 --> 00:30:28,320
vill göra några filtrering
till detta och utmatning

567
00:30:28,320 --> 00:30:30,605
that-- som skulle kunna vara en möjlig källa.

568
00:30:30,605 --> 00:30:32,480
Och sedan en riktigt cool
en är mikrofonen.

569
00:30:32,480 --> 00:30:37,230
Så du kan använda vissa mycket
grundläggande samtal i JavaScript

570
00:30:37,230 --> 00:30:39,440
att få tillgång till
mikrofon, och så om du

571
00:30:39,440 --> 00:30:42,870
ville göra en app
som en detektor tonhöjd,

572
00:30:42,870 --> 00:30:45,290
till exempel, tar det i
din röst och räknar ut

573
00:30:45,290 --> 00:30:47,740
den pitch-- mycket enkelt sätt att det.

574
00:30:47,740 --> 00:30:50,730
Du kan bara typ av läsa den
in, räkna ut frekvens,

575
00:30:50,730 --> 00:30:52,250
och matas sedan ut en siffra.

576
00:30:52,250 --> 00:30:56,080
Så vi får se hur det fungerar, liksom.

577
00:30:56,080 --> 00:30:59,430
>> Destinationen är i grunden
där ljuddata matas ut.

578
00:30:59,430 --> 00:31:02,890
Så i allmänhet, det är som
din bärbara dator högtalare.

579
00:31:02,890 --> 00:31:05,610
Andra alternativ är som
en ScriptProcessorNode--

580
00:31:05,610 --> 00:31:07,990
vi kommer till noder i ett
second-- men i grunden,

581
00:31:07,990 --> 00:31:11,939
antingen du lägger ljud ut
via datorn genom högtalarna,

582
00:31:11,939 --> 00:31:14,730
eller om du typ av inspelning det, så
du lagra det som ljuddata.

583
00:31:14,730 --> 00:31:18,980
Så kanske om någon skapar
musik i din app och sedan

584
00:31:18,980 --> 00:31:22,410
du vill spela in det och kanske gillar
exportera den till Soundcloud, för example--

585
00:31:22,410 --> 00:31:25,281
det skulle vara ett sätt att göra det.

586
00:31:25,281 --> 00:31:27,030
Allt det roliga grejer,
som vi pratar om,

587
00:31:27,030 --> 00:31:29,950
händer mellan dessa två punkter,
där vi lastar i musiken

588
00:31:29,950 --> 00:31:31,410
och sedan ut det.

589
00:31:31,410 --> 00:31:36,660
>> Så jag kommer att tala om de fem
stadier av ljudproduktion i en sekund.

590
00:31:36,660 --> 00:31:38,950
Vi har denna sak kallad
en AudioContext, vilket

591
00:31:38,950 --> 00:31:41,580
är denna lilla wrapper vi ser här.

592
00:31:41,580 --> 00:31:49,980
I grund och botten vad AudioContext är-- om vi
gå till JavaScript-konsolen just nu,

593
00:31:49,980 --> 00:31:52,740
Vi kan skapa en just nu.

594
00:31:52,740 --> 00:31:54,040
Bara ett exempel på REPL, eller hur?

595
00:31:54,040 --> 00:31:57,880
Vi läser,
utvärdering, och skriver ut.

596
00:31:57,880 --> 00:32:00,260
>> AudioContext är ett globalt tillstånd.

597
00:32:00,260 --> 00:32:05,500
Det är en struct, det är ett objekt
Här håller och uppgifter

598
00:32:05,500 --> 00:32:09,960
om saker som händer
på skärmen i samband med ljud.

599
00:32:09,960 --> 00:32:15,220
Ett exempel är den aktuella tiden.

600
00:32:15,220 --> 00:32:18,910
Detta talar om hur många
sekunder, mycket exakt,

601
00:32:18,910 --> 00:32:20,890
eftersom webbsidan laddas.

602
00:32:20,890 --> 00:32:24,110
Så det här är en riktigt bra
liten egenskap som du kan använda.

603
00:32:24,110 --> 00:32:27,898
Det har läst only-- Jag tror faktiskt
du kan försöka att ställa in dess värde.

604
00:32:27,898 --> 00:32:29,856
Det ska berätta ställa in den,
och sedan om du skriver ut det

605
00:32:29,856 --> 00:32:31,439
igen-- det inte faktiskt ganska arbete.

606
00:32:31,439 --> 00:32:34,472
Så det är skrivskyddade
fastigheter i JavaScript.

607
00:32:34,472 --> 00:32:36,430
Detta är verkligen användbart om
du typ av synkronisering

608
00:32:36,430 --> 00:32:38,610
en massa olika
information när du är

609
00:32:38,610 --> 00:32:41,280
typ för att spela olika ljud.

610
00:32:41,280 --> 00:32:43,630
>> En annan riktigt bra en
är sammanhanget destinationen.

611
00:32:43,630 --> 00:32:46,587

612
00:32:46,587 --> 00:32:49,670
Definitivt, om du är intresserad, vara
försöker detta på egen konsol höger

613
00:32:49,670 --> 00:32:50,980
nu.

614
00:32:50,980 --> 00:32:53,150
Så det här är ett AudioDestinationNode.

615
00:32:53,150 --> 00:32:56,480
I grund och botten vad detta säger är,
där produktionen går?

616
00:32:56,480 --> 00:32:59,590
Så det finns två verkliga alternativ här.

617
00:32:59,590 --> 00:33:01,940
Vanligen standard
bara högtalarna,

618
00:33:01,940 --> 00:33:05,150
så AudioDestinationNode
i princip bara säger

619
00:33:05,150 --> 00:33:09,240
Det finns noll utgångar till ljudet
kommer in, skickas till högtalaren.

620
00:33:09,240 --> 00:33:12,050
Så generellt, gör du inte
måste spela med det.

621
00:33:12,050 --> 00:33:15,720
Om du är intresserad av att faktiskt använda
den ScriptProcessorNode för inspelning,

622
00:33:15,720 --> 00:33:16,990
definitivt skjuta mig en
e-post senare eftersom det är

623
00:33:16,990 --> 00:33:18,330
lite mer komplicerat.

624
00:33:18,330 --> 00:33:21,590
Men generellt, du är bara typ
för att mata ut ljud i någon form.

625
00:33:21,590 --> 00:33:24,347
Så cool, vi hoppar tillbaka hit.

626
00:33:24,347 --> 00:33:25,180
PUBLIK: Jag är ledsen.

627
00:33:25,180 --> 00:33:26,054
HUGH Zabriskie: Ja.

628
00:33:26,054 --> 00:33:28,770
PUBLIK: Jag vet att du sa att prata
med dig senare om inspelningen.

629
00:33:28,770 --> 00:33:31,550
Kan du gränssnitt som med Pro Tools?

630
00:33:31,550 --> 00:33:33,120
>> HUGH Zabriskie: Med Pro Tools?

631
00:33:33,120 --> 00:33:35,260
Låt oss se.

632
00:33:35,260 --> 00:33:37,220
Jag tror inte det.

633
00:33:37,220 --> 00:33:41,670
Så går mellan klienten,
vilket är JavaScript

634
00:33:41,670 --> 00:33:44,310
konsol, och din faktiska
dator, är i allmänhet

635
00:33:44,310 --> 00:33:46,490
något som är snäll
av tabu, om du

636
00:33:46,490 --> 00:33:52,320
kommer typ av arten av the--
Det är lite av en konstruktion sak,

637
00:33:52,320 --> 00:33:57,770
men du försöker att hålla webbläsaren separata
från användarens faktiska dator.

638
00:33:57,770 --> 00:34:02,310
I allmänhet, det enda du kan
tillgång mikrofonen eller kameran.

639
00:34:02,310 --> 00:34:04,730
Du är inte kunna, jag
tror inte, att använda Pro Tools.

640
00:34:04,730 --> 00:34:07,480
Men om du har skapat
ett spår i Pro Tools,

641
00:34:07,480 --> 00:34:12,710
exporteras att du kan läsa det
här, filtrera, till exempel,

642
00:34:12,710 --> 00:34:16,820
process som, och spela in det till en
Ljud Destination-- eller, no-- en sfär

643
00:34:16,820 --> 00:34:17,870
Processor Node.

644
00:34:17,870 --> 00:34:20,730
Och sedan därifrån, du kan
exportera det till Soundcloud, du

645
00:34:20,730 --> 00:34:25,320
kunde skicka det i ett e-postmeddelande, eller
vad du vill därifrån.

646
00:34:25,320 --> 00:34:31,159
>> Men det är lite av en liten barriär
mellan att göra musik på din dator

647
00:34:31,159 --> 00:34:33,050
och göra musik på nätet.

648
00:34:33,050 --> 00:34:37,940
>> SAM GREEN: Och det är
inte unikt för denna API.

649
00:34:37,940 --> 00:34:44,060
Det är en säkerhetsfunktion av Chrome, och
Jag tror att alla andra moderna webbläsare.

650
00:34:44,060 --> 00:34:45,860
Webbläsaren är fristående.

651
00:34:45,860 --> 00:34:50,980
Så till exempel, en webbsida kan inte
använda JavaScript för att stänga av ljudet

652
00:34:50,980 --> 00:34:54,190
på på dina högtalare, till exempel.

653
00:34:54,190 --> 00:34:58,120
Eller det kan inte stänga av datorn.

654
00:34:58,120 --> 00:35:01,530
Och det finns ingen mellanliggande punkt
mellan dessa två saker, höger,

655
00:35:01,530 --> 00:35:05,960
så antingen du har en
fullständig abstraktion,

656
00:35:05,960 --> 00:35:10,050
eller du öppnar upp
säkerhet fel att låta

657
00:35:10,050 --> 00:35:14,440
en programmerare med onda avsikter göra
vad de vill med din bärbara dator.

658
00:35:14,440 --> 00:35:18,104
Och det är därför Chrome är fristående.

659
00:35:18,104 --> 00:35:19,310
>> HUGH Zabriskie: Ja.

660
00:35:19,310 --> 00:35:20,840
Betyder det vettigt?

661
00:35:20,840 --> 00:35:21,369
Cool, cool.

662
00:35:21,369 --> 00:35:23,160
Jag tänkte bara att
visar ett exempel på ett.

663
00:35:23,160 --> 00:35:25,118
Detta är ganska mycket som
långt som du får, när det gäller

664
00:35:25,118 --> 00:35:26,950
att få tillgång till användarens dator.

665
00:35:26,950 --> 00:35:30,180
Om du har ett USB-tangentbord inkopplad,
Du kan använda något som kallas webben

666
00:35:30,180 --> 00:35:32,180
MIDI API, som vi inte kommer att
verkligen tala om här,

667
00:35:32,180 --> 00:35:36,330
men det är en annan API som är
inbyggda i åtminstone Chrome-- igen,

668
00:35:36,330 --> 00:35:41,570
det är därför vi älskar Chrome--
Jag tror att Firefox eller Safari,

669
00:35:41,570 --> 00:35:44,300
Detta är en lätt sak att
google-- olika webbläsare har

670
00:35:44,300 --> 00:35:46,917
olika stöd som
API de har genomfört.

671
00:35:46,917 --> 00:35:49,875
Men om du vill koppla in ett tangentbord
och arbeta med den informationen,

672
00:35:49,875 --> 00:35:52,850
slags skicka tangentbordet
information över till datorn

673
00:35:52,850 --> 00:35:57,620
och sedan använda den på nätet, detta API
är där du vill arbeta det.

674
00:35:57,620 --> 00:35:58,150
>> Häftigt.

675
00:35:58,150 --> 00:35:58,710
OK.

676
00:35:58,710 --> 00:36:01,320
Så snabbt går vidare här.

677
00:36:01,320 --> 00:36:03,310
Hur gör vi i tid?

678
00:36:03,310 --> 00:36:04,210
>> TALARE 1: Om 15.

679
00:36:04,210 --> 00:36:05,543
>> HUGH Zabriskie: 15 minuter kvar?

680
00:36:05,543 --> 00:36:06,160
OK bra.

681
00:36:06,160 --> 00:36:08,170
Så vi ska tävla vidare här.

682
00:36:08,170 --> 00:36:13,500
>> Så i princip den viktigaste punkten i
tänker på detta som en rörledning

683
00:36:13,500 --> 00:36:16,430
är att varje steg i rörledningen
är en serie av ljud noder.

684
00:36:16,430 --> 00:36:19,284

685
00:36:19,284 --> 00:36:20,950
Vår källa, låt oss säga, är en oscillator.

686
00:36:20,950 --> 00:36:23,380
Vi måste skapa en oscillator nod.

687
00:36:23,380 --> 00:36:25,690
Och det är bara typ
av den lilla function--

688
00:36:25,690 --> 00:36:30,460
och de är alla baserade ut
av ljud sammanhang här.

689
00:36:30,460 --> 00:36:32,885
>> PUBLIK: När det sägs
oscillator, betyder det

690
00:36:32,885 --> 00:36:37,250
det är faktiskt bokstavligen gå från
två olika poler och tillbaka?

691
00:36:37,250 --> 00:36:41,170
>> HUGH Zabriskie: Nej, det är som
en digital representation.

692
00:36:41,170 --> 00:36:42,740
Det är faktiskt genomförs i C ++.

693
00:36:42,740 --> 00:36:46,460
Jag vet faktiskt inte specs
av hur det faktiskt är genomfört,

694
00:36:46,460 --> 00:36:48,500
men allt detta fungerar som binära data.

695
00:36:48,500 --> 00:36:51,260

696
00:36:51,260 --> 00:36:52,370
Faktiskt, ja.

697
00:36:52,370 --> 00:36:53,950
Det skulle vara att säga, jag kunde
faktiskt, om du är intresserad,

698
00:36:53,950 --> 00:36:56,533
Jag kan skicka dig en lite mer
information om hur vågformer

699
00:36:56,533 --> 00:37:00,181
hålls med ett digitalt format.

700
00:37:00,181 --> 00:37:00,680
OK bra.

701
00:37:00,680 --> 00:37:03,120
>> Så vi generera en ton som en sinus
våg eller nåt sånt, kanske

702
00:37:03,120 --> 00:37:04,190
440 Hertz.

703
00:37:04,190 --> 00:37:05,830
Vi skapar en oscillator.

704
00:37:05,830 --> 00:37:09,180
Om vi ​​vill ställa in volymen, vi
Anslut ingenting till en GainNode,

705
00:37:09,180 --> 00:37:12,500
som vi skulle kunna göra med .creategain.

706
00:37:12,500 --> 00:37:14,250
Som sätter din volym.

707
00:37:14,250 --> 00:37:17,820
Du kan skicka det till någon
å andra options-- väl,

708
00:37:17,820 --> 00:37:20,300
så en ljudbuffert källa
nod är där du kanske

709
00:37:20,300 --> 00:37:23,660
lagra en MP3 som du har laddat in.

710
00:37:23,660 --> 00:37:27,670
>> BIQUAD filter för filtrering om
du vill ta alla basen ut

711
00:37:27,670 --> 00:37:29,630
av en låt, eller nåt sånt.

712
00:37:29,630 --> 00:37:32,450
Gud förbjude du vill ta
basen av en låt.

713
00:37:32,450 --> 00:37:36,980
Och AudioDestination nod är, återigen,
liknande där vår slutförande är.

714
00:37:36,980 --> 00:37:39,980
Om du någonsin intresserad av att se
alla de olika möjliga alternativ,

715
00:37:39,980 --> 00:37:45,190
bara gå till fliken och låt
auto-komplett komma upp.

716
00:37:45,190 --> 00:37:48,690
Och om du skapar, kommer du att se alla
olika saker som du kan skapa.

717
00:37:48,690 --> 00:37:50,398
Du kan skapa dynamiska
script processorer,

718
00:37:50,398 --> 00:37:52,940
Jag vet inte ens vad det
är, för blandning kanal fusioner

719
00:37:52,940 --> 00:37:55,930
och kanal vedklyvar och allt det där.

720
00:37:55,930 --> 00:37:56,430
Häftigt.

721
00:37:56,430 --> 00:37:59,560

722
00:37:59,560 --> 00:38:01,390
>> Så det här är bara en
exempel på en rörledning.

723
00:38:01,390 --> 00:38:03,580
Så vi har tre källor kommer in.

724
00:38:03,580 --> 00:38:06,830
Kanske är dessa vågformer,
kanske dessa är MP3-filer.

725
00:38:06,830 --> 00:38:08,740
Man kommer genom en
filter, ytterligare ett s

726
00:38:08,740 --> 00:38:12,404
få förvrängt annan
ens panorering vänster och höger.

727
00:38:12,404 --> 00:38:15,320
Du kan göra alla möjliga saker och
de alla får blandas runt tillsammans,

728
00:38:15,320 --> 00:38:18,880
och sedan ut kommer ljudet
i slutet, som destination.

729
00:38:18,880 --> 00:38:22,720
Detta är ett exempel på vad mer
komplicerade Web Audio kod ser ut.

730
00:38:22,720 --> 00:38:26,720
Du skapar alla dessa
olika objekt just här--

731
00:38:26,720 --> 00:38:27,706
Jag är inte säker på detta.

732
00:38:27,706 --> 00:38:29,120
Nej, inte zooma in.

733
00:38:29,120 --> 00:38:29,620
OK.

734
00:38:29,620 --> 00:38:31,257
>> SAM GRÖN: Du gör Kontroll, Scroll-Up.

735
00:38:31,257 --> 00:38:32,590
HUGH Zabriskie: Kontroll Scroll--

736
00:38:32,590 --> 00:38:33,000
SAM GREEN: Nej, nej.

737
00:38:33,000 --> 00:38:33,500
Kontrollera--

738
00:38:33,500 --> 00:38:36,540

739
00:38:36,540 --> 00:38:38,140
>> HUGH Zabriskie: Åh, kontroll, Rulla?

740
00:38:38,140 --> 00:38:38,780
Åh, gotcha.

741
00:38:38,780 --> 00:38:41,480
Ja.

742
00:38:41,480 --> 00:38:42,240
Wow, nope, nope.

743
00:38:42,240 --> 00:38:42,740
OK.

744
00:38:42,740 --> 00:38:46,090
Jag kommer inte att göra det.

745
00:38:46,090 --> 00:38:48,300
>> Så ja, i detta första
avsnitt här, ser du

746
00:38:48,300 --> 00:38:52,720
vi skapar alla dessa olika
noder ur sammanhanget.

747
00:38:52,720 --> 00:38:54,980
Vi har precis lappteknik dem
tillsammans i den andra delen

748
00:38:54,980 --> 00:38:56,980
av denna funktion kallas Connect.

749
00:38:56,980 --> 00:38:58,830
Det är en riktigt nyckel
funktion i Web Audio.

750
00:38:58,830 --> 00:39:01,930
Det betyder bara när du har gjort
något med ljudet i en nod,

751
00:39:01,930 --> 00:39:03,705
vidarebefordra den till nästa nod.

752
00:39:03,705 --> 00:39:05,830
Så vi har källan, det
ansluter till analysatorn,

753
00:39:05,830 --> 00:39:09,140
analysatorn gör något med det,
det går till distorsion, och så vidare,

754
00:39:09,140 --> 00:39:12,725
och till destinationen
längst ned till höger här.

755
00:39:12,725 --> 00:39:13,225
Häftigt.

756
00:39:13,225 --> 00:39:14,640
OK, så vi kommer att hålla sig i rörelse på.

757
00:39:14,640 --> 00:39:17,180
>> Den pipeline-- igen, dessa
är de vanligaste rörledningar,

758
00:39:17,180 --> 00:39:21,300
så vi talar om alla dessa saker som
distorsion, panorering, allt det här.

759
00:39:21,300 --> 00:39:24,280
Om du verkligen är intresserad
att använda saker Pro Tools,

760
00:39:24,280 --> 00:39:25,820
de förmodligen intresserar dig.

761
00:39:25,820 --> 00:39:27,740
Om inte, kanske du bara
vill spela upp ljudet,

762
00:39:27,740 --> 00:39:29,990
eller kanske du bara vill
ställa in volymen på ljudet.

763
00:39:29,990 --> 00:39:35,270
De är de två vanligaste sort
av rörledningar i ljudproduktion.

764
00:39:35,270 --> 00:39:38,640
>> Återigen, de sätt du kan ta det
in som oscillator-- så, låt oss

765
00:39:38,640 --> 00:39:42,460
göra en demo av det här.

766
00:39:42,460 --> 00:39:47,090

767
00:39:47,090 --> 00:39:52,225
Så vi kommer att skapa en
enkel ljudsammanhang här,

768
00:39:52,225 --> 00:39:54,350
och från att vi kommer
att skapa vår oscillator.

769
00:39:54,350 --> 00:39:58,620
Så det är, återigen, vi är bara
kommer att ringa Skapa Oscillator.

770
00:39:58,620 --> 00:40:07,030
Vi kommer att ställa in en frekvens på
att 440 Hertz, allas favorit.

771
00:40:07,030 --> 00:40:13,290
Då kan vi koppla det till destinationen
point-- som är tal, så

772
00:40:13,290 --> 00:40:15,750
sammanhanget destinationen.

773
00:40:15,750 --> 00:40:21,400
Slutligen, vi bara säga, börja noll
sekunder från och med nu, och vi har ljud?

774
00:40:21,400 --> 00:40:22,400
>> [RINGANDE]

775
00:40:22,400 --> 00:40:24,980
>> HUGH Zabriskie: Nu kör vi.

776
00:40:24,980 --> 00:40:25,940
Det är bara en sinusvåg.

777
00:40:25,940 --> 00:40:26,440
OK bra.

778
00:40:26,440 --> 00:40:28,274
Och sedan ska vi sluta med det.

779
00:40:28,274 --> 00:40:30,520
>> PUBLIK: Vart tog
att återkoppling ifrån?

780
00:40:30,520 --> 00:40:31,250
>> HUGH Zabriskie: The feedback?

781
00:40:31,250 --> 00:40:32,458
Åh, förmodligen våra mikrofoner.

782
00:40:32,458 --> 00:40:34,221

783
00:40:34,221 --> 00:40:35,470
Så ja, det är hur du gör det.

784
00:40:35,470 --> 00:40:37,261
Och faktiskt, om jag hade
höll det igång, du

785
00:40:37,261 --> 00:40:39,540
skulle kunna ha frekvensen
värde som det körs,

786
00:40:39,540 --> 00:40:43,320
så det är en rolig sak att leka.

787
00:40:43,320 --> 00:40:44,930
Häftigt.

788
00:40:44,930 --> 00:40:46,600
Det är alltid en härlig en att presentera.

789
00:40:46,600 --> 00:40:48,792
>> SAM GREEN: Vi gjorde inte
tänka på det, gjorde vi?

790
00:40:48,792 --> 00:40:50,500
HUGH Zabriskie: Ja,
det är en otäck en.

791
00:40:50,500 --> 00:40:53,249
Så buffert loading-- jag ska visa ett
exempel på det i slutet.

792
00:40:53,249 --> 00:40:55,090
Det är laddar en MP3.

793
00:40:55,090 --> 00:40:58,880
Och mikrofon, använder du bara en funktion
kallas Navigator.getUserMedia ()

794
00:40:58,880 --> 00:41:03,240
att begära tillgång till användarens
mikrofon för denna information.

795
00:41:03,240 --> 00:41:05,610
>> Här är filtrering, jag
bara hålla sig i rörelse från detta.

796
00:41:05,610 --> 00:41:08,600
Detta är ganska hög nivå,
men filter tillåter bara att du

797
00:41:08,600 --> 00:41:16,154
>> [Pipande]

798
00:41:16,154 --> 00:41:18,320
Filtrering kan du också
att skapa saker som rosa

799
00:41:18,320 --> 00:41:20,050
buller, brun buller, vitt brus.

800
00:41:20,050 --> 00:41:24,330
Om du vill skapa ren buller, som
vissa människor älskar att röra runt med,

801
00:41:24,330 --> 00:41:27,490
Du kan använda Web Audio
filtrering för att göra det.

802
00:41:27,490 --> 00:41:30,039
>> Ljud Panning-- så föreställa
Om du skriver ett spel

803
00:41:30,039 --> 00:41:32,330
och du vill att ljudet ska
låter som det kommer, liksom,

804
00:41:32,330 --> 00:41:36,090
skjuta över skärmen, du
kan använda panorering av ljud

805
00:41:36,090 --> 00:41:39,770
för att skapa denna typ av kon,
vilket like-- det är ganska Mathy,

806
00:41:39,770 --> 00:41:41,850
men det är faktiskt riktigt
coolt om du får det att fungera,

807
00:41:41,850 --> 00:41:44,500
och det finns några bra
tutorials på det jag kan skicka dig.

808
00:41:44,500 --> 00:41:46,400
I grund och botten kan du snäll
mot att skapa ljudet

809
00:41:46,400 --> 00:41:50,480
om något går förbi i en 3D sätt.

810
00:41:50,480 --> 00:41:57,350
Och om du har en DJ intresse, kan du
börja blanda och korsa bleknar låtar.

811
00:41:57,350 --> 00:42:01,260
>> Detta är bara några mycket grundläggande
kod, i princip vad jag gjorde innan.

812
00:42:01,260 --> 00:42:06,140
Detta ställer in volymen för
oscillator, så vi skapar vår oscillator

813
00:42:06,140 --> 00:42:07,380
som skapar vågformen.

814
00:42:07,380 --> 00:42:09,940
Vi skapar vår GainNode,
sätta vår frekvens,

815
00:42:09,940 --> 00:42:14,170
och anslut sedan oscillatorn till
GainNode, som sedan i princip ändrar

816
00:42:14,170 --> 00:42:16,760
hur mycket signalen tillåts igenom.

817
00:42:16,760 --> 00:42:20,467
Men egentligen är det en digital
sak, så det är mer bara-- ja.

818
00:42:20,467 --> 00:42:23,550
Det är inte vad som faktiskt händer,
men det är vad som händer i verkliga livet

819
00:42:23,550 --> 00:42:24,393
med en vinst.

820
00:42:24,393 --> 00:42:27,258
>> PUBLIK: --quantization
av volymen parameter?

821
00:42:27,258 --> 00:42:28,174
HUGH Zabriskie: Förlåt?

822
00:42:28,174 --> 00:42:30,360
PUBLIK: Är det en
kvantiserade volymparameter?

823
00:42:30,360 --> 00:42:31,840
HUGH Zabriskie: Ja.

824
00:42:31,840 --> 00:42:34,620
Och det är en sak jag verkligen
bristfälliga på i min kunskap,

825
00:42:34,620 --> 00:42:38,010
hur förstärkningen fungerar på en digital nivå.

826
00:42:38,010 --> 00:42:40,140
Jag vet med faktiska
signaler, det är i princip

827
00:42:40,140 --> 00:42:45,120
hur mycket kontrollerar dig är
förstärka signalen.

828
00:42:45,120 --> 00:42:47,017
Så, ja.

829
00:42:47,017 --> 00:42:50,100
Jag skickar dig mer information om
att eftersom jag skulle vara nyfiken faktiskt

830
00:42:50,100 --> 00:42:51,099
att veta mer om det.

831
00:42:51,099 --> 00:42:54,090
Men i stort sett parametrar
är, en är fold--

832
00:42:54,090 --> 00:42:59,690
den starkare signal-- och noll finns ingen
signal, annars kommer du inte att höra något ljud.

833
00:42:59,690 --> 00:43:03,150
Vi ska hoppa demo tid för det eftersom
det är i princip vad jag gjorde innan.

834
00:43:03,150 --> 00:43:07,630
Och återigen, Context.Destination
är ljud destinationsnoden.

835
00:43:07,630 --> 00:43:08,360
Awesome, OK.

836
00:43:08,360 --> 00:43:10,470
>> Så jag kommer att göra en snabb två demos.

837
00:43:10,470 --> 00:43:11,760
Hur gör vi i tid?

838
00:43:11,760 --> 00:43:12,640
>> TALARE 1: Cirka 10 minuter.

839
00:43:12,640 --> 00:43:13,130
>> HUGH Zabriskie: 10 minuter?

840
00:43:13,130 --> 00:43:13,630
Bra!

841
00:43:13,630 --> 00:43:14,320
Grymt bra.

842
00:43:14,320 --> 00:43:19,010
>> Så det första jag tänker
gör, det kallas My Favorite Song.

843
00:43:19,010 --> 00:43:22,410
Så det här är bara en
lite HTML JavaScript.

844
00:43:22,410 --> 00:43:25,510
Vi kommer att ha två knappar
på sidan spela min favoritlåt

845
00:43:25,510 --> 00:43:29,192
och stoppa min favoritlåt.

846
00:43:29,192 --> 00:43:30,180
Jag kommer att ändra detta.

847
00:43:30,180 --> 00:43:32,110
>> PUBLIK: Täck ditt mikrofonen.

848
00:43:32,110 --> 00:43:33,430
>> HUGH Zabriskie: Ja.

849
00:43:33,430 --> 00:43:36,300
Och jag har laddat in här
ett skript som basically--

850
00:43:36,300 --> 00:43:38,520
och detta är verkligen användbart
för att ladda en MP3,

851
00:43:38,520 --> 00:43:41,820
så det bara gör
lastning MP3 mycket snabbare.

852
00:43:41,820 --> 00:43:44,180
Det är i princip bara ett omslag.

853
00:43:44,180 --> 00:43:48,737
Det gör bara processen för
lastning i MP3-filer mycket snabbare,

854
00:43:48,737 --> 00:43:51,570
annars du använder HTTP-förfrågan,
ungefär som vad vi gjorde

855
00:43:51,570 --> 00:43:53,950
på den aktuella delat set med Server.

856
00:43:53,950 --> 00:43:55,950
Det är verkligen fula, du
vill inte göra det.

857
00:43:55,950 --> 00:44:04,110
>> Så den här killen, Boris SMF, skrev en riktigt
användbart litet verktyg som heter BufferLoader.

858
00:44:04,110 --> 00:44:08,780
Allt du behöver göra är helt enkelt passera det
sammanhang, passerar du en list--

859
00:44:08,780 --> 00:44:11,327
eller, ja, är det en lista i JavaScript?

860
00:44:11,327 --> 00:44:12,160
SAM GREEN: En array.

861
00:44:12,160 --> 00:44:14,201
HUGH Zabriskie: Åh, är det
en array, det stämmer.

862
00:44:14,201 --> 00:44:18,660
Det är en rad vägar
till olika filer.

863
00:44:18,660 --> 00:44:21,990
Och då du passerar den en funktion.

864
00:44:21,990 --> 00:44:25,530
Detta är callback vi pratade
om med asynkron lastning.

865
00:44:25,530 --> 00:44:28,720
Som kommer att kallas
när filer som lästs.

866
00:44:28,720 --> 00:44:33,780
Och denna funktion som anropas när
filens laddade tar som en omkrets

867
00:44:33,780 --> 00:44:35,840
en array av laddade buffertar.

868
00:44:35,840 --> 00:44:37,990
Så som sker här.

869
00:44:37,990 --> 00:44:41,180
I grund och botten är BufferList
kommer att bli en value--

870
00:44:41,180 --> 00:44:46,380
eller det kommer att bli en rad
längd en, som har i det index

871
00:44:46,380 --> 00:44:51,320
noll hela inlästa filen i MP3.

872
00:44:51,320 --> 00:44:53,320
Så vad jag gör när jag är klar
lastning, jag helt enkelt

873
00:44:53,320 --> 00:44:57,430
skapa en buffertkälla, som
är en ljudbuffert som källnod.

874
00:44:57,430 --> 00:45:03,410
Nästa steg är att jag laddar i
source.buffer som den fulla laddade buffert

875
00:45:03,410 --> 00:45:06,740
från BufferList--
Det är en hel del buffers--

876
00:45:06,740 --> 00:45:10,255
och sedan ansluta denna ljud
buffert till destinationen.

877
00:45:10,255 --> 00:45:12,380
Så vad det kommer att göra
är bara helt enkelt sätta MP3

878
00:45:12,380 --> 00:45:15,260
rakt igenom till utgången,
och börja omedelbart

879
00:45:15,260 --> 00:45:18,010
på att få detta samtal.

880
00:45:18,010 --> 00:45:21,660
>> Cool, så låt oss se
detta hända i aktion.

881
00:45:21,660 --> 00:45:24,490
Min [OHÖRBAR] här, låt oss se.

882
00:45:24,490 --> 00:45:26,430
Så jag ska bara
starta en grundläggande server.

883
00:45:26,430 --> 00:45:28,660
Det är något som
du behöver göra om du är

884
00:45:28,660 --> 00:45:32,490
gör förfrågningar om last filer.

885
00:45:32,490 --> 00:45:34,140
Jag ska starta en grundläggande server.

886
00:45:34,140 --> 00:45:38,200
Detta är i grunden hela din
PSET just nu i en rad,

887
00:45:38,200 --> 00:45:43,930
men det är just har börjat
en server på port 80/80.

888
00:45:43,930 --> 00:45:47,300
Så vi går hit, vi
kommer att ladda 80/80,

889
00:45:47,300 --> 00:45:49,110
vi kommer att gå till min favoritlåt.

890
00:45:49,110 --> 00:45:51,660
Så om jag slog "Play my
favoritlåt "just nu,

891
00:45:51,660 --> 00:45:53,964
det kommer att ladda min
favoritlåt och spela det--

892
00:45:53,964 --> 00:45:55,880
[MUSIK - Örnarna, "livet i omkörnings
 KÖRFÄLT"]

893
00:45:55,880 --> 00:46:00,490
--which råkar vara "Life in
Fast Lane "av The Eagles.

894
00:46:00,490 --> 00:46:06,346
Nu, jag kunde slå "Stoppa min
favoritlåt "och spela det.

895
00:46:06,346 --> 00:46:09,160
>> [MUSIK - Örnarna, "livet i omkörnings
 KÖRFÄLT"]

896
00:46:09,160 --> 00:46:18,340
>> Och om jag går över att trösta, eftersom
Jag använde en global variabel hit

897
00:46:18,340 --> 00:46:23,390
att hålla reda på detta värde, det faktiskt
kommer nu att redovisas i konsolen.

898
00:46:23,390 --> 00:46:25,160
Så det automatiskt skapar för mig.

899
00:46:25,160 --> 00:46:29,991
Så det är vad som spelas just nu,
och jag kan helt enkelt kalla source.stop ()

900
00:46:29,991 --> 00:46:30,490
på det.

901
00:46:30,490 --> 00:46:34,930

902
00:46:34,930 --> 00:46:35,860
Tja, vet du vad?

903
00:46:35,860 --> 00:46:39,760
Bara så ni har hört detta
song-- du kanske känner igen den här låten.

904
00:46:39,760 --> 00:46:41,801
>> [MUSIK - Rick Astley, "ALDRIG ATT GE
 DU UPP"]

905
00:46:41,801 --> 00:46:42,299

906
00:46:42,299 --> 00:46:44,215
[MUSIK - Örnarna, "livet i omkörnings
 KÖRFÄLT"]

907
00:46:44,215 --> 00:46:46,195
Vi har nu alla Rickrolled.

908
00:46:46,195 --> 00:46:50,155
OK, bra, går vidare.

909
00:46:50,155 --> 00:46:51,160
Häftigt.

910
00:46:51,160 --> 00:46:54,554
Så det här är i grund och botten ett exempel på
precis hur du kan läsa in en MP3 file--

911
00:46:54,554 --> 00:46:56,470
[MUSIK - Örnarna, "livet i omkörnings
 KÖRFÄLT"]

912
00:46:56,470 --> 00:46:59,590
--and spela det, och stoppa och starta den.

913
00:46:59,590 --> 00:47:03,008
Jag kunde ha gjort mycket mer [OHÖRBAR]

914
00:47:03,008 --> 00:47:07,570
>> Den sista jag gör är,
Jag ska visa dig en [OHÖRBAR].

915
00:47:07,570 --> 00:47:18,070
>> [MUSIK SPELA]

916
00:47:18,070 --> 00:47:21,800
>> Det är som, ogg.wave.mp3.

917
00:47:21,800 --> 00:47:26,450
Jag tror, ​​om jag minns rätt,
Jag har stött på vissa problem med .m4a,

918
00:47:26,450 --> 00:47:27,721
men jag är inte säker på det.

919
00:47:27,721 --> 00:47:28,470
Jag tror mp3.wave--

920
00:47:28,470 --> 00:47:28,930

921
00:47:28,930 --> 00:47:30,971
>> [MUSIK - Rick Astley, "ALDRIG ATT GE
 DU UPP"]

922
00:47:30,971 --> 00:47:35,930

923
00:47:35,930 --> 00:47:36,500
>> OK bra.

924
00:47:36,500 --> 00:47:37,625
Jag borde inte ha sagt det.

925
00:47:37,625 --> 00:47:40,570
Hur som helst, hej.

926
00:47:40,570 --> 00:47:43,430

927
00:47:43,430 --> 00:47:45,490
Så vi har detta öppna.

928
00:47:45,490 --> 00:47:52,320
Så nu allt jag gör är att jag i princip skapade
en grundläggande syntax för att skapa musik.

929
00:47:52,320 --> 00:47:57,610
Så om jag gör något liknande, lägg g4
Den 1 2, vad det innebär att,

930
00:47:57,610 --> 00:48:00,950
lägg piano anmärkning, G4,
vilket är den fjärde G

931
00:48:00,950 --> 00:48:02,680
upp på pianot från botten.

932
00:48:02,680 --> 00:48:05,930
Så det här är typ av MIDI tala,
så för dem som är musik baserad,

933
00:48:05,930 --> 00:48:07,860
detta är bara MIDI-noter.

934
00:48:07,860 --> 00:48:10,090
>> PUBLIK: Det är G
av medel C, eller hur?

935
00:48:10,090 --> 00:48:11,840
>> HUGH Zabriskie: Detta är G
över USA C, det stämmer.

936
00:48:11,840 --> 00:48:12,470
>> PUBLIK: Ovanför Mellanöstern C.

937
00:48:12,470 --> 00:48:13,345
>> HUGH Zabriskie: Ja.

938
00:48:13,345 --> 00:48:14,340
Faktiskt, ja.

939
00:48:14,340 --> 00:48:16,131
Jag tror att jag faktiskt gjort
det en [OHÖRBAR],

940
00:48:16,131 --> 00:48:18,860
så detta kan vara en oktav över det.

941
00:48:18,860 --> 00:48:20,070
Så låt oss se.

942
00:48:20,070 --> 00:48:21,152
Om jag slog Play--

943
00:48:21,152 --> 00:48:22,110
[REPETERANDE PIANO OBS]

944
00:48:22,110 --> 00:48:23,200
--we're kommer att höra det.

945
00:48:23,200 --> 00:48:25,700
Tanken är att det fungerar
precis som en kommandorad skulle,

946
00:48:25,700 --> 00:48:27,510
så om jag går upp och ner
på mitt tangentbord, du

947
00:48:27,510 --> 00:48:31,550
kan gå tillbaka till föregående
kommandon, vilket är ganska bra.

948
00:48:31,550 --> 00:48:35,136
Och nedan är min lista över spår,
vilka alla drivs med ögla.

949
00:48:35,136 --> 00:48:38,260
>> PUBLIK: Du antar att
88-tangenters tangentbord på det, eller hur?

950
00:48:38,260 --> 00:48:41,051
>> HUGH Zabriskie: Frågan var,
antar jag en 88-tangenters tangentbord,

951
00:48:41,051 --> 00:48:41,990
och ja, jag är.

952
00:48:41,990 --> 00:48:45,030
Vad jag gjorde är jag
i grund och botten tog 88 sampel

953
00:48:45,030 --> 00:48:46,970
av piano, en för varje ton.

954
00:48:46,970 --> 00:48:49,180
Och så varje gång du
höra en anteckning från och med nu,

955
00:48:49,180 --> 00:48:57,550
som faktiskt är en slinga som ser
like-- detta få spelas på slingan,

956
00:48:57,550 --> 00:49:00,120
så för varje ton, detta körs.

957
00:49:00,120 --> 00:49:02,860
Vad som händer är jag
skapa en buffert igen,

958
00:49:02,860 --> 00:49:06,010
Jag skapar en vinst nod att ställa in volymen.

959
00:49:06,010 --> 00:49:08,240
Detta bara en riktigt
komplicerat sätt att säga I

960
00:49:08,240 --> 00:49:10,550
lagra buffert i en source.buffer.

961
00:49:10,550 --> 00:49:13,160
Jag ger det vinsten, jag
ansluta den till vinsten,

962
00:49:13,160 --> 00:49:15,576
förstärkningen är ansluten till
utgång, och då jag spelar det.

963
00:49:15,576 --> 00:49:20,735
Så det är typ av process
att ta i en buffert källa.

964
00:49:20,735 --> 00:49:24,820
>> PUBLIK: Kan du faktiskt ta det
torr ljud och göra det våta [OHÖRBAR]?

965
00:49:24,820 --> 00:49:26,260
>> HUGH Zabriskie: Du kan, ja.

966
00:49:26,260 --> 00:49:29,260
Det finns åter verb, det finns
fördröjning, distorsion.

967
00:49:29,260 --> 00:49:33,260
Du kan i princip sätta något i
mellan att sandwich of-- bra,

968
00:49:33,260 --> 00:49:37,660
pipeline är en bättre metafor,
men du kan lägga något i det.

969
00:49:37,660 --> 00:49:38,200
Häftigt.

970
00:49:38,200 --> 00:49:40,280
>> Så jag ska avsluta demo
här för att ge dig en känsla

971
00:49:40,280 --> 00:49:46,390
för att bara det stora antalet gånger du
kan köra denna funktion på en gång.

972
00:49:46,390 --> 00:49:49,280
Så jag kommer att ta bort detta.

973
00:49:49,280 --> 00:49:59,110
Jag kommer att skapa en generator that--
i princip vad does-- detta är verkligen

974
00:49:59,110 --> 00:50:04,220
typ av en komplicerad syntax-- men det är
kommer att generera anteckningar i farten,

975
00:50:04,220 --> 00:50:06,601
och bara börja spela
dem som utvärderar dem.

976
00:50:06,601 --> 00:50:07,392
[Inplacering PIANO]

977
00:50:07,392 --> 00:50:10,990

978
00:50:10,990 --> 00:50:12,817
>> Så vi kan bara göra lite musik här.

979
00:50:12,817 --> 00:50:13,608
[Inplacering PIANO]

980
00:50:13,608 --> 00:50:39,570

981
00:50:39,570 --> 00:50:41,470
>> Så vad detta kommando
gör, till exempel, är

982
00:50:41,470 --> 00:50:46,910
det tar dessa tre toner för
piano och sedan sätter dem på B3.

983
00:50:46,910 --> 00:50:48,660
Denna syntax kan göra
lite mer meningsfullt

984
00:50:48,660 --> 00:50:50,590
till dem som har en
musik bakgrund här.

985
00:50:50,590 --> 00:50:55,180

986
00:50:55,180 --> 00:50:56,551
>> Jag kan lägga till en bastrumma.

987
00:50:56,551 --> 00:50:57,050
Jag kan--

988
00:50:57,050 --> 00:50:58,048
>> [Inplacering INSTRUMENT]

989
00:50:58,048 --> 00:50:59,256
>> --just leka med det.

990
00:50:59,256 --> 00:51:12,519

991
00:51:12,519 --> 00:51:13,474
>> Så du kan make--

992
00:51:13,474 --> 00:51:14,515
[Inplacering INSTRUMENT]

993
00:51:14,515 --> 00:51:15,513
Att man är lite mer irriterande.

994
00:51:15,513 --> 00:51:16,554
[Inplacering INSTRUMENT]

995
00:51:16,554 --> 00:51:26,491

996
00:51:26,491 --> 00:51:30,981
>> Så som slumpmässigt läggs en torr cymbal
på varje 16:e notera, med en 16%

997
00:51:30,981 --> 00:51:31,481
[OHÖRBAR].

998
00:51:31,481 --> 00:51:32,522
>> [Inplacering INSTRUMENT]

999
00:51:32,522 --> 00:51:40,962

1000
00:51:40,962 --> 00:51:50,400
>> Ja, så hur denna
works-- det är alltid i 4: 4.

1001
00:51:50,400 --> 00:51:51,441
[Inplacering INSTRUMENT]

1002
00:51:51,441 --> 00:52:06,910

1003
00:52:06,910 --> 00:52:10,902
>> Ja, så de fyra kvartalen, och 16/8.

1004
00:52:10,902 --> 00:52:14,851

1005
00:52:14,851 --> 00:52:15,892
[Inplacering INSTRUMENT]

1006
00:52:15,892 --> 00:52:27,970

1007
00:52:27,970 --> 00:52:33,780
>> Så i genomsnitt får du 60%
av träffar på 16-delsnoter.

1008
00:52:33,780 --> 00:52:35,990
>> Ändå, det var bara
typ av att visa upp

1009
00:52:35,990 --> 00:52:39,780
några av de saker du kan
bygga med Web Audio API.

1010
00:52:39,780 --> 00:52:43,840
Det är verkligen kraftfulla, det är verkligen snabb,
och du kan göra en hel del coola saker

1011
00:52:43,840 --> 00:52:44,340
med det.

1012
00:52:44,340 --> 00:52:51,260
Så återigen, alla frågor du har,
e myself-- Hugh-- eller Sam,

1013
00:52:51,260 --> 00:52:55,869
och ärligt, har Google
massor av goda resurser.

1014
00:52:55,869 --> 00:52:56,660
Alla sista frågor?

1015
00:52:56,660 --> 00:52:57,970
Ja.

1016
00:52:57,970 --> 00:53:00,790
>> PUBLIK: Så du kan komma åt
den inbyggda mikrofonen.

1017
00:53:00,790 --> 00:53:03,089
Vad händer om du ville
Använd en bättre mikrofon?

1018
00:53:03,089 --> 00:53:05,380
HUGH Zabriskie: Om du ville
att använda bättre mikrofon?

1019
00:53:05,380 --> 00:53:11,320
Så återigen, är denna del av
abstraktion mellan Krom

1020
00:53:11,320 --> 00:53:12,950
och resten av datorn.

1021
00:53:12,950 --> 00:53:18,950
Om det inte är tillgängliga via
ett API, som Web MIDI API,

1022
00:53:18,950 --> 00:53:22,030
du kan nog hitta några hack,
men i allmänhet inte lika genomförbart.

1023
00:53:22,030 --> 00:53:25,300
>> SAM GRÖN: Du kan also--
alla Chrome vet

1024
00:53:25,300 --> 00:53:28,820
är vad din standardmikrofon
är, och det kommer åt det.

1025
00:53:28,820 --> 00:53:33,410
Så om du hade en mikrofon du kunde
in som datorns standardmikrofon,

1026
00:53:33,410 --> 00:53:35,990
du kan komma åt det på det sättet
och det skulle nog fungera.

1027
00:53:35,990 --> 00:53:37,490
HUGH Zabriskie: Det är en bra poäng.

1028
00:53:37,490 --> 00:53:39,656
Jag har aldrig provat det, men
du kanske kunna slag

1029
00:53:39,656 --> 00:53:45,700
of-- om du omdirigera input högtalare,
du skulle kunna göra det, ja.

1030
00:53:45,700 --> 00:53:48,360
>> Alla sista frågor?

1031
00:53:48,360 --> 00:53:49,340
Häftigt.

1032
00:53:49,340 --> 00:53:51,680
Jo tack killar
så mycket för att titta på.

1033
00:53:51,680 --> 00:53:52,199
Jag är Hugh.

1034
00:53:52,199 --> 00:53:52,990
SAM GREEN: Jag är Sam.

1035
00:53:52,990 --> 00:53:55,410
HUGH Zabriskie: Och detta är CS50.

1036
00:53:55,410 --> 00:53:56,767