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

2
00:00:05,900 --> 00:00:07,170
>> SAM GREEN: Hei, alle sammen.

3
00:00:07,170 --> 00:00:08,640
Velkommen til vårt seminar.

4
00:00:08,640 --> 00:00:10,009
Mitt navn er Sam.

5
00:00:10,009 --> 00:00:11,050
HUGH Zabriskie: Jeg er Hugh.

6
00:00:11,050 --> 00:00:17,420
SAM GREEN: Og vi kommer til å snakke i dag
om Javascript og Web Audio API.

7
00:00:17,420 --> 00:00:21,180
Bare for å starte, er dette en disposisjon
av vår agenda for seminaret.

8
00:00:21,180 --> 00:00:25,350
Vi kommer til å starte med å snakke om
hvorfor du bør være interessert i Web

9
00:00:25,350 --> 00:00:30,130
Audio API, hvorfor er Javascript
det språket du trenger for det,

10
00:00:30,130 --> 00:00:32,619
og deretter snakke om Javascript
essentials-- så like,

11
00:00:32,619 --> 00:00:34,800
lede deg gjennom noen
grunnleggende i språket,

12
00:00:34,800 --> 00:00:37,290
og deretter snakke om
API lyd på et høyt nivå.

13
00:00:37,290 --> 00:00:41,140
Deretter vil Hugh snakke om noen
av de stadier av lydproduksjon

14
00:00:41,140 --> 00:00:45,509
og deretter demo denne awesome sequencer
Prosjektet han bygget og vise deg koden.

15
00:00:45,509 --> 00:00:48,050
Og så vil vi ha tid til
spørsmål på slutten for folk

16
00:00:48,050 --> 00:00:49,593
som er her bor.

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
Jeg vil sikkerhetskopiere.

21
00:00:52,170 --> 00:00:54,960
>> SAM GREEN: Så, første ting først.

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

23
00:00:57,840 --> 00:01:00,480
er at det er ingen satt opp nødvendig.

24
00:01:00,480 --> 00:01:04,230
Det kommer innebygd i
de fleste moderne nettlesere,

25
00:01:04,230 --> 00:01:08,630
inkludert Chrome, Edge, en hel
gjeng others-- alle de

26
00:01:08,630 --> 00:01:12,650
at store deler av
mennesker bruker i dag.

27
00:01:12,650 --> 00:01:14,807
Så det er ikke satt opp,
bortsett fra bare å få

28
00:01:14,807 --> 00:01:16,890
en web-server går, for
du å komme i gang å jobbe

29
00:01:16,890 --> 00:01:18,420
på prosjektet, og det er flott.

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

31
00:01:21,500 --> 00:01:24,190
>> Vi anbefaler pen
tungt at du vurderer

32
00:01:24,190 --> 00:01:26,530
bruker Chrome for
Javascript webutvikling,

33
00:01:26,530 --> 00:01:30,260
bare fordi utvikleren
verktøy er veldig sterk.

34
00:01:30,260 --> 00:01:33,220
Som et eksempel på hva vi mener
ved å si åpne opp Javascript

35
00:01:33,220 --> 00:01:38,600
console-- hvis du går inn Chrome
og du ser på en nettside,

36
00:01:38,600 --> 00:01:43,897
og du venstre klikk
Inspiser Element, og deretter

37
00:01:43,897 --> 00:01:46,730
du gå til denne lille rullegardin
akkurat her og du klikker på konsoll,

38
00:01:46,730 --> 00:01:50,660
du vil se hva åpner opp ser en
mye som en ledetekst 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
Og akkurat sånn, kan vi
typen kommandoer her, som Clear,

41
00:01:59,260 --> 00:02:01,350
og andre kommandoer sånn.

42
00:02:01,350 --> 00:02:04,267
Vi kan lage variabler, som
vi skal se senere i Javascript.

43
00:02:04,267 --> 00:02:07,100
Og så noe vi kan gjøre i
Javascript, kan vi gjøre med konsollen,

44
00:02:07,100 --> 00:02:11,430
og det er en super praktisk måte å
begynne å spille rundt med APIer

45
00:02:11,430 --> 00:02:15,760
og får komfortabel med
Javascript rett utenfor balltre.

46
00:02:15,760 --> 00:02:18,290
No set up nødvendig,
som er virkelig fint.

47
00:02:18,290 --> 00:02:18,790
Kjølig.

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

49
00:02:22,064 --> 00:02:22,880
Awesome.

50
00:02:22,880 --> 00:02:24,780
>> Så bare en ting å legge til.

51
00:02:24,780 --> 00:02:27,780
Hvis du har noen questions-- det er
mange av dere som ikke er her lever,

52
00:02:27,780 --> 00:02:31,232
gjerne send us-- disse
er våre e-postadresser.

53
00:02:31,232 --> 00:02:33,190
Hvis du har spørsmål
du ønsker ikke å spørre oss,

54
00:02:33,190 --> 00:02:36,160
som, oh jeg har en bug
i min kode, eller noe

55
00:02:36,160 --> 00:02:39,270
som er litt mer spesifikk,
kanskje Google det først.

56
00:02:39,270 --> 00:02:42,340
Det finnes mange flotte ressurser
om Web Audio API ute.

57
00:02:42,340 --> 00:02:44,089
Det er virkelig godt
dokumentert og det er å være

58
00:02:44,089 --> 00:02:47,194
brukes av massevis av folk i
industri, og folk som er bare

59
00:02:47,194 --> 00:02:48,610
bygge morsomme ting for seg selv.

60
00:02:48,610 --> 00:02:51,306
Så det bør være mye
av ressurser der ute.

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

62
00:02:53,040 --> 00:02:56,100
>> Kult, så hvorfor Web Audio API?

63
00:02:56,100 --> 00:02:59,840
Dette diagrammet er litt
av en videreutvikling av veien

64
00:02:59,840 --> 00:03:04,100
lyd på nettet har vokst over tid.

65
00:03:04,100 --> 00:03:13,080
Bgsound var som den opprinnelige HTML-koden
at Internet Explorer brukes til å støtte.

66
00:03:13,080 --> 00:03:16,790
Det kun tillatt for ganske grunnleggende lyder,
funksjonaliteten var ikke veldig robust,

67
00:03:16,790 --> 00:03:19,380
og du kunne ikke gjøre
komplisert sekvensering,

68
00:03:19,380 --> 00:03:21,890
eller styre når lyden startet
og stoppet veldig robust.

69
00:03:21,890 --> 00:03:23,930
Derfor var det ikke særlig
godt utviklet.

70
00:03:23,930 --> 00:03:27,470
Så etter det, Flash
kom along-- som

71
00:03:27,470 --> 00:03:31,712
Jeg er sikker på at dere alle er kjent
med Flash-- kanskje ikke hvordan det fungerer,

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

73
00:03:32,920 --> 00:03:35,586
Du er nødt til å oppdatere Flash
Plug-in, all den slags ting,

74
00:03:35,586 --> 00:03:40,110
og som sikkert utvidet utvalget
av funksjonalitet som var tilgjengelig.

75
00:03:40,110 --> 00:03:45,370
Men å gjøre brukeren installere
en plug-in er definitivt

76
00:03:45,370 --> 00:03:48,480
en ulempe å inkludere Flash
i søknaden din, ikke sant?

77
00:03:48,480 --> 00:03:52,410
Fordi da er du avhengig av
brukeren går og finne denne plug-in,

78
00:03:52,410 --> 00:03:54,660
og sannsynligvis blir slått
skremme av dette ekstra trinnet

79
00:03:54,660 --> 00:03:56,640
de må ta for å bruke appen.

80
00:03:56,640 --> 00:04:01,270
Og så kan det være en oppdatering
som vil bryte hele søknaden,

81
00:04:01,270 --> 00:04:03,880
og det ender opp med å bli et mareritt
for utbygger, også.

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

83
00:04:06,230 --> 00:04:10,480
>> Og så etter det kom,
HTML audio tag, som

84
00:04:10,480 --> 00:04:16,579
er en funksjon av mer moderne HTML-- som
absolutt tillatt for mye mer ting,

85
00:04:16,579 --> 00:04:20,050
men selv de tingene du kan gjøre
det ble litt begrenset bare

86
00:04:20,050 --> 00:04:22,730
som et resultat av de tingene
at HTML var i stand til.

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
ble en standard
øve på tvers av nettlesere,

89
00:04:29,290 --> 00:04:32,490
som virkelig utvidet sett
muligheter for utviklere

90
00:04:32,490 --> 00:04:36,590
å virkelig komme inn bygning
kule ting for web.

91
00:04:36,590 --> 00:04:39,220
I lang tid det hadde
vært veldig robuste verktøy

92
00:04:39,220 --> 00:04:44,360
for native lydprogrammer,
like-- alle vet Garageband,

93
00:04:44,360 --> 00:04:48,360
og så åpenbart er det mer
profesjonell lyd miksing programmer,

94
00:04:48,360 --> 00:04:49,640
og den slags ting.

95
00:04:49,640 --> 00:04:52,690
Men det var ikke en
virkelig god Cloud-- ikke

96
00:04:52,690 --> 00:04:55,811
Cloud, ja, jeg antar
Cloud-- web-basert plattform

97
00:04:55,811 --> 00:04:58,310
som ville tillate utviklere til
bygge applikasjoner for folk

98
00:04:58,310 --> 00:05:00,570
å gjøre lydmiksing.

99
00:05:00,570 --> 00:05:03,960
Og som han vil vise deg
senere, Web Audio API

100
00:05:03,960 --> 00:05:07,470
åpner for virkelig kraftig
ting til å skje veldig enkelt,

101
00:05:07,470 --> 00:05:09,597
som er ganske kult.

102
00:05:09,597 --> 00:05:12,680
Så det er instruksjonen til hvorfor du
bør se resten av seminaret,

103
00:05:12,680 --> 00:05:14,350
i utgangspunktet.

104
00:05:14,350 --> 00:05:17,880
>> Og nå, jeg kommer til å snakke om
noen JavaScript-- bare grunnleggende elementer

105
00:05:17,880 --> 00:05:20,240
av språket, så
vi kan være på samme side

106
00:05:20,240 --> 00:05:22,470
når vi snakker om
API litt senere.

107
00:05:22,470 --> 00:05:23,260
Kjølig.

108
00:05:23,260 --> 00:05:26,192
>> Så dette er et sammendrag.

109
00:05:26,192 --> 00:05:27,150
Jeg glemte dette var her.

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

111
00:05:27,510 --> 00:05:27,870
>> HUGH Zabriskie: Det finnes to lysbilder her.

112
00:05:27,870 --> 00:05:30,245
>> SAM GREEN: Dette er et sammendrag
av noen av begrensningene

113
00:05:30,245 --> 00:05:35,220
av de andre bindende, gamle metoder.

114
00:05:35,220 --> 00:05:37,828
Og så nå har vi disse tingene.

115
00:05:37,828 --> 00:05:40,011
Kjølig.

116
00:05:40,011 --> 00:05:40,510
Awesome.

117
00:05:40,510 --> 00:05:43,200
>> Så, Javascript essensielle.

118
00:05:43,200 --> 00:05:47,230
Første ting først, det er en
ganske betydelig forskjell

119
00:05:47,230 --> 00:05:49,940
i Javascript versus i en
språk som C, på den måten

120
00:05:49,940 --> 00:05:52,050
at variablene er opprettet.

121
00:05:52,050 --> 00:05:55,634
Så i C, vi er vant til å ha
å skrive våre variabler, ikke sant?

122
00:05:55,634 --> 00:05:57,800
Og jeg mener ikke typen som
skriv dem inn, mener jeg typen

123
00:05:57,800 --> 00:06:01,900
som tildeler dem en type-- mening
som en int, en dupp, en røye.

124
00:06:01,900 --> 00:06:05,210
I C, ble vi virkelig brukes til
å opprette en variabel

125
00:06:05,210 --> 00:06:09,690
og så holde seg til den typen for
hele tiden at vi bruker den variabelen.

126
00:06:09,690 --> 00:06:13,990
Og det er ikke nødvendigvis verre,
men det er nok vanskeligere å bruke.

127
00:06:13,990 --> 00:06:16,190
En av de kule funksjonene
Javascript er

128
00:06:16,190 --> 00:06:19,740
at variabler er det som kalles
"dynamisk skrevet," som

129
00:06:19,740 --> 00:06:22,500
betyr at jeg kan lage en
variabel med at syntaks,

130
00:06:22,500 --> 00:06:25,800
varX lik 5, for eksempel.

131
00:06:25,800 --> 00:06:27,790
Som opprinnelig skaper
et heltall variable--

132
00:06:27,790 --> 00:06:29,870
rett under
hette somewhere-- men jeg

133
00:06:29,870 --> 00:06:33,040
kan endre den variabelen
for å referere til en streng

