1 00:00:00,000 --> 00:00:05,900 2 00:00:05,900 --> 00:00:07,170 >> SAM GREEN: Cześć wszystkim. 3 00:00:07,170 --> 00:00:08,640 Zapraszamy do naszego seminarium. 4 00:00:08,640 --> 00:00:10,009 Mam na imię Sam. 5 00:00:10,009 --> 00:00:11,050 HUGH Zabriskie: Jestem Hugh. 6 00:00:11,050 --> 00:00:17,420 SAM GREEN: I będziemy rozmawiać dziś o JavaScript i Web API audio. 7 00:00:17,420 --> 00:00:21,180 Wystarczy, aby zacząć, to jest zarys naszego porządku obrad seminarium. 8 00:00:21,180 --> 00:00:25,350 Mamy zamiar zacząć od rozmowy o Dlatego powinny być zainteresowany w internecie 9 00:00:25,350 --> 00:00:30,130 Audio API, dlaczego JavaScript język należy do niego, 10 00:00:30,130 --> 00:00:32,619 a następnie rozmawiać o JavaScript essentials-- tak jak, 11 00:00:32,619 --> 00:00:34,800 przejść przez niektóre Podstawy języka, 12 00:00:34,800 --> 00:00:37,290 a następnie rozmawiać o API audio na wysokim poziomie. 13 00:00:37,290 --> 00:00:41,140 Następnie, Hugh będą rozmawiać o niektórych z etapów produkcji audio 14 00:00:41,140 --> 00:00:45,509 a następnie demo to niesamowite sekwencera Projekt zbudował i pokazać kod. 15 00:00:45,509 --> 00:00:48,050 A potem będziemy mieć czas na pytania na końcu dla ludzi 16 00:00:48,050 --> 00:00:49,593 którzy tu mieszkają. 17 00:00:49,593 --> 00:00:50,540 >> HUGH Zabriskie: Spoko. 18 00:00:50,540 --> 00:00:50,990 >> SAM GREEN: Spoko. 19 00:00:50,990 --> 00:00:51,383 >> HUGH Zabriskie: Spoko. 20 00:00:51,383 --> 00:00:52,170 Ja kopię zapasową. 21 00:00:52,170 --> 00:00:54,960 >> SAM GREEN: Tak, pierwsze rzeczy pierwsze. 22 00:00:54,960 --> 00:00:57,840 Tak więc jednym z wielkich rzeczy o Web Audio API 23 00:00:57,840 --> 00:01:00,480 jest to, że nie ma zestawu wymagane w górę. 24 00:01:00,480 --> 00:01:04,230 Wchodzi on wbudowany w większość nowoczesnych przeglądarek, 25 00:01:04,230 --> 00:01:08,630 w tym Chrome, EDGE, całość grono wiele innych, wszystkie te 26 00:01:08,630 --> 00:01:12,650 że duże fragmenty osób korzysta dziś. 27 00:01:12,650 --> 00:01:14,807 Więc nie ma się ustawić, Oprócz dopiero się 28 00:01:14,807 --> 00:01:16,890 serwer WWW będzie dla aby zacząć pracę 29 00:01:16,890 --> 00:01:18,420 nad projektem, co jest dobre. 30 00:01:18,420 --> 00:01:21,500 31 00:01:21,500 --> 00:01:24,190 >> Zalecamy dość w dużym stopniu, że w przyszłości 32 00:01:24,190 --> 00:01:26,530 za pomocą Chrome Tworzenie stron internetowych JavaScript, 33 00:01:26,530 --> 00:01:30,260 tylko dlatego, że jej twórca narzędzia są bardzo silne. 34 00:01:30,260 --> 00:01:33,220 Jako przykład tylko to, co mamy na myśli, mówiąc otworzyć swój JavaScript 35 00:01:33,220 --> 00:01:38,600 console-- jeśli pójdziesz do Chrome i spojrzeć na dowolnej stronie internetowej, 36 00:01:38,600 --> 00:01:43,897 i kliknij lewym przyciskiem myszy Sprawdź, Element, a następnie 37 00:01:43,897 --> 00:01:46,730 udać się do tego małego rozwijanej tu i kliknij na konsoli, 38 00:01:46,730 --> 00:01:50,660 zobaczysz, co otwiera wygląda trochę jak w wierszu polecenia, które ci 39 00:01:50,660 --> 00:01:53,720 można zobaczyć na komputerze Mac lub na ID. 40 00:01:53,720 --> 00:01:59,260 I tak po prostu, możemy Typ polecenia tutaj, jak pogodnie, 41 00:01:59,260 --> 00:02:01,350 i inne komendy, takie jak to. 42 00:02:01,350 --> 00:02:04,267 Możemy tworzyć zmienne, jak Zobaczymy później w JavaScript. 43 00:02:04,267 --> 00:02:07,100 A więc wszystko, co możemy zrobić w JavaScript, możemy zrobić z konsoli, 44 00:02:07,100 --> 00:02:11,430 i to jest bardzo wygodnym sposobem rozpocząć odtwarzanie z API 45 00:02:11,430 --> 00:02:15,760 i przyzwyczajenie się JavaScript tuż nietoperza. 46 00:02:15,760 --> 00:02:18,290 Nie wymaga konfiguracji, co jest naprawdę miłe. 47 00:02:18,290 --> 00:02:18,790 Fajne. 48 00:02:18,790 --> 00:02:22,064 49 00:02:22,064 --> 00:02:22,880 Niesamowite. 50 00:02:22,880 --> 00:02:24,780 >> Więc po prostu jeszcze jedno do dodania. 51 00:02:24,780 --> 00:02:27,780 Jeśli masz jakiekolwiek questions-- istnieją wielu z was, którzy nie są tu mieszkać, 52 00:02:27,780 --> 00:02:31,232 czuje swobodnie email us-- te są nasze adresy e-mail. 53 00:02:31,232 --> 00:02:33,190 Jeśli masz pytania nie chcesz, aby zwrócić się do nas, 54 00:02:33,190 --> 00:02:36,160 jak, oh mam błąd w moim kodu, czy coś 55 00:02:36,160 --> 00:02:39,270 to trochę bardziej szczegółowe, Może google to pierwsza. 56 00:02:39,270 --> 00:02:42,340 Istnieje wiele wspaniałych zasobów o Web Audio API tam. 57 00:02:42,340 --> 00:02:44,089 To naprawdę dobrze udokumentowane i to jest 58 00:02:44,089 --> 00:02:47,194 używany przez ludzi w tonę przemysł, i ludzi, którzy są po prostu 59 00:02:47,194 --> 00:02:48,610 budowanie zabawnych rzeczy dla siebie. 60 00:02:48,610 --> 00:02:51,306 Tak więc powinno być znacznie zasobów tam. 61 00:02:51,306 --> 00:02:53,040 Niesamowite. 62 00:02:53,040 --> 00:02:56,100 >> Fajne, więc dlaczego Web Audio API? 63 00:02:56,100 --> 00:02:59,840 Ten schemat jest trochę od ewolucji drogi 64 00:02:59,840 --> 00:03:04,100 Dźwięk w internecie wzrosła w czasie. 65 00:03:04,100 --> 00:03:13,080 Bgsound było jak oryginalnego tagu HTML Internet Explorer wykorzystane do wsparcia. 66 00:03:13,080 --> 00:03:16,790 To pozwoliło tylko na dość podstawowych dźwięków, funkcjonalność nie była bardzo mocna, 67 00:03:16,790 --> 00:03:19,380 i nie można było zrobić skomplikowane sekwencjonowanie, 68 00:03:19,380 --> 00:03:21,890 lub kontroli, gdy dźwięk zaczął i zatrzymał się bardzo solidnie. 69 00:03:21,890 --> 00:03:23,930 Tak więc, nie było szczególnie dobrze rozwinięta. 70 00:03:23,930 --> 00:03:27,470 Następnie, po tym, Flash przyszedł along-- które, 71 00:03:27,470 --> 00:03:31,712 Jestem pewien, że chłopaki są znane z Flash-- może nie, jak to działa, 72 00:03:31,712 --> 00:03:32,920 ale ty z pewnością widział. 73 00:03:32,920 --> 00:03:35,586 Musisz uaktualnić Flash Plug-in, wszystkie tego rodzaju rzeczy, 74 00:03:35,586 --> 00:03:40,110 i że na pewno rozszerzono zakres funkcjonalności, co było dostępne. 75 00:03:40,110 --> 00:03:45,370 Ale co użytkownikowi zainstalować plug-in jest zdecydowanie 76 00:03:45,370 --> 00:03:48,480 Wadą w tym Flash w aplikacji, prawda? 77 00:03:48,480 --> 00:03:52,410 Bo to jesteś na utrzymaniu użytkownik będzie i znalezienie tej wtyczki, 78 00:03:52,410 --> 00:03:54,660 i prawdopodobnie jest włączony się przez ten dodatkowy krok 79 00:03:54,660 --> 00:03:56,640 muszą podjąć, aby korzystać z aplikacji. 80 00:03:56,640 --> 00:04:01,270 A potem może być aktualizacja że będzie złamać całą aplikację, 81 00:04:01,270 --> 00:04:03,880 i kończy się koszmar dla dewelopera, też. 82 00:04:03,880 --> 00:04:06,230 Więc to była barykada. 83 00:04:06,230 --> 00:04:10,480 >> A potem, że przyszedł, Audio tag HTML, który 84 00:04:10,480 --> 00:04:16,579 Jest to funkcja bardziej nowoczesne HTML-- które pewnością pozwoliło na dużo więcej rzeczy, 85 00:04:16,579 --> 00:04:20,050 ale nawet rzeczy można zrobić Było trochę ograniczone tylko 86 00:04:20,050 --> 00:04:22,730 wskutek rzeczy że HTML był w stanie. 87 00:04:22,730 --> 00:04:26,060 Tak więc, gdy JavaScript API Web API audio, 88 00:04:26,060 --> 00:04:29,290 stała się standardem praktyki w różnych przeglądarkach, 89 00:04:29,290 --> 00:04:32,490 które naprawdę rozszerzyła zestaw możliwości dla deweloperów 90 00:04:32,490 --> 00:04:36,590 naprawdę dostać się do budynku fajne rzeczy w internecie. 91 00:04:36,590 --> 00:04:39,220 Przez długi czas nie było były naprawdę solidne narzędzia 92 00:04:39,220 --> 00:04:44,360 dla rodzimych aplikacji audio, like-- każdy wie, GarageBand, 93 00:04:44,360 --> 00:04:48,360 i to oczywiście jest więcej profesjonalnych aplikacji audio mieszania, 94 00:04:48,360 --> 00:04:49,640 i tego typu rzeczy. 95 00:04:49,640 --> 00:04:52,690 Ale nie było naprawdę dobry Cloud-- nie 96 00:04:52,690 --> 00:04:55,811 Chmura, tak, myślę, Cloud-- platforma internetowa 97 00:04:55,811 --> 00:04:58,310 które umożliwiają programistom tworzenie aplikacji dla ludzi 98 00:04:58,310 --> 00:05:00,570 zrobić mieszanie audio. 99 00:05:00,570 --> 00:05:03,960 I jak on pokazuje, później Web Audio API 100 00:05:03,960 --> 00:05:07,470 pozwala na bardzo wydajne rzeczy po prostu się stało naprawdę, 101 00:05:07,470 --> 00:05:09,597 co jest całkiem fajne. 102 00:05:09,597 --> 00:05:12,680 Więc to jest instrukcja do dlaczego powinny oglądać resztę seminarium, 103 00:05:12,680 --> 00:05:14,350 gruntownie. 104 00:05:14,350 --> 00:05:17,880 >> A teraz mam zamiar mówić o niektóre JavaScript-- tylko podstawowe elementy 105 00:05:17,880 --> 00:05:20,240 języka, tak, że możemy być na tej samej stronie 106 00:05:20,240 --> 00:05:22,470 kiedy mówimy o API trochę później. 107 00:05:22,470 --> 00:05:23,260 Fajne. 108 00:05:23,260 --> 00:05:26,192 >> Tak więc, jest to podsumowanie. 109 00:05:26,192 --> 00:05:27,150 Zapomniałem to było tutaj. 110 00:05:27,150 --> 00:05:27,510 Tak. 111 00:05:27,510 --> 00:05:27,870 >> HUGH Zabriskie: Jest dwa slajdy tutaj. 112 00:05:27,870 --> 00:05:30,245 >> SAM GREEN: To jest podsumowanie niektóre z tych ograniczeń 113 00:05:30,245 --> 00:05:35,220 innych obowiązujących, starych metod. 114 00:05:35,220 --> 00:05:37,828 I to teraz, mamy te rzeczy. 115 00:05:37,828 --> 00:05:40,011 Fajne. 116 00:05:40,011 --> 00:05:40,510 Niesamowite. 117 00:05:40,510 --> 00:05:43,200 >> Tak, Essentials JavaScript. 118 00:05:43,200 --> 00:05:47,230 Na początek, nie ma dość istotna różnica 119 00:05:47,230 --> 00:05:49,940 w porównaniu JavaScript w sposób język C, w drodze 120 00:05:49,940 --> 00:05:52,050 że zmienne są tworzone. 121 00:05:52,050 --> 00:05:55,634 Więc w C, jesteśmy przyzwyczajeni do wpisać nasze zmienne, prawda? 122 00:05:55,634 --> 00:05:57,800 I nie mam na myśli typu jak wpisz je w polu, to znaczy typ 123 00:05:57,800 --> 00:06:01,900 jak przypisać im type-- znaczenia jak int, float, char. 124 00:06:01,900 --> 00:06:05,210 W C, byliśmy naprawdę wykorzystywane do konieczności tworzenia zmienną 125 00:06:05,210 --> 00:06:09,690 a następnie trzymać się tego typu dla Cały czas, który możemy użyć tej zmiennej. 126 00:06:09,690 --> 00:06:13,990 I to nie jest koniecznie, co gorsza, ale to chyba trudniejszy w obsłudze. 127 00:06:13,990 --> 00:06:16,190 Jedną z ciekawych funkcji z JavaScript jest 128 00:06:16,190 --> 00:06:19,740 że zmienne są co nazywa "dynamicznie wpisane", który 129 00:06:19,740 --> 00:06:22,500 Oznacza to, że mogę stworzyć zmienna o tej składni, 130 00:06:22,500 --> 00:06:25,800 varX równy 5, na przykład. 131 00:06:25,800 --> 00:06:27,790 Że początkowo tworzy liczbą całkowitą zmienna-- 132 00:06:27,790 --> 00:06:29,870 tuż pod kaptur somewhere-- ale 133 00:06:29,870 --> 00:06:33,040 może zmienić tej zmiennej odnosi się do łańcucha 134 00:06:33,040 --> 00:06:35,820 nie robiąc nic, jak utworzenie nowej zmiennej. 135 00:06:35,820 --> 00:06:37,880 I nie trzeba się martwić o zmiany typu. 136 00:06:37,880 --> 00:06:45,440 JavaScript wie, że typ użytkownika zmianie, i że dzieje się dynamicznie. 137 00:06:45,440 --> 00:06:48,510 >> Tak, istnieją korzyści i wady, które, 138 00:06:48,510 --> 00:06:51,250 jak każdy, kto pracował w JavaScript na chwilę może wiedzieć. 139 00:06:51,250 --> 00:06:53,600 Są chwile, kiedy Państwo może przypadkowo 140 00:06:53,600 --> 00:06:57,720 zmienić typ zmiennej i Nie dotykać, że zmiana typu, 141 00:06:57,720 --> 00:07:01,120 a następnie JavaScript może crash-- lub wyjątek 142 00:07:01,120 --> 00:07:06,070 zostać wyrzucony, ponieważ będziesz mieć niewłaściwy typ, kiedy można się spodziewać jednego typu. 143 00:07:06,070 --> 00:07:07,040 Fajne. 144 00:07:07,040 --> 00:07:11,470 >> Tak, scoping-- które jest niczym, jeśli Pamiętam wczesne tygodnie w toku, 145 00:07:11,470 --> 00:07:15,420 odnosi się do sposobu widocznego zmiennej jest iw jakim obszarze kodu. 146 00:07:15,420 --> 00:07:18,400 Wszystko to wygląda bardzo podobnie do jej wyglądu w C. 147 00:07:18,400 --> 00:07:24,755 Tak więc zmienne są zakrojony na ogół w ramach nawiasy, w zależności, 148 00:07:24,755 --> 00:07:27,005 a następnie są też Zmienne o zasięgu globalnym, które 149 00:07:27,005 --> 00:07:29,171 are-- jeśli piszesz zmienną poza funkcją, 150 00:07:29,171 --> 00:07:31,790 będzie on widoczny w całym tekście. 151 00:07:31,790 --> 00:07:35,840 >> Jedną z różnic pomiędzy JavaScript i C, w szczególności, 152 00:07:35,840 --> 00:07:40,280 jest to, że jeśli deklarują światowy zmienną w dowolnym miejscu w pliku tekstowym 153 00:07:40,280 --> 00:07:43,324 jest to widoczne w dowolnej funkcji w tym pliku tekstowym. 154 00:07:43,324 --> 00:07:44,240 Zgadza się, prawda? 155 00:07:44,240 --> 00:07:46,330 >> HUGH Zabriskie: Tak. 156 00:07:46,330 --> 00:07:49,120 >> SAM GREEN: Więc to też trochę nieco ostry w stosunku do C, 157 00:07:49,120 --> 00:07:52,660 gdzie zawsze musiał mieć nasze Powyższe definicje zmiennych miejscach 158 00:07:52,660 --> 00:07:53,770 zostały one użyte. 159 00:07:53,770 --> 00:07:57,957 To nie jest zasada, że ​​egzekwowane więcej, tak, trochę inaczej. 160 00:07:57,957 --> 00:08:00,540 I znowu po prostu jeszcze raz podkreślić, Globalny kontra lokalnego variables-- 161 00:08:00,540 --> 00:08:03,457 bardzo podobny do C. Można mieć dwie zmienne o tej samej nazwie, 162 00:08:03,457 --> 00:08:06,540 i mają jeden z ich nazwami być zasłonięta przez zmienną lokalną, jeżeli jeden z nich 163 00:08:06,540 --> 00:08:07,546 był globalny. 164 00:08:07,546 --> 00:08:09,420 Tak więc, podobnie rodzaj Problemy, że niektórzy z was 165 00:08:09,420 --> 00:08:11,920 może biegać w niektórych Twojego problemu ustawia tak daleko. 166 00:08:11,920 --> 00:08:14,450 Fajne, więc to jest zmienne. 167 00:08:14,450 --> 00:08:20,310 >> Przepływ sterowania, czyli jak, jeśli-else-- logiczne stuff-- i pętle. 168 00:08:20,310 --> 00:08:24,510 Więc na początek, to jest to, co if-else Oświadczenia wygląda w JavaScript. 169 00:08:24,510 --> 00:08:29,750 Umieszczenie różnych rzeczy na liniach nie ma znaczenia. 170 00:08:29,750 --> 00:08:34,409 To tylko jeden z konwencji za sposób kodu struktury możemy. 171 00:08:34,409 --> 00:08:38,634 Podobnie jak w C, mamy "jeśli", oświadczenie nawias. 172 00:08:38,634 --> 00:08:40,840 173 00:08:40,840 --> 00:08:42,090 To nie jest to, co chciałem zrobić. 174 00:08:42,090 --> 00:08:44,860 175 00:08:44,860 --> 00:08:45,550 Znowu to zrobiłem. 176 00:08:45,550 --> 00:08:46,841 >> HUGH Zabriskie: Starając się wyjść? 177 00:08:46,841 --> 00:08:49,770 SAM GREEN: Nie, jestem po prostu staramy się powiększać. 178 00:08:49,770 --> 00:08:50,660 To nie ma znaczenia. 179 00:08:50,660 --> 00:08:54,730 180 00:08:54,730 --> 00:08:59,370 >> Tak, mamy "if" i mamy stan, w jej wnętrzu 181 00:08:59,370 --> 00:09:03,130 że wartość true lub false, i określa czy 182 00:09:03,130 --> 00:09:04,510 wchodzimy że blok kodu. 183 00:09:04,510 --> 00:09:09,860 I podobnie, mamy jeszcze-wtedy i innego, jak jesteśmy przyzwyczajeni w C. 184 00:09:09,860 --> 00:09:14,010 >> Również powinno być całkiem wygodne tuż nietoperza z pętli, 185 00:09:14,010 --> 00:09:16,440 bo też spojrzeć dużo jak C wygląda. 186 00:09:16,440 --> 00:09:19,600 Ale można zauważyć jeszcze, że mają, zamiast int inicjowania, 187 00:09:19,600 --> 00:09:22,570 mamy inicjacji var. 188 00:09:22,570 --> 00:09:24,650 I myślę, że masz uważać, aby 189 00:09:24,650 --> 00:09:28,460 Pamiętaj, aby nie zmieniać wartości od I z int na ciąg, 190 00:09:28,460 --> 00:09:31,780 na przykład dlatego, że będzie powodować dziwne zachowanie nie może 191 00:09:31,780 --> 00:09:32,280 oczekiwać. 192 00:09:32,280 --> 00:09:35,750 Ale to powinno wyglądać dość znajomo, jak również. 193 00:09:35,750 --> 00:09:39,460 >> Tak to jest, gdy wszystko zaczyna dostać trochę szalony w JavaScript 194 00:09:39,460 --> 00:09:44,920 dla kogoś, kto będzie od A tło C. Istnieją funkcje 195 00:09:44,920 --> 00:09:48,070 w JavaScript, a nie tylko jeden sposób, zadeklarować funkcję, która wygląda 196 00:09:48,070 --> 00:09:50,361 rodzaj podobny do C, potem jeszcze jeden, który 197 00:09:50,361 --> 00:09:52,450 wygląda trochę inaczej. 198 00:09:52,450 --> 00:09:54,930 >> W pierwszej wersji, które widzimy tutaj, 199 00:09:54,930 --> 00:09:59,260 jest rodzajem C-podobnych, gdzie to znaczy, że jest to funkcja 200 00:09:59,260 --> 00:10:01,490 nadać mu nazwę, daje liczba argumentów, 201 00:10:01,490 --> 00:10:05,150 a następnie zawartość funkcji do środka tych klamrach. 202 00:10:05,150 --> 00:10:08,850 Zobaczymy przykład argumenty w ciągu sekundy. 203 00:10:08,850 --> 00:10:13,420 >> Zważywszy, że w następnej linii, widzimy, oh, tu jest zmienna o nazwie "myFunction" 204 00:10:13,420 --> 00:10:17,546 i wynosić go do tego generic thing-- function--, że 205 00:10:17,546 --> 00:10:19,170 nie wydaje się mieć coś dzieje. 206 00:10:19,170 --> 00:10:22,780 207 00:10:22,780 --> 00:10:26,080 Dlatego, że jest inaczej niż C jest to, że JavaScript 208 00:10:26,080 --> 00:10:30,040 jest to, co się nazywa język funkcjonalny, lub ma elementy funkcjonalne, co oznacza, 209 00:10:30,040 --> 00:10:33,510 że funkcje są rzeczywiście wartości. 210 00:10:33,510 --> 00:10:39,520 A to oznacza, że ​​możemy ustawić zmienna równa funkcji 211 00:10:39,520 --> 00:10:43,210 a następnie przenieść tę funkcję wokół, przekazać ją jako argument, 212 00:10:43,210 --> 00:10:46,550 zrobić różne rzeczy Podobnie jest z funkcjami. 213 00:10:46,550 --> 00:10:49,682 >> Jedna rzecz do note-- funkcje są napisane 214 00:10:49,682 --> 00:10:51,140 z pewną liczbę argumentów. 215 00:10:51,140 --> 00:10:54,056 Zobaczymy przykład funkcji z argumentem na następnym slajdzie. 216 00:10:54,056 --> 00:10:56,720 Ale JavaScript nie będzie krzyczeć na ciebie, jeśli spróbujesz 217 00:10:56,720 --> 00:10:59,330 korzystać z funkcji z Zła liczba argumentów. 218 00:10:59,330 --> 00:11:05,310 To będzie po prostu zrobić wszystko, aby zrobić, co oznacza, że ​​jeśli przejdą, 219 00:11:05,310 --> 00:11:09,410 wywołać funkcję, która spodziewa się Argument bez argumentów, wszystko, 220 00:11:09,410 --> 00:11:13,990 stanie się to zrobi najlepszym spróbować wykonać ten kod, 221 00:11:13,990 --> 00:11:16,541 i jeśli w końcu uruchamia w drodze wyjątku lub błędu, 222 00:11:16,541 --> 00:11:19,790 będzie to rzucić ten wyjątek i po prostu going-- który jest jednym ze sposobów 223 00:11:19,790 --> 00:11:21,070 który działa JavaScript. 224 00:11:21,070 --> 00:11:21,781 Tak. 225 00:11:21,781 --> 00:11:24,207 >> PUBLICZNOŚCI: Co się stanie, jeśli jest zbyt wiele argumentów? 226 00:11:24,207 --> 00:11:26,040 SAM GREEN: Tak pytanie, co się dzieje, 227 00:11:26,040 --> 00:11:27,380 jeśli jest zbyt wiele argumentów? 228 00:11:27,380 --> 00:11:29,171 A odpowiedź jest taka, że JavaScript będzie tylko 229 00:11:29,171 --> 00:11:32,120 zignorować te, które są po nich, że spodziewa. 230 00:11:32,120 --> 00:11:36,420 To będzie próbować uruchomić funkcję dzwonić, jakby to było tylko pierwsze dwa. 231 00:11:36,420 --> 00:11:37,075 Dobrze? 232 00:11:37,075 --> 00:11:37,700 >> HUGH Zabriskie: Tak, tak. 233 00:11:37,700 --> 00:11:39,449 Podobnie, w przypadku są zbyt mało argumentów, 234 00:11:39,449 --> 00:11:42,640 to po prostu rodzaj daje zerowy do wszystkich argumenty, że nie ma żadnych wartości 235 00:11:42,640 --> 00:11:43,660 dla. 236 00:11:43,660 --> 00:11:45,810 >> SAM GREEN: co może być rzeczywiście przydatne, jeśli Ciebie 237 00:11:45,810 --> 00:11:49,060 chcę napisać funkcję, która trwa zmiennych argumentów numerycznych. 238 00:11:49,060 --> 00:11:55,830 Można ustawić domyślne wartości w definicja funkcji 239 00:11:55,830 --> 00:11:59,060 i może ignorować faktu, że wejście nie ma. 240 00:11:59,060 --> 00:12:01,584 241 00:12:01,584 --> 00:12:04,000 Więc chcę powiedzieć trochę więcej na temat tego ostatniego naboju 242 00:12:04,000 --> 00:12:05,541 punkt, który jest funkcje są wartości. 243 00:12:05,541 --> 00:12:07,930 244 00:12:07,930 --> 00:12:11,010 Jest to przykład, w którym jest trochę oszałamiające 245 00:12:11,010 --> 00:12:14,880 jeśli po prostu czytać, a nie sądzę, o tym, co dzieje się na chwilę. 246 00:12:14,880 --> 00:12:17,910 Więc spójrzmy tylko na pierwsza linia tutaj. 247 00:12:17,910 --> 00:12:24,360 Mamy tę zmienną, f1, że mówimy Jest to funkcja, która czyni tę rzecz. 248 00:12:24,360 --> 00:12:28,535 Oraz zawartość funkcji są console.log ("cześć"). 249 00:12:28,535 --> 00:12:32,220 Można myśleć o console.log jako Równoznaczne JavaScript printf. 250 00:12:32,220 --> 00:12:35,510 Więc co się stanie, jest, jeśli uruchomić ten kod w naszej wyszukiwarce, 251 00:12:35,510 --> 00:12:37,530 będzie to wydrukować ciąg. 252 00:12:37,530 --> 00:12:39,342 Mogę udowodnić, że. 253 00:12:39,342 --> 00:12:42,300 PUBLICZNOŚCI: W dzienniku, choć robi oznacza, że ​​jest nagrywany gdzieś? 254 00:12:42,300 --> 00:12:42,550 SAM GREEN: Tak. 255 00:12:42,550 --> 00:12:44,216 Tak więc pokażę wam, co się wydarzy. 256 00:12:44,216 --> 00:12:48,085 Więc pytanie, co to log na myśli? 257 00:12:48,085 --> 00:12:51,262 >> HUGH Zabriskie: Tak console.log jest jak printf w C 258 00:12:51,262 --> 00:12:52,970 SAM GREEN: Tak console.log jest jak printf, 259 00:12:52,970 --> 00:12:59,240 więc jeśli mam ten console.log ("cześć"), i wzywam, że napis "hello" 260 00:12:59,240 --> 00:13:00,730 zostanie wydrukowany do konsoli. 261 00:13:00,730 --> 00:13:03,340 Jest to konsola. 262 00:13:03,340 --> 00:13:05,930 To tak jak printf, gdzie wypisuje na standardowe wyjście. 263 00:13:05,930 --> 00:13:09,050 264 00:13:09,050 --> 00:13:11,230 I zobaczymy za chwilę, ale to faktycznie 265 00:13:11,230 --> 00:13:16,529 odnosi się do obiektu konsoli i wywołanie metody na temat tego obiektu. 266 00:13:16,529 --> 00:13:18,320 To będzie bardziej sensowne w chwili, gdy 267 00:13:18,320 --> 00:13:20,660 dostać się do rozmowy o obiekty w JavaScripcie, 268 00:13:20,660 --> 00:13:22,509 ale myślałem, że chciałbym tylko wspomnieć, że. 269 00:13:22,509 --> 00:13:24,300 HUGH Zabriskie: Jesteśmy stosowany w C, prawy-- 270 00:13:24,300 --> 00:13:27,580 zwykle pisać duży program w głównym nic robić. 271 00:13:27,580 --> 00:13:30,700 Ale to, co jest fajne w JavaScript jest ci mieć tego rodzaju tłumacza, że 272 00:13:30,700 --> 00:13:33,620 działa w czasie rzeczywistym, więc to zajmuje tylko linia po linii, 273 00:13:33,620 --> 00:13:35,320 Można to interpretować tak, że na miejscu. 274 00:13:35,320 --> 00:13:37,403 I śledzi rzeczy, które są prowadzone przed, 275 00:13:37,403 --> 00:13:41,620 więc jest to bardzo przydatne narzędzie używać console.log lub konsolę, 276 00:13:41,620 --> 00:13:46,870 ogólnie, do po prostu grać wokół z JavaScript. 277 00:13:46,870 --> 00:13:51,420 >> SAM GREEN: Więc wracając do tego example-- drugą linię kodu 278 00:13:51,420 --> 00:13:55,320 tutaj jest dość zadziwiające, w mojej głowie. 279 00:13:55,320 --> 00:13:59,790 Po raz pierwszy czytałem ten, To było jak, co się dzieje? 280 00:13:59,790 --> 00:14:04,580 Więc co się dzieje, jest to deklaracja funkcji mówi, 281 00:14:04,580 --> 00:14:10,170 Mam funkcję o nazwie F2 że spodziewa się jeden argument, f, 282 00:14:10,170 --> 00:14:12,990 a następnie wywołuje się, że funkcja f, co 283 00:14:12,990 --> 00:14:17,652 został przekazany do niego jako argument bez sama argumentów. 284 00:14:17,652 --> 00:14:19,110 Tak, to może być mylące. 285 00:14:19,110 --> 00:14:21,890 286 00:14:21,890 --> 00:14:28,400 Jeśli to zrozumiemy, jak F2 bierze f1 jako argument, a następnie wewnątrz f2, 287 00:14:28,400 --> 00:14:31,190 f dostaje co oznacza called-- że tej linii kodu, 288 00:14:31,190 --> 00:14:34,192 po tych dwóch linii Kod, wyniki w "cześć" 289 00:14:34,192 --> 00:14:35,400 drukowane do konsoli. 290 00:14:35,400 --> 00:14:41,660 291 00:14:41,660 --> 00:14:44,910 >> Fakt, że możemy przekazać Funkcje wokół jako wartości 292 00:14:44,910 --> 00:14:47,870 kończy się jednym z najbardziej potężne funkcje JavaScript 293 00:14:47,870 --> 00:14:49,700 jako język programowania. 294 00:14:49,700 --> 00:14:52,782 Poza wszystkim z niesamowite rzeczy, może to zrobić, 295 00:14:52,782 --> 00:14:54,990 jak cechą języka pod względem drogi 296 00:14:54,990 --> 00:14:58,400 że to sprawia, że ​​rzeczy proste programowanie i umożliwia 297 00:14:58,400 --> 00:15:01,060 do rzeczy, które nie są szczególnie dobrze nadaje się do sieci, 298 00:15:01,060 --> 00:15:04,500 programowanie funkcjonalne i funkcjonalne aspekty programowania w JavaScript 299 00:15:04,500 --> 00:15:07,130 Jest to jeden z najbardziej potężne pojęcia, że 300 00:15:07,130 --> 00:15:11,030 istnieje w JavaScript-- jeśli o mnie. 301 00:15:11,030 --> 00:15:11,960 Fajne. 302 00:15:11,960 --> 00:15:13,534 >> Więc, następną rzeczą. 303 00:15:13,534 --> 00:15:16,450 Oprócz tego, że jest funkcjonalnie są też elementy JavaScript 304 00:15:16,450 --> 00:15:20,510 które są zorientowane obiektowo, który jest jednym z bardzo 305 00:15:20,510 --> 00:15:23,800 popularne słowa buzz w informatyce. 306 00:15:23,800 --> 00:15:27,040 Programowanie obiektowe Jest to bardzo popularna rzecz. 307 00:15:27,040 --> 00:15:34,210 JavaScript ma wersję, która, gdzie Wierzę, każda wartość jest również 308 00:15:34,210 --> 00:15:41,475 przedmiot, co oznacza, że ​​dla każdego obiektu owija sobą jakąś liczbę wartości. 309 00:15:41,475 --> 00:15:44,020 310 00:15:44,020 --> 00:15:49,750 Więc dla wartości, które są proste, jak liczbą całkowitą, jak varX równa 5, 311 00:15:49,750 --> 00:15:52,250 że obiekt po prostu owija że jedną wartość. 312 00:15:52,250 --> 00:15:54,760 313 00:15:54,760 --> 00:15:59,036 >> Ale możemy też wyobrazić sobie sytuację, where-- możemy myśleć o sytuacji w C 314 00:15:59,036 --> 00:16:00,910 gdzie chcieliśmy zrobić coś o strukturach, 315 00:16:00,910 --> 00:16:03,285 na przykład, że zawija kilka Wartości razem i sprawia, 316 00:16:03,285 --> 00:16:05,870 to naprawdę łatwe do przekazania rzeczy wokół. 317 00:16:05,870 --> 00:16:09,270 To jest, gdy obiekt jest w JavaScript. 318 00:16:09,270 --> 00:16:12,340 >> Ważne jest, aby pamiętać, kiedy mówię, że obiekty owinięte 319 00:16:12,340 --> 00:16:15,330 niektóre liczba wartości razem, że funkcje są również 320 00:16:15,330 --> 00:16:21,506 wartości, co oznacza, że ​​funkcje mogą również wewnątrz obiektu JavaScript. 321 00:16:21,506 --> 00:16:26,910 A powodem, że ważne jest, jest to, że podczas Często 322 00:16:26,910 --> 00:16:30,290 myśleć o wywołanie metody na obiekcie, który jest 323 00:16:30,290 --> 00:16:35,200 popularnego terminu od innych popularne języki obiektowe, 324 00:16:35,200 --> 00:16:39,330 jedna z różnic jest to, że wszystkim, że metoda jest w JavaScript 325 00:16:39,330 --> 00:16:47,270 jest wartość przechowywane wewnątrz obiektu który wykonuje pewne action-- ewentualnie 326 00:16:47,270 --> 00:16:51,850 za pomocą innych wartości, które są w środku tego obiektu, ale nie musi. 327 00:16:51,850 --> 00:16:56,930 Więc można sobie wyobrazić sytuację, że Chyba się trochę szalony sposób, 328 00:16:56,930 --> 00:17:02,990 gdzie nazywa metodę jednego obiekt na inny przedmiot, na przykład. 329 00:17:02,990 --> 00:17:06,010 Tak, to jest trochę modny w ten sposób. 330 00:17:06,010 --> 00:17:09,369 >> I można również zmienić metody które są związane z przedmiotem 331 00:17:09,369 --> 00:17:13,740 przez przypisanie metody, że nową funkcję, która jest również 332 00:17:13,740 --> 00:17:18,250 całkiem różni się od innych języków obiektowych, gdzie 333 00:17:18,250 --> 00:17:21,410 raz zadeklarować obiekt oraz instancję, 334 00:17:21,410 --> 00:17:25,839 nie możemy zmienić metody, które są związane z tym obiektem już. 335 00:17:25,839 --> 00:17:28,680 Więc to jest całkiem inna. 336 00:17:28,680 --> 00:17:29,570 Fajne. 337 00:17:29,570 --> 00:17:34,010 >> Tak oto przykład, po pierwsze, przedmiotu w działaniu. 338 00:17:34,010 --> 00:17:36,390 To jest to, co się nazywa Celem ogólnym, które 339 00:17:36,390 --> 00:17:39,460 Oznacza to, że nie ma żadnych szczególności nazwa, nie ma klasy, 340 00:17:39,460 --> 00:17:42,190 to tylko niektóre owijania wartości. 341 00:17:42,190 --> 00:17:49,790 A sposób, że wygląda na to, mamy ta zewnętrzna para nawiasy, tutaj 342 00:17:49,790 --> 00:17:57,950 które wskazują, do JavaScript i powiedzieć, że jest to obiekt. 343 00:17:57,950 --> 00:18:02,130 Wartości wewnątrz niego Wartości są co wewnątrz 344 00:18:02,130 --> 00:18:04,590 obiektu, który powinien być opakowane razem. 345 00:18:04,590 --> 00:18:09,180 A w środku tego obiektu, następnie musimy par wartości klucza, 346 00:18:09,180 --> 00:18:13,880 gdzie klucz odnosi się do nazwy wartości wewnątrz obiektu, 347 00:18:13,880 --> 00:18:16,790 a drugi side-- naprzeciwko here-- jelita grubego 348 00:18:16,790 --> 00:18:19,850 jest rzeczywista wartość które powinny być przechowywane. 349 00:18:19,850 --> 00:18:26,210 >> Więc widać tutaj, że mamy klucz o nazwie fn z wartości Sam, 350 00:18:26,210 --> 00:18:29,430 następnie przecinkiem, mówiąc do następnego wpisu. 351 00:18:29,430 --> 00:18:33,560 Następnie klucz o nazwie ln, o wartości zielony, 352 00:18:33,560 --> 00:18:35,840 następnie przecinkiem, następnie "drukuj" 353 00:18:35,840 --> 00:18:43,209 która będzie mieć wartość funkcji że zrobi tego wiersza kodu. 354 00:18:43,209 --> 00:18:45,500 Zróbmy krok do tyłu i rozpakować to, co się tutaj dzieje. 355 00:18:45,500 --> 00:18:47,280 Więc to jest trochę skomplikowane, i widzimy coś nowego 356 00:18:47,280 --> 00:18:48,071 pierwszy raz. 357 00:18:48,071 --> 00:18:51,190 358 00:18:51,190 --> 00:18:55,065 "To" słowo kluczowe jest nowa rzecz widzimy tutaj, i co to robi 359 00:18:55,065 --> 00:19:00,540 to odnosi się do prądu sprzeciw w zakresie, prawda? 360 00:19:00,540 --> 00:19:03,990 Więc, gdy mówimy, to wskazuje całą drogę 361 00:19:03,990 --> 00:19:08,140 do całej tej object-- gdy robimy this.fn, 362 00:19:08,140 --> 00:19:11,990 mamy zamiar przejść całą drogę z powrotem do tego obiektu, przejdź do wartości fn 363 00:19:11,990 --> 00:19:16,471 i dostać Sam, wyciągnij ją do końca z powrotem, trzymać go tutaj, a następnie przejść. 364 00:19:16,471 --> 00:19:19,838 >> PUBLICZNOŚCI: Więc z pobierania, jest tego zrobić, ponieważ parametru 365 00:19:19,838 --> 00:19:20,621 definicja? 366 00:19:20,621 --> 00:19:23,870 SAM GREEN: Więc pytanie było, jest Pobieranie odbywa ze względu na parametr 367 00:19:23,870 --> 00:19:24,727 definicja? 368 00:19:24,727 --> 00:19:25,435 Tak, absolutnie. 369 00:19:25,435 --> 00:19:29,660 370 00:19:29,660 --> 00:19:32,470 Co wydarzy się o to, Ten punkt mówi do JavaScriptu, 371 00:19:32,470 --> 00:19:39,990 OK, ja dostaję jakąś wartość z tego przedmiotu od siebie. 372 00:19:39,990 --> 00:19:46,375 I wtedy będzie wyglądać wpisu nazywa fn, a jeśli go znajdzie, 373 00:19:46,375 --> 00:19:48,470 powróci, że value-- tak, to sam. 374 00:19:48,470 --> 00:19:51,540 Ale mogę również wpisaniu co nie zdefiniowano tutaj 375 00:19:51,540 --> 00:19:54,090 A potem po prostu powrót undefined-- które 376 00:19:54,090 --> 00:19:58,250 jest rzeczą, że JavaScript może to, co może przynieść korzyści, 377 00:19:58,250 --> 00:20:03,190 ale also-- jeśli popełnisz literówkę, może to spowodować błędy dziwne. 378 00:20:03,190 --> 00:20:05,617 Więc po prostu spróbować znaleźć cokolwiek powiedzieć go znaleźć 379 00:20:05,617 --> 00:20:07,700 i nie będzie narzekać, jeśli nie znajdzie. 380 00:20:07,700 --> 00:20:11,390 To będzie po prostu powiedzieć, ja nie go znaleźć, a następnie przejść. 381 00:20:11,390 --> 00:20:17,581 Więc to nieokreślone, oraz puste plus nazwisko. 382 00:20:17,581 --> 00:20:18,080 Tak. 383 00:20:18,080 --> 00:20:21,070 A potem widzimy, że jeśli może następnie zejść na dół i access-- 384 00:20:21,070 --> 00:20:25,450 i wzywamy tf.print () z nawiasów. 385 00:20:25,450 --> 00:20:30,000 To się nazywają drukowanych Funkcja bez argumentów, prawda? 386 00:20:30,000 --> 00:20:34,490 Ale jeśli po prostu powiedział tf.print () średnik, bez nawiasów, 387 00:20:34,490 --> 00:20:37,480 wszystko, co zrobiłby to pociągnąć z funkcji z wartości, 388 00:20:37,480 --> 00:20:40,609 ale w rzeczywistości nie nazwał. 389 00:20:40,609 --> 00:20:41,162 Fajne. 390 00:20:41,162 --> 00:20:42,870 HUGH Zabriskie: Jeżeli tworzymy obiekt? 391 00:20:42,870 --> 00:20:44,161 SAM GREEN: Jasne, zróbmy to. 392 00:20:44,161 --> 00:20:48,750 Więc mogę przenieść tego Przykładem do konsoli. 393 00:20:48,750 --> 00:20:51,380 394 00:20:51,380 --> 00:20:55,466 Możemy sobie wyobrazić, że mam obiektu. 395 00:20:55,466 --> 00:21:03,026 396 00:21:03,026 --> 00:21:04,150 Tak więc jest to prosty przedmiot. 397 00:21:04,150 --> 00:21:06,910 398 00:21:06,910 --> 00:21:11,050 Jest to obiekt, który zawiera dwa wartości z dwóch przycisków, dwa wartość klucza 399 00:21:11,050 --> 00:21:12,710 par. 400 00:21:12,710 --> 00:21:21,850 Więc można następnie uzyskać dostęp do wartości przechowywanej wewnątrz tego obiektu, wykonując x.x1, 401 00:21:21,850 --> 00:21:23,400 na przykład, a ja się 1 plecy. 402 00:21:23,400 --> 00:21:29,590 Podobnie x.x2, uzyskać tę wartość z powrotem. 403 00:21:29,590 --> 00:21:33,330 >> A teraz naprawdę fajne jest to, mogę faktycznie coś dodać do tego obiektu 404 00:21:33,330 --> 00:21:34,316 po Stworzyłem go. 405 00:21:34,316 --> 00:21:36,315 Więc można sobie wyobrazić, niech że mam funkcję. 406 00:21:36,315 --> 00:21:44,430 407 00:21:44,430 --> 00:21:46,352 >> HUGH Zabriskie: Ty musisz zrobić klawiszem Shift Enter. 408 00:21:46,352 --> 00:21:47,643 >> SAM GREEN: Och, to jest irytujące. 409 00:21:47,643 --> 00:22:02,460 410 00:22:02,460 --> 00:22:04,324 Co jest nie tak? 411 00:22:04,324 --> 00:22:04,824 O. 412 00:22:04,824 --> 00:22:07,532 413 00:22:07,532 --> 00:22:08,691 No to ruszamy. 414 00:22:08,691 --> 00:22:09,190 Fajne. 415 00:22:09,190 --> 00:22:12,840 >> Tak już po prostu stworzona Ta funkcja f, który 416 00:22:12,840 --> 00:22:17,590 pójdzie do prądu Obiekt i drukować this.x1. 417 00:22:17,590 --> 00:22:20,330 Więc jeśli po prostu zadzwonić f przez Sam, nic się nie dzieje 418 00:22:20,330 --> 00:22:26,970 się stało, prawda, bo nie ma x1 pola w obiekcie to odnoszące się do. 419 00:22:26,970 --> 00:22:39,710 Ale, jeśli powiem, x.f = f, a potem zadzwoń x.f (), mam zamiar wrócić 1. 420 00:22:39,710 --> 00:22:42,990 421 00:22:42,990 --> 00:22:46,530 Że funkcja f jest związane z obiektem, X, 422 00:22:46,530 --> 00:22:51,800 która ma klucza o nazwie X1 związany z wartością 1 423 00:22:51,800 --> 00:22:54,570 więc kiedy zadzwonić this.x1, to będzie znaleźć to, co szuka 424 00:22:54,570 --> 00:22:56,450 i być w stanie wydrukować wartości na zewnątrz. 425 00:22:56,450 --> 00:22:58,700 Więc to tylko jeden z przykładów od rodzaju szalonych rzeczy 426 00:22:58,700 --> 00:23:01,190 można zrobić z obiektów w JavaScript. 427 00:23:01,190 --> 00:23:03,870 428 00:23:03,870 --> 00:23:07,560 >> Tak więc ta wersja była generycznych wersji, znaczenie 429 00:23:07,560 --> 00:23:13,780 że stworzyliśmy obiektu za pomocą tego nawiasy notation-- notacji nawiasów, 430 00:23:13,780 --> 00:23:16,880 rather-- i to przydatne, jeśli chcemy tylko 431 00:23:16,880 --> 00:23:21,440 jedno wystąpienie danego obiektu, ale Co zrobić, jeśli chcemy mieć więcej niż jeden 432 00:23:21,440 --> 00:23:22,210 tego samego rodzaju? 433 00:23:22,210 --> 00:23:24,440 I odpowiedź na to Chodzi o to, że są rzeczy, 434 00:23:24,440 --> 00:23:26,760 zwane klasy w JavaScript, jak również. 435 00:23:26,760 --> 00:23:31,470 436 00:23:31,470 --> 00:23:36,420 Możemy stworzyć funkcję, która robi jakieś inicjalizacji 437 00:23:36,420 --> 00:23:41,690 przez obcy obiekt, i chcemy powiedzieć, jak, 438 00:23:41,690 --> 00:23:44,550 mój class-- więc imię wielokrotnego użytku object-- 439 00:23:44,550 --> 00:23:47,100 równa funkcji, które ustawia go. 440 00:23:47,100 --> 00:23:52,280 Więc co to byłoby równoznaczne do tworzenia obiektu jest, że 441 00:23:52,280 --> 00:23:55,930 byłoby po prostu lubię, nawias klamrowy, str, jelita grubego, 442 00:23:55,930 --> 00:23:59,630 jest to ciąg znaków, średnik, nawias klamrowy. 443 00:23:59,630 --> 00:24:01,880 To byłby ogólny Obiekt możemy zainicjować, 444 00:24:01,880 --> 00:24:06,380 z jedną różnicą, na Kolejne linie tworzymy prototyp, który 445 00:24:06,380 --> 00:24:11,190 Oznacza to, że klucz domyślny możemy dodać do naszego obiektu, który 446 00:24:11,190 --> 00:24:13,970 ma wartość wymienionych tutaj. 447 00:24:13,970 --> 00:24:20,570 Co oznacza, że, gdy tworzę nowy wystąpienie tego obiektu MojaKlasa, 448 00:24:20,570 --> 00:24:27,440 to się nie wcześniej zbudowany wewnątrz to wartość o nazwie str a inna wartość 449 00:24:27,440 --> 00:24:32,418 nazywany myprint, który jest będzie funkcją. 450 00:24:32,418 --> 00:24:32,918 Niesamowite. 451 00:24:32,918 --> 00:24:37,410 452 00:24:37,410 --> 00:24:37,990 >> Wielki. 453 00:24:37,990 --> 00:24:40,710 Więc ostatnią rzeczą, aby powiedzieć o JavaScript 454 00:24:40,710 --> 00:24:46,430 jest to, że jest to bardzo przydatne na co nazywane są operacje asynchroniczne. 455 00:24:46,430 --> 00:24:52,500 Asynchroniczny oznacza to, że my może czekać na jakiś pracy 456 00:24:52,500 --> 00:24:57,870 aby zakończyć zanim przejdziemy , ale przejść podczas oczekiwania 457 00:24:57,870 --> 00:24:59,690 i wtedy coś się stało później. 458 00:24:59,690 --> 00:25:03,480 I co mam na myśli, to znaczy, że Można sobie wyobrazić sytuację, w której 459 00:25:03,480 --> 00:25:06,850 możesz wysłać wniosek do gdzieś jakiś serwer WWW, 460 00:25:06,850 --> 00:25:09,670 i to się wysłać z powrotem niektórych dużych porcji danych, prawda? 461 00:25:09,670 --> 00:25:13,320 A twój użytkownik może czekać w Tymczasem tak się stało, 462 00:25:13,320 --> 00:25:15,200 i nic nie może być dzieje się w tym czasie. 463 00:25:15,200 --> 00:25:18,110 Ale to nie jest wielki projekt, prawda? 464 00:25:18,110 --> 00:25:20,214 Nie chcesz, strona internetowa, aby zatrzymać. 465 00:25:20,214 --> 00:25:22,380 Co zrobić, jeśli użytkownik chce kliknij na menu rozwijanego? 466 00:25:22,380 --> 00:25:24,870 To nie jest wielki wzorzec projektowy. 467 00:25:24,870 --> 00:25:29,290 Zamiast tego, w zasadzie to, co JavaScript nie jest, mówi, 468 00:25:29,290 --> 00:25:31,870 OK, wykonaj tę operację asynchronicznie. 469 00:25:31,870 --> 00:25:36,520 Więc jak, czekać w tle, a następnie, gdy operacja jest wykonywana, 470 00:25:36,520 --> 00:25:39,420 zadzwoń do wywołania zwrotnego function-- zadzwoń do niektórych funkcji, 471 00:25:39,420 --> 00:25:43,800 Czy jakieś action-- zasygnalizować, że Operacja czekaliśmy do końca 472 00:25:43,800 --> 00:25:45,520 to koniec. 473 00:25:45,520 --> 00:25:51,240 A powodem jest to potężny jest, możemy zrobić coś, przekazać argument, 474 00:25:51,240 --> 00:25:54,440 coś zrobić, a następnie czekać coś się stało. 475 00:25:54,440 --> 00:25:58,970 Następnie, po tym czymś zakończy, możemy wywołać wywołania zwrotnego. 476 00:25:58,970 --> 00:26:03,300 To bardzo przydatne, ponieważ pozwala nam robić rzeczy z Web Audio API, 477 00:26:03,300 --> 00:26:07,490 Na przykład, jak i przy obciążeniu Plik audio z serwera zdalnego 478 00:26:07,490 --> 00:26:11,660 bez konieczności czekać na cały plik audio, który ma być załadowany, 479 00:26:11,660 --> 00:26:14,440 co byłoby bardzo złe dla doświadczenia użytkownika. 480 00:26:14,440 --> 00:26:17,080 Fajne. 481 00:26:17,080 --> 00:26:19,460 >> Ostatnie kilka zauważa się debugowanie, ponieważ 482 00:26:19,460 --> 00:26:23,682 Jest to rzecz, którą będziesz musiał zrobić w ramach projektu, gwarantowana. 483 00:26:23,682 --> 00:26:25,140 Wspomniałem konsolę JavaScript. 484 00:26:25,140 --> 00:26:27,550 Jest to bardzo przydatna funkcja wszystkich nowoczesnych przeglądarkach, 485 00:26:27,550 --> 00:26:30,300 I naprawdę zachęcam, aby uzyskać wygodne przy użyciu konsoli, 486 00:26:30,300 --> 00:26:33,660 jeśli chcesz uzyskać dobry w JavaScript. 487 00:26:33,660 --> 00:26:36,320 Jest to bardzo przydatne dla debugowania, ale również 488 00:26:36,320 --> 00:26:39,440 bardzo przydatne w zastanawianie się, jak wykorzystać API. 489 00:26:39,440 --> 00:26:41,950 Pozwala to na bardzo proste eksperymenty 490 00:26:41,950 --> 00:26:45,910 bez konieczności wpisywania niektórych Kod, a następnie skompilować. 491 00:26:45,910 --> 00:26:47,500 Nie musisz robić te wszystkie kroki. 492 00:26:47,500 --> 00:26:49,619 Możesz po prostu napisać jakiś kod do linii, 493 00:26:49,619 --> 00:26:52,410 a następnie uzyskać natychmiastową informację zwrotną na temat czy ta linia kodu 494 00:26:52,410 --> 00:26:55,230 worked-- bardzo przydatne. 495 00:26:55,230 --> 00:26:59,760 >> A także, tylko jeden note-- techniczne Konsola JavaScript jest przykładem 496 00:26:59,760 --> 00:27:05,680 z REPL-- więc to R-E-P-L, repl, który stoi do odczytu, oceny, 497 00:27:05,680 --> 00:27:06,180 Pętla druku. 498 00:27:06,180 --> 00:27:09,100 499 00:27:09,100 --> 00:27:12,120 Masz zamiar wpisać kilka rzeczy w, to będzie czytać to, co podałeś 500 00:27:12,120 --> 00:27:17,280 będzie to jego oceny, i będzie to wydrukować wyjście, a potem będzie zacząć od nowa. 501 00:27:17,280 --> 00:27:22,056 To pozwala szybko przejść w koła iteracji, co jest naprawdę fajne. 502 00:27:22,056 --> 00:27:25,150 503 00:27:25,150 --> 00:27:28,930 >> Myślę, że prawdziwe Ostatnia note-- tego jest rzeczywista ostatnia uwaga, tak. 504 00:27:28,930 --> 00:27:30,780 W jaki sposób właściwie wykorzystać JavaScript? 505 00:27:30,780 --> 00:27:34,040 Więc po pierwsze, możemy importować go za pomocą znacznika script 506 00:27:34,040 --> 00:27:39,500 na górze lub na dole HTML file-- w dowolnym miejscu wewnątrz pliku HTML, 507 00:27:39,500 --> 00:27:40,440 naprawdę. 508 00:27:40,440 --> 00:27:47,390 I w tagu skrypt, istnieje dwa sub-sposoby importowania JavaScript. 509 00:27:47,390 --> 00:27:51,370 Pierwszym jest posiadające oddzielny plik JavaScript 510 00:27:51,370 --> 00:27:58,010 że sprowadzamy w całości lub poprzez obszar kodu jak scenariusza 511 00:27:58,010 --> 00:28:00,290 uruchomić, a następnie backslash skrypt do końca. 512 00:28:00,290 --> 00:28:02,620 A potem po prostu napisz JavaScript w pliku HTML. 513 00:28:02,620 --> 00:28:03,790 Są to dwa sposoby. 514 00:28:03,790 --> 00:28:05,165 Nie można mieć go wewnątrz HTML. 515 00:28:05,165 --> 00:28:06,502 516 00:28:06,502 --> 00:28:08,126 PUBLICZNOŚCI: Czy jedna lepsza od drugiej? 517 00:28:08,126 --> 00:28:10,542 SAM GREEN: Pytanie było, jest lepsze niż inne. 518 00:28:10,542 --> 00:28:18,306 Tak, tak, w praktyce styl kodowania, a także to jak praktyki projektowej. 519 00:28:18,306 --> 00:28:20,180 Istnieją dwa powody, dlatego może być lepiej. 520 00:28:20,180 --> 00:28:23,934 Pierwszym z nich jest, to sprawia, że ​​Twój kod A dużo bardziej czytelny, jeśli wszystkie HTML 521 00:28:23,934 --> 00:28:27,100 jest w jednym miejscu, wszystkie twoje CSS jest w w innym miejscu, wszystko twój JavaScript 522 00:28:27,100 --> 00:28:28,420 w trzecim miejscu. 523 00:28:28,420 --> 00:28:28,920 Dobrze? 524 00:28:28,920 --> 00:28:32,370 Myślę, że powinien już rozmawiał o tym w sections-- jak CSS-- co 525 00:28:32,370 --> 00:28:35,220 że jest-- i idzie często w innym pliku. 526 00:28:35,220 --> 00:28:37,090 Tak więc, podobnie rodzaju koncepcji tutaj. 527 00:28:37,090 --> 00:28:42,410 Można też sobie wyobrazić, że JavaScript by być ponownie na więcej niż jednej 528 00:28:42,410 --> 00:28:47,350 Strona HTML, a może bardzo wielu stron HTML, 529 00:28:47,350 --> 00:28:49,340 i mając tę ​​JavaScript refactored w jednym 530 00:28:49,340 --> 00:28:51,950 plik, który można zaimportować w więcej niż jednym miejscu 531 00:28:51,950 --> 00:28:54,570 pozwala kod będzie sposób bardziej linkujących. 532 00:28:54,570 --> 00:28:57,930 Można sobie wyobrazić, co jeden zmiany w JavaScript 533 00:28:57,930 --> 00:29:00,070 i konieczności jego zmiany w 100 różnych plików. 534 00:29:00,070 --> 00:29:04,070 A zamiast tego możemy po prostu go zmienić w jednym, który jest o wiele bardziej wydajny. 535 00:29:04,070 --> 00:29:05,420 Czy mogę odpowiedzieć na to pytanie? 536 00:29:05,420 --> 00:29:07,950 Fajne. 537 00:29:07,950 --> 00:29:10,830 >> Możemy również wpisać w konsoli, jak już wspomniano wcześniej. 538 00:29:10,830 --> 00:29:15,070 I znowu, po raz ostatni note-- Web Audio jest wbudowany, 539 00:29:15,070 --> 00:29:16,978 nie trzeba ładować niczego. 540 00:29:16,978 --> 00:29:17,478 Fajne. 541 00:29:17,478 --> 00:29:20,519 Czy są jakieś pytania, masz więcej pytań o JavaScript, 542 00:29:20,519 --> 00:29:21,930 Zanim przejdziemy? 543 00:29:21,930 --> 00:29:24,286 >> PUBLICZNOŚCI: [niesłyszalne] 544 00:29:24,286 --> 00:29:25,410 SAM GREEN: No dobra, fajnie. 545 00:29:25,410 --> 00:29:27,200 Więc teraz on będzie mówić o API. 546 00:29:27,200 --> 00:29:28,490 >> HUGH Zabriskie: Spoko. 547 00:29:28,490 --> 00:29:28,990 Dzięki, Sam. 548 00:29:28,990 --> 00:29:30,184 >> SAM GREEN: Jasne. 549 00:29:30,184 --> 00:29:32,600 HUGH Zabriskie: Awesome, więc przejdziemy z JavaScript. 550 00:29:32,600 --> 00:29:35,350 Więc rozmawialiśmy o niektórych podstawowe elementy JavaScript, 551 00:29:35,350 --> 00:29:41,105 a te są zmienne, funkcje, obiektów, działa jako zmienne, 552 00:29:41,105 --> 00:29:41,980 asynchroniczne ładowanie. 553 00:29:41,980 --> 00:29:46,100 Są to wszystko rzeczy, które będziesz zobacz, jak korzystać z internetu Audio. 554 00:29:46,100 --> 00:29:49,230 Więc my właśnie będziemy rozmawiać o najpierw na wysokim poziomie. 555 00:29:49,230 --> 00:29:52,120 >> Jest to API, więc jest to coś który jest zbudowany, jak Sam powiedział, 556 00:29:52,120 --> 00:29:57,010 prawo w JavaScript które można używać w konsoli. 557 00:29:57,010 --> 00:30:01,020 I to jest rzeczywiście tak, jak C ++ kod że jest naprawdę wbudowany w Chrome 558 00:30:01,020 --> 00:30:04,470 i Firefox, a wszystkie z tych przeglądarek. 559 00:30:04,470 --> 00:30:07,060 Więc głównej idei z sieci Audio to, że masz 560 00:30:07,060 --> 00:30:09,440 ten rodzaj rurociągu audio, prawda? 561 00:30:09,440 --> 00:30:13,670 Więc twoje dane audio wchodzi w innej formie. 562 00:30:13,670 --> 00:30:16,690 >> Istnieje rodzaj trzech głównych forms-- masz oscylator, który 563 00:30:16,690 --> 00:30:21,340 tworzy falę sinusoidalną, cosinus fali, mamy zamiar zobaczyć jak to działa. 564 00:30:21,340 --> 00:30:23,890 Innym bardzo popularnym, Oczywiście, jest MP3. 565 00:30:23,890 --> 00:30:25,810 Więc może zacząć piosenka, a potem 566 00:30:25,810 --> 00:30:28,320 chcesz zrobić filtrowanie do i wyjścia 567 00:30:28,320 --> 00:30:30,605 that-- które mogłyby być potencjalnym źródłem. 568 00:30:30,605 --> 00:30:32,480 I wtedy naprawdę fajne jeden jest mikrofon. 569 00:30:32,480 --> 00:30:37,230 Więc można korzystać z niektórych bardzo Podstawowe połączenia w JavaScript 570 00:30:37,230 --> 00:30:39,440 aby uzyskać dostęp do Mikrofon, a więc jeśli 571 00:30:39,440 --> 00:30:42,870 chciałem zrobić aplikację jak detektor skoku, 572 00:30:42,870 --> 00:30:45,290 na przykład, że pobiera twój głos i domyśla się, 573 00:30:45,290 --> 00:30:47,740 pitch-- bardzo łatwy sposób, że. 574 00:30:47,740 --> 00:30:50,730 Po prostu rodzaj można przeczytać w, dowiedzieć się, częstotliwość, 575 00:30:50,730 --> 00:30:52,250 a następnie wyjście numer. 576 00:30:52,250 --> 00:30:56,080 Więc zobaczymy jak to działa, jak również. 577 00:30:56,080 --> 00:30:59,430 >> Miejsce docelowe jest w zasadzie gdzie dane dźwięk jest emitowany. 578 00:30:59,430 --> 00:31:02,890 Tak ogólnie, to jak głośniki laptopa. 579 00:31:02,890 --> 00:31:05,610 Inne opcje są jak ScriptProcessorNode-- 580 00:31:05,610 --> 00:31:07,990 my się do węzłów w second-- ale w zasadzie, 581 00:31:07,990 --> 00:31:11,939 albo jesteś wprowadzenie dźwięku z za pośrednictwem komputera przez głośniki, 582 00:31:11,939 --> 00:31:14,730 lub jesteś rodzaj nagrywania, więc jesteś przechowywanie go jako dane audio. 583 00:31:14,730 --> 00:31:18,980 Więc może jeśli ktoś tworzy muzyki w aplikacji, a następnie 584 00:31:18,980 --> 00:31:22,410 chcesz nagrać, że a może jak wyeksportować do SoundCloud, na example-- 585 00:31:22,410 --> 00:31:25,281 że będzie jednym ze sposobów, aby to zrobić. 586 00:31:25,281 --> 00:31:27,030 Wszystkie rzeczy, zabawy, które będziemy rozmawiać o, 587 00:31:27,030 --> 00:31:29,950 dzieje się między tymi dwoma punktami, gdzie załadować w muzyce 588 00:31:29,950 --> 00:31:31,410 a następnie wyjście to. 589 00:31:31,410 --> 00:31:36,660 >> Więc mam zamiar mówić o pięciu etapy produkcji audio w sekundę. 590 00:31:36,660 --> 00:31:38,950 Mamy to coś o nazwie AudioContext, które 591 00:31:38,950 --> 00:31:41,580 Jest to małe otoki widzimy tutaj. 592 00:31:41,580 --> 00:31:49,980 Zasadniczo co AudioContext jest-- jeśli przejdź do konsoli JavaScript w tej chwili, 593 00:31:49,980 --> 00:31:52,740 możemy utworzyć teraz. 594 00:31:52,740 --> 00:31:54,040 Tylko przykład REPL, prawda? 595 00:31:54,040 --> 00:31:57,880 Czytamy, oceny, a drukuje. 596 00:31:57,880 --> 00:32:00,260 >> AudioContext to stan globalny. 597 00:32:00,260 --> 00:32:05,500 Jest to struktura, to obiekt tu, i utrzymuje informacje 598 00:32:05,500 --> 00:32:09,960 o rzeczach, które robimy Na ekranie związanego z dźwiękiem. 599 00:32:09,960 --> 00:32:15,220 Jednym z przykładów jest aktualny czas. 600 00:32:15,220 --> 00:32:18,910 Ten podaje liczbę sekund, bardzo precyzyjnie, 601 00:32:18,910 --> 00:32:20,890 od strony załadowane. 602 00:32:20,890 --> 00:32:24,110 Więc to jest bardzo przydatne Trochę nieruchomości, które można wykorzystać. 603 00:32:24,110 --> 00:32:27,898 To czytaj only-- Myślę, że rzeczywiście możesz spróbować ustawić jej wartość. 604 00:32:27,898 --> 00:32:29,856 Będzie to powiedzieć, to ustawić, a następnie, jeśli go wydrukować 605 00:32:29,856 --> 00:32:31,439 again-- to faktycznie nie bardzo działa. 606 00:32:31,439 --> 00:32:34,472 Więc nie są tylko do odczytu właściwości w JavaScript. 607 00:32:34,472 --> 00:32:36,430 To jest naprawdę przydatna, gdy masz rodzaj synchronizacji 608 00:32:36,430 --> 00:32:38,610 Wiele różnych informacje, kiedy jesteś 609 00:32:38,610 --> 00:32:41,280 rodzaj gry w różne dźwięki. 610 00:32:41,280 --> 00:32:43,630 >> Inną bardzo użyteczną jest celem kontekstu. 611 00:32:43,630 --> 00:32:46,587 612 00:32:46,587 --> 00:32:49,670 Na pewno, jeśli jesteś zainteresowany, być próbuje to na własne prawej konsoli 613 00:32:49,670 --> 00:32:50,980 ale już. 614 00:32:50,980 --> 00:32:53,150 Więc jest to AudioDestinationNode. 615 00:32:53,150 --> 00:32:56,480 W zasadzie to, co mówi, jest to, gdzie będzie wyjście? 616 00:32:56,480 --> 00:32:59,590 Tak więc są dwie opcje realne tutaj. 617 00:32:59,590 --> 00:33:01,940 Zazwyczaj domyślny jest tylko głośniki, 618 00:33:01,940 --> 00:33:05,150 tak AudioDestinationNode w zasadzie tylko mówi 619 00:33:05,150 --> 00:33:09,240 Wyjścia są zerowe do dźwięku najbliższych, wysyłane do głośnika. 620 00:33:09,240 --> 00:33:12,050 Więc ogólnie, nie musisz grać z tym. 621 00:33:12,050 --> 00:33:15,720 Jeśli jesteś zainteresowany w rzeczywistości za pomocą ScriptProcessorNode do nagrywania, 622 00:33:15,720 --> 00:33:16,990 zdecydowanie strzelać do mnie e-mail później, bo to 623 00:33:16,990 --> 00:33:18,330 nieco bardziej skomplikowane. 624 00:33:18,330 --> 00:33:21,590 Ale ogólnie, jesteś po prostu rodzaj od wyprowadzania dźwięku w jakiejś formie. 625 00:33:21,590 --> 00:33:24,347 Tak fajne, będziemy skakać z powrotem tutaj. 626 00:33:24,347 --> 00:33:25,180 PUBLICZNOŚCI: Przykro mi. 627 00:33:25,180 --> 00:33:26,054 HUGH Zabriskie: Tak. 628 00:33:26,054 --> 00:33:28,770 PUBLICZNOŚCI: Wiem, że mówi się, porozmawiać do ciebie później o nagrywaniu. 629 00:33:28,770 --> 00:33:31,550 Interfejs, który można z Pro Tools? 630 00:33:31,550 --> 00:33:33,120 >> HUGH Zabriskie: Z Pro Tools? 631 00:33:33,120 --> 00:33:35,260 Zobaczmy. 632 00:33:35,260 --> 00:33:37,220 Myślę, że nie. 633 00:33:37,220 --> 00:33:41,670 Tak dzieje między klientem, który jest JavaScript 634 00:33:41,670 --> 00:33:44,310 Konsola, a rzeczywisty Komputer jest ogólnie 635 00:33:44,310 --> 00:33:46,490 coś, co jest rodzajem z poza granic, jeśli Ciebie 636 00:33:46,490 --> 00:33:52,320 będzie, niby przez naturę the-- jest to rodzaj rzeczy projektowania, 637 00:33:52,320 --> 00:33:57,770 ale staram się zachować przeglądarkę oddzielne od faktycznego komputerze użytkownika. 638 00:33:57,770 --> 00:34:02,310 Ogólnie rzecz biorąc, jedyne co jesteś w stanie dostęp jest mikrofon i kamera. 639 00:34:02,310 --> 00:34:04,730 Nie jesteś w stanie, ja nie sądzę, należy użyć Pro Tools. 640 00:34:04,730 --> 00:34:07,480 Jeśli jednak stworzył utwór w Pro Tools, 641 00:34:07,480 --> 00:34:12,710 eksportowane, że można załadować, że tu, filtrowanie, na przykład 642 00:34:12,710 --> 00:34:16,820 Proces, który i odnotować, że w produkt Dźwięk Destination-- lub no-- Sphere 643 00:34:16,820 --> 00:34:17,870 Procesor węzła. 644 00:34:17,870 --> 00:34:20,730 A następnie stamtąd, można eksportować, że do SoundCloud, ciebie 645 00:34:20,730 --> 00:34:25,320 może wysłać go w wiadomości e-mail, lub co chcesz stamtąd. 646 00:34:25,320 --> 00:34:31,159 >> Ale jest rodzajem niewielkiego bariery pomiędzy tworzeniem muzyki na komputerze 647 00:34:31,159 --> 00:34:33,050 i tworzenia muzyki w Internecie. 648 00:34:33,050 --> 00:34:37,940 >> SAM GREEN: I to jest nie unikalne dla tego API. 649 00:34:37,940 --> 00:34:44,060 Jest to funkcja zabezpieczeń Chrome i Myślę, że każdy inny nowoczesnej przeglądarki. 650 00:34:44,060 --> 00:34:45,860 Przeglądarka jest samowystarczalny. 651 00:34:45,860 --> 00:34:50,980 Tak na przykład, strona internetowa nie może używać JavaScript, aby włączyć dźwięk 652 00:34:50,980 --> 00:34:54,190 na na głośniki, na przykład. 653 00:34:54,190 --> 00:34:58,120 Albo nie można wyłączyć komputer. 654 00:34:58,120 --> 00:35:01,530 I nie ma punkt pośredni między tymi dwoma rzeczami, w prawo, 655 00:35:01,530 --> 00:35:05,960 więc albo masz kompletna abstrakcja, 656 00:35:05,960 --> 00:35:10,050 lub otworzyć błąd bezpieczeństwa najmu 657 00:35:10,050 --> 00:35:14,440 programista o złych intencjach zrobić co chcą z laptopem. 658 00:35:14,440 --> 00:35:18,104 I dlatego Chrome jest samowystarczalny. 659 00:35:18,104 --> 00:35:19,310 >> HUGH Zabriskie: Tak. 660 00:35:19,310 --> 00:35:20,840 Czy to ma sens? 661 00:35:20,840 --> 00:35:21,369 Fajne fajne. 662 00:35:21,369 --> 00:35:23,160 Ja po prostu się przedstawiają przykład jeden. 663 00:35:23,160 --> 00:35:25,118 To jest dość dużo, jak ile masz w kategoriach 664 00:35:25,118 --> 00:35:26,950 z dostępu do komputera użytkownika. 665 00:35:26,950 --> 00:35:30,180 Jeśli masz klawiaturę USB podłączony, można użyć coś o nazwie Web 666 00:35:30,180 --> 00:35:32,180 MIDI API, które nie będzie naprawdę mówić o tutaj, 667 00:35:32,180 --> 00:35:36,330 ale jest to kolejny API to zbudowany w co najmniej Chrome-- ponownie 668 00:35:36,330 --> 00:35:41,570 to dlaczego kochamy Chrome-- Myślę, Firefox lub Safari, 669 00:35:41,570 --> 00:35:44,300 jest to łatwa rzecz do google-- różnych przeglądarek 670 00:35:44,300 --> 00:35:46,917 inna pomoc dla których API mają wdrożony. 671 00:35:46,917 --> 00:35:49,875 Ale jeśli chcesz podłączyć klawiaturę i pracować z tych informacji, 672 00:35:49,875 --> 00:35:52,850 rodzaj wysłać klawiaturę Informacje na komputer 673 00:35:52,850 --> 00:35:57,620 a następnie użyć tej internecie, to API gdzie chcesz pracować to. 674 00:35:57,620 --> 00:35:58,150 >> Fajne. 675 00:35:58,150 --> 00:35:58,710 OK. 676 00:35:58,710 --> 00:36:01,320 Tak, szybko poruszających się na tutaj. 677 00:36:01,320 --> 00:36:03,310 Jak to robimy na czas? 678 00:36:03,310 --> 00:36:04,210 >> Głośnik 1: O 15. 679 00:36:04,210 --> 00:36:05,543 >> HUGH Zabriskie: 15 minut w lewo? 680 00:36:05,543 --> 00:36:06,160 Ok fajnie. 681 00:36:06,160 --> 00:36:08,170 Więc będziemy ścigać się w przyszłość tutaj. 682 00:36:08,170 --> 00:36:13,500 >> Więc w zasadzie, głównym punktem myśleć o tym jak o rurociągu 683 00:36:13,500 --> 00:36:16,430 jest to, że każdy etap w rurociągu Jest szereg węzłów audio. 684 00:36:16,430 --> 00:36:19,284 685 00:36:19,284 --> 00:36:20,950 Nasze źródło, powiedzmy, jest oscylator. 686 00:36:20,950 --> 00:36:23,380 Musimy stworzyć węzeł oscylatora. 687 00:36:23,380 --> 00:36:25,690 I to jest właśnie rodzaj małego function-- 688 00:36:25,690 --> 00:36:30,460 i są oparte na kontekstu dźwięku tutaj. 689 00:36:30,460 --> 00:36:32,885 >> PUBLICZNOŚCI: Kiedy to powiedział oscylatora, to znaczy, 690 00:36:32,885 --> 00:36:37,250 to faktycznie dosłownie począwszy od dwa różne bieguny iz powrotem? 691 00:36:37,250 --> 00:36:41,170 >> HUGH Zabriskie: Nie, to jest jak reprezentacja cyfrowa. 692 00:36:41,170 --> 00:36:42,740 To faktycznie realizowane w C ++. 693 00:36:42,740 --> 00:36:46,460 Tak naprawdę nie wiem, specyfikacje o tym, jak to faktycznie realizowane, 694 00:36:46,460 --> 00:36:48,500 ale to wszystko pracuje jako dane binarne. 695 00:36:48,500 --> 00:36:51,260 696 00:36:51,260 --> 00:36:52,370 Właściwie tak. 697 00:36:52,370 --> 00:36:53,950 To byłoby powiedzieć, mogłem w rzeczywistości, jeśli jesteś zainteresowany, 698 00:36:53,950 --> 00:36:56,533 Mogę wysłać Ci trochę więcej Informacje o tym, jak przebiegów 699 00:36:56,533 --> 00:37:00,181 utrzymywane są o formacie cyfrowym. 700 00:37:00,181 --> 00:37:00,680 Ok fajnie. 701 00:37:00,680 --> 00:37:03,120 >> Tak więc mamy do generowania dźwięku niczym sinus fal lub coś w tym stylu, może 702 00:37:03,120 --> 00:37:04,190 440 Hz. 703 00:37:04,190 --> 00:37:05,830 Tworzymy oscylator. 704 00:37:05,830 --> 00:37:09,180 Jeśli chcemy, aby ustawić głośność, mamy nic podłączać do GainNode, 705 00:37:09,180 --> 00:37:12,500 co może zrobić z .creategain. 706 00:37:12,500 --> 00:37:14,250 To ustawia głośność. 707 00:37:14,250 --> 00:37:17,820 Możesz przekazać, że na dowolnym drugiego options-- dobrze, 708 00:37:17,820 --> 00:37:20,300 Bufor to źródło dźwięku węzeł, w którym może 709 00:37:20,300 --> 00:37:23,660 przechowywać MP3, że już załadowany. 710 00:37:23,660 --> 00:37:27,670 >> Biquad jest filtr do filtrowania, jeżeli chcesz wziąć całą bazę z 711 00:37:27,670 --> 00:37:29,630 utworu, czy coś takiego. 712 00:37:29,630 --> 00:37:32,450 Broń Boże chcesz wziąć baza z piosenką. 713 00:37:32,450 --> 00:37:36,980 A węzłem AudioDestination jest znowu jak gdzie nasz finalizacja jest. 714 00:37:36,980 --> 00:37:39,980 Jeśli kiedykolwiek ciekaw wszystkie inne możliwe opcje, 715 00:37:39,980 --> 00:37:45,190 po prostu przejdź do zakładki i niech auto-complete wymyślić. 716 00:37:45,190 --> 00:37:48,690 A jeśli nie tworzyć, zobaczysz wszystko różne rzeczy, które można utworzyć. 717 00:37:48,690 --> 00:37:50,398 Możesz stworzyć dynamikę procesory skryptów, 718 00:37:50,398 --> 00:37:52,940 Ja nawet nie wiem co to jest do mieszania łączenia kanałów 719 00:37:52,940 --> 00:37:55,930 i rozgałęźniki kanałów i to wszystko. 720 00:37:55,930 --> 00:37:56,430 Fajne. 721 00:37:56,430 --> 00:37:59,560 722 00:37:59,560 --> 00:38:01,390 >> Więc jest to tylko Przykład rurociągu. 723 00:38:01,390 --> 00:38:03,580 Tak więc mamy trzy źródła w najbliższych. 724 00:38:03,580 --> 00:38:06,830 Być może są to przebiegi, być może są to pliki MP3. 725 00:38:06,830 --> 00:38:08,740 Jeden będzie przez filtrów, drugi pod 726 00:38:08,740 --> 00:38:12,404 coraz zniekształcone innego czyjaś panoramowanie w lewo i prawo. 727 00:38:12,404 --> 00:38:15,320 Można zrobić różne rzeczy i wszyscy mieszają się razem, 728 00:38:15,320 --> 00:38:18,880 i obecnie jest dźwięk Na koniec, jako miejsca przeznaczenia. 729 00:38:18,880 --> 00:38:22,720 Jest to przykład tego, co więcej skomplikowane Web Kod audio wygląda. 730 00:38:22,720 --> 00:38:26,720 Tworzysz wszystko różne obiekty tuż here-- 731 00:38:26,720 --> 00:38:27,706 Nie jestem tego pewien. 732 00:38:27,706 --> 00:38:29,120 Nie, to nie powiększać. 733 00:38:29,120 --> 00:38:29,620 OK. 734 00:38:29,620 --> 00:38:31,257 >> SAM GREEN: Robisz Control, Scroll-Up. 735 00:38:31,257 --> 00:38:32,590 HUGH Zabriskie: Kontrola Scroll-- 736 00:38:32,590 --> 00:38:33,000 SAM GREEN: Nie, nie. 737 00:38:33,000 --> 00:38:33,500 Kontrola-- 738 00:38:33,500 --> 00:38:36,540 739 00:38:36,540 --> 00:38:38,140 >> HUGH Zabriskie: Och, sterowania, Przewiń? 740 00:38:38,140 --> 00:38:38,780 Och, haczyka. 741 00:38:38,780 --> 00:38:41,480 Tak. 742 00:38:41,480 --> 00:38:42,240 Wow, Nie, Nie. 743 00:38:42,240 --> 00:38:42,740 OK. 744 00:38:42,740 --> 00:38:46,090 Nie zrobię tego. 745 00:38:46,090 --> 00:38:48,300 >> Więc tak, w ten pierwszy Sekcja tu widzisz 746 00:38:48,300 --> 00:38:52,720 tworzymy wszystko inaczej węzły z kontekstu. 747 00:38:52,720 --> 00:38:54,980 Jesteśmy po prostu je składając razem w drugiej części 748 00:38:54,980 --> 00:38:56,980 przez tę funkcję o nazwie Połącz. 749 00:38:56,980 --> 00:38:58,830 To naprawdę kluczem Funkcja w sieci Web Audio. 750 00:38:58,830 --> 00:39:01,930 Oznacza to tylko raz zrobiłeś coś z dźwiękiem w jednym węźle, 751 00:39:01,930 --> 00:39:03,705 przekazać je do kolejnego węzła. 752 00:39:03,705 --> 00:39:05,830 Tak więc mamy źródło, to łączy się z analizatora, 753 00:39:05,830 --> 00:39:09,140 analizator robi coś z nim, idzie do zakłóceń, i tak dalej, 754 00:39:09,140 --> 00:39:12,725 i przeznaczenia na dole tutaj. 755 00:39:12,725 --> 00:39:13,225 Fajne. 756 00:39:13,225 --> 00:39:14,640 OK, więc musimy ruszać dalej. 757 00:39:14,640 --> 00:39:17,180 >> Pipeline-- Ponownie, są najczęściej rurociągi, 758 00:39:17,180 --> 00:39:21,300 więc mówić o tych wszystkich rzeczach, takich jak zniekształceń, panoramowanie, wszystkie te rzeczy. 759 00:39:21,300 --> 00:39:24,280 Jeśli jesteś naprawdę zainteresowany w korzystaniu z rzeczy, Pro Tools, 760 00:39:24,280 --> 00:39:25,820 tych, prawdopodobnie Cię zainteresować. 761 00:39:25,820 --> 00:39:27,740 Jeśli nie, to może po prostu Aby odtwarzać dźwięk, 762 00:39:27,740 --> 00:39:29,990 a może po prostu chcesz ustawić głośność dźwięku. 763 00:39:29,990 --> 00:39:35,270 Są to dwa najpopularniejsze sortowania rurociągów w produkcji audio. 764 00:39:35,270 --> 00:39:38,640 >> Ponownie, sposoby, można go zabrać w jako oscillator-- tak, niech 765 00:39:38,640 --> 00:39:42,460 zrobić demo o tym tutaj. 766 00:39:42,460 --> 00:39:47,090 767 00:39:47,090 --> 00:39:52,225 Tak więc mamy zamiar stworzyć proste kontekst dźwięku tutaj, 768 00:39:52,225 --> 00:39:54,350 oraz, że będziemy aby stworzyć oscylator. 769 00:39:54,350 --> 00:39:58,620 Tak to jest, ponownie, jesteśmy po prostu zamiar zadzwonić Tworzenie oscylatora. 770 00:39:58,620 --> 00:40:07,030 Mamy zamiar ustawić częstotliwość na że 440 Hz, najbardziej lubianym. 771 00:40:07,030 --> 00:40:13,290 Następnie łączymy się, że do miejsca przeznaczenia point-- który jest głośnik, więc 772 00:40:13,290 --> 00:40:15,750 cel kontekstu. 773 00:40:15,750 --> 00:40:21,400 Wreszcie, po prostu powiedzieć, start zera sekund od teraz, a nie mamy dźwięk? 774 00:40:21,400 --> 00:40:22,400 >> [DZWONIENIE] 775 00:40:22,400 --> 00:40:24,980 >> HUGH Zabriskie: Zaczynamy. 776 00:40:24,980 --> 00:40:25,940 To tylko sinusoida. 777 00:40:25,940 --> 00:40:26,440 Ok fajnie. 778 00:40:26,440 --> 00:40:28,274 A potem będziemy przestań. 779 00:40:28,274 --> 00:40:30,520 >> PUBLICZNOŚCI: W przypadku, gdy nie , że opinie pochodzą? 780 00:40:30,520 --> 00:40:31,250 >> HUGH Zabriskie: Informacje zwrotne? 781 00:40:31,250 --> 00:40:32,458 Och, pewnie nasze mikrofony. 782 00:40:32,458 --> 00:40:34,221 783 00:40:34,221 --> 00:40:35,470 Więc tak, to w jaki sposób to zrobić. 784 00:40:35,470 --> 00:40:37,261 I rzeczywiście, gdybym miał utrzymywana jest uruchomiony, 785 00:40:37,261 --> 00:40:39,540 mogą mieć częstotliwość wartość, jak to działa, 786 00:40:39,540 --> 00:40:43,320 więc to dobra zabawa się bawić. 787 00:40:43,320 --> 00:40:44,930 Fajne. 788 00:40:44,930 --> 00:40:46,600 To zawsze piękny jeden przedstawić. 789 00:40:46,600 --> 00:40:48,792 >> SAM GREEN: nie myśleć o tym, że nie mamy? 790 00:40:48,792 --> 00:40:50,500 HUGH Zabriskie: Tak, to paskudny jeden. 791 00:40:50,500 --> 00:40:53,249 Tak więc, bufor loading-- pokażę Przykładem, że na samym końcu. 792 00:40:53,249 --> 00:40:55,090 To się ładowanie MP3. 793 00:40:55,090 --> 00:40:58,880 I mikrofon, można używać tylko funkcji nazywa Navigator.getUserMedia () 794 00:40:58,880 --> 00:41:03,240 do żądania dostępu do użytkownika, mikrofon do tych informacji. 795 00:41:03,240 --> 00:41:05,610 >> Oto, filtrowanie, będę po prostu ruszać z tego. 796 00:41:05,610 --> 00:41:08,600 Jest to dość wysoki poziom, ale filtry tylko pozwalają na 797 00:41:08,600 --> 00:41:16,154 >> [DŹWIĘKOWY] 798 00:41:16,154 --> 00:41:18,320 Filtrowanie pozwala także stworzyć takie rzeczy jak różowy 799 00:41:18,320 --> 00:41:20,050 hałas, brązowy hałas, szum biały. 800 00:41:20,050 --> 00:41:24,330 Jeśli chcesz stworzyć czysty dźwięk, który niektórzy ludzie lubią poeksperymentować z, 801 00:41:24,330 --> 00:41:27,490 można użyć Web Audio Filtrowanie to zrobić. 802 00:41:27,490 --> 00:41:30,039 >> Dźwięk Panning-- więc sobie wyobrazić, jeśli piszesz gry 803 00:41:30,039 --> 00:41:32,330 i chcesz dźwięk do brzmieć jak to nadchodzi, jak, 804 00:41:32,330 --> 00:41:36,090 fotografowania na ekranie, można Można użyć panoramowania audio 805 00:41:36,090 --> 00:41:39,770 do stworzenia tego rodzaju stożka, które like-- to całkiem Mathy, 806 00:41:39,770 --> 00:41:41,850 ale to jest rzeczywiście bardzo fajne, jeśli masz pracować, 807 00:41:41,850 --> 00:41:44,500 i nie ma jakiś dobry tutoriali na to mogę wysłać. 808 00:41:44,500 --> 00:41:46,400 Zasadniczo, można rodzaju od tworzenia dźwięku 809 00:41:46,400 --> 00:41:50,480 coś dzieje przez w sposób 3D. 810 00:41:50,480 --> 00:41:57,350 A jeśli masz interes DJ, można rozpocząć mieszanie i krzyż blaknięcie piosenki. 811 00:41:57,350 --> 00:42:01,260 >> To tylko niektóre bardzo podstawowe Kod, w zasadzie to, co zrobiłem wcześniej. 812 00:42:01,260 --> 00:42:06,140 To ustawia głośność oscylatora, więc tworzymy naszą oscylator 813 00:42:06,140 --> 00:42:07,380 który tworzy kształt fali. 814 00:42:07,380 --> 00:42:09,940 Tworzymy naszą GainNode, ustawić naszą częstotliwość, 815 00:42:09,940 --> 00:42:14,170 a następnie podłączyć oscylator do GainNode, które to zasadniczo zmienia 816 00:42:14,170 --> 00:42:16,760 ile sygnał jest akceptowane. 817 00:42:16,760 --> 00:42:20,467 Ale tak naprawdę, to cyfrowe rzeczą, więc jest to bardziej just-- tak. 818 00:42:20,467 --> 00:42:23,550 To nie jest to, co naprawdę się dzieje, ale to, co dzieje się w prawdziwym życiu 819 00:42:23,550 --> 00:42:24,393 z zyskiem. 820 00:42:24,393 --> 00:42:27,258 >> PUBLICZNOŚCI: --quantization parametru głośności? 821 00:42:27,258 --> 00:42:28,174 HUGH Zabriskie: Słucham? 822 00:42:28,174 --> 00:42:30,360 PUBLICZNOŚCI: czy jest to Parametr objętość kwantyzowany? 823 00:42:30,360 --> 00:42:31,840 HUGH Zabriskie: Tak. 824 00:42:31,840 --> 00:42:34,620 I to jest jedna rzecz, jestem naprawdę niedobór w mojej wiedzy, 825 00:42:34,620 --> 00:42:38,010 jak wzmocnienie działa na poziomie cyfrowym. 826 00:42:38,010 --> 00:42:40,140 Wiem, ze faktyczna sygnały, to w zasadzie 827 00:42:40,140 --> 00:42:45,120 kontrolowanie, ile jesteś wzmacniający sygnał. 828 00:42:45,120 --> 00:42:47,017 Więc tak. 829 00:42:47,017 --> 00:42:50,100 Wyślę ci więcej informacji na temat , że ponieważ byłbym ciekaw rzeczywistości 830 00:42:50,100 --> 00:42:51,099 wiedzieć więcej na ten temat. 831 00:42:51,099 --> 00:42:54,090 Ale w zasadzie parametry są, jedno jest fold-- 832 00:42:54,090 --> 00:42:59,690 głośniejszy signal-- i zero ma sygnał, lub nie będzie słychać żadnego dźwięku. 833 00:42:59,690 --> 00:43:03,150 Będziemy pominąć czas demo za, bo to w zasadzie to, co zrobiłem wcześniej. 834 00:43:03,150 --> 00:43:07,630 I znowu, Context.Destination jest węzeł docelowy dźwięk. 835 00:43:07,630 --> 00:43:08,360 Niesamowite, OK. 836 00:43:08,360 --> 00:43:10,470 >> Więc mam zamiar zrobić szybkie dwa dema. 837 00:43:10,470 --> 00:43:11,760 Jak to robimy na czas? 838 00:43:11,760 --> 00:43:12,640 >> Głośnik 1: około 10 minut. 839 00:43:12,640 --> 00:43:13,130 >> HUGH Zabriskie: 10 minut? 840 00:43:13,130 --> 00:43:13,630 Wielki! 841 00:43:13,630 --> 00:43:14,320 Niesamowite. 842 00:43:14,320 --> 00:43:19,010 >> Więc pierwszy będę nie, to się nazywa moja ulubiona piosenka. 843 00:43:19,010 --> 00:43:22,410 Więc jest to tylko Trochę HTML JavaScript. 844 00:43:22,410 --> 00:43:25,510 My będziemy mieć dwa przyciski na stronie grać moją ulubioną piosenkę 845 00:43:25,510 --> 00:43:29,192 i zatrzymać moją ulubioną piosenkę. 846 00:43:29,192 --> 00:43:30,180 Będę to zmienić. 847 00:43:30,180 --> 00:43:32,110 >> PUBLICZNOŚCI: Przykryj mikrofon. 848 00:43:32,110 --> 00:43:33,430 >> HUGH Zabriskie: Tak. 849 00:43:33,430 --> 00:43:36,300 I już załadowany tutaj skrypt basically-- 850 00:43:36,300 --> 00:43:38,520 i to jest bardzo przydatne do ładowania plików MP3, 851 00:43:38,520 --> 00:43:41,820 więc to właśnie sprawia, loading pliki MP3 sposób szybciej. 852 00:43:41,820 --> 00:43:44,180 To w zasadzie tylko opakowaniem. 853 00:43:44,180 --> 00:43:48,737 To właśnie sprawia, że ​​proces załadunku MP3 znacznie szybciej, 854 00:43:48,737 --> 00:43:51,570 inaczej używasz żądania HTTP, tak jakby, co robimy 855 00:43:51,570 --> 00:43:53,950 od aktualnego utworu zestaw z serwerem. 856 00:43:53,950 --> 00:43:55,950 To naprawdę brzydki, jesteś nie chcę, aby to zrobić. 857 00:43:55,950 --> 00:44:04,110 >> Więc ten facet, Boris SMUs, napisał naprawdę przydatne trochę narzędzie o nazwie BufferLoader. 858 00:44:04,110 --> 00:44:08,780 Wszystko co musisz zrobić to po prostu przekazać go do kontekst, przekazać to list-- 859 00:44:08,780 --> 00:44:11,327 lub, tak, jest to lista w JavaScript? 860 00:44:11,327 --> 00:44:12,160 SAM GREEN: Tablica. 861 00:44:12,160 --> 00:44:14,201 HUGH Zabriskie: Och, to jest tablica, to prawda. 862 00:44:14,201 --> 00:44:18,660 To szereg ścieżek do innych plików. 863 00:44:18,660 --> 00:44:21,990 A następnie przekazać to funkcja. 864 00:44:21,990 --> 00:44:25,530 To jest zwrotna rozmawialiśmy temat z asynchronicznego ładowania. 865 00:44:25,530 --> 00:44:28,720 To będzie nazwane Gdy pliki ładowane. 866 00:44:28,720 --> 00:44:33,780 I to funkcja, która jest wywoływana, gdy Plik zajmuje włożone w obwodzie 867 00:44:33,780 --> 00:44:35,840 tablica obciążonych buforów. 868 00:44:35,840 --> 00:44:37,990 Tak, że występuje tu. 869 00:44:37,990 --> 00:44:41,180 Zasadniczo BufferList jest będzie jednym value-- 870 00:44:41,180 --> 00:44:46,380 czy to będzie tablica Długość jednego, który ma w nim w indeksie 871 00:44:46,380 --> 00:44:51,320 wyzerować cały plik załadowany w formacie MP3. 872 00:44:51,320 --> 00:44:53,320 Więc co zrobić, gdy skończę Ładowanie jest, po prostu 873 00:44:53,320 --> 00:44:57,430 utworzyć źródło bufora, które jest audio węzeł źródłowy bufora. 874 00:44:57,430 --> 00:45:03,410 Następnym krokiem jest załadować w source.buffer jako pełnego bufora ładowanego 875 00:45:03,410 --> 00:45:06,740 z BufferList-- to dużo buffers-- 876 00:45:06,740 --> 00:45:10,255 a następnie podłączyć ten dźwięk bufor do miejsca przeznaczenia. 877 00:45:10,255 --> 00:45:12,380 Więc co to będzie zrobić jest po prostu umieścić MP3 878 00:45:12,380 --> 00:45:15,260 prosto do wyjściu i od razu zacząć go 879 00:45:15,260 --> 00:45:18,010 na coraz to wezwanie. 880 00:45:18,010 --> 00:45:21,660 >> Fajne, więc zobaczymy to się stało w akcji. 881 00:45:21,660 --> 00:45:24,490 My [niesłyszalne] tutaj, zobaczmy. 882 00:45:24,490 --> 00:45:26,430 Więc jestem po prostu będzie uruchomić serwer podstawowy. 883 00:45:26,430 --> 00:45:28,660 To coś, co co trzeba zrobić, jeśli jesteś 884 00:45:28,660 --> 00:45:32,490 co żądania wczytywania plików. 885 00:45:32,490 --> 00:45:34,140 Zamierzam uruchomić serwer podstawowy. 886 00:45:34,140 --> 00:45:38,200 Jest to w zasadzie cała PSET teraz w jednej linii, 887 00:45:38,200 --> 00:45:43,930 ale to dopiero zaczyna serwer na porcie 80/80. 888 00:45:43,930 --> 00:45:47,300 Więc idziemy tutaj, my będzie załadować 80/80, 889 00:45:47,300 --> 00:45:49,110 mamy zamiar udać się moja ulubiona piosenka. 890 00:45:49,110 --> 00:45:51,660 Więc jeśli uderzę "Play My ulubiona piosenka "już teraz, 891 00:45:51,660 --> 00:45:53,964 to będzie załadować moje ulubiona piosenka i grać it-- 892 00:45:53,964 --> 00:45:55,880 [MUZYKA - The Eagles, "Życie w SZYBKO  PAS RUCHU"] 893 00:45:55,880 --> 00:46:00,490 --which dzieje się "Życie w Fast Lane "przez The Eagles. 894 00:46:00,490 --> 00:46:06,346 Teraz mogę uderzyć "Stop moje ulubiona piosenka "i odtworzyć go. 895 00:46:06,346 --> 00:46:09,160 >> [MUZYKA - The Eagles, "Życie w SZYBKO  PAS RUCHU"] 896 00:46:09,160 --> 00:46:18,340 >> A jeśli pójdę na pocieszyć, bo Kiedyś zmienną globalną tutaj 897 00:46:18,340 --> 00:46:23,390 śledzić tej wartości, to w rzeczywistości Teraz będą rozpoznawane w konsoli. 898 00:46:23,390 --> 00:46:25,160 Więc to automatycznie tworzy dla mnie. 899 00:46:25,160 --> 00:46:29,991 Więc to, co gra teraz, i mogę po prostu zadzwonić source.stop () 900 00:46:29,991 --> 00:46:30,490 Na tym. 901 00:46:30,490 --> 00:46:34,930 902 00:46:34,930 --> 00:46:35,860 Cóż, wiesz co? 903 00:46:35,860 --> 00:46:39,760 Tak wy słyszeliście to song-- może rozpoznać tę piosenkę. 904 00:46:39,760 --> 00:46:41,801 >> [MUZYKA - Rick Astley, "nigdy nie poddam  WSTAŁEŚ"] 905 00:46:41,801 --> 00:46:42,299 906 00:46:42,299 --> 00:46:44,215 [MUZYKA - The Eagles, "Życie w SZYBKO  PAS RUCHU"] 907 00:46:44,215 --> 00:46:46,195 Mamy teraz wszystkie zostały Rickrolled. 908 00:46:46,195 --> 00:46:50,155 OK, świetnie, przejściem. 909 00:46:50,155 --> 00:46:51,160 Fajne. 910 00:46:51,160 --> 00:46:54,554 Tak to jest w zasadzie przykładem jak można załadować MP3 file-- 911 00:46:54,554 --> 00:46:56,470 [MUZYKA - The Eagles, "Życie w SZYBKO  PAS RUCHU"] 912 00:46:56,470 --> 00:46:59,590 --and grać i zatrzymać i uruchomić go. 913 00:46:59,590 --> 00:47:03,008 Mogłem zrobić dużo więcej [niesłyszalne] 914 00:47:03,008 --> 00:47:07,570 >> Ten ostatni Zrobię to, Pokażę ci w [niesłyszalne]. 915 00:47:07,570 --> 00:47:18,070 >> [MUZYKI] 916 00:47:18,070 --> 00:47:21,800 >> To jak, ogg.wave.mp3. 917 00:47:21,800 --> 00:47:26,450 Myślę, że, jeśli dobrze pamiętam, Zabrakło mi do niektórych problemów z .m4a, 918 00:47:26,450 --> 00:47:27,721 ale nie jestem pewien. 919 00:47:27,721 --> 00:47:28,470 Myślę mp3.wave-- 920 00:47:28,470 --> 00:47:28,930 921 00:47:28,930 --> 00:47:30,971 >> [MUZYKA - Rick Astley, "nigdy nie poddam  WSTAŁEŚ"] 922 00:47:30,971 --> 00:47:35,930 923 00:47:35,930 --> 00:47:36,500 >> Ok świetnie. 924 00:47:36,500 --> 00:47:37,625 Nie powinienem tego mówić. 925 00:47:37,625 --> 00:47:40,570 W każdym razie, cześć. 926 00:47:40,570 --> 00:47:43,430 927 00:47:43,430 --> 00:47:45,490 Mamy więc w tym otwarte. 928 00:47:45,490 --> 00:47:52,320 Więc teraz wszystko co robię to, ja w zasadzie stworzył podstawowa składnia do tworzenia muzyki. 929 00:47:52,320 --> 00:47:57,610 Więc jeśli mi się coś podobnego, dodać g4 2 na 1, co oznacza, że ​​jest to, że, 930 00:47:57,610 --> 00:48:00,950 dodać notatki fortepianowej, G4, która jest czwartą G 931 00:48:00,950 --> 00:48:02,680 się na fortepianu od dołu. 932 00:48:02,680 --> 00:48:05,930 Jest to więc rodzaj MIDI mówić, więc dla tych, którzy są na bazie muzyki, 933 00:48:05,930 --> 00:48:07,860 to jest po prostu nuty MIDI. 934 00:48:07,860 --> 00:48:10,090 >> PUBLICZNOŚCI: To G Bliskiego C, prawda? 935 00:48:10,090 --> 00:48:11,840 >> HUGH Zabriskie: To jest G powyżej Bliskim C, to prawda. 936 00:48:11,840 --> 00:48:12,470 >> PUBLICZNOŚCI: Przede Bliski C. 937 00:48:12,470 --> 00:48:13,345 >> HUGH Zabriskie: Tak. 938 00:48:13,345 --> 00:48:14,340 Aktualnie tak. 939 00:48:14,340 --> 00:48:16,131 Myślę, że rzeczywiście go jednym [niesłyszalne], 940 00:48:16,131 --> 00:48:18,860 więc to może być o oktawę wyżej, że. 941 00:48:18,860 --> 00:48:20,070 Więc zobaczymy. 942 00:48:20,070 --> 00:48:21,152 Jeśli uderzę Play-- 943 00:48:21,152 --> 00:48:22,110 [Powtarzalne PIANO UWAGA] 944 00:48:22,110 --> 00:48:23,200 --we're będzie słyszeć. 945 00:48:23,200 --> 00:48:25,700 Chodzi o to, że działa podobnie jak wiersz polecenia będzie, 946 00:48:25,700 --> 00:48:27,510 więc jeśli idę w górę iw dół na klawiaturze, można 947 00:48:27,510 --> 00:48:31,550 można wrócić do poprzedniej Polecenia, które jest bardzo przydatne. 948 00:48:31,550 --> 00:48:35,136 I poniżej jest moja lista utworów, które są uruchomione na pętli. 949 00:48:35,136 --> 00:48:38,260 >> PUBLICZNOŚCI: Byłaś przy założeniu, że 88-klawiszowa klawiatura na tym, prawda? 950 00:48:38,260 --> 00:48:41,051 >> HUGH Zabriskie: Pytanie było, ja przy założeniu 88-klawiszową klawiaturę, 951 00:48:41,051 --> 00:48:41,990 i tak, jestem. 952 00:48:41,990 --> 00:48:45,030 To, co zrobiłem to ja w zasadzie wziął 88 próbek 953 00:48:45,030 --> 00:48:46,970 fortepianu, po jednym dla każdej nuty. 954 00:48:46,970 --> 00:48:49,180 I tak za każdym razem kiedy usłyszeć nutę od teraz, 955 00:48:49,180 --> 00:48:57,550 że w rzeczywistości jest pętla, która wygląda like-- ten jest coraz grał na pętli, 956 00:48:57,550 --> 00:49:00,120 więc dla każdej nuty, to działa. 957 00:49:00,120 --> 00:49:02,860 Co się dzieje w tym, że utworzenie bufora ponownie 958 00:49:02,860 --> 00:49:06,010 Utworzyć węzeł wzmocnienia, aby ustawić głośność. 959 00:49:06,010 --> 00:49:08,240 To po prostu naprawdę skomplikowany sposób powiedzenia I 960 00:49:08,240 --> 00:49:10,550 przechowywać bufor w source.buffer. 961 00:49:10,550 --> 00:49:13,160 Daję zysk, ja podłączyć go do zysku, 962 00:49:13,160 --> 00:49:15,576 wzmocnienie jest połączony z wyjście, a potem grać. 963 00:49:15,576 --> 00:49:20,735 Tak, że to rodzaj procesu podjęcia w źródle buforowej. 964 00:49:20,735 --> 00:49:24,820 >> PUBLICZNOŚCI: rzeczywiście można podjąć, że suchy dźwięk i sprawiają, że mokre [niesłyszalne]? 965 00:49:24,820 --> 00:49:26,260 >> HUGH Zabriskie: Można, tak. 966 00:49:26,260 --> 00:49:29,260 Tam ponownie czasownik, nie opóźnienia, zakłócenia. 967 00:49:29,260 --> 00:49:33,260 Można w zasadzie umieścić coś w między kanapki of-- w tym również, 968 00:49:33,260 --> 00:49:37,660 Rurociąg jest lepsza metafora, ale można dodać coś w tym. 969 00:49:37,660 --> 00:49:38,200 Fajne. 970 00:49:38,200 --> 00:49:40,280 >> Więc kończę demo tutaj, aby dać poczucie 971 00:49:40,280 --> 00:49:46,390 po prostu sama liczba czasów, które można uruchomić tę funkcję, wszystkie na raz. 972 00:49:46,390 --> 00:49:49,280 Więc mam zamiar usunięcia tego. 973 00:49:49,280 --> 00:49:59,110 Mam zamiar stworzyć generator that-- w zasadzie to, co does-- to jest naprawdę 974 00:49:59,110 --> 00:50:04,220 rodzaj skomplikowanej syntax-- ale będzie generować notatki na bieżąco, 975 00:50:04,220 --> 00:50:06,601 i po prostu zacząć grać im, jak ocenia je. 976 00:50:06,601 --> 00:50:07,392 [Wstawienie PIANO] 977 00:50:07,392 --> 00:50:10,990 978 00:50:10,990 --> 00:50:12,817 >> Tak więc możemy po prostu zrobić tutaj trochę muzyki. 979 00:50:12,817 --> 00:50:13,608 [Wstawienie PIANO] 980 00:50:13,608 --> 00:50:39,570 981 00:50:39,570 --> 00:50:41,470 >> Więc co to polecenie ma, na przykład, 982 00:50:41,470 --> 00:50:46,910 trzeba te trzy notatki z fortepian, a następnie umieszcza je na B3. 983 00:50:46,910 --> 00:50:48,660 Ta składnia może zrobić trochę więcej sensu 984 00:50:48,660 --> 00:50:50,590 dla tych, którzy mają muzyka w tle tutaj. 985 00:50:50,590 --> 00:50:55,180 986 00:50:55,180 --> 00:50:56,551 >> Mogę dodać do bass drum. 987 00:50:56,551 --> 00:50:57,050 Mogę-- 988 00:50:57,050 --> 00:50:58,048 >> [Wstawienie INSTRUMENTY] 989 00:50:58,048 --> 00:50:59,256 >> --just bawić się z tym. 990 00:50:59,256 --> 00:51:12,519 991 00:51:12,519 --> 00:51:13,474 >> Więc można make-- 992 00:51:13,474 --> 00:51:14,515 [Wstawienie INSTRUMENTY] 993 00:51:14,515 --> 00:51:15,513 Że jeden jest trochę bardziej irytujące. 994 00:51:15,513 --> 00:51:16,554 [Wstawienie INSTRUMENTY] 995 00:51:16,554 --> 00:51:26,491 996 00:51:26,491 --> 00:51:30,981 >> Tak, że losowo dodaje suchy talerz na każde 16 notatki, z 16% 997 00:51:30,981 --> 00:51:31,481 [NIESŁYSZALNY]. 998 00:51:31,481 --> 00:51:32,522 >> [Wstawienie INSTRUMENTY] 999 00:51:32,522 --> 00:51:40,962 1000 00:51:40,962 --> 00:51:50,400 >> Tak, tak, droga ta works-- to zawsze w formacie 4: 4. 1001 00:51:50,400 --> 00:51:51,441 [Wstawienie INSTRUMENTY] 1002 00:51:51,441 --> 00:52:06,910 1003 00:52:06,910 --> 00:52:10,902 >> Tak, więc w okresie czterech kwartałów i 16/8. 1004 00:52:10,902 --> 00:52:14,851 1005 00:52:14,851 --> 00:52:15,892 [Wstawienie INSTRUMENTY] 1006 00:52:15,892 --> 00:52:27,970 1007 00:52:27,970 --> 00:52:33,780 >> Tak średnio, otrzymasz 60% trafień na 16 notatek. 1008 00:52:33,780 --> 00:52:35,990 >> W każdym razie, to tylko rodzaju, aby pokazać 1009 00:52:35,990 --> 00:52:39,780 niektóre z rzeczy, które mogłyby budować z Web Audio API. 1010 00:52:39,780 --> 00:52:43,840 To naprawdę potężne, to naprawdę szybko, i można zrobić wiele fajnych rzeczy 1011 00:52:43,840 --> 00:52:44,340 z tym. 1012 00:52:44,340 --> 00:52:51,260 Więc jeszcze raz, na wszelkie pytania, e-mail myself-- Hugh-- lub Sam, 1013 00:52:51,260 --> 00:52:55,869 i szczerze mówiąc, Google ma mnóstwo dobrych zasobów. 1014 00:52:55,869 --> 00:52:56,660 Jakieś ostatnie pytania? 1015 00:52:56,660 --> 00:52:57,970 Tak. 1016 00:52:57,970 --> 00:53:00,790 >> PUBLICZNOŚCI: Tak można uzyskać dostęp do wbudowany mikrofon. 1017 00:53:00,790 --> 00:53:03,089 Co zrobić, jeśli chcesz użyć lepszego mikrofonu? 1018 00:53:03,089 --> 00:53:05,380 HUGH Zabriskie: Jeśli chciałeś użyć lepszego mikrofonu? 1019 00:53:05,380 --> 00:53:11,320 Więc jeszcze raz, to jest częścią abstrakcja między Chrome 1020 00:53:11,320 --> 00:53:12,950 i reszta komputera. 1021 00:53:12,950 --> 00:53:18,950 O ile nie jest ona dostępna za pośrednictwem API, takich jak Web MIDI API, 1022 00:53:18,950 --> 00:53:22,030 można chyba znaleźć jakieś hacki, ale generalnie nie, jak to możliwe. 1023 00:53:22,030 --> 00:53:25,300 >> SAM GREEN: Możesz also-- wszystkie Chrome wie 1024 00:53:25,300 --> 00:53:28,820 jest to, co domyślny mikrofon jest i to, że dostęp. 1025 00:53:28,820 --> 00:53:33,410 Więc jeśli miał mikrofon mogłeś ustaw jako mikrofonu komputera, 1026 00:53:33,410 --> 00:53:35,990 można do niego dostęp w ten sposób i to prawdopodobnie będzie działać. 1027 00:53:35,990 --> 00:53:37,490 HUGH Zabriskie: To dobry punkt. 1028 00:53:37,490 --> 00:53:39,656 Nigdy nie próbowałem, ale może być w stanie do rodzaju 1029 00:53:39,656 --> 00:53:45,700 of-- jeśli przekierowanie głośnik wejściowego, może być w stanie to zrobić, tak. 1030 00:53:45,700 --> 00:53:48,360 >> Jakieś ostatnie pytania? 1031 00:53:48,360 --> 00:53:49,340 Fajne. 1032 00:53:49,340 --> 00:53:51,680 Dobrze dziękuję chłopaki tak wiele do oglądania. 1033 00:53:51,680 --> 00:53:52,199 Jestem Hugh. 1034 00:53:52,199 --> 00:53:52,990 SAM GREEN: Jestem Sam. 1035 00:53:52,990 --> 00:53:55,410 HUGH Zabriskie: I to jest CS50. 1036 00:53:55,410 --> 00:53:56,767