1 00:00:00,000 --> 00:00:05,900 2 00:00:05,900 --> 00:00:07,170 >> SAM GREEN: Hej, alle. 3 00:00:07,170 --> 00:00:08,640 Velkommen til vores seminar. 4 00:00:08,640 --> 00:00:10,009 Mit 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 at tale i dag om JavaScript og Web Audio API. 7 00:00:17,420 --> 00:00:21,180 Blot for at starte, dette er en skitse af vores dagsorden for seminaret. 8 00:00:21,180 --> 00:00:25,350 Vi vil starte med at tale om hvorfor du bør være interesseret i Web 9 00:00:25,350 --> 00:00:30,130 Audio API, hvorfor er JavaScript det sprog, du har brug for det, 10 00:00:30,130 --> 00:00:32,619 og derefter snakke om JavaScript essentials-- så ligesom, 11 00:00:32,619 --> 00:00:34,800 lede dig gennem nogle grundlæggende i sproget, 12 00:00:34,800 --> 00:00:37,290 og derefter tale om audio API på et højt niveau. 13 00:00:37,290 --> 00:00:41,140 Derefter vil Hugh tale om nogle af de stadier af lydproduktion 14 00:00:41,140 --> 00:00:45,509 og derefter demo denne awesome sequencer projekt, han byggede og vise dig koden. 15 00:00:45,509 --> 00:00:48,050 Og så vil vi have tid til spørgsmål i slutningen for mennesker 16 00:00:48,050 --> 00:00:49,593 der 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 GRØN: Cool. 19 00:00:50,990 --> 00:00:51,383 >> HUGH Zabriskie: Cool. 20 00:00:51,383 --> 00:00:52,170 Jeg vil sikkerhedskopiere. 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 af ​​de store ting om Web Audio API 23 00:00:57,840 --> 00:01:00,480 er, at der ikke er nogen opsætning nødvendig. 24 00:01:00,480 --> 00:01:04,230 Det kommer indbygget i de fleste moderne browsere, 25 00:01:04,230 --> 00:01:08,630 herunder Chrome, Edge, en hel bundt af others-- alle dem 26 00:01:08,630 --> 00:01:12,650 at store dele af folk bruger i dag. 27 00:01:12,650 --> 00:01:14,807 Så der er ingen sat op, bortset fra blot at få 28 00:01:14,807 --> 00:01:16,890 en webserver gå, for dig til at komme i gang at arbejde 29 00:01:16,890 --> 00:01:18,420 på dit projekt, som er fantastisk. 30 00:01:18,420 --> 00:01:21,500 31 00:01:21,500 --> 00:01:24,190 >> Vi anbefaler temmelig stærkt, at du overveje 32 00:01:24,190 --> 00:01:26,530 bruger Chrome for JavaScript webudvikling, 33 00:01:26,530 --> 00:01:30,260 bare fordi dens udvikleren værktøjer er virkelig stærk. 34 00:01:30,260 --> 00:01:33,220 Som et eksempel på netop, hvad vi mener ved at sige åbne din JavaScript 35 00:01:33,220 --> 00:01:38,600 console-- hvis du går ind Chrome og du ser på en webside, 36 00:01:38,600 --> 00:01:43,897 og du venstre klik Undersøg Element, og derefter 37 00:01:43,897 --> 00:01:46,730 du går til denne lille drop-down lige her, og du klikker på konsol, 38 00:01:46,730 --> 00:01:50,660 vil du se, hvad der åbner op ser meget gerne en kommandoprompt, som du 39 00:01:50,660 --> 00:01:53,720 måske se på din Mac, eller på ID. 40 00:01:53,720 --> 00:01:59,260 Og ligesom det, vi kan typen kommandoer her, ligesom Klar, 41 00:01:59,260 --> 00:02:01,350 og andre kommandoer som dette. 42 00:02:01,350 --> 00:02:04,267 Vi kan skabe variabler, som vi vil se senere i JavaScript. 43 00:02:04,267 --> 00:02:07,100 Og så noget vi kan gøre i JavaScript, kan vi gøre med konsollen, 44 00:02:07,100 --> 00:02:11,430 og det er en super smart måde at begynde at spille rundt med API'er 45 00:02:11,430 --> 00:02:15,760 og få fortrolig med JavaScript ret off the bat. 46 00:02:15,760 --> 00:02:18,290 Ingen opsætning nødvendig, som er virkelig rart. 47 00:02:18,290 --> 00:02:18,790 Afkøle. 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 mere at tilføje. 51 00:02:24,780 --> 00:02:27,780 Hvis du har nogen questions-- der er mange af jer, der er her ikke leve, 52 00:02:27,780 --> 00:02:31,232 velkommen til at kontakte os-- disse er vores e-mail-adresser. 53 00:02:31,232 --> 00:02:33,190 Hvis du har spørgsmål du ikke ønsker at spørge os, 54 00:02:33,190 --> 00:02:36,160 lignende, åh jeg har en bug i min kode, eller noget 55 00:02:36,160 --> 00:02:39,270 der er lidt mere specifik, måske Google det først. 56 00:02:39,270 --> 00:02:42,340 Der er en masse gode ressourcer om Web Audio API derude. 57 00:02:42,340 --> 00:02:44,089 Det er virkelig godt dokumenteret og det er at være 58 00:02:44,089 --> 00:02:47,194 anvendes af et ton af mennesker i industri, og folk, der er bare 59 00:02:47,194 --> 00:02:48,610 bygge sjove ting for sig selv. 60 00:02:48,610 --> 00:02:51,306 Så der skulle være en masse af ressourcer derude. 61 00:02:51,306 --> 00:02:53,040 Awesome. 62 00:02:53,040 --> 00:02:56,100 >> Cool, så hvorfor Web Audio API? 63 00:02:56,100 --> 00:02:59,840 Diagrammet er lidt af en videreudvikling af den måde, 64 00:02:59,840 --> 00:03:04,100 lyd på nettet er vokset over tid. 65 00:03:04,100 --> 00:03:13,080 Bgsound var ligesom den oprindelige HTML-tag at Internet Explorer bruges til at støtte. 66 00:03:13,080 --> 00:03:16,790 Det kun tilladt for temmelig grundlæggende lyde, funktionaliteten ikke var meget robust, 67 00:03:16,790 --> 00:03:19,380 og du ikke kunne gøre kompliceret sekventering 68 00:03:19,380 --> 00:03:21,890 eller kontrollere, hvornår lyd startede og stoppet meget robust. 69 00:03:21,890 --> 00:03:23,930 Så det var ikke særlig veludviklet. 70 00:03:23,930 --> 00:03:27,470 Så efter det, Flash kom along-- som 71 00:03:27,470 --> 00:03:31,712 Jeg er sikker på, at du fyre er alle bekendt med Flash-- måske ikke, hvordan det fungerer, 72 00:03:31,712 --> 00:03:32,920 men du har sikkert set det. 73 00:03:32,920 --> 00:03:35,586 Du har fået til at opdatere din Flash Plug-in, alle den slags ting, 74 00:03:35,586 --> 00:03:40,110 og som helt sikkert udvidet sortiment funktionalitet, der var til rådighed. 75 00:03:40,110 --> 00:03:45,370 Men gør brugeren installere en plug-in er afgjort 76 00:03:45,370 --> 00:03:48,480 en ulempe, herunder Flash i din ansøgning, ikke? 77 00:03:48,480 --> 00:03:52,410 Fordi så er du afhængig af bruger går og finde denne plug-in, 78 00:03:52,410 --> 00:03:54,660 og sandsynligvis bliver slået ud af dette ekstra trin 79 00:03:54,660 --> 00:03:56,640 de skal tage for at bruge din app. 80 00:03:56,640 --> 00:04:01,270 Og så er der kunne være en opdatering der vil bryde hele din ansøgning, 81 00:04:01,270 --> 00:04:03,880 og det ender med at blive et mareridt for udvikleren, 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å efter der kom sammen, HTML audio-tag, som 84 00:04:10,480 --> 00:04:16,579 er en funktion i mere moderne HTML-- som sikkert tilladt for en masse flere ting, 85 00:04:16,579 --> 00:04:20,050 men selv de ting, du kunne gøre der var en lille smule begrænset bare 86 00:04:20,050 --> 00:04:22,730 som følge af de ting 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 blev en standard praksis på tværs af browsere, 89 00:04:29,290 --> 00:04:32,490 der virkelig udvidet sæt muligheder for udviklere 90 00:04:32,490 --> 00:04:36,590 til virkelig at komme ind i bygningen cool stuff til internettet. 91 00:04:36,590 --> 00:04:39,220 I lang tid havde der været virkelig robuste værktøjer 92 00:04:39,220 --> 00:04:44,360 for native lydprogrammer, like-- alle kender GarageBand, 93 00:04:44,360 --> 00:04:48,360 og så selvfølgelig er der mere professionelle audio blanding applikationer, 94 00:04:48,360 --> 00:04:49,640 og den slags ting. 95 00:04:49,640 --> 00:04:52,690 Men der var ikke en virkelig god Cloud-- ikke 96 00:04:52,690 --> 00:04:55,811 Cloud, yeah, jeg gætte Cloud-- webbaseret platform 97 00:04:55,811 --> 00:04:58,310 der ville tillade udviklere at bygge applikationer til mennesker 98 00:04:58,310 --> 00:05:00,570 at gøre lydmixing. 99 00:05:00,570 --> 00:05:03,960 Og da han vil vise dig senere, Web Audio API 100 00:05:03,960 --> 00:05:07,470 giver mulighed for virkelig kraftfuld ting til at ske rigtig enkelt, 101 00:05:07,470 --> 00:05:09,597 som er temmelig cool. 102 00:05:09,597 --> 00:05:12,680 Så det er instruktionen til, hvorfor du skal se resten af ​​seminaret, 103 00:05:12,680 --> 00:05:14,350 dybest set. 104 00:05:14,350 --> 00:05:17,880 >> Og nu, jeg har tænkt mig at tale om nogle JavaScript-- bare grundlæggende elementer 105 00:05:17,880 --> 00:05:20,240 af sproget, således at vi kan være på den samme side 106 00:05:20,240 --> 00:05:22,470 når vi taler om den API lidt senere. 107 00:05:22,470 --> 00:05:23,260 Afkøle. 108 00:05:23,260 --> 00:05:26,192 >> Så dette er et resumé. 109 00:05:26,192 --> 00:05:27,150 Jeg har glemt det var her. 110 00:05:27,150 --> 00:05:27,510 Ja. 111 00:05:27,510 --> 00:05:27,870 >> HUGH Zabriskie: Der er to dias her. 112 00:05:27,870 --> 00:05:30,245 >> SAM GRØN: Dette er resuméet nogle af begrænsningerne 113 00:05:30,245 --> 00:05:35,220 De andre bindende, gamle metoder. 114 00:05:35,220 --> 00:05:37,828 Og så nu har vi disse ting. 115 00:05:37,828 --> 00:05:40,011 Afkøle. 116 00:05:40,011 --> 00:05:40,510 Awesome. 117 00:05:40,510 --> 00:05:43,200 >> Så JavaScript væsentlige. 118 00:05:43,200 --> 00:05:47,230 Første ting først, er der en temmelig signifikant forskel 119 00:05:47,230 --> 00:05:49,940 i JavaScript versus i en sprog som C, på den måde, 120 00:05:49,940 --> 00:05:52,050 at variabler er oprettet. 121 00:05:52,050 --> 00:05:55,634 Så i C, er vi vant til at have at skrive vores variabler, ikke? 122 00:05:55,634 --> 00:05:57,800 Og jeg mener ikke typen som skrive dem i, mener jeg typen 123 00:05:57,800 --> 00:06:01,900 ligesom tildele dem et Motortype- betydning lignende, en int, en flyder, en char. 124 00:06:01,900 --> 00:06:05,210 I C, blev vi virkelig brugt til skulle oprette en variabel 125 00:06:05,210 --> 00:06:09,690 og derefter holde sig til denne type til hele tiden, at vi bruger denne variabel. 126 00:06:09,690 --> 00:06:13,990 Og det er ikke nødvendigvis værre, men det er nok sværere at bruge. 127 00:06:13,990 --> 00:06:16,190 En af de smarte funktioner JavaScript er 128 00:06:16,190 --> 00:06:19,740 at variabler er, hvad der kaldes "dynamisk indtastet", som 129 00:06:19,740 --> 00:06:22,500 betyder, at jeg kan lave en variabel med at syntaks, 130 00:06:22,500 --> 00:06:25,800 varX lig 5, f.eks. 131 00:06:25,800 --> 00:06:27,790 Der oprindeligt skaber et heltal variable-- 132 00:06:27,790 --> 00:06:29,870 lige under hood somewhere-- men jeg 133 00:06:29,870 --> 00:06:33,040 kan ændre denne variabel at henvise til en streng 134 00:06:33,040 --> 00:06:35,820 uden at gøre noget lignende at oprette en ny variabel. 135 00:06:35,820 --> 00:06:37,880 Jeg behøver ikke at bekymre sig om den type forandring. 136 00:06:37,880 --> 00:06:45,440 JavaScript ved, at den type s ændret, og der sker dynamisk. 137 00:06:45,440 --> 00:06:48,510 >> Så der er fordele og ulemper til at 138 00:06:48,510 --> 00:06:51,250 som enhver, der har arbejdet i JavaScript for et stykke tid måske kender. 139 00:06:51,250 --> 00:06:53,600 Der er tidspunkter, hvor du måske ved et uheld 140 00:06:53,600 --> 00:06:57,720 ændre typen af ​​en variabel og ikke håndtere denne type forandring, 141 00:06:57,720 --> 00:07:01,120 og derefter du har JavaScript kan crash-- eller en undtagelse 142 00:07:01,120 --> 00:07:06,070 kastes, fordi du vil have den forkert type, når du forventer en type. 143 00:07:06,070 --> 00:07:07,040 Afkøle. 144 00:07:07,040 --> 00:07:11,470 >> Så scoping-- som er ligesom, hvis vi huske de første uger i kurset, 145 00:07:11,470 --> 00:07:15,420 refererer til hvor synlig en variabel er, og i hvilket område af koden. 146 00:07:15,420 --> 00:07:18,400 Alt dette ligner meget til den måde, det ser ud i C. 147 00:07:18,400 --> 00:07:24,755 Så variabler er generelt virkefelt inden krøllede parenteser i en funktion, 148 00:07:24,755 --> 00:07:27,005 og så er der også globalt scoped variabler, 149 00:07:27,005 --> 00:07:29,171 are-- hvis du skriver en variabel uden for en funktion, 150 00:07:29,171 --> 00:07:31,790 det vil være synlige i hele teksten. 151 00:07:31,790 --> 00:07:35,840 >> En forskel mellem JavaScript og C navnlig 152 00:07:35,840 --> 00:07:40,280 er, at hvis du erklærer en global variabel overalt i en tekstfil 153 00:07:40,280 --> 00:07:43,324 det er synligt i enhver funktion inden for denne tekstfil. 154 00:07:43,324 --> 00:07:44,240 Det er korrekt, ikke? 155 00:07:44,240 --> 00:07:46,330 >> HUGH Zabriskie: Yep. 156 00:07:46,330 --> 00:07:49,120 >> SAM GRØN: Så det er også lidt lidt funky i forhold til C, 157 00:07:49,120 --> 00:07:52,660 hvor vi altid skulle have vores variable definitioner over de steder 158 00:07:52,660 --> 00:07:53,770 de blev brugt. 159 00:07:53,770 --> 00:07:57,957 Det er ikke en regel, der er håndhævet længere, så en lille smule anderledes. 160 00:07:57,957 --> 00:08:00,540 Og igen bare for at igen understreger, globale versus lokal variables-- 161 00:08:00,540 --> 00:08:03,457 meget lig C. Du kunne have to variabler med samme navn, 162 00:08:03,457 --> 00:08:06,540 og har en af ​​deres navne skygget af en lokal variabel, hvis en af ​​dem 163 00:08:06,540 --> 00:08:07,546 var global. 164 00:08:07,546 --> 00:08:09,420 Så lignende form for problemer, som nogle af jer 165 00:08:09,420 --> 00:08:11,920 kan have løbe ind i nogle af dit problem sætter hidtil. 166 00:08:11,920 --> 00:08:14,450 Cool, så det er variable. 167 00:08:14,450 --> 00:08:20,310 >> Kontrol flow, hvilket betyder lignende, hvis-else-- logiske stuff-- og sløjfer. 168 00:08:20,310 --> 00:08:24,510 Så til at starte med, det er det, hvis-ellers udsagn ligne i JavaScript. 169 00:08:24,510 --> 00:08:29,750 Placeringen af ​​de forskellige ting, på linjerne er ikke vigtigt. 170 00:08:29,750 --> 00:08:34,409 Dette er blot et af de konventioner for den måde, vi strukturen kode. 171 00:08:34,409 --> 00:08:38,634 Ligesom i C, har vi en "Hvis", en parentes erklæring. 172 00:08:38,634 --> 00:08:40,840 173 00:08:40,840 --> 00:08:42,090 Det er ikke det, jeg mente at gøre. 174 00:08:42,090 --> 00:08:44,860 175 00:08:44,860 --> 00:08:45,550 Jeg gjorde det igen. 176 00:08:45,550 --> 00:08:46,841 >> HUGH Zabriskie: Forsøger at afslutte? 177 00:08:46,841 --> 00:08:49,770 SAM GRØN: Nej, jeg er prøver bare at zoome ind. 178 00:08:49,770 --> 00:08:50,660 Det betyder ikke noget. 179 00:08:50,660 --> 00:08:54,730 180 00:08:54,730 --> 00:08:59,370 >> Så har vi et "hvis" erklæring og Vi har en tilstand inde i det 181 00:08:59,370 --> 00:09:03,130 der evalueres til sandt eller falsk, og som bestemmer, hvorvidt 182 00:09:03,130 --> 00:09:04,510 vi går ind, at blok af kode. 183 00:09:04,510 --> 00:09:09,860 Og ligeledes har vi et andet-hvis og en anden, ligesom vi er vant til i C. 184 00:09:09,860 --> 00:09:14,010 >> Du bør også være temmelig komfortabel ret off the bat med sløjfer, 185 00:09:14,010 --> 00:09:16,440 fordi de også ser meget gerne C ser ud. 186 00:09:16,440 --> 00:09:19,600 Men du vil opdage igen, at vi har, i stedet for int startværdier, 187 00:09:19,600 --> 00:09:22,570 vi har Var startværdier. 188 00:09:22,570 --> 00:09:24,650 Og jeg tror du har være omhyggelig med at gøre 189 00:09:24,650 --> 00:09:28,460 at du ikke ændre værdien af I fra en int til en streng, 190 00:09:28,460 --> 00:09:31,780 for eksempel, fordi det kommer til at forårsage underlige opførsel du måske ikke 191 00:09:31,780 --> 00:09:32,280 forventer. 192 00:09:32,280 --> 00:09:35,750 Men det skal se temmelig velkendt, så godt. 193 00:09:35,750 --> 00:09:39,460 >> Så dette er, hvor tingene begynder at få en lille smule skør i JavaScript 194 00:09:39,460 --> 00:09:44,920 for en person, der går fra en baggrund af C. Der er funktioner 195 00:09:44,920 --> 00:09:48,070 i JavaScript, og der er en måde at erklære en funktion, der ser 196 00:09:48,070 --> 00:09:50,361 slags ligner C, og så er der en anden, der 197 00:09:50,361 --> 00:09:52,450 ser lidt anderledes ud. 198 00:09:52,450 --> 00:09:54,930 >> Den første version, som vi kan se her, 199 00:09:54,930 --> 00:09:59,260 er lidt C-lignende, hvor vi sige, det er en funktion, 200 00:09:59,260 --> 00:10:01,490 give den et navn, giver antallet af argumenter, 201 00:10:01,490 --> 00:10:05,150 og derefter indholdet af funktionen gå ind disse krøllede parenteser. 202 00:10:05,150 --> 00:10:08,850 Vi vil se et eksempel på argumenter på blot et sekund. 203 00:10:08,850 --> 00:10:13,420 >> Hvorimod på den næste linje, ser vi, åh, her er en variabel kaldet "minFunktion," 204 00:10:13,420 --> 00:10:17,546 og vi lig det til denne generisk thing-- function-- som 205 00:10:17,546 --> 00:10:19,170 ikke synes at have noget foregår. 206 00:10:19,170 --> 00:10:22,780 207 00:10:22,780 --> 00:10:26,080 Grunden til, at der er anderledes end C er, at JavaScript 208 00:10:26,080 --> 00:10:30,040 er det, der kaldes et funktionelt sprog, eller har funktionelle elementer, hvilket betyder 209 00:10:30,040 --> 00:10:33,510 der fungerer faktisk værdier. 210 00:10:33,510 --> 00:10:39,520 Og det betyder, at vi kan sætte en variabel til en funktion lig 211 00:10:39,520 --> 00:10:43,210 og derefter flytte denne funktion rundt, passerer det som et argument, 212 00:10:43,210 --> 00:10:46,550 gøre alle slags ting ligesom med funktioner. 213 00:10:46,550 --> 00:10:49,682 >> En anden ting at note-- funktioner skrives 214 00:10:49,682 --> 00:10:51,140 med et bestemt antal argumenter. 215 00:10:51,140 --> 00:10:54,056 Vi vil se et eksempel på en funktion med et argument om det næste dias. 216 00:10:54,056 --> 00:10:56,720 Men JavaScript vil ikke råber på dig, hvis du prøver 217 00:10:56,720 --> 00:10:59,330 at bruge en funktion med forkert antal argumenter. 218 00:10:59,330 --> 00:11:05,310 Det vil bare gøre sit bedste for at gøre gør, hvilket betyder, at hvis du passerer, 219 00:11:05,310 --> 00:11:09,410 du kalder en funktion, der forventer et argument med noget argument, alt, 220 00:11:09,410 --> 00:11:13,990 vil ske, er det vil gøre sit bedste at forsøge at udføre denne kode, 221 00:11:13,990 --> 00:11:16,541 og hvis det i sidste ende løber ind en undtagelse eller en fejl, 222 00:11:16,541 --> 00:11:19,790 det vil kaste denne undtagelse og bare holde going-- hvilket er blot en af ​​de måder, 223 00:11:19,790 --> 00:11:21,070 at JavaScript fungerer. 224 00:11:21,070 --> 00:11:21,781 Ja. 225 00:11:21,781 --> 00:11:24,207 >> PUBLIKUM: Hvad sker der, hvis der er for mange argumenter? 226 00:11:24,207 --> 00:11:26,040 SAM GRØN: Så Spørgsmålet var, hvad der sker 227 00:11:26,040 --> 00:11:27,380 hvis der 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 dem, der er efter dem, det forventer. 230 00:11:32,120 --> 00:11:36,420 Det vil prøve at udføre den funktion kalder som hvis det var netop de to første. 231 00:11:36,420 --> 00:11:37,075 Højre? 232 00:11:37,075 --> 00:11:37,700 >> HUGH Zabriskie: Det er rigtigt, 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 sådan giver null til alle argumenter det ikke har nogen værdier 235 00:11:42,640 --> 00:11:43,660 for. 236 00:11:43,660 --> 00:11:45,810 >> SAM GREEN: som kan faktisk være praktisk, hvis du 237 00:11:45,810 --> 00:11:49,060 ønsker at skrive en funktion, tager et variabelt antal argumenter. 238 00:11:49,060 --> 00:11:55,830 Du kan indstille standardværdier i definitionen af ​​funktionen, 239 00:11:55,830 --> 00:11:59,060 og det kan se bort fra, at input er der ikke. 240 00:11:59,060 --> 00:12:01,584 241 00:12:01,584 --> 00:12:04,000 Så jeg ønsker at tale en lille smule mere om dette sidste kugle 242 00:12:04,000 --> 00:12:05,541 punkt, som er funktioner værdier. 243 00:12:05,541 --> 00:12:07,930 244 00:12:07,930 --> 00:12:11,010 Dette er et eksempel, der er en lille smule mildt sagt forbløffende 245 00:12:11,010 --> 00:12:14,880 hvis du bare læse det, og tror ikke om, hvad der foregår for en anden. 246 00:12:14,880 --> 00:12:17,910 Så lad os se lige på den første linje her. 247 00:12:17,910 --> 00:12:24,360 Vi har denne variabel, f1, at vi siger er en funktion, der gør denne ting. 248 00:12:24,360 --> 00:12:28,535 Og indholdet af funktionen er console.log ('hello'). 249 00:12:28,535 --> 00:12:32,220 Du kan tænke på console.log som JavaScript ækvivalent printf. 250 00:12:32,220 --> 00:12:35,510 Så hvad der vil ske, er, hvis vi køre denne kode i vores browser, 251 00:12:35,510 --> 00:12:37,530 det vil udskrive en streng. 252 00:12:37,530 --> 00:12:39,342 Jeg kan påvise, at. 253 00:12:39,342 --> 00:12:42,300 PUBLIKUM: Ved log, selv om, gør det mener det er at blive optaget et eller andet sted? 254 00:12:42,300 --> 00:12:42,550 SAM GRØN: Ja. 255 00:12:42,550 --> 00:12:44,216 Så jeg vil vise dig, hvad der vil ske. 256 00:12:44,216 --> 00:12:48,085 Så spørgsmålet var, hvad betyder log betyde? 257 00:12:48,085 --> 00:12:51,262 >> HUGH Zabriskie: Så console.log er ligesom 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 ('Hello'), og jeg kalder det, strengen "hej" 260 00:12:59,240 --> 00:13:00,730 bliver udskrevet til konsollen. 261 00:13:00,730 --> 00:13:03,340 Dette er konsollen. 262 00:13:03,340 --> 00:13:05,930 Det er ligesom printf, hvor udskriver til standard ud. 263 00:13:05,930 --> 00:13:09,050 264 00:13:09,050 --> 00:13:11,230 Og vi vil se i et minut, men dette er faktisk 265 00:13:11,230 --> 00:13:16,529 henvisning til konsollen objektet, og at kalde en metode på det pågældende objekt. 266 00:13:16,529 --> 00:13:18,320 Det vil være mere fornuftigt i et minut, når vi 267 00:13:18,320 --> 00:13:20,660 komme til at tale om objekter i JavaScript, 268 00:13:20,660 --> 00:13:22,509 men jeg troede, jeg ville blot nævne det. 269 00:13:22,509 --> 00:13:24,300 HUGH Zabriskie: Vi er anvendes i C, right-- 270 00:13:24,300 --> 00:13:27,580 vi normalt skriver en stor program i main til at gøre noget. 271 00:13:27,580 --> 00:13:30,700 Men hvad er cool i JavaScript er dig har denne form for tolk, der 272 00:13:30,700 --> 00:13:33,620 kører i realtid, så det tager kun linje for linje, 273 00:13:33,620 --> 00:13:35,320 det kan lige fortolke denne på stedet. 274 00:13:35,320 --> 00:13:37,403 Og det holder styr på ting, der har kørt før, 275 00:13:37,403 --> 00:13:41,620 så det er en temmelig nyttigt værktøj til at bruge console.log eller konsollen, 276 00:13:41,620 --> 00:13:46,870 generelt, for bare at spille rundt med JavaScript. 277 00:13:46,870 --> 00:13:51,420 >> SAM GREEN: Så gå tilbage til denne example-- den anden linje kode 278 00:13:51,420 --> 00:13:55,320 her er temmelig svimlende i mit hoved. 279 00:13:55,320 --> 00:13:59,790 Første gang jeg læser dette, Det var som, hvad sker der? 280 00:13:59,790 --> 00:14:04,580 Så hvad der sker, er, dette funktion erklæring siger, 281 00:14:04,580 --> 00:14:10,170 Jeg har en funktion kaldet F2 der er forventer et argument, f, 282 00:14:10,170 --> 00:14:12,990 og så er det opkald, som funktion, f, som 283 00:14:12,990 --> 00:14:17,652 blev videregivet til den som et argument med sig selv ingen argumenter. 284 00:14:17,652 --> 00:14:19,110 Så kan der have været 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 tager f1 som et argument, og derefter inde i F2, 287 00:14:28,400 --> 00:14:31,190 f får called-- hvilket betyder at denne linje kode, 288 00:14:31,190 --> 00:14:34,192 Efter disse to linjer af kode, resulterer i "hej" 289 00:14:34,192 --> 00:14:35,400 blive udskrevet til konsollen. 290 00:14:35,400 --> 00:14:41,660 291 00:14:41,660 --> 00:14:44,910 >> At vi kan passere funktioner som værdier i nærheden 292 00:14:44,910 --> 00:14:47,870 ender med at blive en af ​​de mest kraftfulde funktioner i JavaScript 293 00:14:47,870 --> 00:14:49,700 som programmeringssprog. 294 00:14:49,700 --> 00:14:52,782 Uden for alle de awesome ting det kan gøre, 295 00:14:52,782 --> 00:14:54,990 ligesom en funktion af sprog hensyn til den måde 296 00:14:54,990 --> 00:14:58,400 at det gør tingene let at programmere og tillader 297 00:14:58,400 --> 00:15:01,060 for ting, der ikke er særligt velegnet til internettet, 298 00:15:01,060 --> 00:15:04,500 funktionel programmering og funktionel programmering aspekter af JavaScript 299 00:15:04,500 --> 00:15:07,130 er en af ​​de mest magtfulde begreber, 300 00:15:07,130 --> 00:15:11,030 findes i JavaScript-- hvis du spørger mig. 301 00:15:11,030 --> 00:15:11,960 Afkøle. 302 00:15:11,960 --> 00:15:13,534 >> Så næste ting. 303 00:15:13,534 --> 00:15:16,450 Ud over at være funktionelle, der er også elementer af JavaScript 304 00:15:16,450 --> 00:15:20,510 som er objektorienteret, som er en af ​​de meget 305 00:15:20,510 --> 00:15:23,800 populære buzz ord i datalogi. 306 00:15:23,800 --> 00:15:27,040 Objektorienteret programmering er en virkelig populær ting. 307 00:15:27,040 --> 00:15:34,210 JavaScript har en version af det, hvor jeg tror, ​​hver værdi er også 308 00:15:34,210 --> 00:15:41,475 et objekt, hvilket betyder, at enhver genstand wraps samlet nogle antal værdier. 309 00:15:41,475 --> 00:15:44,020 310 00:15:44,020 --> 00:15:49,750 Så for værdier, der er enkle, ligesom et helt tal, som er lig med varX 5, 311 00:15:49,750 --> 00:15:52,250 pågældende genstand netop wraps at én værdi. 312 00:15:52,250 --> 00:15:54,760 313 00:15:54,760 --> 00:15:59,036 >> Men vi kan også forestille sig en situation where-- vi kan tænke på situationer i C 314 00:15:59,036 --> 00:16:00,910 hvor vi ønskede at gøre noget med structs, 315 00:16:00,910 --> 00:16:03,285 for eksempel, at indhylle flere værdier sammen og gør 316 00:16:03,285 --> 00:16:05,870 det virkelig nemt at passere tingene. 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 vigtigt at huske når jeg siger, at genstande pakket 319 00:16:12,340 --> 00:16:15,330 nogle antal værdier sammen, der fungerer også 320 00:16:15,330 --> 00:16:21,506 værdier, hvilket betyder, at funktioner kan også være inde i et JavaScript objekt. 321 00:16:21,506 --> 00:16:26,910 Og grunden til, at der er vigtigt er, at mens vi ofte 322 00:16:26,910 --> 00:16:30,290 tænke på at kalde en fremgangsmåde på et objekt, der er 323 00:16:30,290 --> 00:16:35,200 af et populært udtryk fra andre populære objekt-orienterede sprog, 324 00:16:35,200 --> 00:16:39,330 en af ​​forskellene er, at alle, at en metode er i JavaScript 325 00:16:39,330 --> 00:16:47,270 er en værdi gemt inde i et objekt som udfører en action-- eventuelt 326 00:16:47,270 --> 00:16:51,850 ved hjælp af de andre værdier, der er inde af den pågældende genstand, men ikke nødvendigvis. 327 00:16:51,850 --> 00:16:56,930 Så du kan forestille sig en situation, jeg gætte i en lille smule af en skør måde, 328 00:16:56,930 --> 00:17:02,990 hvor du kaldes en metode til en objekt på et andet objekt, for eksempel. 329 00:17:02,990 --> 00:17:06,010 Så det er en lille smule funky på den måde. 330 00:17:06,010 --> 00:17:09,369 >> Og du kan også ændre de metoder, der er forbundet med et objekt 331 00:17:09,369 --> 00:17:13,740 ved at tildele denne metode en ny funktion, som også er 332 00:17:13,740 --> 00:17:18,250 temmelig forskellig fra andre objekt-orienterede sprog, hvor 333 00:17:18,250 --> 00:17:21,410 når vi erklærer et objekt og instantiere den, 334 00:17:21,410 --> 00:17:25,839 Vi kan ikke ændre de metoder, der er forbundet med det pågældende objekt længere. 335 00:17:25,839 --> 00:17:28,680 Så det er temmelig anderledes. 336 00:17:28,680 --> 00:17:29,570 Afkøle. 337 00:17:29,570 --> 00:17:34,010 >> Så her er et eksempel, først, af et objekt i aktion. 338 00:17:34,010 --> 00:17:36,390 Dette er, hvad der kaldes en generisk genstand, som 339 00:17:36,390 --> 00:17:39,460 betyder, at det ikke har nogen bestemt navn, har ikke en klasse, 340 00:17:39,460 --> 00:17:42,190 Det er blot nogle indpakning af værdier. 341 00:17:42,190 --> 00:17:49,790 Og den måde, ser ud er, har vi denne ydre par krøllede seler her 342 00:17:49,790 --> 00:17:57,950 der indikerer at JavaScript og sige, det er et objekt. 343 00:17:57,950 --> 00:18:02,130 Værdierne inde i det er hver værdier inde 344 00:18:02,130 --> 00:18:04,590 af objekt, der vikles sammen. 345 00:18:04,590 --> 00:18:09,180 Og inde af den pågældende genstand, vi så har centrale værdipar, 346 00:18:09,180 --> 00:18:13,880 hvor nøglen indeholde navnet af værdien indersiden af ​​objektet, 347 00:18:13,880 --> 00:18:16,790 og den anden side-- modsat colon her-- 348 00:18:16,790 --> 00:18:19,850 er den faktiske værdi der bør opbevares. 349 00:18:19,850 --> 00:18:26,210 >> Så du ser her, at vi har en nøgle kaldet fn med værdi Sam, 350 00:18:26,210 --> 00:18:29,430 efterfulgt af et komma, siger videre til næste post. 351 00:18:29,430 --> 00:18:33,560 Så en nøgle kaldes ln, med en værdi af grøn, 352 00:18:33,560 --> 00:18:35,840 efterfulgt af et komma, efterfulgt af "print" 353 00:18:35,840 --> 00:18:43,209 som vil have en funktionsværdi der kommer til at gøre denne linje kode. 354 00:18:43,209 --> 00:18:45,500 Lad os tage et skridt tilbage og pakke, hvad der foregår her. 355 00:18:45,500 --> 00:18:47,280 Så det er lidt kompliceret, og vi ser noget nyt 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 "denne" søgeord er den ny ting vi ser her, og hvad det betyder 359 00:18:55,065 --> 00:19:00,540 er, refererer til den aktuelle objekt i omfang, ikke? 360 00:19:00,540 --> 00:19:03,990 Så når vi siger, det peger helt tilbage 361 00:19:03,990 --> 00:19:08,140 til hele denne object-- når vi gør this.fn, 362 00:19:08,140 --> 00:19:11,990 vi kommer til at gå hele vejen tilbage til dette objekt, gå til fn værdi 363 00:19:11,990 --> 00:19:16,471 og få Sam, træk det hele vejen tilbage, holde det her, og derefter gå videre. 364 00:19:16,471 --> 00:19:19,838 >> PUBLIKUM: Så med hentning, er det gjort på grund af parameteren 365 00:19:19,838 --> 00:19:20,621 definition? 366 00:19:20,621 --> 00:19:23,870 SAM GRØN: Så spørgsmålet var, er det hentning gjort på grund af parameteren 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 Hvad kommer til at ske her er, denne prik siger til JavaScript, 371 00:19:32,470 --> 00:19:39,990 OK, jeg får en vis værdi fra dette objekt fra mig selv. 372 00:19:39,990 --> 00:19:46,375 Og så er det vil kigge efter en post kaldet fn, og hvis den finder det, 373 00:19:46,375 --> 00:19:48,470 Det vil vende tilbage, at value-- så, det er Sam. 374 00:19:48,470 --> 00:19:51,540 Men jeg kunne også have indtastet noget, der ikke er defineret her, 375 00:19:51,540 --> 00:19:54,090 og så ville det bare returnere undefined-- som 376 00:19:54,090 --> 00:19:58,250 er en ting, at JavaScript kan gøre, hvilket kan have fordele, 377 00:19:58,250 --> 00:20:03,190 men det er also-- hvis du laver en tastefejl, Det kan resultere i underlige fejl. 378 00:20:03,190 --> 00:20:05,617 Så det vil bare prøve at finde uanset hvad du fortælle det til at finde 379 00:20:05,617 --> 00:20:07,700 og det kommer ikke til at klage, hvis ikke finde den. 380 00:20:07,700 --> 00:20:11,390 Det vil bare sige, jeg ikke finde det, og derefter gå videre. 381 00:20:11,390 --> 00:20:17,581 Så det ville være udefineret, plus tom, plus efternavn. 382 00:20:17,581 --> 00:20:18,080 Ja. 383 00:20:18,080 --> 00:20:21,070 Og så kan vi se, at hvis vi kunne derefter gå ned og access-- 384 00:20:21,070 --> 00:20:25,450 og vi kalder tf.print () med parenteser. 385 00:20:25,450 --> 00:20:30,000 Det kommer til at kalde det print funktion uden argumenter, ikke? 386 00:20:30,000 --> 00:20:34,490 Men hvis vi lige sagt tf.print () semikolon, uden parentes, 387 00:20:34,490 --> 00:20:37,480 alt, ville have gjort, er at trække ud funktionen fra værdien, 388 00:20:37,480 --> 00:20:40,609 men faktisk ikke kaldte det. 389 00:20:40,609 --> 00:20:41,162 Afkøle. 390 00:20:41,162 --> 00:20:42,870 HUGH Zabriskie: Bør Vi gør et objekt? 391 00:20:42,870 --> 00:20:44,161 SAM GREEN: Sure, lad os gø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 forestille os, at jeg har et objekt. 395 00:20:55,466 --> 00:21:03,026 396 00:21:03,026 --> 00:21:04,150 Så det er et simpelt objekt. 397 00:21:04,150 --> 00:21:06,910 398 00:21:06,910 --> 00:21:11,050 Dette er et objekt, der indeholder to værdier med to nøgler, to centrale værdi 399 00:21:11,050 --> 00:21:12,710 par. 400 00:21:12,710 --> 00:21:21,850 Så jeg kan derefter få adgang værdien lagres Indersiden af ​​objektet ved at gøre x.x1, 401 00:21:21,850 --> 00:21:23,400 for eksempel, og jeg får 1 tilbage. 402 00:21:23,400 --> 00:21:29,590 Ligeledes x.x2, får denne værdi tilbage. 403 00:21:29,590 --> 00:21:33,330 >> Og nu er den virkelig cool ting er, jeg kan faktisk tilføje noget til dette objekt 404 00:21:33,330 --> 00:21:34,316 efter jeg har oprettet det. 405 00:21:34,316 --> 00:21:36,315 Så du kan forestille dig, lad os siger jeg har en funktion. 406 00:21:36,315 --> 00:21:44,430 407 00:21:44,430 --> 00:21:46,352 >> HUGH Zabriskie: Du nødt til at gøre Shift-Enter. 408 00:21:46,352 --> 00:21:47,643 >> SAM GREEN: Åh, det er irriterende. 409 00:21:47,643 --> 00:22:02,460 410 00:22:02,460 --> 00:22:04,324 Hvad gjorde det ikke lide? 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 Nu sker det. 414 00:22:08,691 --> 00:22:09,190 Afkøle. 415 00:22:09,190 --> 00:22:12,840 >> Så jeg har lige oprettet denne funktion, f, der 416 00:22:12,840 --> 00:22:17,590 kommer til at gå til den aktuelle objekt og udskrive this.x1. 417 00:22:17,590 --> 00:22:20,330 Så hvis jeg bare kalde f af selv, intet sker 418 00:22:20,330 --> 00:22:26,970 ske, højre, fordi der ikke er x1 felt i objektet det henviser til. 419 00:22:26,970 --> 00:22:39,710 Men, hvis jeg siger, x.f = f, og så er jeg kalder x.f (), vil jeg komme tilbage 1. 420 00:22:39,710 --> 00:22:42,990 421 00:22:42,990 --> 00:22:46,530 Denne funktion er f nu forbundet med objektet X, 422 00:22:46,530 --> 00:22:51,800 som har en nøgle kaldet x1 forbundet med værdien 1, 423 00:22:51,800 --> 00:22:54,570 så når vi kalder this.x1, er det kommer til at finde, hvad det er på udkig efter 424 00:22:54,570 --> 00:22:56,450 og være i stand til at udskrive en værdi ud. 425 00:22:56,450 --> 00:22:58,700 Så det er blot ét eksempel af form af de skøre ting 426 00:22:58,700 --> 00:23:01,190 du kan gøre med objekter i JavaScript. 427 00:23:01,190 --> 00:23:03,870 428 00:23:03,870 --> 00:23:07,560 >> Så denne version var generisk version, mening 429 00:23:07,560 --> 00:23:13,780 at vi har oprettet et objekt ved hjælp af denne parenteser notation-- tandbøjle notation, 430 00:23:13,780 --> 00:23:16,880 rather-- og det er praktisk, hvis vi bare vil 431 00:23:16,880 --> 00:23:21,440 en forekomst af et bestemt objekt, men hvad nu hvis vi ønsker at have mere end én 432 00:23:21,440 --> 00:23:22,210 af samme art? 433 00:23:22,210 --> 00:23:24,440 Og svaret på det Spørgsmålet er, er der ting 434 00:23:24,440 --> 00:23:26,760 kaldet klasser i JavaScript så godt. 435 00:23:26,760 --> 00:23:31,470 436 00:23:31,470 --> 00:23:36,420 Vi kan skabe en funktion, gør en slags initialisering 437 00:23:36,420 --> 00:23:41,690 til et fremmedlegeme, og vi vil sige, ligesom, 438 00:23:41,690 --> 00:23:44,550 min class-- så navnet af den genanvendelige object-- 439 00:23:44,550 --> 00:23:47,100 lig funktion, der sætter det op. 440 00:23:47,100 --> 00:23:52,280 Så hvad det ville svare at skaber et objekt, 441 00:23:52,280 --> 00:23:55,930 ville være ligesom, krøllet tandbøjle, str, colon, 442 00:23:55,930 --> 00:23:59,630 dette er en streng, semikolon, krøllede klammeparentes. 443 00:23:59,630 --> 00:24:01,880 Det ville være den generiske objekt vi initialisere, 444 00:24:01,880 --> 00:24:06,380 med den ene forskel er på næste linier skaber vi en prototype, som 445 00:24:06,380 --> 00:24:11,190 betyder, at det er en standard nøgle, der vi føje til vores objekt, 446 00:24:11,190 --> 00:24:13,970 har værdien vist her. 447 00:24:13,970 --> 00:24:20,570 Hvilket betyder, at, når jeg opretter en ny eksempel på dette MinKlasse objekt, 448 00:24:20,570 --> 00:24:27,440 det kommer til at have præ-bygget inde i det en værdi, der hedder str og en anden værdi 449 00:24:27,440 --> 00:24:32,418 kaldet myPrint, som er kommer til at være en funktion. 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 >> Alle tiders. 453 00:24:37,990 --> 00:24:40,710 Så den sidste ting at sige om JavaScript 454 00:24:40,710 --> 00:24:46,430 er, at det er virkelig nyttigt for hvad kaldes asynkrone operationer. 455 00:24:46,430 --> 00:24:52,500 Asynkron betyder, at vi kan vente nogle drift 456 00:24:52,500 --> 00:24:57,870 at fuldføre, før vi flytter på, men gå videre, mens vi venter 457 00:24:57,870 --> 00:24:59,690 og så har noget at ske senere. 458 00:24:59,690 --> 00:25:03,480 Og hvad jeg mener med det er, du kan forestille sig en situation, hvor 459 00:25:03,480 --> 00:25:06,850 du sende en anmodning til nogle webserveren sted, 460 00:25:06,850 --> 00:25:09,670 og det kommer til at sende dig tilbage nogle store luns af data, ikke? 461 00:25:09,670 --> 00:25:13,320 Og dit bruger kunne vente i mellemtiden for at det skal ske, 462 00:25:13,320 --> 00:25:15,200 og intet kunne være foregår på det tidspunkt. 463 00:25:15,200 --> 00:25:18,110 Men det er ikke en stor design, ikke? 464 00:25:18,110 --> 00:25:20,214 Du ønsker ikke websiden til at fryse. 465 00:25:20,214 --> 00:25:22,380 Hvad hvis brugeren ønsker at klik på en drop-down menu? 466 00:25:22,380 --> 00:25:24,870 Det er ikke en stor design mønster. 467 00:25:24,870 --> 00:25:29,290 I stedet er dybest set JavaScript gør er, siger, 468 00:25:29,290 --> 00:25:31,870 OK, så gør denne operation asynkront. 469 00:25:31,870 --> 00:25:36,520 Så ligesom, vent i baggrunden, og derefter, når operationen er færdig, 470 00:25:36,520 --> 00:25:39,420 kalder tilbagekald function-- kalde en funktion, 471 00:25:39,420 --> 00:25:43,800 gøre nogle action-- at signalere, at operation vi ventede på at ende 472 00:25:43,800 --> 00:25:45,520 er ovre. 473 00:25:45,520 --> 00:25:51,240 Og grunden til, at er super stærk er, vi kan gøre noget, passerer et argument, 474 00:25:51,240 --> 00:25:54,440 gøre noget, og derefter vente at noget skal ske. 475 00:25:54,440 --> 00:25:58,970 Så, når at noget færdig, kan vi kalde en tilbagekald. 476 00:25:58,970 --> 00:26:03,300 Det er virkelig praktisk, fordi det lader os gøre ting med Web Audio API, 477 00:26:03,300 --> 00:26:07,490 for eksempel, ligesom belastningen en lydfil fra en ekstern server 478 00:26:07,490 --> 00:26:11,660 uden at skulle vente på Hele lydfil, der skal indlæses, 479 00:26:11,660 --> 00:26:14,440 hvilket ville være virkelig dårligt for brugeroplevelsen. 480 00:26:14,440 --> 00:26:17,080 Afkøle. 481 00:26:17,080 --> 00:26:19,460 >> Sidste par noter om debugging, da dette 482 00:26:19,460 --> 00:26:23,682 er en ting, du er nødt til at gøre som en del af dit projekt, garanteret. 483 00:26:23,682 --> 00:26:25,140 Jeg nævnte JavaScript-konsol. 484 00:26:25,140 --> 00:26:27,550 Det er en super nyttig funktion af alle moderne browsere, 485 00:26:27,550 --> 00:26:30,300 Og vi virkelig opfordre dig til at få trygge ved at bruge din konsol, 486 00:26:30,300 --> 00:26:33,660 Hvis du ønsker at få god til JavaScript. 487 00:26:33,660 --> 00:26:36,320 Det er super praktisk til debugging, men det er også 488 00:26:36,320 --> 00:26:39,440 virkelig nyttige for at regne ud af at bruge en API. 489 00:26:39,440 --> 00:26:41,950 Det giver mulighed for virkelig let eksperimenter 490 00:26:41,950 --> 00:26:45,910 uden at skulle skrive nogle kode, og derefter kompilere den. 491 00:26:45,910 --> 00:26:47,500 Du behøver ikke at gøre alle disse trin. 492 00:26:47,500 --> 00:26:49,619 Du kan bare skrive noget kode ind i en linje, 493 00:26:49,619 --> 00:26:52,410 og få derefter øjeblikkelig feedback på om denne linje kode eller ej 494 00:26:52,410 --> 00:26:55,230 worked-- meget praktisk. 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 af en REPL-- så det er R-E-P-L, REPL, som står for læse, 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 at skrive nogle ting i, vil det læse, hvad du har skrevet i, 500 00:27:12,120 --> 00:27:17,280 det vil evaluere det, og det vil udskrive output, og så det vil starte igen. 501 00:27:17,280 --> 00:27:22,056 Der giver dig mulighed for hurtigt at gå i kredse iteration, som er virkelig cool. 502 00:27:22,056 --> 00:27:25,150 503 00:27:25,150 --> 00:27:28,930 >> Jeg gætter rigtig sidste note-- dette er den egentlige sidste bemærkning, ja. 504 00:27:28,930 --> 00:27:30,780 Hvordan kan vi egentlig bruge JavaScript? 505 00:27:30,780 --> 00:27:34,040 Så først, kan vi importerer det ved hjælp af et script-tag 506 00:27:34,040 --> 00:27:39,500 på toppen eller bunden af ​​en HTML file-- overalt inde i en HTML-fil, 507 00:27:39,500 --> 00:27:40,440 virkelig. 508 00:27:40,440 --> 00:27:47,390 Og inden for en script-tag, der er to sub-måder at importere JavaScript. 509 00:27:47,390 --> 00:27:51,370 Den første er ved at have en separat JavaScript-fil 510 00:27:51,370 --> 00:27:58,010 at vi importerer i sin helhed, eller ved at have et område med kode som script 511 00:27:58,010 --> 00:28:00,290 at starte, og derefter backslash script til slut. 512 00:28:00,290 --> 00:28:02,620 Og så har vi bare skrive JavaScript inde i HTML-fil. 513 00:28:02,620 --> 00:28:03,790 Det er de to måder. 514 00:28:03,790 --> 00:28:05,165 Du kan ikke have det inde i HTML. 515 00:28:05,165 --> 00:28:06,502 516 00:28:06,502 --> 00:28:08,126 PUBLIKUM: Er en bedre end den anden? 517 00:28:08,126 --> 00:28:10,542 SAM GREEN: Spørgsmålet var, er en bedre end den anden. 518 00:28:10,542 --> 00:28:18,306 Så, ja, som en kodning stil praksis, og også det er ligesom et design praksis. 519 00:28:18,306 --> 00:28:20,180 Der er to grunde hvorfor det kunne være bedre. 520 00:28:20,180 --> 00:28:23,934 Den første er, det gør din kode en meget mere læsbar, hvis alle dine HTML 521 00:28:23,934 --> 00:28:27,100 er på ét sted, alle dine CSS er i et andet sted, alle dine JavaScript 522 00:28:27,100 --> 00:28:28,420 er i en tredje plads. 523 00:28:28,420 --> 00:28:28,920 Højre? 524 00:28:28,920 --> 00:28:32,370 Jeg synes vi skal allerede har talt om det i sections-- lignende CSS-- hvad 525 00:28:32,370 --> 00:28:35,220 at is-- og det går ofte i en anden fil. 526 00:28:35,220 --> 00:28:37,090 Så lignende form for koncept her. 527 00:28:37,090 --> 00:28:42,410 Du kan også forestille sig, at JavaScript ville genbruges på mere end én 528 00:28:42,410 --> 00:28:47,350 HTML-side, eller måske en mange HTML-sider, 529 00:28:47,350 --> 00:28:49,340 og som har at JavaScript refactored i en 530 00:28:49,340 --> 00:28:51,950 fil, som du kan importere til mere end ét sted 531 00:28:51,950 --> 00:28:54,570 tillader, at koden måde mere at vedligeholde. 532 00:28:54,570 --> 00:28:57,930 Du kan forestille dig at gøre en skifte til JavaScript 533 00:28:57,930 --> 00:29:00,070 og at skulle ændre det i 100 forskellige filer. 534 00:29:00,070 --> 00:29:04,070 Og i stedet kan vi bare ændre det i en, hvilket er langt mere kraftfuld. 535 00:29:04,070 --> 00:29:05,420 Har jeg besvare dit spørgsmål? 536 00:29:05,420 --> 00:29:07,950 Afkøle. 537 00:29:07,950 --> 00:29:10,830 >> Vi kan også skrive i konsollen, som vi har nævnt før. 538 00:29:10,830 --> 00:29:15,070 Og igen, en sidste note-- Web Audio er bygget i, 539 00:29:15,070 --> 00:29:16,978 du behøver ikke at indlæse noget. 540 00:29:16,978 --> 00:29:17,478 Afkøle. 541 00:29:17,478 --> 00:29:20,519 Er der nogen spørgsmål, har du nogen flere spørgsmå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ørligt] 544 00:29:24,286 --> 00:29:25,410 SAM GREEN: Okay, cool. 545 00:29:25,410 --> 00:29:27,200 Så nu han kommer til at tale om API. 546 00:29:27,200 --> 00:29:28,490 >> HUGH Zabriskie: Cool. 547 00:29:28,490 --> 00:29:28,990 Tak, Sam. 548 00:29:28,990 --> 00:29:30,184 >> SAM GRØN: Selvfølgelig. 549 00:29:30,184 --> 00:29:32,600 HUGH Zabriskie: Awesome, så vi vil gå fra JavaScript. 550 00:29:32,600 --> 00:29:35,350 Så vi har talt om nogle af de væsentlige punkter i JavaScript, 551 00:29:35,350 --> 00:29:41,105 og dem er de variabler, funktioner, objekter, fungerer som variable, 552 00:29:41,105 --> 00:29:41,980 asynkron læsning. 553 00:29:41,980 --> 00:29:46,100 Disse er alle ting, som du vil se, som du bruger Web Lyd. 554 00:29:46,100 --> 00:29:49,230 Så vi bare vil tale om det først på et højt niveau. 555 00:29:49,230 --> 00:29:52,120 >> Det er en API, så det er noget der er bygget, da Sam sagde, 556 00:29:52,120 --> 00:29:57,010 lige ind i JavaScript at du bruger i konsollen. 557 00:29:57,010 --> 00:30:01,020 Og det er faktisk ligesom C ++ kode der virkelig er indbygget i Chrome 558 00:30:01,020 --> 00:30:04,470 og Firefox, og alle disse browsere. 559 00:30:04,470 --> 00:30:07,060 Så den vigtigste idé med Web Audio er, at du har 560 00:30:07,060 --> 00:30:09,440 denne form for pipeline af lyd, ikke? 561 00:30:09,440 --> 00:30:13,670 Så din lyddata kommer i en eller anden form. 562 00:30:13,670 --> 00:30:16,690 >> Der er slags tre vigtigste forms-- du har oscillator, som 563 00:30:16,690 --> 00:30:21,340 skaber en sinusbølge, cosinus bølge, vi kommer til at se, hvordan det fungerer. 564 00:30:21,340 --> 00:30:23,890 En anden meget udbredt, selvfølgelig er en MP3. 565 00:30:23,890 --> 00:30:25,810 Så måske du starter med en sang, og så skal du 566 00:30:25,810 --> 00:30:28,320 ønsker at gøre nogle filtrering til denne og output 567 00:30:28,320 --> 00:30:30,605 at-- der kunne være en mulig kilde. 568 00:30:30,605 --> 00:30:32,480 Og så en virkelig cool den ene er mikrofonen. 569 00:30:32,480 --> 00:30:37,230 Så du kan bruge nogle meget grundlæggende opkald i JavaScript 570 00:30:37,230 --> 00:30:39,440 at få adgang til mikrofon, og så hvis du 571 00:30:39,440 --> 00:30:42,870 ønskede at gøre en app som en pitch-detektor, 572 00:30:42,870 --> 00:30:45,290 for eksempel, der tager i din stemme og tal ud 573 00:30:45,290 --> 00:30:47,740 den pitch-- meget nem måde at det. 574 00:30:47,740 --> 00:30:50,730 Du kan bare slags læse det i, finde ud af frekvens, 575 00:30:50,730 --> 00:30:52,250 og derefter output et nummer. 576 00:30:52,250 --> 00:30:56,080 Så vi vil se, hvordan det fungerer, så godt. 577 00:30:56,080 --> 00:30:59,430 >> Destinationen er dybest set hvor lyddata udlæses. 578 00:30:59,430 --> 00:31:02,890 Så generelt, det er ligesom din bærbare højttalere. 579 00:31:02,890 --> 00:31:05,610 Andre muligheder er ligesom en ScriptProcessorNode-- 580 00:31:05,610 --> 00:31:07,990 vi vil komme til knudepunkter i et second-- men dybest set, 581 00:31:07,990 --> 00:31:11,939 enten du lægger lyd ud gennem din computer via højttalere, 582 00:31:11,939 --> 00:31:14,730 eller du er slags optage det, så du gemme det som lyddata. 583 00:31:14,730 --> 00:31:18,980 Så måske hvis nogen skaber musik i din app, og derefter 584 00:31:18,980 --> 00:31:22,410 du vil optage det, og måske gerne eksportere det til SoundCloud, for example-- 585 00:31:22,410 --> 00:31:25,281 det ville være en måde at gøre det. 586 00:31:25,281 --> 00:31:27,030 Alle de sjove ting, som vi taler om, 587 00:31:27,030 --> 00:31:29,950 sker mellem disse to punkter, hvor vi lægger i musikken 588 00:31:29,950 --> 00:31:31,410 og derefter output det. 589 00:31:31,410 --> 00:31:36,660 >> Så jeg har tænkt mig at tale om de fem stadier af lydproduktion i en anden. 590 00:31:36,660 --> 00:31:38,950 Vi har denne ting kaldet 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 Dybest set, hvad AudioContext is-- hvis vi gå til JavaScript-konsol lige nu, 593 00:31:49,980 --> 00:31:52,740 vi kan skabe en lige nu. 594 00:31:52,740 --> 00:31:54,040 Blot et eksempel på REPL, ikke? 595 00:31:54,040 --> 00:31:57,880 Vi læser, evaluere, og den udskriver. 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, det er et objekt her, og det holder oplysninger 598 00:32:05,500 --> 00:32:09,960 om ting, der foregår på skærmen relateret til lyd. 599 00:32:09,960 --> 00:32:15,220 Et eksempel er den aktuelle tid. 600 00:32:15,220 --> 00:32:18,910 Dette fortæller dig nummeret sekunder, meget præcist, 601 00:32:18,910 --> 00:32:20,890 da den webside indlæst. 602 00:32:20,890 --> 00:32:24,110 Så dette er en rigtig nyttig lille ejendom, som du kan bruge. 603 00:32:24,110 --> 00:32:27,898 Det er læst only-- jeg tror faktisk du kan prøve at sætte det en værdi. 604 00:32:27,898 --> 00:32:29,856 Det vil fortælle dig indstille det, og derefter, hvis du udskriver det 605 00:32:29,856 --> 00:32:31,439 igen-- det faktisk ikke helt arbejde. 606 00:32:31,439 --> 00:32:34,472 Så der er skrivebeskyttede egenskaber i JavaScript. 607 00:32:34,472 --> 00:32:36,430 Det er virkelig nyttigt, hvis du slags synkronisering 608 00:32:36,430 --> 00:32:38,610 en masse forskellige oplysninger, når du er 609 00:32:38,610 --> 00:32:41,280 slags spille forskellige lyde. 610 00:32:41,280 --> 00:32:43,630 >> En anden virkelig nyttige én er i denne sammenhæng destination. 611 00:32:43,630 --> 00:32:46,587 612 00:32:46,587 --> 00:32:49,670 Bestemt, hvis du er interesseret, skal prøve dette på egen konsol ret 613 00:32:49,670 --> 00:32:50,980 nu. 614 00:32:50,980 --> 00:32:53,150 Så dette er en AudioDestinationNode. 615 00:32:53,150 --> 00:32:56,480 Dybest set, hvad det siger, er, hvor outputtet hen? 616 00:32:56,480 --> 00:32:59,590 Så der er to reelle muligheder her. 617 00:32:59,590 --> 00:33:01,940 Normalt standard er kun dine højttalere, 618 00:33:01,940 --> 00:33:05,150 så AudioDestinationNode dybest set bare siger 619 00:33:05,150 --> 00:33:09,240 der er nul udgange til lyden kommer ind, sendes til højttaleren. 620 00:33:09,240 --> 00:33:12,050 Så generelt, ikke gør du nødt til at spille med det. 621 00:33:12,050 --> 00:33:15,720 Hvis du er interesseret i faktisk bruger den ScriptProcessorNode til optagelse, 622 00:33:15,720 --> 00:33:16,990 absolut skyde mig en e-mail senere, fordi det er 623 00:33:16,990 --> 00:33:18,330 lidt mere kompliceret. 624 00:33:18,330 --> 00:33:21,590 Men generelt, er du bare lidt udsende lyd i en eller anden form. 625 00:33:21,590 --> 00:33:24,347 Så cool, vil vi hoppe tilbage her. 626 00:33:24,347 --> 00:33:25,180 PUBLIKUM: Jeg er ked af. 627 00:33:25,180 --> 00:33:26,054 HUGH Zabriskie: Ja. 628 00:33:26,054 --> 00:33:28,770 PUBLIKUM: Jeg ved, du sagde at tale til dig senere om optagelse. 629 00:33:28,770 --> 00:33:31,550 Kan du interface, der 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 Lad os se. 632 00:33:35,260 --> 00:33:37,220 Det tror jeg ikke. 633 00:33:37,220 --> 00:33:41,670 Så går mellem klienten, som er JavaScript 634 00:33:41,670 --> 00:33:44,310 konsol, og din faktiske computer, er generelt 635 00:33:44,310 --> 00:33:46,490 noget, der er lidt af off grænser, hvis du 636 00:33:46,490 --> 00:33:52,320 vil, venlig ved arten af ​​til-- det er sådan et design ting, 637 00:33:52,320 --> 00:33:57,770 men du forsøger at holde browseren adskilt fra brugerens faktiske computer. 638 00:33:57,770 --> 00:34:02,310 Generelt er den eneste, du er i stand til at adgang er mikrofonen eller kameraet. 639 00:34:02,310 --> 00:34:04,730 Du er ikke i stand til, jeg tror ikke, at bruge Pro Tools. 640 00:34:04,730 --> 00:34:07,480 Men hvis du har oprettet et spor i Pro Tools, 641 00:34:07,480 --> 00:34:12,710 eksporteres, at man kunne indlæse det her, filtrere det, for eksempel, 642 00:34:12,710 --> 00:34:16,820 proces, og optage det i en Audio Destination-- eller no-- en Sphere 643 00:34:16,820 --> 00:34:17,870 Processor 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 kunne sende den i en e-mail, eller hvad du vil derfra. 646 00:34:25,320 --> 00:34:31,159 >> Men der er lidt af en svag barriere mellem lave musik på computeren 647 00:34:31,159 --> 00:34:33,050 og lave musik online. 648 00:34:33,050 --> 00:34:37,940 >> SAM GRØN: Og det er ikke enestående for denne API. 649 00:34:37,940 --> 00:34:44,060 Det er en sikkerhedsfunktion i Chrome, og Jeg tror, ​​alle andre moderne browser. 650 00:34:44,060 --> 00:34:45,860 Browseren er selvstændig. 651 00:34:45,860 --> 00:34:50,980 Så for eksempel, kan en webside ikke bruge JavaScript til at slå lyden 652 00:34:50,980 --> 00:34:54,190 på for dine højtalere, for eksempel. 653 00:34:54,190 --> 00:34:58,120 Eller det kan ikke slukke for computeren. 654 00:34:58,120 --> 00:35:01,530 Og der er ingen mellemliggende punkt mellem disse to ting, højre, 655 00:35:01,530 --> 00:35:05,960 så enten du har en komplet abstraktion, 656 00:35:05,960 --> 00:35:10,050 eller du åbner op for sikkerhedshul for at lade 657 00:35:10,050 --> 00:35:14,440 en programmør med dårlige hensigter gøre hvad de vil med din bærbare computer. 658 00:35:14,440 --> 00:35:18,104 Og det er derfor, Chrome er selvstændig. 659 00:35:18,104 --> 00:35:19,310 >> HUGH Zabriskie: Ja. 660 00:35:19,310 --> 00:35:20,840 Giver det mening? 661 00:35:20,840 --> 00:35:21,369 Cool, cool. 662 00:35:21,369 --> 00:35:23,160 Jeg skulle lige til at viser et eksempel på en. 663 00:35:23,160 --> 00:35:25,118 Det er temmelig meget som langt som du får, i form 664 00:35:25,118 --> 00:35:26,950 for adgang til brugerens computer. 665 00:35:26,950 --> 00:35:30,180 Hvis du har et USB-tastatur tilsluttet, kan du bruge noget, der hedder Web 666 00:35:30,180 --> 00:35:32,180 MIDI API, som vi ikke vil virkelig taler om her, 667 00:35:32,180 --> 00:35:36,330 men det er en anden API, der er indbygget i mindst Chrome-- igen, 668 00:35:36,330 --> 00:35:41,570 det er derfor, vi elsker Chrome-- Jeg tror Firefox eller Safari, 669 00:35:41,570 --> 00:35:44,300 dette er en nem ting at google-- forskellige browsere har 670 00:35:44,300 --> 00:35:46,917 anden støtte for hvilke API'er de har gennemført. 671 00:35:46,917 --> 00:35:49,875 Men hvis du ønsker at tilslutte et tastatur og arbejde med disse oplysninger, 672 00:35:49,875 --> 00:35:52,850 slags Send tastaturet oplysninger over til computeren 673 00:35:52,850 --> 00:35:57,620 og derefter bruge det online, denne API er, hvor du ville arbejde der. 674 00:35:57,620 --> 00:35:58,150 >> Afkøle. 675 00:35:58,150 --> 00:35:58,710 OKAY. 676 00:35:58,710 --> 00:36:01,320 Så hurtigt går videre her. 677 00:36:01,320 --> 00:36:03,310 Hvordan gør vi til tiden? 678 00:36:03,310 --> 00:36:04,210 >> SPEAKER 1: Omkring 15. 679 00:36:04,210 --> 00:36:05,543 >> HUGH Zabriskie: 15 minutter tilbage? 680 00:36:05,543 --> 00:36:06,160 OK, cool. 681 00:36:06,160 --> 00:36:08,170 Så vi vil køre videre her. 682 00:36:08,170 --> 00:36:13,500 >> Så dybest set, det vigtigste punkt i tænker på dette som en rørledning 683 00:36:13,500 --> 00:36:16,430 er, at hvert trin i støbeskeen er en serie af audio knudepunkter. 684 00:36:16,430 --> 00:36:19,284 685 00:36:19,284 --> 00:36:20,950 Vores kilde, lad os sige, er en oscillator. 686 00:36:20,950 --> 00:36:23,380 Vi er nødt til at skabe en oscillator node. 687 00:36:23,380 --> 00:36:25,690 Og det er bare lidt af den lille function-- 688 00:36:25,690 --> 00:36:30,460 og de er alle baseret ud af audio sammenhæng her. 689 00:36:30,460 --> 00:36:32,885 >> PUBLIKUM: Når det sagt oscillator, betyder det 690 00:36:32,885 --> 00:36:37,250 Det er faktisk bogstaveligt går fra to forskellige poler frem og tilbage? 691 00:36:37,250 --> 00:36:41,170 >> HUGH Zabriskie: Nej, det er ligesom en digital repræsentation. 692 00:36:41,170 --> 00:36:42,740 Det er faktisk implementeret i C ++. 693 00:36:42,740 --> 00:36:46,460 Jeg faktisk ikke kender specs af, hvordan det rent faktisk gennemført, 694 00:36:46,460 --> 00:36:48,500 men alt dette arbejder som binære data. 695 00:36:48,500 --> 00:36:51,260 696 00:36:51,260 --> 00:36:52,370 Faktisk, ja. 697 00:36:52,370 --> 00:36:53,950 Det ville være at sige, jeg kunne faktisk, hvis du er interesseret, 698 00:36:53,950 --> 00:36:56,533 Jeg kunne sende dig lidt mere oplysninger om, hvordan kurver 699 00:36:56,533 --> 00:37:00,181 holdes der et digitalt format. 700 00:37:00,181 --> 00:37:00,680 OK, cool. 701 00:37:00,680 --> 00:37:03,120 >> Så vi genererer en tone som en sinus bølge eller noget lignende, måske 702 00:37:03,120 --> 00:37:04,190 440 Hertz. 703 00:37:04,190 --> 00:37:05,830 Vi skaber en oscillator. 704 00:37:05,830 --> 00:37:09,180 Hvis vi ønsker at indstille lydstyrken, vi forbinde noget til en GainNode, 705 00:37:09,180 --> 00:37:12,500 som vi kunne gøre med .creategain. 706 00:37:12,500 --> 00:37:14,250 Der sætter din volumen. 707 00:37:14,250 --> 00:37:17,820 Du kan videregive denne på enhver på den anden options-- godt, 708 00:37:17,820 --> 00:37:20,300 så en audiobuffer kilde node er, hvor du måske 709 00:37:20,300 --> 00:37:23,660 opbevare en MP3, som du har lagt i. 710 00:37:23,660 --> 00:37:27,670 >> Biquad filter er til filtrering, hvis du ønsker at tage alle basen ud 711 00:37:27,670 --> 00:37:29,630 af en sang, eller noget lignende. 712 00:37:29,630 --> 00:37:32,450 Gud forbyde du ønsker at tage bunden af ​​en sang. 713 00:37:32,450 --> 00:37:36,980 Og AudioDestination node er, igen, ligesom hvor vores endelige udformning er. 714 00:37:36,980 --> 00:37:39,980 Hvis du nogensinde interesseret i at se alle de forskellige muligheder, 715 00:37:39,980 --> 00:37:45,190 bare gå til fanen, og lad auto-komplette komme op. 716 00:37:45,190 --> 00:37:48,690 Og hvis du opretter, vil du se alle de forskellige ting, som du kan oprette. 717 00:37:48,690 --> 00:37:50,398 Du kan oprette dynamiske script processorer, 718 00:37:50,398 --> 00:37:52,940 Jeg ved ikke engang, hvad det er, til blanding kanal fusioner 719 00:37:52,940 --> 00:37:55,930 og kanal splittere og alt det der. 720 00:37:55,930 --> 00:37:56,430 Afkøle. 721 00:37:56,430 --> 00:37:59,560 722 00:37:59,560 --> 00:38:01,390 >> Så dette er blot en eksempel på en rørledning. 723 00:38:01,390 --> 00:38:03,580 Så vi har tre kilder kommer ind. 724 00:38:03,580 --> 00:38:06,830 Måske er disse bølgeformer, måske er disse MP3-filer. 725 00:38:06,830 --> 00:38:08,740 Man kommer gennem en filter, en anden ens 726 00:38:08,740 --> 00:38:12,404 blive forvrænget anden ens panorering venstre og højre. 727 00:38:12,404 --> 00:38:15,320 Du kan gøre alle mulige ting og de alle få blandet rundt sammen, 728 00:38:15,320 --> 00:38:18,880 og derefter kommer ud audio ved udgangen, som destination. 729 00:38:18,880 --> 00:38:22,720 Dette er et eksempel på hvad mere kompliceret Web Audio kode ser ud. 730 00:38:22,720 --> 00:38:26,720 Du skaber alle disse forskellige objekter lige 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 Nej, det gør ikke zoome ind. 733 00:38:29,120 --> 00:38:29,620 OKAY. 734 00:38:29,620 --> 00:38:31,257 >> SAM GREEN: Du gør Kontrol, Scroll-Up. 735 00:38:31,257 --> 00:38:32,590 HUGH Zabriskie: Kontrol Scroll-- 736 00:38:32,590 --> 00:38:33,000 SAM GRØN: Nej, nej. 737 00:38:33,000 --> 00:38:33,500 Kontrollere-- 738 00:38:33,500 --> 00:38:36,540 739 00:38:36,540 --> 00:38:38,140 >> HUGH Zabriskie: Åh, Kontrol, Rul? 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 OKAY. 744 00:38:42,740 --> 00:38:46,090 Jeg vil ikke gøre det. 745 00:38:46,090 --> 00:38:48,300 >> Så ja, i denne første sektion her, se dig 746 00:38:48,300 --> 00:38:52,720 Vi skaber alle disse forskellige knuder ud af kontekst. 747 00:38:52,720 --> 00:38:54,980 Vi er bare at stykke dem sammen i den anden del 748 00:38:54,980 --> 00:38:56,980 af denne funktion kaldet Connect. 749 00:38:56,980 --> 00:38:58,830 Det er en rigtig nøgle funktion i Web Lyd. 750 00:38:58,830 --> 00:39:01,930 Det betyder blot, når du har gjort noget med lyden i en knude, 751 00:39:01,930 --> 00:39:03,705 give det videre til det næste knudepunkt. 752 00:39:03,705 --> 00:39:05,830 Så vi har kilden, det forbindelse til analysatoren, 753 00:39:05,830 --> 00:39:09,140 analysatoren gør noget med det, det går til forvrængning og så videre, 754 00:39:09,140 --> 00:39:12,725 og til destinationen nederst til højre her. 755 00:39:12,725 --> 00:39:13,225 Afkøle. 756 00:39:13,225 --> 00:39:14,640 OK, så vi vil holde bevæger sig på. 757 00:39:14,640 --> 00:39:17,180 >> Den pipeline-- igen, disse er de mest almindelige rørledninger, 758 00:39:17,180 --> 00:39:21,300 så vi taler om alle disse ting som forvrængning, panorering, alle disse ting. 759 00:39:21,300 --> 00:39:24,280 Hvis du er virkelig interesseret i at bruge tingene Pro Tools, 760 00:39:24,280 --> 00:39:25,820 dem sikkert interessere dig. 761 00:39:25,820 --> 00:39:27,740 Hvis ikke, måske du bare ønsker at afspille lyden, 762 00:39:27,740 --> 00:39:29,990 eller måske du bare ønsker at indstille lydstyrken på lyden. 763 00:39:29,990 --> 00:39:35,270 Det er de to mest almindelige form af rørledninger i lydproduktion. 764 00:39:35,270 --> 00:39:38,640 >> Igen, de måder, du kan tage det ind som oscillator-- så, lad os 765 00:39:38,640 --> 00:39:42,460 gøre en demo af denne ret her. 766 00:39:42,460 --> 00:39:47,090 767 00:39:47,090 --> 00:39:52,225 Så vi kommer til at skabe en simpel lyd sammenhæng her, 768 00:39:52,225 --> 00:39:54,350 og fra det vi vil at skabe vores oscillator. 769 00:39:54,350 --> 00:39:58,620 Så det er, igen, vi er bare vil kalde Opret Oscillator. 770 00:39:58,620 --> 00:40:07,030 Vi kommer til at indstille en frekvens på at, 440 Hertz, alles favorit. 771 00:40:07,030 --> 00:40:13,290 Så vi slutte, at til destinationen point-- som er højttaleren, så 772 00:40:13,290 --> 00:40:15,750 forbindelse destination. 773 00:40:15,750 --> 00:40:21,400 Endelig har vi bare sige, start nul sekunder fra nu, og vi har lyd? 774 00:40:21,400 --> 00:40:22,400 >> [RINGING] 775 00:40:22,400 --> 00:40:24,980 >> HUGH Zabriskie: Her går vi. 776 00:40:24,980 --> 00:40:25,940 Det er bare en sinuskurve. 777 00:40:25,940 --> 00:40:26,440 OK, cool. 778 00:40:26,440 --> 00:40:28,274 Og så vil vi stoppe det. 779 00:40:28,274 --> 00:40:30,520 >> PUBLIKUM: Hvor gjorde at tilbagemeldinger fra? 780 00:40:30,520 --> 00:40:31,250 >> HUGH Zabriskie: Tilbagemeldingerne? 781 00:40:31,250 --> 00:40:32,458 Åh, sandsynligvis vore 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 gør det. 784 00:40:35,470 --> 00:40:37,261 Og faktisk, hvis jeg havde holdt det kørende, du 785 00:40:37,261 --> 00:40:39,540 kunne have frekvensen værdi som det kører, 786 00:40:39,540 --> 00:40:43,320 så det er en sjov ting at lege. 787 00:40:43,320 --> 00:40:44,930 Afkøle. 788 00:40:44,930 --> 00:40:46,600 Det er altid en dejlig en at præsentere. 789 00:40:46,600 --> 00:40:48,792 >> SAM GREEN: Vi gjorde ikke tænker over det, vi? 790 00:40:48,792 --> 00:40:50,500 HUGH Zabriskie: Ja, det er en grim en. 791 00:40:50,500 --> 00:40:53,249 Så buffer loading-- jeg vil vise en eksempel på, at der på den bitre ende. 792 00:40:53,249 --> 00:40:55,090 Det er at indlæse en MP3. 793 00:40:55,090 --> 00:40:58,880 Og mikrofon, du bruger bare en funktion kaldes Navigator.getUserMedia () 794 00:40:58,880 --> 00:41:03,240 at anmode om adgang til brugerens mikrofon til disse oplysninger. 795 00:41:03,240 --> 00:41:05,610 >> Her er filtrering, jeg vil bare holde flytte fra dette. 796 00:41:05,610 --> 00:41:08,600 Dette er temmelig højt niveau, men filtre bare tillade dig at 797 00:41:08,600 --> 00:41:16,154 >> [Bip] 798 00:41:16,154 --> 00:41:18,320 Filtrering giver dig også mulighed at skabe ting som pink 799 00:41:18,320 --> 00:41:20,050 støj, brun støj, hvid støj. 800 00:41:20,050 --> 00:41:24,330 Hvis du ønsker at oprette ren støj, som nogle mennesker elsker at rode rundt med, 801 00:41:24,330 --> 00:41:27,490 kan du bruge Web Audio filtrering til at gøre det. 802 00:41:27,490 --> 00:41:30,039 >> Lyd Panning-- så forestille hvis du skriver et spil 803 00:41:30,039 --> 00:41:32,330 og du vil have lyden til lyde som det kommer, ligesom, 804 00:41:32,330 --> 00:41:36,090 skyde hen over skærmen, du kan bruge panorering af lyden 805 00:41:36,090 --> 00:41:39,770 at skabe denne slags kegle, hvilket like-- det temmelig Mathy, 806 00:41:39,770 --> 00:41:41,850 men det er faktisk rigtig cool, hvis du får det til at fungere, 807 00:41:41,850 --> 00:41:44,500 og der er nogle gode tutorials på det jeg kan sende dig. 808 00:41:44,500 --> 00:41:46,400 Dybest set, kan du slags af at skabe lyden 809 00:41:46,400 --> 00:41:50,480 for at noget går med i en 3D måde. 810 00:41:50,480 --> 00:41:57,350 Og hvis du har en DJ interesse, kan du begynde at blande og krydser fading sange. 811 00:41:57,350 --> 00:42:01,260 >> Dette er blot nogle meget grundlæggende kode, dybest set, hvad jeg gjorde før. 812 00:42:01,260 --> 00:42:06,140 Dette indstiller lydstyrken på oscillator, så vi skaber vores oscillator 813 00:42:06,140 --> 00:42:07,380 som skaber bølgeform. 814 00:42:07,380 --> 00:42:09,940 Vi skaber vores GainNode, sætte vores frekvens, 815 00:42:09,940 --> 00:42:14,170 og tilslut derefter oscillator til GainNode, som derefter dybest set ændrer 816 00:42:14,170 --> 00:42:16,760 hvor meget signal tilladt gennem. 817 00:42:16,760 --> 00:42:20,467 Men virkelig, det er et digitalt ting, så det er mere bare-- ja. 818 00:42:20,467 --> 00:42:23,550 Det er ikke, hvad der faktisk sker, men det er hvad der sker 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 af parameteren volumen? 821 00:42:27,258 --> 00:42:28,174 HUGH Zabriskie: Beklager? 822 00:42:28,174 --> 00:42:30,360 PUBLIKUM: Er det en kvantiserede enhedsparameterblok? 823 00:42:30,360 --> 00:42:31,840 HUGH Zabriskie: Ja. 824 00:42:31,840 --> 00:42:34,620 Og det er en ting, jeg er virkelig mangelfuld på i min viden, 825 00:42:34,620 --> 00:42:38,010 hvordan forstærkningen arbejder på en digital plan. 826 00:42:38,010 --> 00:42:40,140 Jeg ved med faktiske signaler, er det dybest set 827 00:42:40,140 --> 00:42:45,120 kontrollerende hvor meget du er forstærkning af signalet. 828 00:42:45,120 --> 00:42:47,017 Så, ja. 829 00:42:47,017 --> 00:42:50,100 Jeg sender dig mere information om at, fordi jeg ville være nysgerrig faktisk 830 00:42:50,100 --> 00:42:51,099 at vide mere om det. 831 00:42:51,099 --> 00:42:54,090 Men dybest set parametrene er, den ene er fold-- 832 00:42:54,090 --> 00:42:59,690 jo højere signal-- og nul er ikke signal, eller du vil ikke høre nogen lyd. 833 00:42:59,690 --> 00:43:03,150 Vi vil springe demo tid til det, fordi Det er dybest set, hvad jeg gjorde før. 834 00:43:03,150 --> 00:43:07,630 Og igen, Context.Destination er lyden destination node. 835 00:43:07,630 --> 00:43:08,360 Awesome, OK. 836 00:43:08,360 --> 00:43:10,470 >> Så jeg har tænkt mig at gøre en hurtig to demoer. 837 00:43:10,470 --> 00:43:11,760 Hvordan gør vi til tiden? 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 Alle tiders! 841 00:43:13,630 --> 00:43:14,320 Awesome. 842 00:43:14,320 --> 00:43:19,010 >> Så den første, jeg har tænkt mig at gør, kaldes det Min yndlingssang. 843 00:43:19,010 --> 00:43:22,410 Så dette er blot en lille HTML JavaScript. 844 00:43:22,410 --> 00:43:25,510 Vi kommer til at have to knapper på siden spille min yndlingssang 845 00:43:25,510 --> 00:43:29,192 og stoppe min yndlingssang. 846 00:43:29,192 --> 00:43:30,180 Jeg vil ændre dette. 847 00:43:30,180 --> 00:43:32,110 >> PUBLIKUM: Dæk dit mikrofon. 848 00:43:32,110 --> 00:43:33,430 >> HUGH Zabriskie: Ja. 849 00:43:33,430 --> 00:43:36,300 Og jeg har lagt i her et script, der basically-- 850 00:43:36,300 --> 00:43:38,520 og det er virkelig nyttigt for ilægning en MP3, 851 00:43:38,520 --> 00:43:41,820 så dette bare gør lastning MP3'er måde hurtigere. 852 00:43:41,820 --> 00:43:44,180 Det er dybest set bare en wrapper. 853 00:43:44,180 --> 00:43:48,737 Det bare gør processen med lastning i MP3 meget hurtigere, 854 00:43:48,737 --> 00:43:51,570 ellers du bruger HTTP-anmodning, lidt ligesom hvad vi foretog 855 00:43:51,570 --> 00:43:53,950 på den aktuelle delt sæt med Server. 856 00:43:53,950 --> 00:43:55,950 Det er virkelig grimt, du ønsker ikke at gøre det. 857 00:43:55,950 --> 00:44:04,110 >> Så denne fyr, Boris små og mellemstore virksomheder, skrev en virkelig nyttigt lille værktøj kaldet BufferLoader. 858 00:44:04,110 --> 00:44:08,780 Alt du skal gøre er simpelthen give det den kontekst, du passerer det en list-- 859 00:44:08,780 --> 00:44:11,327 eller, ja, det er en liste i JavaScript? 860 00:44:11,327 --> 00:44:12,160 SAM GREEN: Et array. 861 00:44:12,160 --> 00:44:14,201 HUGH Zabriskie: Åh, det er en matrix, det er rigtigt. 862 00:44:14,201 --> 00:44:18,660 Det er en bred vifte af stier til forskellige filer. 863 00:44:18,660 --> 00:44:21,990 Og så skal du give det en funktion. 864 00:44:21,990 --> 00:44:25,530 Det er den tilbagekald vi talte om med asynkron læsning. 865 00:44:25,530 --> 00:44:28,720 Det vil blive kaldt Når filerne er indlæst. 866 00:44:28,720 --> 00:44:33,780 Og at funktion, kaldes, når filens indlæst tager en perimeter 867 00:44:33,780 --> 00:44:35,840 et array af indlæste buffere. 868 00:44:35,840 --> 00:44:37,990 Så der opstår her. 869 00:44:37,990 --> 00:44:41,180 Dybest set, BufferList er vil være en value-- 870 00:44:41,180 --> 00:44:46,380 eller det vil være en bred vifte af længde en, der har i det i indeks 871 00:44:46,380 --> 00:44:51,320 nul hele indlæst fil af MP3. 872 00:44:51,320 --> 00:44:53,320 Så hvad jeg gør, når jeg er færdig læsning er, jeg simpelthen 873 00:44:53,320 --> 00:44:57,430 skabe en buffer kilden, og som er en audiobuffer source node. 874 00:44:57,430 --> 00:45:03,410 Det næste skridt er jeg indlæse i source.buffer som den fulde lastet buffer 875 00:45:03,410 --> 00:45:06,740 fra BufferList-- Det er en masse buffers-- 876 00:45:06,740 --> 00:45:10,255 og så du tilslutter den lyd buffer til destinationen. 877 00:45:10,255 --> 00:45:12,380 Så hvad det kommer til at gøre er simpelthen sætte MP3 878 00:45:12,380 --> 00:45:15,260 lige igennem til udgangen, og start med det samme 879 00:45:15,260 --> 00:45:18,010 efter at få denne indkaldelse. 880 00:45:18,010 --> 00:45:21,660 >> Cool, så lad os se dette ske i aktion. 881 00:45:21,660 --> 00:45:24,490 Min [uhørligt] her, lad os se. 882 00:45:24,490 --> 00:45:26,430 Så jeg vil blot starte en grundlæggende server. 883 00:45:26,430 --> 00:45:28,660 Det er noget, du skal gøre, hvis du er 884 00:45:28,660 --> 00:45:32,490 gør anmodninger om indlæsning af filer. 885 00:45:32,490 --> 00:45:34,140 Jeg har tænkt mig at starte en grundlæggende server. 886 00:45:34,140 --> 00:45:38,200 Dette er dybest set hele din Pset lige nu i en linje, 887 00:45:38,200 --> 00:45:43,930 men det er lige begyndt en server på port 80/80. 888 00:45:43,930 --> 00:45:47,300 Så vi går over her, vi kommer til at indlæse 80/80, 889 00:45:47,300 --> 00:45:49,110 vi kommer til at gå til Min yndlingssang. 890 00:45:49,110 --> 00:45:51,660 Så hvis jeg ramte "Play min yndlingssang "lige nu, 891 00:45:51,660 --> 00:45:53,964 det kommer til at indlæse min yndlingssang og spille det-- 892 00:45:53,964 --> 00:45:55,880 [MUSIC - Eagles, "Livet i FAST  LANE "] 893 00:45:55,880 --> 00:46:00,490 --which sker for at være "Livet i Fast Lane "af The Eagles. 894 00:46:00,490 --> 00:46:06,346 Nu, jeg kunne ramme "Stop min yndlingssang "og afspille den. 895 00:46:06,346 --> 00:46:09,160 >> [MUSIC - Eagles, "Livet i FAST  LANE "] 896 00:46:09,160 --> 00:46:18,340 >> Og hvis jeg går over til trøste, fordi Jeg brugte en global variabel herovre 897 00:46:18,340 --> 00:46:23,390 at holde styr på denne værdi, er det faktisk vil nu blive anerkendt i konsollen. 898 00:46:23,390 --> 00:46:25,160 Så det automatisk skaber for mig. 899 00:46:25,160 --> 00:46:29,991 Så det er, hvad der spiller lige nu, 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 Tja, ved du hvad? 903 00:46:35,860 --> 00:46:39,760 Bare så du fyre har hørt dette song-- du måske genkende denne sang. 904 00:46:39,760 --> 00:46:41,801 >> [MUSIC - Rick Astley, "ALDRIG ville give  DU OP "] 905 00:46:41,801 --> 00:46:42,299 906 00:46:42,299 --> 00:46:44,215 [MUSIC - Eagles, "Livet i FAST  LANE "] 907 00:46:44,215 --> 00:46:46,195 Vi har nu alle blevet Rickrolled. 908 00:46:46,195 --> 00:46:50,155 OK, store, bevæger sig på. 909 00:46:50,155 --> 00:46:51,160 Afkøle. 910 00:46:51,160 --> 00:46:54,554 Så det er dybest set et eksempel på bare hvordan du kan indlæse en MP3 file-- 911 00:46:54,554 --> 00:46:56,470 [MUSIC - Eagles, "Livet i FAST  LANE "] 912 00:46:56,470 --> 00:46:59,590 DET-- spille det, og stoppe og starte den. 913 00:46:59,590 --> 00:47:03,008 Jeg kunne have gjort meget mere [uhørligt] 914 00:47:03,008 --> 00:47:07,570 >> Den sidste jeg vil gøre er, Jeg vil vise dig en [uhørligt]. 915 00:47:07,570 --> 00:47:18,070 >> [Musik spiller] 916 00:47:18,070 --> 00:47:21,800 >> Det er ligesom, ogg.wave.mp3. 917 00:47:21,800 --> 00:47:26,450 Jeg tror, ​​hvis jeg husker rigtigt, Jeg har kørt ind i nogle problemer med .m4a, 918 00:47:26,450 --> 00:47:27,721 men jeg er ikke sikker på om 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 - Rick Astley, "ALDRIG ville give  DU OP "] 922 00:47:30,971 --> 00:47:35,930 923 00:47:35,930 --> 00:47:36,500 >> OK, stor. 924 00:47:36,500 --> 00:47:37,625 Jeg skulle ikke have sagt det. 925 00:47:37,625 --> 00:47:40,570 Anyway, hej. 926 00:47:40,570 --> 00:47:43,430 927 00:47:43,430 --> 00:47:45,490 Så vi har denne åbne. 928 00:47:45,490 --> 00:47:52,320 Så nu alt jeg gør er, jeg dybest set skabt en grundlæggende syntaks for at skabe musik. 929 00:47:52,320 --> 00:47:57,610 Så hvis jeg gør noget lignende, tilføjer g4 den 1. 2, hvad det betyder, er, at, 930 00:47:57,610 --> 00:48:00,950 tilføje klaver note, G4, som er det fjerde G 931 00:48:00,950 --> 00:48:02,680 op på klaveret fra bunden. 932 00:48:02,680 --> 00:48:05,930 Så dette er en slags MIDI taler, så for dem, der er musik baseret, 933 00:48:05,930 --> 00:48:07,860 dette er blot MIDI noter. 934 00:48:07,860 --> 00:48:10,090 >> PUBLIKUM: Det er G for Middle C, ikke? 935 00:48:10,090 --> 00:48:11,840 >> HUGH Zabriskie: Dette er G over Mellemøsten C, det er rigtigt. 936 00:48:11,840 --> 00:48:12,470 >> PUBLIKUM: Over Mellemøsten C. 937 00:48:12,470 --> 00:48:13,345 >> HUGH Zabriskie: Ja. 938 00:48:13,345 --> 00:48:14,340 Faktisk, ja. 939 00:48:14,340 --> 00:48:16,131 Jeg tror jeg faktisk gjort det ene [uhørligt], 940 00:48:16,131 --> 00:48:18,860 så dette kan være en oktav over det. 941 00:48:18,860 --> 00:48:20,070 Så lad os se. 942 00:48:20,070 --> 00:48:21,152 Hvis jeg ramte Play-- 943 00:48:21,152 --> 00:48:22,110 [GENTAGET PIANO BEMÆRK] 944 00:48:22,110 --> 00:48:23,200 --we're kommer til at høre det. 945 00:48:23,200 --> 00:48:25,700 Ideen er, at det fungerer ligesom en kommandolinje ville, 946 00:48:25,700 --> 00:48:27,510 så hvis jeg går op og ned på mit tastatur, du 947 00:48:27,510 --> 00:48:31,550 kan gå tilbage til forrige kommandoer, som er temmelig nyttig. 948 00:48:31,550 --> 00:48:35,136 Og nedenfor er min liste af spor, der alle kører på loop. 949 00:48:35,136 --> 00:48:38,260 >> PUBLIKUM: Du blev under forudsætning af 88-tangenters keyboard på det, ikke? 950 00:48:38,260 --> 00:48:41,051 >> HUGH Zabriskie: Spørgsmålet var, jeg antager en 88-nøgle tastatur, 951 00:48:41,051 --> 00:48:41,990 og ja, jeg er. 952 00:48:41,990 --> 00:48:45,030 Hvad jeg gjorde, er jeg dybest set tog 88 prøver 953 00:48:45,030 --> 00:48:46,970 af klaver, en for hver note. 954 00:48:46,970 --> 00:48:49,180 Og så hver gang du høre en note fra nu af, 955 00:48:49,180 --> 00:48:57,550 der er faktisk en løkke, der ser like-- dette er at få spillet på loop, 956 00:48:57,550 --> 00:49:00,120 så for hver eneste tone, dette kører. 957 00:49:00,120 --> 00:49:02,860 Hvad sker er, jeg skabe en buffer igen, 958 00:49:02,860 --> 00:49:06,010 Jeg opretter en gevinst node for at indstille lydstyrken. 959 00:49:06,010 --> 00:49:08,240 Dette blot en virkelig kompliceret måde at sige jeg 960 00:49:08,240 --> 00:49:10,550 gemme bufferen i en source.buffer. 961 00:49:10,550 --> 00:49:13,160 Jeg giver det gevinst, jeg slutte den til gevinsten, 962 00:49:13,160 --> 00:49:15,576 gevinsten er forbundet til output, og så jeg spiller det. 963 00:49:15,576 --> 00:49:20,735 Så det er slags processen tage i en buffer kilde. 964 00:49:20,735 --> 00:49:24,820 >> PUBLIKUM: Kan du faktisk tage det tør lyd og gøre det vådt [uhørligt]? 965 00:49:24,820 --> 00:49:26,260 >> HUGH Zabriskie: Du kan, ja. 966 00:49:26,260 --> 00:49:29,260 Der er re-verbum, er der forsinkelse, forvrængning. 967 00:49:29,260 --> 00:49:33,260 Du kan stort set sætte noget i mellem i denne sandwich of-- godt, 968 00:49:33,260 --> 00:49:37,660 pipeline er en bedre metafor, men du kan tilføje noget i det. 969 00:49:37,660 --> 00:49:38,200 Afkøle. 970 00:49:38,200 --> 00:49:40,280 >> Så jeg vil slutte demoen her for at give dig en følelse 971 00:49:40,280 --> 00:49:46,390 for blot det store antal gange, du kan køre denne funktion på én gang. 972 00:49:46,390 --> 00:49:49,280 Så jeg har tænkt mig at fjerne denne. 973 00:49:49,280 --> 00:49:59,110 Jeg har tænkt mig at lave en generator at-- dybest set, hvad does-- det er virkelig 974 00:49:59,110 --> 00:50:04,220 form for en kompliceret syntax-- men det er kommer til at generere noter på flue, 975 00:50:04,220 --> 00:50:06,601 og bare begynde at spille dem, som det vurderer dem. 976 00:50:06,601 --> 00:50:07,392 [Indskyde PIANO] 977 00:50:07,392 --> 00:50:10,990 978 00:50:10,990 --> 00:50:12,817 >> Så kan vi bare lave en lille musik her. 979 00:50:12,817 --> 00:50:13,608 [Indskyde PIANO] 980 00:50:13,608 --> 00:50:39,570 981 00:50:39,570 --> 00:50:41,470 >> Hvad denne kommando så gør, for eksempel, er 982 00:50:41,470 --> 00:50:46,910 det tager disse tre noter for klaver og derefter sætter dem på B3. 983 00:50:46,910 --> 00:50:48,660 Denne syntaks kan gøre lidt mere mening 984 00:50:48,660 --> 00:50:50,590 til dem, der har en musik baggrund her. 985 00:50:50,590 --> 00:50:55,180 986 00:50:55,180 --> 00:50:56,551 >> Jeg kan tilføje et kick tromme. 987 00:50:56,551 --> 00:50:57,050 Jeg kan-- 988 00:50:57,050 --> 00:50:58,048 >> [Indskyde INSTRUMENTER] 989 00:50:58,048 --> 00:50:59,256 >> --just lege 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 [Indskyde INSTRUMENTER] 993 00:51:14,515 --> 00:51:15,513 At man er lidt mere irriterende. 994 00:51:15,513 --> 00:51:16,554 [Indskyde INSTRUMENTER] 995 00:51:16,554 --> 00:51:26,491 996 00:51:26,491 --> 00:51:30,981 >> Så det tilfældigt tilføjer en tør bækken på hver 16. Bemærk, med en 16% 997 00:51:30,981 --> 00:51:31,481 [Uhørligt]. 998 00:51:31,481 --> 00:51:32,522 >> [Indskyde INSTRUMENTER] 999 00:51:32,522 --> 00:51:40,962 1000 00:51:40,962 --> 00:51:50,400 >> Ja, så den måde, denne works-- det er altid i 4: 4. 1001 00:51:50,400 --> 00:51:51,441 [Indskyde INSTRUMENTER] 1002 00:51:51,441 --> 00:52:06,910 1003 00:52:06,910 --> 00:52:10,902 >> Ja, så de fire kvartaler, og 16/8. 1004 00:52:10,902 --> 00:52:14,851 1005 00:52:14,851 --> 00:52:15,892 [Indskyde INSTRUMENTER] 1006 00:52:15,892 --> 00:52:27,970 1007 00:52:27,970 --> 00:52:33,780 >> Så i gennemsnit, får du 60% hits i det 16. noter. 1008 00:52:33,780 --> 00:52:35,990 >> Anyways, det var bare form for at vise 1009 00:52:35,990 --> 00:52:39,780 nogle af de ting, du kunne bygge med Web Audio API. 1010 00:52:39,780 --> 00:52:43,840 Det er virkelig kraftfuld, det er virkelig hurtig, og du kan lave en masse fede ting 1011 00:52:43,840 --> 00:52:44,340 med den. 1012 00:52:44,340 --> 00:52:51,260 Så igen, spørgsmål du har, mail myself-- Hugh-- eller Sam, 1013 00:52:51,260 --> 00:52:55,869 og ærligt, Google har et væld af gode ressourcer. 1014 00:52:55,869 --> 00:52:56,660 Eventuelle sidste spørgsmål? 1015 00:52:56,660 --> 00:52:57,970 Ja. 1016 00:52:57,970 --> 00:53:00,790 >> PUBLIKUM: Så du kan få adgang til den indbyggede mikrofon. 1017 00:53:00,790 --> 00:53:03,089 Hvad hvis du ønsker at bruge en bedre mikrofon? 1018 00:53:03,089 --> 00:53:05,380 HUGH Zabriskie: Hvis du ville at bruge en bedre mikrofon? 1019 00:53:05,380 --> 00:53:11,320 Så igen, det er en del af abstraktion mellem Chrome 1020 00:53:11,320 --> 00:53:12,950 og resten af ​​din computer. 1021 00:53:12,950 --> 00:53:18,950 Medmindre det er tilgængelige via et API, som Web MIDI API, 1022 00:53:18,950 --> 00:53:22,030 du sandsynligvis kunne finde nogle hacks, men generelt ikke som muligt. 1023 00:53:22,030 --> 00:53:25,300 >> SAM GREEN: Du kan also-- alle Chrome kender 1024 00:53:25,300 --> 00:53:28,820 er, hvad din standard mikrofon er, og det får adgang til det. 1025 00:53:28,820 --> 00:53:33,410 Så hvis du havde en mikrofon du kunne indstillet som computerens standard mikrofon, 1026 00:53:33,410 --> 00:53:35,990 du kunne få adgang til det på den måde og det ville sandsynligvis arbejde. 1027 00:53:35,990 --> 00:53:37,490 HUGH Zabriskie: Det er en god pointe. 1028 00:53:37,490 --> 00:53:39,656 Jeg har aldrig prøvet det, men du måske være i stand til at slags 1029 00:53:39,656 --> 00:53:45,700 of-- hvis du omdirigere input højttaler, du måske være i stand til at gøre det, ja. 1030 00:53:45,700 --> 00:53:48,360 >> Eventuelle sidste spørgsmål? 1031 00:53:48,360 --> 00:53:49,340 Afkøle. 1032 00:53:49,340 --> 00:53:51,680 Nå tak gutter så meget for at se. 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 det er CS50. 1036 00:53:55,410 --> 00:53:56,767