134
00:06:33,040 --> 00:06:35,820
uten å gjøre noe lignende
lage en ny variabel.

135
00:06:35,820 --> 00:06:37,880
Jeg trenger ikke å bekymre deg
om typen endring.

136
00:06:37,880 --> 00:06:45,440
Javascript vet at den type s
forandret, og det skjer dynamisk.

137
00:06:45,440 --> 00:06:48,510
>> Så, det er fordeler
og ulemper til det,

138
00:06:48,510 --> 00:06:51,250
som alle som har jobbet i
Javascript for en stund kanskje vet.

139
00:06:51,250 --> 00:06:53,600
Det er tider når
Det kan føre

140
00:06:53,600 --> 00:06:57,720
endre type en variabel og
ikke håndtere denne typen endring,

141
00:06:57,720 --> 00:07:01,120
og deretter Javascript
kan crash-- eller et unntak

142
00:07:01,120 --> 00:07:06,070
bli kastet, fordi du vil ha den
feil type når du forventer en type.

143
00:07:06,070 --> 00:07:07,040
Kjølig.

144
00:07:07,040 --> 00:07:11,470
>> Så, er scoping-- som like, hvis vi
husker de første ukene i kurset,

145
00:07:11,470 --> 00:07:15,420
refererer til hvor synlig en variabel
er, og i hvilket område av koden.

146
00:07:15,420 --> 00:07:18,400
Alle som ser veldig lik
til slik det ser ut i C.

147
00:07:18,400 --> 00:07:24,755
Så variablene er omfangs generelt
innen klammeparentes innenfor en funksjon,

148
00:07:24,755 --> 00:07:27,005
og så er det også
globalt Scoped variabler som

149
00:07:27,005 --> 00:07:29,171
are-- hvis du skriver en variabel
utsiden av en funksjon,

150
00:07:29,171 --> 00:07:31,790
det vil være synlig i hele teksten.

151
00:07:31,790 --> 00:07:35,840
>> En forskjell mellom
Javascript og C i særdeleshet,

152
00:07:35,840 --> 00:07:40,280
er at hvis du deklarerer en global
variabel hvor som helst i en tekstfil

153
00:07:40,280 --> 00:07:43,324
det er synlig i noen funksjon
innenfor denne tekstfilen.

154
00:07:43,324 --> 00:07:44,240
Det er riktig, ikke sant?

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

156
00:07:46,330 --> 00:07:49,120
>> SAM GREEN: Så det er også en liten
litt funky i forhold til C,

157
00:07:49,120 --> 00:07:52,660
der vi alltid måtte ha vår
variable definisjoner over de stedene

158
00:07:52,660 --> 00:07:53,770
de ble brukt.

159
00:07:53,770 --> 00:07:57,957
Det er ikke en regel som er håndheves
lenger, så, litt annerledes.

160
00:07:57,957 --> 00:08:00,540
Og igjen bare for å reemphasize,
global versus lokal variables--

161
00:08:00,540 --> 00:08:03,457
meget lik C. Du kunne ha
to variabler med samme navn,

162
00:08:03,457 --> 00:08:06,540
og har en av deres navn bli skygget
av en lokal variabel hvis en av dem

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

164
00:08:07,546 --> 00:08:09,420
Så lignende type
problemer som noen av dere

165
00:08:09,420 --> 00:08:11,920
kan ha kjørt inn i noen
av problemet sett så langt.

166
00:08:11,920 --> 00:08:14,450
Kult, så det er variabler.

167
00:08:14,450 --> 00:08:20,310
>> Kontrollflyt, noe som betyr like,
if-else-- logisk stuff-- og sløyfer.

168
00:08:20,310 --> 00:08:24,510
Så til å begynne med, dette er hva if-else
uttalelser se ut i Javascript.

169
00:08:24,510 --> 00:08:29,750
Plassering av de forskjellige tingene
på linjene er ikke viktig.

170
00:08:29,750 --> 00:08:34,409
Dette er bare ett av de konvensjoner
for måten vi strukturen kode.

171
00:08:34,409 --> 00:08:38,634
Akkurat som i C, har vi en
"hvis", en parentes uttalelse.

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

173
00:08:40,840 --> 00:08:42,090
Det var ikke det jeg mente å gjøre.

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

175
00:08:44,860 --> 00:08:45,550
Jeg gjorde det igjen.

176
00:08:45,550 --> 00:08:46,841
>> HUGH Zabriskie: Prøver å avslutte?

177
00:08:46,841 --> 00:08:49,770
SAM GREEN: Nei, jeg er
bare prøver å zoome inn.

178
00:08:49,770 --> 00:08:50,660
Det spiller ingen rolle.

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

180
00:08:54,730 --> 00:08:59,370
>> Så har vi en "hvis" statement og
vi har en tilstand på innsiden av det

181
00:08:59,370 --> 00:09:03,130
som evalueres til sant eller usant,
og som avgjør hvorvidt

182
00:09:03,130 --> 00:09:04,510
vi går inn i denne blokken av kode.

183
00:09:04,510 --> 00:09:09,860
Og på samme måte, har vi en else-if, og
et annet, akkurat som vi er vant til i C.

184
00:09:09,860 --> 00:09:14,010
>> Du bør også være ganske behagelig
rett utenfor balltre med løkker,

185
00:09:14,010 --> 00:09:16,440
fordi de ser også
mye som C ser ut.

186
00:09:16,440 --> 00:09:19,600
Men du vil merke igjen at vi
har, istedenfor int initializations,

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

188
00:09:22,570 --> 00:09:24,650
Og jeg antar du har
være forsiktig med å gjøre

189
00:09:24,650 --> 00:09:28,460
at du ikke endre verdien
av I fra en int til en streng,

190
00:09:28,460 --> 00:09:31,780
for eksempel, fordi det kommer til å
føre til rare oppførsel du kanskje ikke

191
00:09:31,780 --> 00:09:32,280
forvente.

192
00:09:32,280 --> 00:09:35,750
Men dette bør se
ganske kjent, også.

193
00:09:35,750 --> 00:09:39,460
>> Så det er her ting begynner å
får litt gal i Javascript

194
00:09:39,460 --> 00:09:44,920
for noen som kommer fra en
bakgrunn av C. Det er funksjoner

195
00:09:44,920 --> 00:09:48,070
i Javascript, og det er en måte
å erklære en funksjon som ser

196
00:09:48,070 --> 00:09:50,361
slags lik C, og
så er det en annen som

197
00:09:50,361 --> 00:09:52,450
ser slags annerledes.

198
00:09:52,450 --> 00:09:54,930
>> Den første versjonen,
som vi kan se her,

199
00:09:54,930 --> 00:09:59,260
er slags C-aktig, der
vi si, dette er en funksjon,

200
00:09:59,260 --> 00:10:01,490
gi den et navn, gi
antall argumenter,

201
00:10:01,490 --> 00:10:05,150
og deretter innholdet i funksjon
gå inn disse klammeparentes.

202
00:10:05,150 --> 00:10:08,850
Vi får se et eksempel på
argumenter i bare et sekund.

203
00:10:08,850 --> 00:10:13,420
>> Mens på neste linje, ser vi, oh,
her er en variabel som heter "myFunction,"

204
00:10:13,420 --> 00:10:17,546
og vi lik den til dette
generisk thing-- function-- at

205
00:10:17,546 --> 00:10:19,170
ser ikke ut til å ha noe å gå på.

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

207
00:10:22,780 --> 00:10:26,080
Grunnen til det er annerledes
enn C er at Javascript

208
00:10:26,080 --> 00:10:30,040
er det som kalles en funksjonell språk,
eller har funksjonelle elementer, noe som innebærer

209
00:10:30,040 --> 00:10:33,510
at funksjoner er faktisk verdier.

210
00:10:33,510 --> 00:10:39,520
Og det betyr at vi kan sette
en variabel til lik en funksjon

211
00:10:39,520 --> 00:10:43,210
og deretter flytte den funksjonen
rundt, passerer det som et argument,

212
00:10:43,210 --> 00:10:46,550
gjøre alle slags ting
sånn med funksjoner.

213
00:10:46,550 --> 00:10:49,682
>> En annen ting å note--
funksjonene er skrevet

214
00:10:49,682 --> 00:10:51,140
med et visst antall argumenter.

215
00:10:51,140 --> 00:10:54,056
Vi får se et eksempel på en funksjon
med et argument på neste lysbilde.

216
00:10:54,056 --> 00:10:56,720
Men Javascript vil ikke
kjefte på deg hvis du prøver

217
00:10:56,720 --> 00:10:59,330
å bruke en funksjon med
feil antall argumenter.

218
00:10:59,330 --> 00:11:05,310
Det vil bare gjøre sitt beste for å gjøre
gjøre, noe som betyr at hvis du passerer,

219
00:11:05,310 --> 00:11:09,410
du kaller en funksjon som forventer en
argument uten argument, alt som

220
00:11:09,410 --> 00:11:13,990
vil skje er det vil gjøre sitt beste
å prøve og kjøre denne koden,

221
00:11:13,990 --> 00:11:16,541
og hvis det til slutt går
inn et unntak eller en feil,

222
00:11:16,541 --> 00:11:19,790
det vil kaste det unntak, og bare holde
going-- som bare er én av måtene

223
00:11:19,790 --> 00:11:21,070
at Javascript fungerer.

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

225
00:11:21,781 --> 00:11:24,207
>> PUBLIKUM: Hva skjer hvis
det er altfor mange argumenter?

226
00:11:24,207 --> 00:11:26,040
SAM GRØNN: Så
Spørsmålet var, hva skjer

227
00:11:26,040 --> 00:11:27,380
hvis det er for mange argumenter?

228
00:11:27,380 --> 00:11:29,171
Og svaret er at
Javascript vil bare

229
00:11:29,171 --> 00:11:32,120
ignorere de som er
etter de som den forventer.

230
00:11:32,120 --> 00:11:36,420
Det vil prøve å utføre funksjonen
kalle som om det var bare de to første.

231
00:11:36,420 --> 00:11:37,075
Høyre?

232
00:11:37,075 --> 00:11:37,700
>> HUGH Zabriskie: Det er riktig, ja.

233
00:11:37,700 --> 00:11:39,449
Tilsvarende, hvis der
er for få argumenter,

234
00:11:39,449 --> 00:11:42,640
det bare slags gir null til alle
argumenter det ikke har noen verdier

235
00:11:42,640 --> 00:11:43,660
til.

236
00:11:43,660 --> 00:11:45,810
>> SAM GREEN: som kan
faktisk være nyttig, hvis du

237
00:11:45,810 --> 00:11:49,060
ønsker å skrive en funksjon som
tar et variabelt antall argumenter.

238
00:11:49,060 --> 00:11:55,830
Du kan stille inn standardverdier i
definisjonen av funksjonen,

239
00:11:55,830 --> 00:11:59,060
og det kan ignorere det faktum
at inngangs er ikke der.

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

241
00:12:01,584 --> 00:12:04,000
Så jeg ønsker å snakke litt
mer om denne siste bullet

242
00:12:04,000 --> 00:12:05,541
punkt, som er funksjoner verdier.

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

244
00:12:07,930 --> 00:12:11,010
Dette er et eksempel som er
litt halsbrekk

245
00:12:11,010 --> 00:12:14,880
hvis du bare leser det, og tror ikke
om hva som skjer på et øyeblikk.

246
00:12:14,880 --> 00:12:17,910
Så, la oss se bare på
den første linjen her.

247
00:12:17,910 --> 00:12:24,360
Vi har denne variabelen, f1, som vi sier
er en funksjon som gjør denne tingen.

248
00:12:24,360 --> 00:12:28,535
Og innholdet i funksjon
er console.log ("hei").

249
00:12:28,535 --> 00:12:32,220
Du kan tenke på console.log som
Javascript tilsvarer printf.

250
00:12:32,220 --> 00:12:35,510
Så hva vil skje er, hvis vi
kjøre denne koden i nettleseren vår,

251
00:12:35,510 --> 00:12:37,530
det vil skrive ut en streng.

252
00:12:37,530 --> 00:12:39,342
Jeg kan vise det.

253
00:12:39,342 --> 00:12:42,300
PUBLIKUM: Av loggen, skjønt, gjør at
mener det blir tatt opp et sted?

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

255
00:12:42,550 --> 00:12:44,216
Så jeg skal vise deg hva som skal skje.

256
00:12:44,216 --> 00:12:48,085
Så spørsmålet var, hva betyr log mener?

257
00:12:48,085 --> 00:12:51,262
>> HUGH Zabriskie: Så console.log
er som printf for C.

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

259
00:12:52,970 --> 00:12:59,240
så hvis jeg har denne console.log ('Hei'),
og jeg kaller det, strengen "hei"

260
00:12:59,240 --> 00:13:00,730
blir skrevet ut til konsollen.

261
00:13:00,730 --> 00:13:03,340
Dette er den konsollen.

262
00:13:03,340 --> 00:13:05,930
Det er akkurat som printf, der
det skrives til standard ut.

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

264
00:13:09,050 --> 00:13:11,230
Og vi vil se i et minutt,
men dette er faktisk

265
00:13:11,230 --> 00:13:16,529
henviser til konsollen objekt,
og kalle en metode på dette objektet.

266
00:13:16,529 --> 00:13:18,320
Det vil være mer fornuftig
i et øyeblikk når vi

267
00:13:18,320 --> 00:13:20,660
komme til å snakke om
objekter i Javascript,

268
00:13:20,660 --> 00:13:22,509
men jeg trodde jeg ville bare nevne det.

269
00:13:22,509 --> 00:13:24,300
HUGH Zabriskie: Vi er
vant til i C, right--

270
00:13:24,300 --> 00:13:27,580
vi vanligvis skrive et stort program
i hoved å gjøre noe.

271
00:13:27,580 --> 00:13:30,700
Men hva som er kult i Javascript er du
har denne typen tolk som

272
00:13:30,700 --> 00:13:33,620
kjører i sanntid, slik at det
tar bare linje for linje,

273
00:13:33,620 --> 00:13:35,320
det kan bare tolke det på stedet.

274
00:13:35,320 --> 00:13:37,403
Og det holder orden på
ting som har kjørt før,

275
00:13:37,403 --> 00:13:41,620
så det er en ganske nyttig verktøy for å
bruke console.log, eller konsollen,

276
00:13:41,620 --> 00:13:46,870
generelt, for bare å spille
rundt med Javascript.

277
00:13:46,870 --> 00:13:51,420
>> SAM GREEN: Så kommer tilbake til dette
example-- den andre linjen med kode

278
00:13:51,420 --> 00:13:55,320
her er ganske ufattelige i hodet mitt.

279
00:13:55,320 --> 00:13:59,790
Første gang jeg leste dette,
Det var som, hva er det som skjer?

280
00:13:59,790 --> 00:14:04,580
Så det som skjer er at dette
funksjon erklæringen sier,

281
00:14:04,580 --> 00:14:10,170
Jeg har en funksjon kalt f2
som har ventet ett argument, f,

282
00:14:10,170 --> 00:14:12,990
og da er det telefoner
funksjon, f, hvilke

283
00:14:12,990 --> 00:14:17,652
ble sendt til det som et argument
uten argumenter selv.

284
00:14:17,652 --> 00:14:19,110
Så, som kan ha vært forvirrende.

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

286
00:14:21,890 --> 00:14:28,400
Hvis vi forstår dette som f2 tar f1
som et argument, og deretter innsiden av f2,

287
00:14:28,400 --> 00:14:31,190
f får called-- som betyr
at denne linjen med kode,

288
00:14:31,190 --> 00:14:34,192
etter disse to linjene
kode, resulterer i "hallo"

289
00:14:34,192 --> 00:14:35,400
som skrives ut til konsollen.

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

291
00:14:41,660 --> 00:14:44,910
>> Det faktum at vi kan passere
funksjoner rundt som verdier

292
00:14:44,910 --> 00:14:47,870
ender opp med å bli en av de mest
kraftige funksjoner i Javascript

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

294
00:14:49,700 --> 00:14:52,782
Utenfor alle
forferdelige ting det kan gjøre,

295
00:14:52,782 --> 00:14:54,990
akkurat som en funksjon av
språk i forhold til måten

296
00:14:54,990 --> 00:14:58,400
at det gjør ting enkelt
programmere og lar

297
00:14:58,400 --> 00:15:01,060
for ting som ikke er spesielt
velegnet til nettet,

298
00:15:01,060 --> 00:15:04,500
funksjonell programmering og funksjonell
programmering aspekter av Javascript

299
00:15:04,500 --> 00:15:07,130
er en av de mest
kraftige konsepter som

300
00:15:07,130 --> 00:15:11,030
eksisterer i JavaScript-- hvis du spør meg.

301
00:15:11,030 --> 00:15:11,960
Kjølig.

302
00:15:11,960 --> 00:15:13,534
>> Så, neste ting.

303
00:15:13,534 --> 00:15:16,450
I tillegg til å være funksjonelle,
det er også innslag av Javascript

304
00:15:16,450 --> 00:15:20,510
som er objekt-orientert,
som er en av de meget

305
00:15:20,510 --> 00:15:23,800
populære buzz ord i informatikk.

306
00:15:23,800 --> 00:15:27,040
Objektorientert programmering
er en veldig populær ting.

307
00:15:27,040 --> 00:15:34,210
Javascript har en versjon av det,
hvor jeg tror hver verdi er også

308
00:15:34,210 --> 00:15:41,475
et objekt, noe som betyr at hvert objekt
wraps sammen noen antall verdier.

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

310
00:15:44,020 --> 00:15:49,750
Så for verdier som er enkle, som
et helt tall, som er lik varX 5,

311
00:15:49,750 --> 00:15:52,250
at gjenstanden bare brytes at én verdi.

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

313
00:15:54,760 --> 00:15:59,036
>> Men vi kan også tenke seg en situasjon
where-- vi kan tenke på situasjoner i C

314
00:15:59,036 --> 00:16:00,910
der vi ønsket å gjøre
noe med structs,

315
00:16:00,910 --> 00:16:03,285
for eksempel, som brytes flere
verdier sammen og lager

316
00:16:03,285 --> 00:16:05,870
det virkelig lett å passere ting rundt.

317
00:16:05,870 --> 00:16:09,270
Det er når et objekt er i Javascript.

318
00:16:09,270 --> 00:16:12,340
>> Det er viktig å huske
når jeg sier at objekter innpakket

319
00:16:12,340 --> 00:16:15,330
et antall verdier sammen,
at funksjoner er også

320
00:16:15,330 --> 00:16:21,506
verdier, noe som betyr at funksjoner
også være inne i en Javascript-objekt.

321
00:16:21,506 --> 00:16:26,910
Og grunnen til det er viktig
er at mens vi ofte

322
00:16:26,910 --> 00:16:30,290
tenker på å kalle en metode
på et objekt som er

323
00:16:30,290 --> 00:16:35,200
av et populært begrep fra andre
populære objektorienterte språk,

324
00:16:35,200 --> 00:16:39,330
En av forskjellene er at her
alt som en metode er i Javascript

325
00:16:39,330 --> 00:16:47,270
er en verdi som er lagret på innsiden av et objekt
som utfører noen action-- muligens

326
00:16:47,270 --> 00:16:51,850
ved hjelp av de andre verdiene som er inne
av det objekt, men ikke nødvendigvis.

327
00:16:51,850 --> 00:16:56,930
Så du kan forestille seg en situasjon, jeg
antar i en liten bit av en gal måte,

328
00:16:56,930 --> 00:17:02,990
hvor man kalt en fremgangsmåte for ett
objekt på en annen gjenstand, f.eks.

329
00:17:02,990 --> 00:17:06,010
Så det er litt funky på den måten.

330
00:17:06,010 --> 00:17:09,369
>> Og du kan også endre metodene
som er forbundet med et objekt

331
00:17:09,369 --> 00:17:13,740
ved å tildele denne metoden en
ny funksjon, som også er

332
00:17:13,740 --> 00:17:18,250
ganske forskjellig fra andre
objektorienterte språk, der

333
00:17:18,250 --> 00:17:21,410
når vi erklære et objekt
og instantiate det,

334
00:17:21,410 --> 00:17:25,839
vi kan ikke endre metoder som er
assosiert med det formål lenger.

335
00:17:25,839 --> 00:17:28,680
Så det er ganske annerledes.

336
00:17:28,680 --> 00:17:29,570
Kjølig.

337
00:17:29,570 --> 00:17:34,010
>> Så her er et eksempel, først,
av et objekt i aksjon.

338
00:17:34,010 --> 00:17:36,390
Dette er det som kalles
en generisk objekt, som

339
00:17:36,390 --> 00:17:39,460
betyr at det ikke har noen
Spesielt navn, ikke har en klasse,

340
00:17:39,460 --> 00:17:42,190
det er bare noen innpakning av verdier.

341
00:17:42,190 --> 00:17:49,790
Og måten det ser ut er, har vi
denne ytre par av klammeparentes her

342
00:17:49,790 --> 00:17:57,950
som indikerer til Javascript
og si, dette er et objekt.

343
00:17:57,950 --> 00:18:02,130
Verdiene innsiden av det
er hver verdier inne

344
00:18:02,130 --> 00:18:04,590
av objektet som skal
pakkes sammen.

345
00:18:04,590 --> 00:18:09,180
Og innsiden av dette objektet,
vi da har viktige verdi par,

346
00:18:09,180 --> 00:18:13,880
hvor nøkkelen viser til navnet
av verdien på innsiden av objektet,

347
00:18:13,880 --> 00:18:16,790
og den andre side--
på motsatt side av tykktarmen her--

348
00:18:16,790 --> 00:18:19,850
er den faktiske verdien
som skal lagres.

349
00:18:19,850 --> 00:18:26,210
>> Så du ser her at vi har en
Nøkkelen heter fn med verdi sam,

350
00:18:26,210 --> 00:18:29,430
etterfulgt av et komma,
sier til neste oppføring.

351
00:18:29,430 --> 00:18:33,560
Så en nøkkel kalt ln,
med en verdi på grønt,

352
00:18:33,560 --> 00:18:35,840
etterfulgt av et komma,
etterfulgt av "print"

353
00:18:35,840 --> 00:18:43,209
som kommer til å ha en funksjon verdi
som kommer til å gjøre denne linjen med kode.

354
00:18:43,209 --> 00:18:45,500
La oss ta et skritt tilbake og
pakke ut hva som skjer her.

355
00:18:45,500 --> 00:18:47,280
Så dette er litt komplisert,
og vi ser noe nytt

356
00:18:47,280 --> 00:18:48,071
for første gang.

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

358
00:18:51,190 --> 00:18:55,065
Den "dette" søkeord er det nye ting
vi ser her, og hva dette betyr

359
00:18:55,065 --> 00:19:00,540
er, refererer til den aktuelle
objekt i omfang, ikke sant?

360
00:19:00,540 --> 00:19:03,990
Så når vi sier, dette
peker helt tilbake

361
00:19:03,990 --> 00:19:08,140
til hele denne object--
når vi gjør this.fn,

362
00:19:08,140 --> 00:19:11,990
vi kommer til å gå hele veien tilbake
til dette objektet, kan du gå til fn verdi

363
00:19:11,990 --> 00:19:16,471
og får sam, dra den hele veien
tilbake, stikke den her, og deretter gå videre.

364
00:19:16,471 --> 00:19:19,838
>> PUBLIKUM: Så med henting, er
som gjøres på grunn av den parameter

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

366
00:19:20,621 --> 00:19:23,870
SAM GRØNN: Så spørsmålet var, er den
gjenfinning gjort på grunn av parameteren

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

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

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

370
00:19:29,660 --> 00:19:32,470
Hva kommer til å skje her er,
dette dot sier til Javascript,

371
00:19:32,470 --> 00:19:39,990
OK, jeg får noen verdi
fra dette objektet fra meg selv.

372
00:19:39,990 --> 00:19:46,375
Og da vil det se etter en oppføring
heter fn, og hvis den finner det,

373
00:19:46,375 --> 00:19:48,470
det vil returnere som value-- så, det er sam.

374
00:19:48,470 --> 00:19:51,540
Men jeg kunne også ha skrevet
noe som ikke var definert her,

375
00:19:51,540 --> 00:19:54,090
og da ville det bare
returnere undefined-- som

376
00:19:54,090 --> 00:19:58,250
er en ting som Javascript kan
gjør, noe som kan ha fordeler,

377
00:19:58,250 --> 00:20:03,190
men det er also-- hvis du gjør en skrivefeil,
det kan føre til rare feil.

378
00:20:03,190 --> 00:20:05,617
Så det får bare prøve å finne
uansett hva du forteller det til å finne

379
00:20:05,617 --> 00:20:07,700
og det er ikke til å
klage hvis ikke finne det.

380
00:20:07,700 --> 00:20:11,390
Det vil bare si, jeg gjorde ikke
finne den, og deretter gå videre.

381
00:20:11,390 --> 00:20:17,581
Så det ville være udefinert,
pluss tomt, pluss etternavn.

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

383
00:20:18,080 --> 00:20:21,070
Og så kan vi se at hvis vi
kunne da gå ned og access--

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

385
00:20:25,450 --> 00:20:30,000
Det kommer til å kalle det print
funksjon uten argumenter, ikke sant?

386
00:20:30,000 --> 00:20:34,490
Men hvis vi bare sa tf.print ()
semikolon, uten parentes,

387
00:20:34,490 --> 00:20:37,480
alle som ville ha gjort er å trekke
ut av funksjon fra verdien

388
00:20:37,480 --> 00:20:40,609
men ikke egentlig heter det.

389
00:20:40,609 --> 00:20:41,162
Kjølig.

390
00:20:41,162 --> 00:20:42,870
HUGH Zabriskie: Bør
vi gjør et objekt?

391
00:20:42,870 --> 00:20:44,161
SAM GREEN: Jada, la oss gjøre det.

392
00:20:44,161 --> 00:20:48,750
Så jeg kan flytte denne
eksempel til konsollen.

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

394
00:20:51,380 --> 00:20:55,466
Vi kan tenke oss at jeg har et objekt.

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

396
00:21:03,026 --> 00:21:04,150
Så dette er et enkelt objekt.

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

398
00:21:06,910 --> 00:21:11,050
Dette er et objekt som inneholder to
verdier med to nøkler, to viktige verdi

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

400
00:21:12,710 --> 00:21:21,850
Så jeg kan da få tilgang til verdien som er lagret
innsiden av dette objektet ved å gjøre x.x1,

401
00:21:21,850 --> 00:21:23,400
for eksempel, og jeg får en tilbake.

402
00:21:23,400 --> 00:21:29,590
Likeledes x.x2, får den verdien tilbake.

403
00:21:29,590 --> 00:21:33,330
>> Og nå virkelig kule ting er, jeg kan
faktisk legger noe til dette objektet

404
00:21:33,330 --> 00:21:34,316
etter at jeg har laget det.

405
00:21:34,316 --> 00:21:36,315
Så du kan forestille deg, la oss
si at jeg har en funksjon.

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

407
00:21:44,430 --> 00:21:46,352
>> HUGH Zabriskie: Du
må gjøre Skift-Enter.

408
00:21:46,352 --> 00:21:47,643
>> SAM GREEN: Å, det er irriterende.

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

410
00:22:02,460 --> 00:22:04,324
Hva gjorde det ikke?

411
00:22:04,324 --> 00:22:04,824
Oh.

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

413
00:22:07,532 --> 00:22:08,691
Here we go.

414
00:22:08,691 --> 00:22:09,190
Kjølig.

415
00:22:09,190 --> 00:22:12,840
>> Så jeg har nettopp opprettet
denne funksjonen f, som

416
00:22:12,840 --> 00:22:17,590
kommer til å gå til den aktuelle
objekt og print this.x1.

417
00:22:17,590 --> 00:22:20,330
Så hvis jeg bare ringe f av
seg selv, er ingenting skjer

418
00:22:20,330 --> 00:22:26,970
til å skje, ikke sant, fordi det er ingen x1
felt i objektet er det å henvise til.

419
00:22:26,970 --> 00:22:39,710
Men, hvis jeg sier, x.f = f, og da jeg
kalle x.f (), kommer jeg til å få tilbake en.

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

421
00:22:42,990 --> 00:22:46,530
At f-funksjonen er nå
assosiert med objektet x,

422
00:22:46,530 --> 00:22:51,800
som har en nøkkel som heter x1
forbundet med verdien 1,

423
00:22:51,800 --> 00:22:54,570
så når vi kaller this.x1, er det
kommer til å finne det de er ute etter

424
00:22:54,570 --> 00:22:56,450
og være i stand til å skrive en verdi ut.

425
00:22:56,450 --> 00:22:58,700
Så det er bare ett eksempel
av typen de sprø tingene

426
00:22:58,700 --> 00:23:01,190
du kan gjøre med objekter i Javascript.

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

428
00:23:03,870 --> 00:23:07,560
>> Slik at versjonen var
generisk versjon, mening

429
00:23:07,560 --> 00:23:13,780
at vi har laget et objekt ved hjelp av denne
parentes notation-- brace notasjon,

430
00:23:13,780 --> 00:23:16,880
rather-- og det er
hendig hvis vi bare vil

431
00:23:16,880 --> 00:23:21,440
en forekomst av et bestemt objekt, men
hva om vi ønsker å ha mer enn én

432
00:23:21,440 --> 00:23:22,210
av samme art?

433
00:23:22,210 --> 00:23:24,440
Og svaret på det
Spørsmålet er, er det ting

434
00:23:24,440 --> 00:23:26,760
kalt klasser i Javascript også.

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

436
00:23:31,470 --> 00:23:36,420
Vi kan lage en funksjon som
gjør noen form for initialisering

437
00:23:36,420 --> 00:23:41,690
for et fremmedlegeme,
og vi vil si, som,

438
00:23:41,690 --> 00:23:44,550
min class-- så navnet
av gjenbruk object--

439
00:23:44,550 --> 00:23:47,100
lik funksjon som setter det opp.

440
00:23:47,100 --> 00:23:52,280
Så hva dette ville være tilsvar
å er å skape et objekt som

441
00:23:52,280 --> 00:23:55,930
ville være akkurat som,
klammeparentes, str, tykktarm,

442
00:23:55,930 --> 00:23:59,630
Dette er en streng,
semikolon, krøllete brace.

443
00:23:59,630 --> 00:24:01,880
Det ville være den generiske
objekt vi starte,

444
00:24:01,880 --> 00:24:06,380
med den ene forskjellen være på
neste linjene skaper vi en prototype, som

445
00:24:06,380 --> 00:24:11,190
betyr at det er en standardnøkkel som
vi legge til vår objekt som

446
00:24:11,190 --> 00:24:13,970
har verdien oppført her.

447
00:24:13,970 --> 00:24:20,570
Noe som betyr at når jeg oppretter en ny
forekomst av dette MyClass objekt,

448
00:24:20,570 --> 00:24:27,440
det kommer til å ha pre-bygget inne av
det er en verdi som kalles str og en annen verdi

449
00:24:27,440 --> 00:24:32,418
kalt myPrint, som er
kommer til å være en funksjon.

450
00:24:32,418 --> 00:24:32,918
Awesome.

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

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

453
00:24:37,990 --> 00:24:40,710
Så det siste å
si om Javascript

454
00:24:40,710 --> 00:24:46,430
er at det er veldig nyttig for hva
kalles asynkrone operasjoner.

455
00:24:46,430 --> 00:24:52,500
Asynkron betyr er at vi
kan vente på noen operasjon

456
00:24:52,500 --> 00:24:57,870
å fullføre før vi flytter
på, men går videre mens vi venter

457
00:24:57,870 --> 00:24:59,690
og da har noe skje senere.

458
00:24:59,690 --> 00:25:03,480
Og hva jeg mener med det er at du
kan forestille seg en situasjon der

459
00:25:03,480 --> 00:25:06,850
du sende en forespørsel til
noen web server et sted,

460
00:25:06,850 --> 00:25:09,670
og det kommer til å sende deg tilbake
noen stor del av data, ikke sant?

461
00:25:09,670 --> 00:25:13,320
Og bruker kunne vente i
tiden for at det skal skje,

462
00:25:13,320 --> 00:25:15,200
og ingenting kunne være
skjer på den tiden.

463
00:25:15,200 --> 00:25:18,110
Men det er ikke et flott design, ikke sant?

464
00:25:18,110 --> 00:25:20,214
Du ønsker ikke at websiden skal fryse.

465
00:25:20,214 --> 00:25:22,380
Hva hvis brukeren ønsker å
klikk på en rullegardinmeny?

466
00:25:22,380 --> 00:25:24,870
Det er ikke et flott design mønster.

467
00:25:24,870 --> 00:25:29,290
I stedet, innerst inne hva
Java ikke er sier,

468
00:25:29,290 --> 00:25:31,870
OK, gjør denne operasjonen asynkront.

469
00:25:31,870 --> 00:25:36,520
Så liker, vente i bakgrunnen,
og når operasjonen er ferdig,

470
00:25:36,520 --> 00:25:39,420
kaller tilbakeringing function--
kalle noen funksjon,

471
00:25:39,420 --> 00:25:43,800
trenger noen action-- å signalisere at den
operasjonen vi ventet på å ende

472
00:25:43,800 --> 00:25:45,520
er over.

473
00:25:45,520 --> 00:25:51,240
Og grunnen til det er super kraftig er,
vi kan gjøre noe, passerer et argument,

474
00:25:51,240 --> 00:25:54,440
gjøre noe, og deretter vente
for at noe skal skje.

475
00:25:54,440 --> 00:25:58,970
Deretter, når som noe
fullfører, kan vi kalle en tilbakeringing.

476
00:25:58,970 --> 00:26:03,300
Det er veldig praktisk, fordi det lar
oss gjøre ting med Web Audio API,

477
00:26:03,300 --> 00:26:07,490
for eksempel, som en belastning
lydfil fra en ekstern server

478
00:26:07,490 --> 00:26:11,660
uten å måtte vente på
hele lydfilen som skal lastes,

479
00:26:11,660 --> 00:26:14,440
som ville være veldig
dårlig for brukeropplevelsen.

480
00:26:14,440 --> 00:26:17,080
Kjølig.

481
00:26:17,080 --> 00:26:19,460
>> Siste par notater om
feilsøking, siden dette

482
00:26:19,460 --> 00:26:23,682
er en ting du er nødt til å gjøre
som en del av prosjektet, garantert.

483
00:26:23,682 --> 00:26:25,140
Jeg nevnte Javascript-konsollen.

484
00:26:25,140 --> 00:26:27,550
Det er en super nyttig funksjon
av alle moderne nettlesere,

485
00:26:27,550 --> 00:26:30,300
Og vi virkelig oppfordre deg til å få
komfortabel med å bruke konsollen,

486
00:26:30,300 --> 00:26:33,660
Hvis du ønsker å bli gode på Javascript.

487
00:26:33,660 --> 00:26:36,320
Det er super praktisk for
feilsøking, men det er også

488
00:26:36,320 --> 00:26:39,440
veldig nyttig for å finne
ut hvordan du bruker en API.

489
00:26:39,440 --> 00:26:41,950
Det gir mulighet for virkelig
lett eksperimentering

490
00:26:41,950 --> 00:26:45,910
uten å måtte skrive noen
kode, og deretter kompilere den.

491
00:26:45,910 --> 00:26:47,500
Du trenger ikke å gjøre alle disse trinnene.

492
00:26:47,500 --> 00:26:49,619
Du kan bare skrive
noen kode i en linje,

493
00:26:49,619 --> 00:26:52,410
og deretter få umiddelbar tilbakemelding på
enten det kodelinje eller ikke

494
00:26:52,410 --> 00:26:55,230
worked-- veldig hendig.

495
00:26:55,230 --> 00:26:59,760
>> Og også, bare en teknisk note--
Javascript-konsollen er et eksempel

496
00:26:59,760 --> 00:27:05,680
av en REPL-- så det er R-E-P-L, ERSTATTER,
som står for lese, vurdere,

497
00:27:05,680 --> 00:27:06,180
print loop.

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

499
00:27:09,100 --> 00:27:12,120
Du kommer til å skrive noen ting
i, vil det lese hva du skrev inn,

500
00:27:12,120 --> 00:27:17,280
det vil vurdere det, og det vil skrive ut
utgang, og deretter det vil starte på nytt.

501
00:27:17,280 --> 00:27:22,056
Som lar deg raskt gå i
sirkler itera, som er virkelig kult.

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

503
00:27:25,150 --> 00:27:28,930
>> Jeg antar ekte siste note-- dette
er den faktiske siste notat, ja.

504
00:27:28,930 --> 00:27:30,780
Hvordan kan vi faktisk bruke Javascript?

505
00:27:30,780 --> 00:27:34,040
Så først, kan vi importere
det ved hjelp av et script tag

506
00:27:34,040 --> 00:27:39,500
på toppen eller bunnen av en HTML file--
hvor som helst inne i en HTML-fil,

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

508
00:27:40,440 --> 00:27:47,390
Og innen et script tag, er det
to under måter å importere Javascript.

509
00:27:47,390 --> 00:27:51,370
Den første er ved å ha en
separat Javascript-fil

510
00:27:51,370 --> 00:27:58,010
at vi importerer i sin helhet, eller
ved å ha et område med kode som script

511
00:27:58,010 --> 00:28:00,290
å starte, og deretter
backslash script til slutt.

512
00:28:00,290 --> 00:28:02,620
Og da har vi bare skrive
Javascript inne i HTML-fil.

513
00:28:02,620 --> 00:28:03,790
De er de to måter.

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

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

516
00:28:06,502 --> 00:28:08,126
PUBLIKUM: Er en bedre enn den andre?

517
00:28:08,126 --> 00:28:10,542
SAM GREEN: Spørsmålet var,
er en bedre enn den andre.

518
00:28:10,542 --> 00:28:18,306
Så, ja, som en koding stil praksis
og også det er som en design praksis.

519
00:28:18,306 --> 00:28:20,180
Det er to grunner
hvorfor det kan bli bedre.

520
00:28:20,180 --> 00:28:23,934
Den første er, det gjør koden en
mye mer lesbar hvis alle HTML

521
00:28:23,934 --> 00:28:27,100
er på ett sted, er i all din CSS
et annet sted, alle av Javascript

522
00:28:27,100 --> 00:28:28,420
ligger i et tredje sted.

523
00:28:28,420 --> 00:28:28,920
Høyre?

524
00:28:28,920 --> 00:28:32,370
Jeg tror vi har skal allerede snakket
om det i sections-- som CSS-- hva

525
00:28:32,370 --> 00:28:35,220
som er-- og det går
ofte i en annen fil.

526
00:28:35,220 --> 00:28:37,090
Så, lignende type konsept her.

527
00:28:37,090 --> 00:28:42,410
Du kan også tenke seg at Javascript
ville bli gjenbrukt på mer enn én

528
00:28:42,410 --> 00:28:47,350
HTML-side, eller kanskje en
Svært mange HTML-sider,

529
00:28:47,350 --> 00:28:49,340
og har som Javascript
refactored i ett

530
00:28:49,340 --> 00:28:51,950
fil som du kan importere
til mer enn ett sted

531
00:28:51,950 --> 00:28:54,570
lar koden til å bli
måten mer vedlikeholdsvennlig.

532
00:28:54,570 --> 00:28:57,930
Du kan forestille deg å gjøre en
endre til Javascript

533
00:28:57,930 --> 00:29:00,070
og måtte endre det
i 100 forskjellige filer.

534
00:29:00,070 --> 00:29:04,070
Og i stedet vi kan bare endre det
i ett, noe som er langt mer kraftfull.

535
00:29:04,070 --> 00:29:05,420
Sa jeg svare på spørsmålet ditt?

536
00:29:05,420 --> 00:29:07,950
Kjølig.

537
00:29:07,950 --> 00:29:10,830
>> Vi kan også skrive inn i konsollen,
som vi har nevnt før.

538
00:29:10,830 --> 00:29:15,070
Og igjen, en siste note--
Web Audio er innebygd,

539
00:29:15,070 --> 00:29:16,978
du trenger ikke å laste inn noe.

540
00:29:16,978 --> 00:29:17,478
Kjølig.

541
00:29:17,478 --> 00:29:20,519
Er det noen spørsmål, har du
noen flere spørsmål om Javascript,

542
00:29:20,519 --> 00:29:21,930
før vi går videre?

543
00:29:21,930 --> 00:29:24,286
>> PUBLIKUM: [uhørbart]

544
00:29:24,286 --> 00:29:25,410
SAM GREEN: Greit, kult.

545
00:29:25,410 --> 00:29:27,200
Så nå kommer han til å snakke om API.

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

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

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

549
00:29:30,184 --> 00:29:32,600
HUGH Zabriskie: Awesome, så
vi vil gå videre fra Javascript.

550
00:29:32,600 --> 00:29:35,350
Så vi har snakket om noen av
det vesentlige av Javascript,

551
00:29:35,350 --> 00:29:41,105
og de er variable, funksjoner
gjenstander, fungerer som variabler

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

553
00:29:41,980 --> 00:29:46,100
Dette er alle ting som du vil
ser som du bruker Web Audio.

554
00:29:46,100 --> 00:29:49,230
Så vi bare kommer til å snakke
om det først på et høyt nivå.

555
00:29:49,230 --> 00:29:52,120
>> Det er en API, så det er noe
som er bygget, som Sam sa,

556
00:29:52,120 --> 00:29:57,010
rett inn i Javascript
som du bruker i konsollen.

557
00:29:57,010 --> 00:30:01,020
Og det er faktisk akkurat som C ++ kode
som er virkelig bygget inn Chrome

558
00:30:01,020 --> 00:30:04,470
og Firefox, og alle disse nettleserne.

559
00:30:04,470 --> 00:30:07,060
Så hovedideen med Web
Audio er at du har

560
00:30:07,060 --> 00:30:09,440
denne type rørledning av lyd, ikke sant?

561
00:30:09,440 --> 00:30:13,670
Så din lyddata
kommer inn i en eller annen form.

562
00:30:13,670 --> 00:30:16,690
>> Det er slag av tre hoved forms--
du har den oscillator, hvilken

563
00:30:16,690 --> 00:30:21,340
danner en sinusbølge, cosinusbølge,
vi kommer til å se hvordan det fungerer.

564
00:30:21,340 --> 00:30:23,890
En annen veldig vanlig en,
selvfølgelig, er en MP3.

565
00:30:23,890 --> 00:30:25,810
Så kanskje du begynner med
en sang, og deretter

566
00:30:25,810 --> 00:30:28,320
ønsker å gjøre noen filtrering
til det og utgang

567
00:30:28,320 --> 00:30:30,605
at-- som kan være en mulig kilde.

568
00:30:30,605 --> 00:30:32,480
Og så en kul
en er mikrofonen.

569
00:30:32,480 --> 00:30:37,230
Så du kan bruke noen veldig
grunnleggende samtaler i Javascript

570
00:30:37,230 --> 00:30:39,440
for å få tilgang til
mikrofon, og så hvis du

571
00:30:39,440 --> 00:30:42,870
ønsket å lage en app
som en pitch detektor,

572
00:30:42,870 --> 00:30:45,290
For eksempel tar det igjen
din stemme og tall ut

573
00:30:45,290 --> 00:30:47,740
den pitch-- veldig enkel måte til det.

574
00:30:47,740 --> 00:30:50,730
Du kan bare slags lese den
i, finne ut frekvensen,

575
00:30:50,730 --> 00:30:52,250
og deretter ut et tall.

576
00:30:52,250 --> 00:30:56,080
Så vi får se hvordan det fungerer, så vel.

577
00:30:56,080 --> 00:30:59,430
>> Destinasjonen er i utgangspunktet
hvor audiodata sendes ut.

578
00:30:59,430 --> 00:31:02,890
Så generelt, er sånn
din bærbare høyttalere.

579
00:31:02,890 --> 00:31:05,610
Andre alternativer er som
en ScriptProcessorNode--

580
00:31:05,610 --> 00:31:07,990
vi vil komme til noder i en
second-- men i utgangspunktet,

581
00:31:07,990 --> 00:31:11,939
enten du setter lyd ut
gjennom datamaskinen via høyttalere,

582
00:31:11,939 --> 00:31:14,730
eller du slags opptak det, så
du lagre det som lyddata.

583
00:31:14,730 --> 00:31:18,980
Så kanskje hvis noen oppretter
musikk i appen og deretter

584
00:31:18,980 --> 00:31:22,410
du ønsker å ta opp det og kanskje som
eksportere den til Soundcloud, for example--

585
00:31:22,410 --> 00:31:25,281
som ville være en måte å gjøre det.

586
00:31:25,281 --> 00:31:27,030
Alle de morsomme tingene,
som vi skal snakke om,

587
00:31:27,030 --> 00:31:29,950
skjer mellom disse to punktene,
hvor vi legger i musikken

588
00:31:29,950 --> 00:31:31,410
og deretter sende den.

589
00:31:31,410 --> 00:31:36,660
>> Så jeg kommer til å snakke om de fem
stadier av lydproduksjon i et sekund.

590
00:31:36,660 --> 00:31:38,950
Vi har dette som kalles
en AudioContext, som

591
00:31:38,950 --> 00:31:41,580
er denne lille wrapper vi ser her.

592
00:31:41,580 --> 00:31:49,980
I utgangspunktet hva AudioContext er-- om vi
gå til Javascript-konsollen akkurat nå,

593
00:31:49,980 --> 00:31:52,740
vi kan lage en akkurat nå.

594
00:31:52,740 --> 00:31:54,040
Bare et eksempel på ERSTATTER, ikke sant?

595
00:31:54,040 --> 00:31:57,880
Vi leser,
evaluere, og det skrives.

596
00:31:57,880 --> 00:32:00,260
>> AudioContext er en global stat.

597
00:32:00,260 --> 00:32:05,500
Det er en struct, er det et objekt
her, holder og det informasjon

598
00:32:05,500 --> 00:32:09,960
om ting som skjer
på skjermen for knyttet til lyd.

599
00:32:09,960 --> 00:32:15,220
Et eksempel er den nåværende tid.

600
00:32:15,220 --> 00:32:18,910
Dette forteller deg hvor mange
sekunder, meget presist,

601
00:32:18,910 --> 00:32:20,890
siden nettsiden lastes.

602
00:32:20,890 --> 00:32:24,110
Så dette er en veldig nyttig
liten eiendom som du kan bruke.

603
00:32:24,110 --> 00:32:27,898
Det har lest only-- tror jeg faktisk
du kan prøve å sette den en verdi.

604
00:32:27,898 --> 00:32:29,856
Det vil si du setter den,
og hvis du skriver det

605
00:32:29,856 --> 00:32:31,439
igjen-- det gjorde faktisk ikke helt fungerer.

606
00:32:31,439 --> 00:32:34,472
Så det er skrivebeskyttet
eiendommer i Javascript.

607
00:32:34,472 --> 00:32:36,430
Dette er veldig nyttig hvis
du slags synkronisering

608
00:32:36,430 --> 00:32:38,610
en rekke forskjellige
informasjon, når du er

609
00:32:38,610 --> 00:32:41,280
form av å spille forskjellige lyder.

610
00:32:41,280 --> 00:32:43,630
>> En annen veldig nyttig én
er konteksten destinasjon.

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

612
00:32:46,587 --> 00:32:49,670
Definitivt, hvis du er interessert, være
prøver dette på egen konsoll høyre

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

614
00:32:50,980 --> 00:32:53,150
Så dette er en AudioDestinationNode.

615
00:32:53,150 --> 00:32:56,480
I utgangspunktet hva dette sier er,
hvor ligger produksjonen går?

616
00:32:56,480 --> 00:32:59,590
Så det er to reelle alternativer her.

617
00:32:59,590 --> 00:33:01,940
Vanligvis standard
er bare høyttalerne,

618
00:33:01,940 --> 00:33:05,150
så AudioDestinationNode
utgangspunktet bare sier

619
00:33:05,150 --> 00:33:09,240
det er null utganger til lyden
kommer inn, sendes til høyttaleren.

620
00:33:09,240 --> 00:33:12,050
Så generelt, gjør du ikke
må spille med det.

621
00:33:12,050 --> 00:33:15,720
Hvis du er interessert i faktisk bruker
den ScriptProcessorNode for opptak,

622
00:33:15,720 --> 00:33:16,990
definitivt skyte meg en
e-post senere fordi det er

623
00:33:16,990 --> 00:33:18,330
litt mer komplisert.

624
00:33:18,330 --> 00:33:21,590
Men generelt, du er bare snill
til å gi ut lyd i en eller annen form.

625
00:33:21,590 --> 00:33:24,347
Så kult, vil vi hopper tilbake hit.

626
00:33:24,347 --> 00:33:25,180
PUBLIKUM: Jeg beklager.

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

628
00:33:26,054 --> 00:33:28,770
PUBLIKUM: Jeg vet du sa å snakke
til deg senere om opptak.

629
00:33:28,770 --> 00:33:31,550
Kan du grensesnitt 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
La oss se.

632
00:33:35,260 --> 00:33:37,220
Jeg tror ikke det.

633
00:33:37,220 --> 00:33:41,670
Så går mellom klienten,
som er Javascript

634
00:33:41,670 --> 00:33:44,310
konsoll, og det faktiske
datamaskin, er generelt

635
00:33:44,310 --> 00:33:46,490
noe som er litt
av utenfor grensene, hvis du

636
00:33:46,490 --> 00:33:52,320
vil, snill av natur the--
det er litt av en design ting,

637
00:33:52,320 --> 00:33:57,770
men du prøver å holde leseren separat
fra brukerens selve datamaskinen.

638
00:33:57,770 --> 00:34:02,310
Vanligvis er det eneste du er i stand til å
tilgang er mikrofonen eller kameraet.

639
00:34:02,310 --> 00:34:04,730
Du er ikke i stand til, jeg
tror ikke, bruker Pro Tools.

640
00:34:04,730 --> 00:34:07,480
Men hvis du har opprettet
et spor i Pro Tools,

641
00:34:07,480 --> 00:34:12,710
eksporteres det, kan du laste det
her inne, filtrere det, for eksempel,

642
00:34:12,710 --> 00:34:16,820
prosess som, og ta det inn i en
Audio Destination-- eller no-- en Sphere

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

644
00:34:17,870 --> 00:34:20,730
Og så derfra, kunne du
eksportere det til Soundcloud, du

645
00:34:20,730 --> 00:34:25,320
kan sende den i en e-post, eller
uansett hva du liker derfra.

646
00:34:25,320 --> 00:34:31,159
>> Men det er slag av en liten barriere
mellom å lage musikk på datamaskinen din

647
00:34:31,159 --> 00:34:33,050
og lage musikk på nettet.

648
00:34:33,050 --> 00:34:37,940
>> SAM GREEN: Og det er
ikke unikt for denne API.

649
00:34:37,940 --> 00:34:44,060
Det er en sikkerhetsfunksjon i Chrome, og
Jeg tror alle andre moderne nettleser.

650
00:34:44,060 --> 00:34:45,860
Nettleseren er selvforsynt.

651
00:34:45,860 --> 00:34:50,980
Så for eksempel en nettside kan ikke
bruke Javascript for å slå av lyden

652
00:34:50,980 --> 00:34:54,190
på på høyttalerne, for eksempel.

653
00:34:54,190 --> 00:34:58,120
Eller det kan ikke slå av datamaskinen.

654
00:34:58,120 --> 00:35:01,530
Og det er ingen mellomliggende punkt
mellom de to tingene, ikke sant,

655
00:35:01,530 --> 00:35:05,960
så enten du har en
komplett abstraksjon,

656
00:35:05,960 --> 00:35:10,050
eller du åpner opp
sikkerhetsfeil for å la

657
00:35:10,050 --> 00:35:14,440
en programmerer med dårlige hensikter gjøre
hva de vil med den bærbare datamaskinen.

658
00:35:14,440 --> 00:35:18,104
Og det er derfor Chrome er selvforsynt.

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

660
00:35:19,310 --> 00:35:20,840
Gir det mening?

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

662
00:35:21,369 --> 00:35:23,160
Jeg skulle bare
viser et eksempel på en.

663
00:35:23,160 --> 00:35:25,118
Dette er ganske mye som
langt du kommer, i form

664
00:35:25,118 --> 00:35:26,950
å få tilgang til brukerens datamaskin.

665
00:35:26,950 --> 00:35:30,180
Hvis du har et USB-tastatur tilkoblet,
du kan bruke noe som kalles Web

666
00:35:30,180 --> 00:35:32,180
MIDI API, som vi ikke vil
virkelig snakke om her,

667
00:35:32,180 --> 00:35:36,330
men dette er en annen API som er
bygget inn i minst Chrome-- igjen,

668
00:35:36,330 --> 00:35:41,570
Dette er grunnen til at vi elsker Chrome--
Jeg tror Firefox eller Safari,

669
00:35:41,570 --> 00:35:44,300
Dette er en enkel ting å
google-- forskjellige nettlesere har

670
00:35:44,300 --> 00:35:46,917
annen støtte som
APIer de har implementert.

671
00:35:46,917 --> 00:35:49,875
Men hvis du ønsket å koble til et tastatur
og arbeide med denne informasjonen,

672
00:35:49,875 --> 00:35:52,850
slags sende tastaturet
informasjon over til datamaskinen

673
00:35:52,850 --> 00:35:57,620
og deretter bruke den på nettet, dette API
er der du vil jobbe som.

674
00:35:57,620 --> 00:35:58,150
>> Kjølig.

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

676
00:35:58,710 --> 00:36:01,320
Så raskt går videre her.

677
00:36:01,320 --> 00:36:03,310
Hvordan gjør vi på gang?

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

679
00:36:04,210 --> 00:36:05,543
>> HUGH Zabriskie: 15 minutter igjen?

680
00:36:05,543 --> 00:36:06,160
Ok kult.

681
00:36:06,160 --> 00:36:08,170
Så vi vil rase videre her.

682
00:36:08,170 --> 00:36:13,500
>> Så i utgangspunktet, det viktigste poenget med
tenker på dette som en rørledning

683
00:36:13,500 --> 00:36:16,430
er at hvert trinn i rørledningen
er en serie av lyd-noder.

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

685
00:36:19,284 --> 00:36:20,950
Vår kilde, la oss si, er en oscillator.

686
00:36:20,950 --> 00:36:23,380
Vi må skape en oscillator node.

687
00:36:23,380 --> 00:36:25,690
Og det er bare snill
av den lille function--

688
00:36:25,690 --> 00:36:30,460
og de er alle basert ut
av audio sammenheng her.

689
00:36:30,460 --> 00:36:32,885
>> PUBLIKUM: Når det sagt
oscillator, betyr det

690
00:36:32,885 --> 00:36:37,250
det er faktisk bokstavelig talt kommer fra
to forskjellige poler frem og tilbake?

691
00:36:37,250 --> 00:36:41,170
>> HUGH Zabriskie: Nei, det er som
en digital representasjon.

692
00:36:41,170 --> 00:36:42,740
Det er faktisk implementert i C ++.

693
00:36:42,740 --> 00:36:46,460
Jeg faktisk ikke vet specs
av hvordan det faktisk blir gjennomført,

694
00:36:46,460 --> 00:36:48,500
men alt dette virker som binære data.

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

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

697
00:36:52,370 --> 00:36:53,950
Det ville være å si, jeg kunne
faktisk, hvis du er interessert,

698
00:36:53,950 --> 00:36:56,533
Jeg kunne sende deg litt mer
informasjon om hvordan kurvene

699
00:36:56,533 --> 00:37:00,181
blir holdt har et digitalt format.

700
00:37:00,181 --> 00:37:00,680
Ok kult.

701
00:37:00,680 --> 00:37:03,120
>> Så vi genererer en tone som en sinus
bølge eller noe sånt, kanskje

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

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

704
00:37:05,830 --> 00:37:09,180
Hvis vi ønsker å stille volumet, vi
koble noe til en GainNode,

705
00:37:09,180 --> 00:37:12,500
som vi kunne gjøre med .creategain.

706
00:37:12,500 --> 00:37:14,250
Som setter ditt volum.

707
00:37:14,250 --> 00:37:17,820
Du kan passere som på en hvilken som helst
av de andre options-- brønnen,

708
00:37:17,820 --> 00:37:20,300
så en lyd buffer kilde
node er der du kanskje

709
00:37:20,300 --> 00:37:23,660
lagre en MP3 som du har lagt i.

710
00:37:23,660 --> 00:37:27,670
>> Biquad filter er for filtrering hvis
du ønsker å ta hele basen ut

711
00:37:27,670 --> 00:37:29,630
av en sang, eller noe sånt.

712
00:37:29,630 --> 00:37:32,450
Gud forby du ønsker å ta
basen ut av en sang.

713
00:37:32,450 --> 00:37:36,980
Og AudioDestination node er, igjen,
som hvor vår sluttbehandling er.

714
00:37:36,980 --> 00:37:39,980
Hvis du noen gang interessert i å se
alle de forskjellige mulige alternativer,

715
00:37:39,980 --> 00:37:45,190
bare gå til kategorien og la
autofullfør komme opp.

716
00:37:45,190 --> 00:37:48,690
Og hvis du oppretter, vil du se alle
forskjellige ting som du kan lage.

717
00:37:48,690 --> 00:37:50,398
Du kan lage dynamiske
script prosessorer,

718
00:37:50,398 --> 00:37:52,940
Jeg vet ikke engang hva som
er, for å blande kanal fusjoner

719
00:37:52,940 --> 00:37:55,930
og kanalmaskiner og alt det der.

720
00:37:55,930 --> 00:37:56,430
Kjølig.

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

722
00:37:59,560 --> 00:38:01,390
>> Så dette er bare en
eksempel på en rørledning.

723
00:38:01,390 --> 00:38:03,580
Så vi har tre kilder som kommer inn.

724
00:38:03,580 --> 00:38:06,830
Kanskje disse er bølgeformer,
kanskje disse er MP3.

725
00:38:06,830 --> 00:38:08,740
En går gjennom en
filter, en annen ens

726
00:38:08,740 --> 00:38:12,404
bli forvrengt annen
ens panorering til venstre og høyre.

727
00:38:12,404 --> 00:38:15,320
Du kan gjøre alle slags ting og
de alle bli blandet rundt sammen,

728
00:38:15,320 --> 00:38:18,880
og deretter ut kommer lyden
ved enden, som bestemmelsessted.

729
00:38:18,880 --> 00:38:22,720
Dette er et eksempel på hva mer
komplisert Web Audio koden ser slik ut.

730
00:38:22,720 --> 00:38:26,720
Dere skaper alle disse
forskjellige objekter rett her--

731
00:38:26,720 --> 00:38:27,706
Jeg er ikke sikker på dette.

732
00:38:27,706 --> 00:38:29,120
Nei, det gjør ikke zoome inn.

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

734
00:38:29,620 --> 00:38:31,257
>> SAM GREEN: Du gjør Control, Rull-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: Nei, nei.

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

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

739
00:38:36,540 --> 00:38:38,140
>> HUGH Zabriskie: Oh, Control, Rull?

740
00:38:38,140 --> 00:38:38,780
Oh, fikser.

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

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
Jeg vil ikke gjøre det.

745
00:38:46,090 --> 00:38:48,300
>> Så ja, i denne første
seksjonen her, ser du

746
00:38:48,300 --> 00:38:52,720
vi skaper alle disse forskjellige
noder ut av kontekst.

747
00:38:52,720 --> 00:38:54,980
Vi er bare sammensying dem
sammen i den andre delen

748
00:38:54,980 --> 00:38:56,980
av denne funksjonen kalles Connect.

749
00:38:56,980 --> 00:38:58,830
Det er en virkelig nøkkel
funksjon i Web Audio.

750
00:38:58,830 --> 00:39:01,930
Det betyr bare at når du har gjort
noe med lyden i en node,

751
00:39:01,930 --> 00:39:03,705
gi det videre til neste node.

752
00:39:03,705 --> 00:39:05,830
Så vi har kilden, det
kobles til analysatoren,

753
00:39:05,830 --> 00:39:09,140
analysatoren gjør noe med det,
den går til forvrengning, og så videre,

754
00:39:09,140 --> 00:39:12,725
og til målet
nederst til høyre her.

755
00:39:12,725 --> 00:39:13,225
Kjølig.

756
00:39:13,225 --> 00:39:14,640
OK, så vi vil fortsette å bevege seg på.

757
00:39:14,640 --> 00:39:17,180
>> Den pipeline-- igjen, disse
er de mest vanlige rørledninger

758
00:39:17,180 --> 00:39:21,300
så vi snakker om alle disse tingene som
forvrengning, panorering, alt dette.

759
00:39:21,300 --> 00:39:24,280
Hvis du virkelig er interessert
i å bruke ting Pro Tools,

760
00:39:24,280 --> 00:39:25,820
de sannsynligvis interessere deg.

761
00:39:25,820 --> 00:39:27,740
Hvis ikke, kanskje du bare
ønsker å spille av lyden,

762
00:39:27,740 --> 00:39:29,990
eller kanskje du bare ønsker å
stille volumet på lyden.

763
00:39:29,990 --> 00:39:35,270
De er de to mest vanlige form
av rørledninger i lydproduksjon.

764
00:39:35,270 --> 00:39:38,640
>> Igjen, hvordan du kan ta det
inn som en oscillator-- så, la oss

765
00:39:38,640 --> 00:39:42,460
gjøre en demo av det her.

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

767
00:39:47,090 --> 00:39:52,225
Så vi kommer til å skape en
enkel audio sammenheng her,

768
00:39:52,225 --> 00:39:54,350
og fra det skal vi
å skape vår oscillator.

769
00:39:54,350 --> 00:39:58,620
Så det er, igjen, vi er bare
kommer til å kalle Opprett Oscillator.

770
00:39:58,620 --> 00:40:07,030
Vi kommer til å sette en frekvens på
at 440 Hertz, alles favoritt.

771
00:40:07,030 --> 00:40:13,290
Så vi kobler det til målet
point-- som er høyttaleren, så

772
00:40:13,290 --> 00:40:15,750
sammenheng destinasjon.

773
00:40:15,750 --> 00:40:21,400
Til slutt, vi bare si, starte null
sekunder fra nå, og vi har lyd?

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

775
00:40:22,400 --> 00:40:24,980
>> HUGH Zabriskie: Here we go.

776
00:40:24,980 --> 00:40:25,940
Det er bare en sinuskurve.

777
00:40:25,940 --> 00:40:26,440
Ok kult.

778
00:40:26,440 --> 00:40:28,274
Og så skal vi stoppe det.

779
00:40:28,274 --> 00:40:30,520
>> PUBLIKUM: Hvor gjorde
at tilbakemeldingene kommer fra?

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

781
00:40:31,250 --> 00:40:32,458
Oh, sannsynligvis våre mikrofoner.

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

783
00:40:34,221 --> 00:40:35,470
Så ja, det er hvordan du gjør det.

784
00:40:35,470 --> 00:40:37,261
Og faktisk, hvis jeg hadde
holdt den i gang, du

785
00:40:37,261 --> 00:40:39,540
kan ha frekvens
verdi som det kjører,

786
00:40:39,540 --> 00:40:43,320
så det er en morsom ting å leke seg.

787
00:40:43,320 --> 00:40:44,930
Kjølig.

788
00:40:44,930 --> 00:40:46,600
Det er alltid en herlig en å presentere.

789
00:40:46,600 --> 00:40:48,792
>> SAM GREEN: Vi gjorde ikke
tenke på det, gjorde vi?

790
00:40:48,792 --> 00:40:50,500
HUGH Zabriskie: Ja,
det er en stygg en.

791
00:40:50,500 --> 00:40:53,249
Så, buffer loading-- Jeg skal vise en
eksempel på det helt på slutten.

792
00:40:53,249 --> 00:40:55,090
Det er å legge på en MP3.

793
00:40:55,090 --> 00:40:58,880
Og mikrofon, bruker du bare en funksjon
kalt Navigator.getUserMedia ()

794
00:40:58,880 --> 00:41:03,240
å be om tilgang til brukerens
mikrofon for denne informasjonen.

795
00:41:03,240 --> 00:41:05,610
>> Her er filtrering, vil jeg
bare holde flytte fra dette.

796
00:41:05,610 --> 00:41:08,600
Dette er ganske høyt nivå,
men filtre bare tillate deg å

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

798
00:41:16,154 --> 00:41:18,320
Filtrering lar deg også
å skape ting som rosa

799
00:41:18,320 --> 00:41:20,050
støy, støy brun, hvit støy.

800
00:41:20,050 --> 00:41:24,330
Hvis du ønsker å lage ren støy, som
noen mennesker elsker å rote rundt med,

801
00:41:24,330 --> 00:41:27,490
du kan bruke Web Audio
filtrering for å gjøre det.

802
00:41:27,490 --> 00:41:30,039
>> Audio Panning-- så tenk
hvis du skriver et spill

803
00:41:30,039 --> 00:41:32,330
og du vil at lyden skal
høres ut som det kommer, som,

804
00:41:32,330 --> 00:41:36,090
skyte over skjermen, du
kan bruke panorering av audio

805
00:41:36,090 --> 00:41:39,770
for å skape en slik konus,
som like-- det er ganske Mathy,

806
00:41:39,770 --> 00:41:41,850
men det er faktisk veldig
kult hvis du får det til å fungere,

807
00:41:41,850 --> 00:41:44,500
og det er noen god
tutorials på det jeg kan sende deg.

808
00:41:44,500 --> 00:41:46,400
I utgangspunktet kan du snill
av å skape lyden

809
00:41:46,400 --> 00:41:50,480
for at noe går forbi i en 3D måte.

810
00:41:50,480 --> 00:41:57,350
Og hvis du har en DJ interesse, kan du
begynner å blande og krysse Tone sanger.

811
00:41:57,350 --> 00:42:01,260
>> Dette er bare noen helt grunnleggende
kode, i utgangspunktet det jeg gjorde før.

812
00:42:01,260 --> 00:42:06,140
Dette angir volumet av
oscillator, så vi skaper vår oscillator

813
00:42:06,140 --> 00:42:07,380
som skaper bølgeformen.

814
00:42:07,380 --> 00:42:09,940
Vi skaper vår GainNode,
sette vår frekvens,

815
00:42:09,940 --> 00:42:14,170
og koble deretter oscillator til
GainNode, som deretter forandrer utgangspunktet

816
00:42:14,170 --> 00:42:16,760
hvor mye signal slippes gjennom.

817
00:42:16,760 --> 00:42:20,467
Men egentlig er det en digital
ting, så det er mer just-- ja.

818
00:42:20,467 --> 00:42:23,550
Det er ikke det som faktisk skjer,
men det er hva som skjer i det virkelige liv

819
00:42:23,550 --> 00:42:24,393
med en gevinst.

820
00:42:24,393 --> 00:42:27,258
>> PUBLIKUM: --quantization
av volumet parameter?

821
00:42:27,258 --> 00:42:28,174
HUGH Zabriskie: Sorry?

822
00:42:28,174 --> 00:42:30,360
PUBLIKUM: Er det en
kvantisert volum parameter?

823
00:42:30,360 --> 00:42:31,840
HUGH Zabriskie: Yeah.

824
00:42:31,840 --> 00:42:34,620
Og dette er en ting jeg er virkelig
mangelfull i min kunnskap,

825
00:42:34,620 --> 00:42:38,010
hvordan gevinst fungerer på et digitalt nivå.

826
00:42:38,010 --> 00:42:40,140
Jeg vet med faktiske
signaler, er det i utgangspunktet

827
00:42:40,140 --> 00:42:45,120
hvor mye kontrollerer du er
å forsterke signalet.

828
00:42:45,120 --> 00:42:47,017
Så, ja.

829
00:42:47,017 --> 00:42:50,100
Jeg skal sende deg mer informasjon om
det, fordi jeg ville være nysgjerrig faktisk

830
00:42:50,100 --> 00:42:51,099
å vite mer om det.

831
00:42:51,099 --> 00:42:54,090
Men i utgangspunktet parametrene
er, en er fold--

832
00:42:54,090 --> 00:42:59,690
jo høyere signal-- og null er ingen
signal, eller vil du ikke høre noen lyd.

833
00:42:59,690 --> 00:43:03,150
Vi hopper demo tid til det fordi
det er i utgangspunktet det jeg gjorde før.

834
00:43:03,150 --> 00:43:07,630
Og igjen, det Context.Destination
er lyden reisemålet node.

835
00:43:07,630 --> 00:43:08,360
Awesome, OK.

836
00:43:08,360 --> 00:43:10,470
>> Så jeg kommer til å gjøre en rask to demoer.

837
00:43:10,470 --> 00:43:11,760
Hvordan gjør vi på gang?

838
00:43:11,760 --> 00:43:12,640
>> SPEAKER 1: Ca 10 minutter.

839
00:43:12,640 --> 00:43:13,130
>> HUGH Zabriskie: 10 minutter?

840
00:43:13,130 --> 00:43:13,630
Flott!

841
00:43:13,630 --> 00:43:14,320
Awesome.

842
00:43:14,320 --> 00:43:19,010
>> Så det første jeg kommer til å
gjør, det heter My Favorite Song.

843
00:43:19,010 --> 00:43:22,410
Så dette er bare en
litt HTML Javascript.

844
00:43:22,410 --> 00:43:25,510
Vi kommer til å ha to knapper
på side spille min favorittsang

845
00:43:25,510 --> 00:43:29,192
og stoppe min favoritt sang.

846
00:43:29,192 --> 00:43:30,180
Jeg kommer til å endre dette.

847
00:43:30,180 --> 00:43:32,110
>> PUBLIKUM: Dekk mikrofonen.

848
00:43:32,110 --> 00:43:33,430
>> HUGH Zabriskie: Yeah.

849
00:43:33,430 --> 00:43:36,300
Og jeg har lastet inn her
et skript som basically--

850
00:43:36,300 --> 00:43:38,520
og dette er virkelig nyttig
for lasting av en MP3,

851
00:43:38,520 --> 00:43:41,820
så dette bare gjør
lasting MP3 måte raskere.

852
00:43:41,820 --> 00:43:44,180
Det er i utgangspunktet bare en wrapper.

853
00:43:44,180 --> 00:43:48,737
Det gjør bare fremgangs
lasting i MP3-filer mye raskere,

854
00:43:48,737 --> 00:43:51,570
ellers bruker du HTTP-forespørsel,
type som det vi gjorde

855
00:43:51,570 --> 00:43:53,950
på gjeldende delers sett med Server.

856
00:43:53,950 --> 00:43:55,950
Det er virkelig stygg, du
ønsker ikke å gjøre det.

857
00:43:55,950 --> 00:44:04,110
>> Så denne fyren, Boris Smus, skrev en virkelig
nyttig lite verktøy kalt BufferLoader.

858
00:44:04,110 --> 00:44:08,780
Alt du gjør er rett og slett gi det den
kontekst, du passerer det en list--

859
00:44:08,780 --> 00:44:11,327
eller, ja, er det en liste i Javascript?

860
00:44:11,327 --> 00:44:12,160
SAM GREEN: En rekke.

861
00:44:12,160 --> 00:44:14,201
HUGH Zabriskie: Å, er det
en matrise, det stemmer.

862
00:44:14,201 --> 00:44:18,660
Det er en rekke stier
til forskjellige filer.

863
00:44:18,660 --> 00:44:21,990
Og så kan du gi det en funksjon.

864
00:44:21,990 --> 00:44:25,530
Dette er tilbakeringing vi snakket
om med asynkron lasting.

865
00:44:25,530 --> 00:44:28,720
Det vil bli kalt
Når filene er lastet.

866
00:44:28,720 --> 00:44:33,780
Og at funksjonen som kalles når
filen er lastet tar som en perimeter

867
00:44:33,780 --> 00:44:35,840
en rekke lastet buffere.

868
00:44:35,840 --> 00:44:37,990
Så det skjer her.

869
00:44:37,990 --> 00:44:41,180
I utgangspunktet er BufferList
kommer til å være en value--

870
00:44:41,180 --> 00:44:46,380
eller det kommer til å være en rekke
lengde én, som har i det i indeksen

871
00:44:46,380 --> 00:44:51,320
null hele ladd fil av MP3.

872
00:44:51,320 --> 00:44:53,320
Så hva jeg gjør når jeg er ferdig
lasting er jeg rett og slett

873
00:44:53,320 --> 00:44:57,430
skape en buffer kilde, som
er en lyd buffer kilde node.

874
00:44:57,430 --> 00:45:03,410
Det neste trinnet er jeg legger i
source.buffer som full lastet buffer

875
00:45:03,410 --> 00:45:06,740
fra BufferList--
det er mye buffers--

876
00:45:06,740 --> 00:45:10,255
og deretter koble den lyd
buffer til bestemmelsesstedet.

877
00:45:10,255 --> 00:45:12,380
Så hva det kommer til å gjøre
er bare rett og slett sette MP3

878
00:45:12,380 --> 00:45:15,260
rett gjennom til utgangen,
og starte den umiddelbart

879
00:45:15,260 --> 00:45:18,010
ved å få denne samtalen.

880
00:45:18,010 --> 00:45:21,660
>> Kult, så la oss se
dette skje i aksjon.

881
00:45:21,660 --> 00:45:24,490
Min [uhørbart] her, la oss se.

882
00:45:24,490 --> 00:45:26,430
Så jeg skal bare
starte en grunnleggende server.

883
00:45:26,430 --> 00:45:28,660
Det er noe som
du må gjøre hvis du er

884
00:45:28,660 --> 00:45:32,490
gjør forespørsler om å laste ned filer.

885
00:45:32,490 --> 00:45:34,140
Jeg kommer til å starte en enkel server.

886
00:45:34,140 --> 00:45:38,200
Dette er i utgangspunktet hele
PSet akkurat nå i en linje,

887
00:45:38,200 --> 00:45:43,930
men det er bare å starte
en server på port 80/80.

888
00:45:43,930 --> 00:45:47,300
Så vi går over her, vi
kommer til å laste 80/80,

889
00:45:47,300 --> 00:45:49,110
vi kommer til å gå til My Favorite Song.

890
00:45:49,110 --> 00:45:51,660
Så hvis jeg treffer "Play min
favorittsang "akkurat nå,

891
00:45:51,660 --> 00:45:53,964
det kommer til å laste min
favoritt sang og spille it--

892
00:45:53,964 --> 00:45:55,880
[MUSIC - THE EAGLES, "Livet i FAST
 LANE "]

893
00:45:55,880 --> 00:46:00,490
--which skjer for å være "Life in
Fast Lane "av The Eagles.

894
00:46:00,490 --> 00:46:06,346
Nå kunne jeg traff "Stopp min
favorittsang "og spille det.

895
00:46:06,346 --> 00:46:09,160
>> [MUSIC - THE EAGLES, "Livet i FAST
 LANE "]

896
00:46:09,160 --> 00:46:18,340
>> Og hvis jeg går over til konsoll, fordi
Jeg brukte en global variabel over her

897
00:46:18,340 --> 00:46:23,390
å holde styr på denne verdien, er det faktisk
vil nå bli gjenkjent i konsollen.

898
00:46:23,390 --> 00:46:25,160
Så det automatisk skaper for meg.

899
00:46:25,160 --> 00:46:29,991
Så det er hva som spilles akkurat nå,
og jeg kan bare ringe 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
Vel, vet du hva?

903
00:46:35,860 --> 00:46:39,760
Bare så dere har hørt dette
song-- du kanskje kjenne igjen denne sangen.

904
00:46:39,760 --> 00:46:41,801
>> [MUSIC - til Rick Astley, "ALDRI skal gi
 DIN TUR"]

905
00:46:41,801 --> 00:46:42,299

906
00:46:42,299 --> 00:46:44,215
[MUSIC - THE EAGLES, "Livet i FAST
 LANE "]

907
00:46:44,215 --> 00:46:46,195
Vi har nå alle blitt Rickrolled.

908
00:46:46,195 --> 00:46:50,155
OK, flott, flytte på.

909
00:46:50,155 --> 00:46:51,160
Kjølig.

910
00:46:51,160 --> 00:46:54,554
Så dette er i utgangspunktet et eksempel på
hvor du kan laste en MP3 file--

911
00:46:54,554 --> 00:46:56,470
[MUSIC - THE EAGLES, "Livet i FAST
 LANE "]

912
00:46:56,470 --> 00:46:59,590
--og spille det, og stoppe og starte den.

913
00:46:59,590 --> 00:47:03,008
Jeg kunne ha gjort mye mer [uhørbart]

914
00:47:03,008 --> 00:47:07,570
>> Det siste jeg vil gjøre er,
Jeg skal vise deg en [uhørbart].

915
00:47:07,570 --> 00:47:18,070
>> [MUSIC SPILLE]

916
00:47:18,070 --> 00:47:21,800
>> Det er som, ogg.wave.mp3.

917
00:47:21,800 --> 00:47:26,450
Jeg tror, ​​hvis jeg husker riktig,
Jeg har kjørt inn i noen problemer med .m4a,

918
00:47:26,450 --> 00:47:27,721
men jeg er ikke sikker på det.

919
00:47:27,721 --> 00:47:28,470
Jeg tror mp3.wave--

920
00:47:28,470 --> 00:47:28,930

921
00:47:28,930 --> 00:47:30,971
>> [MUSIC - til Rick Astley, "ALDRI skal gi
 DIN TUR"]

922
00:47:30,971 --> 00:47:35,930

923
00:47:35,930 --> 00:47:36,500
>> Ok flott.

924
00:47:36,500 --> 00:47:37,625
Jeg burde ikke ha sagt det.

925
00:47:37,625 --> 00:47:40,570
Uansett, hei.

926
00:47:40,570 --> 00:47:43,430

927
00:47:43,430 --> 00:47:45,490
Så vi har denne åpen.

928
00:47:45,490 --> 00:47:52,320
Så nå er alt jeg gjør er at jeg i utgangspunktet opprettet
en grunnleggende syntaks for å lage musikk.

929
00:47:52,320 --> 00:47:57,610
Så hvis jeg gjør noe sånt, legger g4
på en to, hva det betyr er at,

930
00:47:57,610 --> 00:48:00,950
legge piano notat, G4,
som er den fjerde G

931
00:48:00,950 --> 00:48:02,680
opp på piano fra bunnen.

932
00:48:02,680 --> 00:48:05,930
Så dette er slags MIDI snakker,
så for de som er musikk basert,

933
00:48:05,930 --> 00:48:07,860
dette er bare MIDI noter.

934
00:48:07,860 --> 00:48:10,090
>> PUBLIKUM: Det er G
av Midt-C, ikke sant?

935
00:48:10,090 --> 00:48:11,840
>> HUGH Zabriskie: Dette er G
ovenfor Middle C, det er riktig.

936
00:48:11,840 --> 00:48:12,470
>> PUBLIKUM: Above Middle C.

937
00:48:12,470 --> 00:48:13,345
>> HUGH Zabriskie: Yeah.

938
00:48:13,345 --> 00:48:14,340
Egentlig, ja.

939
00:48:14,340 --> 00:48:16,131
Jeg tror jeg faktisk gjort
det ene [uhørbart],

940
00:48:16,131 --> 00:48:18,860
slik at dette kan være en oktav over den.

941
00:48:18,860 --> 00:48:20,070
Så la oss se.

942
00:48:20,070 --> 00:48:21,152
Hvis jeg treffer Play--

943
00:48:21,152 --> 00:48:22,110
[Repetitive PIANO NOTE]

944
00:48:22,110 --> 00:48:23,200
--we're kommer til å høre det.

945
00:48:23,200 --> 00:48:25,700
Tanken er at den opererer
akkurat som en kommandolinje ville,

946
00:48:25,700 --> 00:48:27,510
så hvis jeg går opp og ned
på tastaturet mitt, du

947
00:48:27,510 --> 00:48:31,550
kan gå tilbake til forrige
kommandoer, noe som er ganske nyttig.

948
00:48:31,550 --> 00:48:35,136
Og under er min liste over spor,
som alle kjører på sløyfen.

949
00:48:35,136 --> 00:48:38,260
>> PUBLIKUM: Du ble forutsatt at
88-tasters tastatur på det, ikke sant?

950
00:48:38,260 --> 00:48:41,051
>> HUGH Zabriskie: Spørsmålet var,
jeg antar en 88-tasters tastatur,

951
00:48:41,051 --> 00:48:41,990
og ja, jeg er.

952
00:48:41,990 --> 00:48:45,030
Hva jeg gjorde er jeg
utgangspunktet tok 88 prøver

953
00:48:45,030 --> 00:48:46,970
av piano, en for hver note.

954
00:48:46,970 --> 00:48:49,180
Og så hver gang du
høre et notat fra nå av,

955
00:48:49,180 --> 00:48:57,550
det er faktisk en løkke som ser
like-- dette er å få spilt på loop,

956
00:48:57,550 --> 00:49:00,120
så for hver note, dette er i gang.

957
00:49:00,120 --> 00:49:02,860
Det som skjer er, jeg
skape en buffer på nytt,

958
00:49:02,860 --> 00:49:06,010
Jeg oppretter en gevinst node for å stille volumet.

959
00:49:06,010 --> 00:49:08,240
Dette bare en virkelig
komplisert måte å si jeg

960
00:49:08,240 --> 00:49:10,550
lagre buffer i en source.buffer.

961
00:49:10,550 --> 00:49:13,160
Jeg gir det gevinst, jeg
koble den til gevinst,

962
00:49:13,160 --> 00:49:15,576
forsterkningen er forbundet med
utgang, og da jeg spiller det.

963
00:49:15,576 --> 00:49:20,735
Så det er litt av prosessen
for å ta i et buffer kilde.

964
00:49:20,735 --> 00:49:24,820
>> PUBLIKUM: Kan du faktisk ta det
tørr lyd og gjøre det vått [uhørbart]?

965
00:49:24,820 --> 00:49:26,260
>> HUGH Zabriskie: Du kan, ja.

966
00:49:26,260 --> 00:49:29,260
Det er re-verb, det er
forsinkelse, forvrengning.

967
00:49:29,260 --> 00:49:33,260
Du kan i utgangspunktet sette noe i
mellom i denne sandwich of-- godt,

968
00:49:33,260 --> 00:49:37,660
rørledningen er en bedre metafor,
men du kan legge noe i det.

969
00:49:37,660 --> 00:49:38,200
Kjølig.

970
00:49:38,200 --> 00:49:40,280
>> Så jeg skal fullføre demoen
her for å gi deg en følelse

971
00:49:40,280 --> 00:49:46,390
av nettopp det store antallet ganger du
kan kjøre denne funksjonen på en gang.

972
00:49:46,390 --> 00:49:49,280
Så jeg kommer til å fjerne dette.

973
00:49:49,280 --> 00:49:59,110
Jeg kommer til å lage en generator at--
innerst inne hva does-- dette er virkelig

974
00:49:59,110 --> 00:50:04,220
slag av en komplisert syntax-- men det er
kommer til å generere notater på fly,

975
00:50:04,220 --> 00:50:06,601
og bare begynne å spille
dem som det evaluerer dem.

976
00:50:06,601 --> 00:50:07,392
[Interposing PIANO]

977
00:50:07,392 --> 00:50:10,990

978
00:50:10,990 --> 00:50:12,817
>> Så vi kan bare gjøre litt musikk her.

979
00:50:12,817 --> 00:50:13,608
[Interposing PIANO]

980
00:50:13,608 --> 00:50:39,570

981
00:50:39,570 --> 00:50:41,470
>> Så hva denne kommandoen
gjør, for eksempel, er

982
00:50:41,470 --> 00:50:46,910
det tar disse tre notater for
piano og deretter setter dem på B3.

983
00:50:46,910 --> 00:50:48,660
Denne syntaksen kan gjøre
litt mer fornuftig

984
00:50:48,660 --> 00:50:50,590
til de som har en
musikk bakgrunn her.

985
00:50:50,590 --> 00:50:55,180

986
00:50:55,180 --> 00:50:56,551
>> Jeg kan legge til en basstromme.

987
00:50:56,551 --> 00:50:57,050
Jeg kan--

988
00:50:57,050 --> 00:50:58,048
>> [Interposing INSTRUMENTER]

989
00:50:58,048 --> 00:50:59,256
>> --just leke seg 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
[Interposing INSTRUMENTER]

993
00:51:14,515 --> 00:51:15,513
At man er litt mer irriterende.

994
00:51:15,513 --> 00:51:16,554
[Interposing INSTRUMENTER]

995
00:51:16,554 --> 00:51:26,491

996
00:51:26,491 --> 00:51:30,981
>> Slik at tilfeldig legger en tørr cymbal
på hver 16. notat, med en 16%

997
00:51:30,981 --> 00:51:31,481
[Uhørbart].

998
00:51:31,481 --> 00:51:32,522
>> [Interposing INSTRUMENTER]

999
00:51:32,522 --> 00:51:40,962

1000
00:51:40,962 --> 00:51:50,400
>> Ja, så hvordan dette
works-- det er alltid i 4: 4.

1001
00:51:50,400 --> 00:51:51,441
[Interposing INSTRUMENTER]

1002
00:51:51,441 --> 00:52:06,910

1003
00:52:06,910 --> 00:52:10,902
>> Ja, så de fire kvartalene, og 16/8.

1004
00:52:10,902 --> 00:52:14,851

1005
00:52:14,851 --> 00:52:15,892
[Interposing INSTRUMENTER]

1006
00:52:15,892 --> 00:52:27,970

1007
00:52:27,970 --> 00:52:33,780
>> Så i gjennomsnitt, får du 60%
av treff på det 16. notater.

1008
00:52:33,780 --> 00:52:35,990
>> Anyways, dette var bare
slags å briljere

1009
00:52:35,990 --> 00:52:39,780
noen av de tingene du kan
bygge med Web Audio API.

1010
00:52:39,780 --> 00:52:43,840
Det er veldig kraftig, det er veldig fort,
og du kan gjøre mange kule ting

1011
00:52:43,840 --> 00:52:44,340
med det.

1012
00:52:44,340 --> 00:52:51,260
Så igjen, eventuelle spørsmål du har,
epost myself-- Hugh-- eller Sam,

1013
00:52:51,260 --> 00:52:55,869
og ærlig, har Google
massevis av gode ressurser.

1014
00:52:55,869 --> 00:52:56,660
Noen siste spørsmål?

1015
00:52:56,660 --> 00:52:57,970
Yeah.

1016
00:52:57,970 --> 00:53:00,790
>> PUBLIKUM: Så du kan få tilgang til
den innebygde mikrofonen.

1017
00:53:00,790 --> 00:53:03,089
Hva om du ønsket å
bruke en bedre mikrofon?

1018
00:53:03,089 --> 00:53:05,380
HUGH Zabriskie: Hvis du ønsket
å bruke bedre mikrofon?

1019
00:53:05,380 --> 00:53:11,320
Så igjen, er denne delen av
abstraksjon mellom Chrome

1020
00:53:11,320 --> 00:53:12,950
og resten av datamaskinen.

1021
00:53:12,950 --> 00:53:18,950
Med mindre det er tilgjengelig gjennom
en API, som Web MIDI API,

1022
00:53:18,950 --> 00:53:22,030
du kan sikkert finne noen hacks,
men vanligvis ikke som mulig.

1023
00:53:22,030 --> 00:53:25,300
>> SAM GREEN: Du kan also--
alle Chrome vet

1024
00:53:25,300 --> 00:53:28,820
er det standard mikrofon
er, og det åpner den.

1025
00:53:28,820 --> 00:53:33,410
Så hvis du hadde en mikrofon du kunne
satt som datamaskinens standard mikrofon,

1026
00:53:33,410 --> 00:53:35,990
du kan få tilgang til det på den måten
og det ville sannsynligvis fungere.

1027
00:53:35,990 --> 00:53:37,490
HUGH Zabriskie: Det er et godt poeng.

1028
00:53:37,490 --> 00:53:39,656
Jeg har aldri prøvd det, men
du kan være i stand til å snill

1029
00:53:39,656 --> 00:53:45,700
of-- hvis du omdirigere input høyttaler,
du kan være i stand til å gjøre det, ja.

1030
00:53:45,700 --> 00:53:48,360
>> Noen siste spørsmål?

1031
00:53:48,360 --> 00:53:49,340
Kjølig.

1032
00:53:49,340 --> 00:53:51,680
Vel takk folkens
så mye for å se på.

1033
00:53:51,680 --> 00:53:52,199
Jeg er Hugh.

1034
00:53:52,199 --> 00:53:52,990
SAM GREEN: Jeg er Sam.

1035
00:53:52,990 --> 00:53:55,410
HUGH Zabriskie: Og dette er CS50.

1036
00:53:55,410 --> 00:53:56,767