>> SAM GREEN: Cześć wszystkim.
Zapraszamy do naszego seminarium.
Mam na imię Sam.
HUGH Zabriskie: Jestem Hugh.
SAM GREEN: I będziemy rozmawiać dziś o JavaScript i Web API audio.
Wystarczy, aby zacząć, to jest zarys naszego porządku obrad seminarium.
Mamy zamiar zacząć od rozmowy o Dlatego powinny być zainteresowany w internecie
Audio API, dlaczego JavaScript język należy do niego,
a następnie rozmawiać o JavaScript essentials-- tak jak,
przejść przez niektóre Podstawy języka,
a następnie rozmawiać o API audio na wysokim poziomie.
Następnie, Hugh będą rozmawiać o niektórych z etapów produkcji audio
a następnie demo to niesamowite sekwencera Projekt zbudował i pokazać kod.
A potem będziemy mieć czas na pytania na końcu dla ludzi
którzy tu mieszkają.
>> HUGH Zabriskie: Spoko.
>> SAM GREEN: Spoko.
>> HUGH Zabriskie: Spoko.
Ja kopię zapasową.
>> SAM GREEN: Tak, pierwsze rzeczy pierwsze.
Tak więc jednym z wielkich rzeczy o Web Audio API
jest to, że nie ma zestawu wymagane w górę.
Wchodzi on wbudowany w większość nowoczesnych przeglądarek,
w tym Chrome, EDGE, całość grono wiele innych, wszystkie te
że duże fragmenty osób korzysta dziś.
Więc nie ma się ustawić, Oprócz dopiero się
serwer WWW będzie dla aby zacząć pracę
nad projektem, co jest dobre.
>> Zalecamy dość w dużym stopniu, że w przyszłości
za pomocą Chrome Tworzenie stron internetowych JavaScript,
tylko dlatego, że jej twórca narzędzia są bardzo silne.
Jako przykład tylko to, co mamy na myśli, mówiąc otworzyć swój JavaScript
console-- jeśli pójdziesz do Chrome i spojrzeć na dowolnej stronie internetowej,
i kliknij lewym przyciskiem myszy Sprawdź, Element, a następnie
udać się do tego małego rozwijanej tu i kliknij na konsoli,
zobaczysz, co otwiera wygląda trochę jak w wierszu polecenia, które ci
można zobaczyć na komputerze Mac lub na ID.
I tak po prostu, możemy Typ polecenia tutaj, jak pogodnie,
i inne komendy, takie jak to.
Możemy tworzyć zmienne, jak Zobaczymy później w JavaScript.
A więc wszystko, co możemy zrobić w JavaScript, możemy zrobić z konsoli,
i to jest bardzo wygodnym sposobem rozpocząć odtwarzanie z API
i przyzwyczajenie się JavaScript tuż nietoperza.
Nie wymaga konfiguracji, co jest naprawdę miłe.
Fajne.
Niesamowite.
>> Więc po prostu jeszcze jedno do dodania.
Jeśli masz jakiekolwiek questions-- istnieją wielu z was, którzy nie są tu mieszkać,
czuje swobodnie email us-- te są nasze adresy e-mail.
Jeśli masz pytania nie chcesz, aby zwrócić się do nas,
jak, oh mam błąd w moim kodu, czy coś
to trochę bardziej szczegółowe, Może google to pierwsza.
Istnieje wiele wspaniałych zasobów o Web Audio API tam.
To naprawdę dobrze udokumentowane i to jest
używany przez ludzi w tonę przemysł, i ludzi, którzy są po prostu
budowanie zabawnych rzeczy dla siebie.
Tak więc powinno być znacznie zasobów tam.
Niesamowite.
>> Fajne, więc dlaczego Web Audio API?
Ten schemat jest trochę od ewolucji drogi
Dźwięk w internecie wzrosła w czasie.
Bgsound było jak oryginalnego tagu HTML Internet Explorer wykorzystane do wsparcia.
To pozwoliło tylko na dość podstawowych dźwięków, funkcjonalność nie była bardzo mocna,
i nie można było zrobić skomplikowane sekwencjonowanie,
lub kontroli, gdy dźwięk zaczął i zatrzymał się bardzo solidnie.
Tak więc, nie było szczególnie dobrze rozwinięta.
Następnie, po tym, Flash przyszedł along-- które,
Jestem pewien, że chłopaki są znane z Flash-- może nie, jak to działa,
ale ty z pewnością widział.
Musisz uaktualnić Flash Plug-in, wszystkie tego rodzaju rzeczy,
i że na pewno rozszerzono zakres funkcjonalności, co było dostępne.
Ale co użytkownikowi zainstalować plug-in jest zdecydowanie
Wadą w tym Flash w aplikacji, prawda?
Bo to jesteś na utrzymaniu użytkownik będzie i znalezienie tej wtyczki,
i prawdopodobnie jest włączony się przez ten dodatkowy krok
muszą podjąć, aby korzystać z aplikacji.
A potem może być aktualizacja że będzie złamać całą aplikację,
i kończy się koszmar dla dewelopera, też.
Więc to była barykada.
>> A potem, że przyszedł, Audio tag HTML, który
Jest to funkcja bardziej nowoczesne HTML-- które pewnością pozwoliło na dużo więcej rzeczy,
ale nawet rzeczy można zrobić Było trochę ograniczone tylko
wskutek rzeczy że HTML był w stanie.
Tak więc, gdy JavaScript API Web API audio,
stała się standardem praktyki w różnych przeglądarkach,
które naprawdę rozszerzyła zestaw możliwości dla deweloperów
naprawdę dostać się do budynku fajne rzeczy w internecie.
Przez długi czas nie było były naprawdę solidne narzędzia
dla rodzimych aplikacji audio, like-- każdy wie, GarageBand,
i to oczywiście jest więcej profesjonalnych aplikacji audio mieszania,
i tego typu rzeczy.
Ale nie było naprawdę dobry Cloud-- nie
Chmura, tak, myślę, Cloud-- platforma internetowa
które umożliwiają programistom tworzenie aplikacji dla ludzi
zrobić mieszanie audio.
I jak on pokazuje, później Web Audio API
pozwala na bardzo wydajne rzeczy po prostu się stało naprawdę,
co jest całkiem fajne.
Więc to jest instrukcja do dlaczego powinny oglądać resztę seminarium,
gruntownie.
>> A teraz mam zamiar mówić o niektóre JavaScript-- tylko podstawowe elementy
języka, tak, że możemy być na tej samej stronie
kiedy mówimy o API trochę później.
Fajne.
>> Tak więc, jest to podsumowanie.
Zapomniałem to było tutaj.
Tak.
>> HUGH Zabriskie: Jest dwa slajdy tutaj.
>> SAM GREEN: To jest podsumowanie niektóre z tych ograniczeń
innych obowiązujących, starych metod.
I to teraz, mamy te rzeczy.
Fajne.
Niesamowite.
>> Tak, Essentials JavaScript.
Na początek, nie ma dość istotna różnica
w porównaniu JavaScript w sposób język C, w drodze
że zmienne są tworzone.
Więc w C, jesteśmy przyzwyczajeni do wpisać nasze zmienne, prawda?
I nie mam na myśli typu jak wpisz je w polu, to znaczy typ
jak przypisać im type-- znaczenia jak int, float, char.
W C, byliśmy naprawdę wykorzystywane do konieczności tworzenia zmienną
a następnie trzymać się tego typu dla Cały czas, który możemy użyć tej zmiennej.
I to nie jest koniecznie, co gorsza, ale to chyba trudniejszy w obsłudze.
Jedną z ciekawych funkcji z JavaScript jest
że zmienne są co nazywa "dynamicznie wpisane", który
Oznacza to, że mogę stworzyć zmienna o tej składni,
varX równy 5, na przykład.
Że początkowo tworzy liczbą całkowitą zmienna--
tuż pod kaptur somewhere-- ale
może zmienić tej zmiennej odnosi się do łańcucha
nie robiąc nic, jak utworzenie nowej zmiennej.
I nie trzeba się martwić o zmiany typu.
JavaScript wie, że typ użytkownika zmianie, i że dzieje się dynamicznie.
>> Tak, istnieją korzyści i wady, które,
jak każdy, kto pracował w JavaScript na chwilę może wiedzieć.
Są chwile, kiedy Państwo może przypadkowo
zmienić typ zmiennej i Nie dotykać, że zmiana typu,
a następnie JavaScript może crash-- lub wyjątek
zostać wyrzucony, ponieważ będziesz mieć niewłaściwy typ, kiedy można się spodziewać jednego typu.
Fajne.
>> Tak, scoping-- które jest niczym, jeśli Pamiętam wczesne tygodnie w toku,
odnosi się do sposobu widocznego zmiennej jest iw jakim obszarze kodu.
Wszystko to wygląda bardzo podobnie do jej wyglądu w C.
Tak więc zmienne są zakrojony na ogół w ramach nawiasy, w zależności,
a następnie są też Zmienne o zasięgu globalnym, które
are-- jeśli piszesz zmienną poza funkcją,
będzie on widoczny w całym tekście.
>> Jedną z różnic pomiędzy JavaScript i C, w szczególności,
jest to, że jeśli deklarują światowy zmienną w dowolnym miejscu w pliku tekstowym
jest to widoczne w dowolnej funkcji w tym pliku tekstowym.
Zgadza się, prawda?
>> HUGH Zabriskie: Tak.
>> SAM GREEN: Więc to też trochę nieco ostry w stosunku do C,
gdzie zawsze musiał mieć nasze Powyższe definicje zmiennych miejscach
zostały one użyte.
To nie jest zasada, że ​​egzekwowane więcej, tak, trochę inaczej.
I znowu po prostu jeszcze raz podkreślić, Globalny kontra lokalnego variables--
bardzo podobny do C. Można mieć dwie zmienne o tej samej nazwie,
i mają jeden z ich nazwami być zasłonięta przez zmienną lokalną, jeżeli jeden z nich
był globalny.
Tak więc, podobnie rodzaj Problemy, że niektórzy z was
może biegać w niektórych Twojego problemu ustawia tak daleko.
Fajne, więc to jest zmienne.
>> Przepływ sterowania, czyli jak, jeśli-else-- logiczne stuff-- i pętle.
Więc na początek, to jest to, co if-else Oświadczenia wygląda w JavaScript.
Umieszczenie różnych rzeczy na liniach nie ma znaczenia.
To tylko jeden z konwencji za sposób kodu struktury możemy.
Podobnie jak w C, mamy "jeśli", oświadczenie nawias.
To nie jest to, co chciałem zrobić.
Znowu to zrobiłem.
>> HUGH Zabriskie: Starając się wyjść?
SAM GREEN: Nie, jestem po prostu staramy się powiększać.
To nie ma znaczenia.
>> Tak, mamy "if" i mamy stan, w jej wnętrzu
że wartość true lub false, i określa czy
wchodzimy że blok kodu.
I podobnie, mamy jeszcze-wtedy i innego, jak jesteśmy przyzwyczajeni w C.
>> Również powinno być całkiem wygodne tuż nietoperza z pętli,
bo też spojrzeć dużo jak C wygląda.
Ale można zauważyć jeszcze, że mają, zamiast int inicjowania,
mamy inicjacji var.
I myślę, że masz uważać, aby
Pamiętaj, aby nie zmieniać wartości od I z int na ciąg,
na przykład dlatego, że będzie powodować dziwne zachowanie nie może
oczekiwać.
Ale to powinno wyglądać dość znajomo, jak również.
>> Tak to jest, gdy wszystko zaczyna dostać trochę szalony w JavaScript
dla kogoś, kto będzie od A tło C. Istnieją funkcje
w JavaScript, a nie tylko jeden sposób, zadeklarować funkcję, która wygląda
rodzaj podobny do C, potem jeszcze jeden, który
wygląda trochę inaczej.
>> W pierwszej wersji, które widzimy tutaj,
jest rodzajem C-podobnych, gdzie to znaczy, że jest to funkcja
nadać mu nazwę, daje liczba argumentów,
a następnie zawartość funkcji do środka tych klamrach.
Zobaczymy przykład argumenty w ciągu sekundy.
>> Zważywszy, że w następnej linii, widzimy, oh, tu jest zmienna o nazwie "myFunction"
i wynosić go do tego generic thing-- function--, że
nie wydaje się mieć coś dzieje.
Dlatego, że jest inaczej niż C jest to, że JavaScript
jest to, co się nazywa język funkcjonalny, lub ma elementy funkcjonalne, co oznacza,
że funkcje są rzeczywiście wartości.
A to oznacza, że ​​możemy ustawić zmienna równa funkcji
a następnie przenieść tę funkcję wokół, przekazać ją jako argument,
zrobić różne rzeczy Podobnie jest z funkcjami.
>> Jedna rzecz do note-- funkcje są napisane
z pewną liczbę argumentów.
Zobaczymy przykład funkcji z argumentem na następnym slajdzie.
Ale JavaScript nie będzie krzyczeć na ciebie, jeśli spróbujesz
korzystać z funkcji z Zła liczba argumentów.
To będzie po prostu zrobić wszystko, aby zrobić, co oznacza, że ​​jeśli przejdą,
wywołać funkcję, która spodziewa się Argument bez argumentów, wszystko,
stanie się to zrobi najlepszym spróbować wykonać ten kod,
i jeśli w końcu uruchamia w drodze wyjątku lub błędu,
będzie to rzucić ten wyjątek i po prostu going-- który jest jednym ze sposobów
który działa JavaScript.
Tak.
>> PUBLICZNOŚCI: Co się stanie, jeśli jest zbyt wiele argumentów?
SAM GREEN: Tak pytanie, co się dzieje,
jeśli jest zbyt wiele argumentów?
A odpowiedź jest taka, że JavaScript będzie tylko
zignorować te, które są po nich, że spodziewa.
To będzie próbować uruchomić funkcję dzwonić, jakby to było tylko pierwsze dwa.
Dobrze?
>> HUGH Zabriskie: Tak, tak.
Podobnie, w przypadku są zbyt mało argumentów,
to po prostu rodzaj daje zerowy do wszystkich argumenty, że nie ma żadnych wartości
dla.
>> SAM GREEN: co może być rzeczywiście przydatne, jeśli Ciebie
chcę napisać funkcję, która trwa zmiennych argumentów numerycznych.
Można ustawić domyślne wartości w definicja funkcji
i może ignorować faktu, że wejście nie ma.
Więc chcę powiedzieć trochę więcej na temat tego ostatniego naboju
punkt, który jest funkcje są wartości.
Jest to przykład, w którym jest trochę oszałamiające
jeśli po prostu czytać, a nie sądzę, o tym, co dzieje się na chwilę.
Więc spójrzmy tylko na pierwsza linia tutaj.
Mamy tę zmienną, f1, że mówimy Jest to funkcja, która czyni tę rzecz.
Oraz zawartość funkcji są console.log ("cześć").
Można myśleć o console.log jako Równoznaczne JavaScript printf.
Więc co się stanie, jest, jeśli uruchomić ten kod w naszej wyszukiwarce,
będzie to wydrukować ciąg.
Mogę udowodnić, że.
PUBLICZNOŚCI: W dzienniku, choć robi oznacza, że ​​jest nagrywany gdzieś?
SAM GREEN: Tak.
Tak więc pokażę wam, co się wydarzy.
Więc pytanie, co to log na myśli?
>> HUGH Zabriskie: Tak console.log jest jak printf w C
SAM GREEN: Tak console.log jest jak printf,
więc jeśli mam ten console.log ("cześć"), i wzywam, że napis "hello"
zostanie wydrukowany do konsoli.
Jest to konsola.
To tak jak printf, gdzie wypisuje na standardowe wyjście.
I zobaczymy za chwilę, ale to faktycznie
odnosi się do obiektu konsoli i wywołanie metody na temat tego obiektu.
To będzie bardziej sensowne w chwili, gdy
dostać się do rozmowy o obiekty w JavaScripcie,
ale myślałem, że chciałbym tylko wspomnieć, że.
HUGH Zabriskie: Jesteśmy stosowany w C, prawy--
zwykle pisać duży program w głównym nic robić.
Ale to, co jest fajne w JavaScript jest ci mieć tego rodzaju tłumacza, że
działa w czasie rzeczywistym, więc to zajmuje tylko linia po linii,
Można to interpretować tak, że na miejscu.
I śledzi rzeczy, które są prowadzone przed,
więc jest to bardzo przydatne narzędzie używać console.log lub konsolę,
ogólnie, do po prostu grać wokół z JavaScript.
>> SAM GREEN: Więc wracając do tego example-- drugą linię kodu
tutaj jest dość zadziwiające, w mojej głowie.
Po raz pierwszy czytałem ten, To było jak, co się dzieje?
Więc co się dzieje, jest to deklaracja funkcji mówi,
Mam funkcję o nazwie F2 że spodziewa się jeden argument, f,
a następnie wywołuje się, że funkcja f, co
został przekazany do niego jako argument bez sama argumentów.
Tak, to może być mylące.
Jeśli to zrozumiemy, jak F2 bierze f1 jako argument, a następnie wewnątrz f2,
f dostaje co oznacza called-- że tej linii kodu,
po tych dwóch linii Kod, wyniki w "cześć"
drukowane do konsoli.
>> Fakt, że możemy przekazać Funkcje wokół jako wartości
kończy się jednym z najbardziej potężne funkcje JavaScript
jako język programowania.
Poza wszystkim z niesamowite rzeczy, może to zrobić,
jak cechą języka pod względem drogi
że to sprawia, że ​​rzeczy proste programowanie i umożliwia
do rzeczy, które nie są szczególnie dobrze nadaje się do sieci,
programowanie funkcjonalne i funkcjonalne aspekty programowania w JavaScript
Jest to jeden z najbardziej potężne pojęcia, że
istnieje w JavaScript-- jeśli o mnie.
Fajne.
>> Więc, następną rzeczą.
Oprócz tego, że jest funkcjonalnie są też elementy JavaScript
które są zorientowane obiektowo, który jest jednym z bardzo
popularne słowa buzz w informatyce.
Programowanie obiektowe Jest to bardzo popularna rzecz.
JavaScript ma wersję, która, gdzie Wierzę, każda wartość jest również
przedmiot, co oznacza, że ​​dla każdego obiektu owija sobą jakąś liczbę wartości.
Więc dla wartości, które są proste, jak liczbą całkowitą, jak varX równa 5,
że obiekt po prostu owija że jedną wartość.
>> Ale możemy też wyobrazić sobie sytuację, where-- możemy myśleć o sytuacji w C
gdzie chcieliśmy zrobić coś o strukturach,
na przykład, że zawija kilka Wartości razem i sprawia,
to naprawdę łatwe do przekazania rzeczy wokół.
To jest, gdy obiekt jest w JavaScript.
>> Ważne jest, aby pamiętać, kiedy mówię, że obiekty owinięte
niektóre liczba wartości razem, że funkcje są również
wartości, co oznacza, że ​​funkcje mogą również wewnątrz obiektu JavaScript.
A powodem, że ważne jest, jest to, że podczas Często
myśleć o wywołanie metody na obiekcie, który jest
popularnego terminu od innych popularne języki obiektowe,
jedna z różnic jest to, że wszystkim, że metoda jest w JavaScript
jest wartość przechowywane wewnątrz obiektu który wykonuje pewne action-- ewentualnie
za pomocą innych wartości, które są w środku tego obiektu, ale nie musi.
Więc można sobie wyobrazić sytuację, że Chyba się trochę szalony sposób,
gdzie nazywa metodę jednego obiekt na inny przedmiot, na przykład.
Tak, to jest trochę modny w ten sposób.
>> I można również zmienić metody które są związane z przedmiotem
przez przypisanie metody, że nową funkcję, która jest również
całkiem różni się od innych języków obiektowych, gdzie
raz zadeklarować obiekt oraz instancję,
nie możemy zmienić metody, które są związane z tym obiektem już.
Więc to jest całkiem inna.
Fajne.
>> Tak oto przykład, po pierwsze, przedmiotu w działaniu.
To jest to, co się nazywa Celem ogólnym, które
Oznacza to, że nie ma żadnych szczególności nazwa, nie ma klasy,
to tylko niektóre owijania wartości.
A sposób, że wygląda na to, mamy ta zewnętrzna para nawiasy, tutaj
które wskazują, do JavaScript i powiedzieć, że jest to obiekt.
Wartości wewnątrz niego Wartości są co wewnątrz
obiektu, który powinien być opakowane razem.
A w środku tego obiektu, następnie musimy par wartości klucza,
gdzie klucz odnosi się do nazwy wartości wewnątrz obiektu,
a drugi side-- naprzeciwko here-- jelita grubego
jest rzeczywista wartość które powinny być przechowywane.
>> Więc widać tutaj, że mamy klucz o nazwie fn z wartości Sam,
następnie przecinkiem, mówiąc do następnego wpisu.
Następnie klucz o nazwie ln, o wartości zielony,
następnie przecinkiem, następnie "drukuj"
która będzie mieć wartość funkcji że zrobi tego wiersza kodu.
Zróbmy krok do tyłu i rozpakować to, co się tutaj dzieje.
Więc to jest trochę skomplikowane, i widzimy coś nowego
pierwszy raz.
"To" słowo kluczowe jest nowa rzecz widzimy tutaj, i co to robi
to odnosi się do prądu sprzeciw w zakresie, prawda?
Więc, gdy mówimy, to wskazuje całą drogę
do całej tej object-- gdy robimy this.fn,
mamy zamiar przejść całą drogę z powrotem do tego obiektu, przejdź do wartości fn
i dostać Sam, wyciągnij ją do końca z powrotem, trzymać go tutaj, a następnie przejść.
>> PUBLICZNOŚCI: Więc z pobierania, jest tego zrobić, ponieważ parametru
definicja?
SAM GREEN: Więc pytanie było, jest Pobieranie odbywa ze względu na parametr
definicja?
Tak, absolutnie.
Co wydarzy się o to, Ten punkt mówi do JavaScriptu,
OK, ja dostaję jakąś wartość z tego przedmiotu od siebie.
I wtedy będzie wyglądać wpisu nazywa fn, a jeśli go znajdzie,
powróci, że value-- tak, to sam.
Ale mogę również wpisaniu co nie zdefiniowano tutaj
A potem po prostu powrót undefined-- które
jest rzeczą, że JavaScript może to, co może przynieść korzyści,
ale also-- jeśli popełnisz literówkę, może to spowodować błędy dziwne.
Więc po prostu spróbować znaleźć cokolwiek powiedzieć go znaleźć
i nie będzie narzekać, jeśli nie znajdzie.
To będzie po prostu powiedzieć, ja nie go znaleźć, a następnie przejść.
Więc to nieokreślone, oraz puste plus nazwisko.
Tak.
A potem widzimy, że jeśli może następnie zejść na dół i access--
i wzywamy tf.print () z nawiasów.
To się nazywają drukowanych Funkcja bez argumentów, prawda?
Ale jeśli po prostu powiedział tf.print () średnik, bez nawiasów,
wszystko, co zrobiłby to pociągnąć z funkcji z wartości,
ale w rzeczywistości nie nazwał.
Fajne.
HUGH Zabriskie: Jeżeli tworzymy obiekt?
SAM GREEN: Jasne, zróbmy to.
Więc mogę przenieść tego Przykładem do konsoli.
Możemy sobie wyobrazić, że mam obiektu.
Tak więc jest to prosty przedmiot.
Jest to obiekt, który zawiera dwa wartości z dwóch przycisków, dwa wartość klucza
par.
Więc można następnie uzyskać dostęp do wartości przechowywanej wewnątrz tego obiektu, wykonując x.x1,
na przykład, a ja się 1 plecy.
Podobnie x.x2, uzyskać tę wartość z powrotem.
>> A teraz naprawdę fajne jest to, mogę faktycznie coś dodać do tego obiektu
po Stworzyłem go.
Więc można sobie wyobrazić, niech że mam funkcję.
>> HUGH Zabriskie: Ty musisz zrobić klawiszem Shift Enter.
>> SAM GREEN: Och, to jest irytujące.
Co jest nie tak?
O.
No to ruszamy.
Fajne.
>> Tak już po prostu stworzona Ta funkcja f, który
pójdzie do prądu Obiekt i drukować this.x1.
Więc jeśli po prostu zadzwonić f przez Sam, nic się nie dzieje
się stało, prawda, bo nie ma x1 pola w obiekcie to odnoszące się do.
Ale, jeśli powiem, x.f = f, a potem zadzwoń x.f (), mam zamiar wrócić 1.
Że funkcja f jest związane z obiektem, X,
która ma klucza o nazwie X1 związany z wartością 1
więc kiedy zadzwonić this.x1, to będzie znaleźć to, co szuka
i być w stanie wydrukować wartości na zewnątrz.
Więc to tylko jeden z przykładów od rodzaju szalonych rzeczy
można zrobić z obiektów w JavaScript.
>> Tak więc ta wersja była generycznych wersji, znaczenie
że stworzyliśmy obiektu za pomocą tego nawiasy notation-- notacji nawiasów,
rather-- i to przydatne, jeśli chcemy tylko
jedno wystąpienie danego obiektu, ale Co zrobić, jeśli chcemy mieć więcej niż jeden
tego samego rodzaju?
I odpowiedź na to Chodzi o to, że są rzeczy,
zwane klasy w JavaScript, jak również.
Możemy stworzyć funkcję, która robi jakieś inicjalizacji
przez obcy obiekt, i chcemy powiedzieć, jak,
mój class-- więc imię wielokrotnego użytku object--
równa funkcji, które ustawia go.
Więc co to byłoby równoznaczne do tworzenia obiektu jest, że
byłoby po prostu lubię, nawias klamrowy, str, jelita grubego,
jest to ciąg znaków, średnik, nawias klamrowy.
To byłby ogólny Obiekt możemy zainicjować,
z jedną różnicą, na Kolejne linie tworzymy prototyp, który
Oznacza to, że klucz domyślny możemy dodać do naszego obiektu, który
ma wartość wymienionych tutaj.
Co oznacza, że, gdy tworzę nowy wystąpienie tego obiektu MojaKlasa,
to się nie wcześniej zbudowany wewnątrz to wartość o nazwie str a inna wartość
nazywany myprint, który jest będzie funkcją.
Niesamowite.
>> Wielki.
Więc ostatnią rzeczą, aby powiedzieć o JavaScript
jest to, że jest to bardzo przydatne na co nazywane są operacje asynchroniczne.
Asynchroniczny oznacza to, że my może czekać na jakiś pracy
aby zakończyć zanim przejdziemy , ale przejść podczas oczekiwania
i wtedy coś się stało później.
I co mam na myśli, to znaczy, że Można sobie wyobrazić sytuację, w której
możesz wysłać wniosek do gdzieś jakiś serwer WWW,
i to się wysłać z powrotem niektórych dużych porcji danych, prawda?
A twój użytkownik może czekać w Tymczasem tak się stało,
i nic nie może być dzieje się w tym czasie.
Ale to nie jest wielki projekt, prawda?
Nie chcesz, strona internetowa, aby zatrzymać.
Co zrobić, jeśli użytkownik chce kliknij na menu rozwijanego?
To nie jest wielki wzorzec projektowy.
Zamiast tego, w zasadzie to, co JavaScript nie jest, mówi,
OK, wykonaj tę operację asynchronicznie.
Więc jak, czekać w tle, a następnie, gdy operacja jest wykonywana,
zadzwoń do wywołania zwrotnego function-- zadzwoń do niektórych funkcji,
Czy jakieś action-- zasygnalizować, że Operacja czekaliśmy do końca
to koniec.
A powodem jest to potężny jest, możemy zrobić coś, przekazać argument,
coś zrobić, a następnie czekać coś się stało.
Następnie, po tym czymś zakończy, możemy wywołać wywołania zwrotnego.
To bardzo przydatne, ponieważ pozwala nam robić rzeczy z Web Audio API,
Na przykład, jak i przy obciążeniu Plik audio z serwera zdalnego
bez konieczności czekać na cały plik audio, który ma być załadowany,
co byłoby bardzo złe dla doświadczenia użytkownika.
Fajne.
>> Ostatnie kilka zauważa się debugowanie, ponieważ
Jest to rzecz, którą będziesz musiał zrobić w ramach projektu, gwarantowana.
Wspomniałem konsolę JavaScript.
Jest to bardzo przydatna funkcja wszystkich nowoczesnych przeglądarkach,
I naprawdę zachęcam, aby uzyskać wygodne przy użyciu konsoli,
jeśli chcesz uzyskać dobry w JavaScript.
Jest to bardzo przydatne dla debugowania, ale również
bardzo przydatne w zastanawianie się, jak wykorzystać API.
Pozwala to na bardzo proste eksperymenty
bez konieczności wpisywania niektórych Kod, a następnie skompilować.
Nie musisz robić te wszystkie kroki.
Możesz po prostu napisać jakiś kod do linii,
a następnie uzyskać natychmiastową informację zwrotną na temat czy ta linia kodu
worked-- bardzo przydatne.
>> A także, tylko jeden note-- techniczne Konsola JavaScript jest przykładem
z REPL-- więc to R-E-P-L, repl, który stoi do odczytu, oceny,
Pętla druku.
Masz zamiar wpisać kilka rzeczy w, to będzie czytać to, co podałeś
będzie to jego oceny, i będzie to wydrukować wyjście, a potem będzie zacząć od nowa.
To pozwala szybko przejść w koła iteracji, co jest naprawdę fajne.
>> Myślę, że prawdziwe Ostatnia note-- tego jest rzeczywista ostatnia uwaga, tak.
W jaki sposób właściwie wykorzystać JavaScript?
Więc po pierwsze, możemy importować go za pomocą znacznika script
na górze lub na dole HTML file-- w dowolnym miejscu wewnątrz pliku HTML,
naprawdę.
I w tagu skrypt, istnieje dwa sub-sposoby importowania JavaScript.
Pierwszym jest posiadające oddzielny plik JavaScript
że sprowadzamy w całości lub poprzez obszar kodu jak scenariusza
uruchomić, a następnie backslash skrypt do końca.
A potem po prostu napisz JavaScript w pliku HTML.
Są to dwa sposoby.
Nie można mieć go wewnątrz HTML.
PUBLICZNOŚCI: Czy jedna lepsza od drugiej?
SAM GREEN: Pytanie było, jest lepsze niż inne.
Tak, tak, w praktyce styl kodowania, a także to jak praktyki projektowej.
Istnieją dwa powody, dlatego może być lepiej.
Pierwszym z nich jest, to sprawia, że ​​Twój kod A dużo bardziej czytelny, jeśli wszystkie HTML
jest w jednym miejscu, wszystkie twoje CSS jest w w innym miejscu, wszystko twój JavaScript
w trzecim miejscu.
Dobrze?
Myślę, że powinien już rozmawiał o tym w sections-- jak CSS-- co
że jest-- i idzie często w innym pliku.
Tak więc, podobnie rodzaju koncepcji tutaj.
Można też sobie wyobrazić, że JavaScript by być ponownie na więcej niż jednej
Strona HTML, a może bardzo wielu stron HTML,
i mając tę ​​JavaScript refactored w jednym
plik, który można zaimportować w więcej niż jednym miejscu
pozwala kod będzie sposób bardziej linkujących.
Można sobie wyobrazić, co jeden zmiany w JavaScript
i konieczności jego zmiany w 100 różnych plików.
A zamiast tego możemy po prostu go zmienić w jednym, który jest o wiele bardziej wydajny.
Czy mogę odpowiedzieć na to pytanie?
Fajne.
>> Możemy również wpisać w konsoli, jak już wspomniano wcześniej.
I znowu, po raz ostatni note-- Web Audio jest wbudowany,
nie trzeba ładować niczego.
Fajne.
Czy są jakieś pytania, masz więcej pytań o JavaScript,
Zanim przejdziemy?
>> PUBLICZNOŚCI: [niesłyszalne]
SAM GREEN: No dobra, fajnie.
Więc teraz on będzie mówić o API.
>> HUGH Zabriskie: Spoko.
Dzięki, Sam.
>> SAM GREEN: Jasne.
HUGH Zabriskie: Awesome, więc przejdziemy z JavaScript.
Więc rozmawialiśmy o niektórych podstawowe elementy JavaScript,
a te są zmienne, funkcje, obiektów, działa jako zmienne,
asynchroniczne ładowanie.
Są to wszystko rzeczy, które będziesz zobacz, jak korzystać z internetu Audio.
Więc my właśnie będziemy rozmawiać o najpierw na wysokim poziomie.
>> Jest to API, więc jest to coś który jest zbudowany, jak Sam powiedział,
prawo w JavaScript które można używać w konsoli.
I to jest rzeczywiście tak, jak C ++ kod że jest naprawdę wbudowany w Chrome
i Firefox, a wszystkie z tych przeglądarek.
Więc głównej idei z sieci Audio to, że masz
ten rodzaj rurociągu audio, prawda?
Więc twoje dane audio wchodzi w innej formie.
>> Istnieje rodzaj trzech głównych forms-- masz oscylator, który
tworzy falę sinusoidalną, cosinus fali, mamy zamiar zobaczyć jak to działa.
Innym bardzo popularnym, Oczywiście, jest MP3.
Więc może zacząć piosenka, a potem
chcesz zrobić filtrowanie do i wyjścia
that-- które mogłyby być potencjalnym źródłem.
I wtedy naprawdę fajne jeden jest mikrofon.
Więc można korzystać z niektórych bardzo Podstawowe połączenia w JavaScript
aby uzyskać dostęp do Mikrofon, a więc jeśli
chciałem zrobić aplikację jak detektor skoku,
na przykład, że pobiera twój głos i domyśla się,
pitch-- bardzo łatwy sposób, że.
Po prostu rodzaj można przeczytać w, dowiedzieć się, częstotliwość,
a następnie wyjście numer.
Więc zobaczymy jak to działa, jak również.
>> Miejsce docelowe jest w zasadzie gdzie dane dźwięk jest emitowany.
Tak ogólnie, to jak głośniki laptopa.
Inne opcje są jak ScriptProcessorNode--
my się do węzłów w second-- ale w zasadzie,
albo jesteś wprowadzenie dźwięku z za pośrednictwem komputera przez głośniki,
lub jesteś rodzaj nagrywania, więc jesteś przechowywanie go jako dane audio.
Więc może jeśli ktoś tworzy muzyki w aplikacji, a następnie
chcesz nagrać, że a może jak wyeksportować do SoundCloud, na example--
że będzie jednym ze sposobów, aby to zrobić.
Wszystkie rzeczy, zabawy, które będziemy rozmawiać o,
dzieje się między tymi dwoma punktami, gdzie załadować w muzyce
a następnie wyjście to.
>> Więc mam zamiar mówić o pięciu etapy produkcji audio w sekundę.
Mamy to coś o nazwie AudioContext, które
Jest to małe otoki widzimy tutaj.
Zasadniczo co AudioContext jest-- jeśli przejdź do konsoli JavaScript w tej chwili,
możemy utworzyć teraz.
Tylko przykład REPL, prawda?
Czytamy, oceny, a drukuje.
>> AudioContext to stan globalny.
Jest to struktura, to obiekt tu, i utrzymuje informacje
o rzeczach, które robimy Na ekranie związanego z dźwiękiem.
Jednym z przykładów jest aktualny czas.
Ten podaje liczbę sekund, bardzo precyzyjnie,
od strony załadowane.
Więc to jest bardzo przydatne Trochę nieruchomości, które można wykorzystać.
To czytaj only-- Myślę, że rzeczywiście możesz spróbować ustawić jej wartość.
Będzie to powiedzieć, to ustawić, a następnie, jeśli go wydrukować
again-- to faktycznie nie bardzo działa.
Więc nie są tylko do odczytu właściwości w JavaScript.
To jest naprawdę przydatna, gdy masz rodzaj synchronizacji
Wiele różnych informacje, kiedy jesteś
rodzaj gry w różne dźwięki.
>> Inną bardzo użyteczną jest celem kontekstu.
Na pewno, jeśli jesteś zainteresowany, być próbuje to na własne prawej konsoli
ale już.
Więc jest to AudioDestinationNode.
W zasadzie to, co mówi, jest to, gdzie będzie wyjście?
Tak więc są dwie opcje realne tutaj.
Zazwyczaj domyślny jest tylko głośniki,
tak AudioDestinationNode w zasadzie tylko mówi
Wyjścia są zerowe do dźwięku najbliższych, wysyłane do głośnika.
Więc ogólnie, nie musisz grać z tym.
Jeśli jesteś zainteresowany w rzeczywistości za pomocą ScriptProcessorNode do nagrywania,
zdecydowanie strzelać do mnie e-mail później, bo to
nieco bardziej skomplikowane.
Ale ogólnie, jesteś po prostu rodzaj od wyprowadzania dźwięku w jakiejś formie.
Tak fajne, będziemy skakać z powrotem tutaj.
PUBLICZNOŚCI: Przykro mi.
HUGH Zabriskie: Tak.
PUBLICZNOŚCI: Wiem, że mówi się, porozmawiać do ciebie później o nagrywaniu.
Interfejs, który można z Pro Tools?
>> HUGH Zabriskie: Z Pro Tools?
Zobaczmy.
Myślę, że nie.
Tak dzieje między klientem, który jest JavaScript
Konsola, a rzeczywisty Komputer jest ogólnie
coś, co jest rodzajem z poza granic, jeśli Ciebie
będzie, niby przez naturę the-- jest to rodzaj rzeczy projektowania,
ale staram się zachować przeglądarkę oddzielne od faktycznego komputerze użytkownika.
Ogólnie rzecz biorąc, jedyne co jesteś w stanie dostęp jest mikrofon i kamera.
Nie jesteś w stanie, ja nie sądzę, należy użyć Pro Tools.
Jeśli jednak stworzył utwór w Pro Tools,
eksportowane, że można załadować, że tu, filtrowanie, na przykład
Proces, który i odnotować, że w produkt Dźwięk Destination-- lub no-- Sphere
Procesor węzła.
A następnie stamtąd, można eksportować, że do SoundCloud, ciebie
może wysłać go w wiadomości e-mail, lub co chcesz stamtąd.
>> Ale jest rodzajem niewielkiego bariery pomiędzy tworzeniem muzyki na komputerze
i tworzenia muzyki w Internecie.
>> SAM GREEN: I to jest nie unikalne dla tego API.
Jest to funkcja zabezpieczeń Chrome i Myślę, że każdy inny nowoczesnej przeglądarki.
Przeglądarka jest samowystarczalny.
Tak na przykład, strona internetowa nie może używać JavaScript, aby włączyć dźwięk
na na głośniki, na przykład.
Albo nie można wyłączyć komputer.
I nie ma punkt pośredni między tymi dwoma rzeczami, w prawo,
więc albo masz kompletna abstrakcja,
lub otworzyć błąd bezpieczeństwa najmu
programista o złych intencjach zrobić co chcą z laptopem.
I dlatego Chrome jest samowystarczalny.
>> HUGH Zabriskie: Tak.
Czy to ma sens?
Fajne fajne.
Ja po prostu się przedstawiają przykład jeden.
To jest dość dużo, jak ile masz w kategoriach
z dostępu do komputera użytkownika.
Jeśli masz klawiaturę USB podłączony, można użyć coś o nazwie Web
MIDI API, które nie będzie naprawdę mówić o tutaj,
ale jest to kolejny API to zbudowany w co najmniej Chrome-- ponownie
to dlaczego kochamy Chrome-- Myślę, Firefox lub Safari,
jest to łatwa rzecz do google-- różnych przeglądarek
inna pomoc dla których API mają wdrożony.
Ale jeśli chcesz podłączyć klawiaturę i pracować z tych informacji,
rodzaj wysłać klawiaturę Informacje na komputer
a następnie użyć tej internecie, to API gdzie chcesz pracować to.
>> Fajne.
OK.
Tak, szybko poruszających się na tutaj.
Jak to robimy na czas?
>> Głośnik 1: O 15.
>> HUGH Zabriskie: 15 minut w lewo?
Ok fajnie.
Więc będziemy ścigać się w przyszłość tutaj.
>> Więc w zasadzie, głównym punktem myśleć o tym jak o rurociągu
jest to, że każdy etap w rurociągu Jest szereg węzłów audio.
Nasze źródło, powiedzmy, jest oscylator.
Musimy stworzyć węzeł oscylatora.
I to jest właśnie rodzaj małego function--
i są oparte na kontekstu dźwięku tutaj.
>> PUBLICZNOŚCI: Kiedy to powiedział oscylatora, to znaczy,
to faktycznie dosłownie począwszy od dwa różne bieguny iz powrotem?
>> HUGH Zabriskie: Nie, to jest jak reprezentacja cyfrowa.
To faktycznie realizowane w C ++.
Tak naprawdę nie wiem, specyfikacje o tym, jak to faktycznie realizowane,
ale to wszystko pracuje jako dane binarne.
Właściwie tak.
To byłoby powiedzieć, mogłem w rzeczywistości, jeśli jesteś zainteresowany,
Mogę wysłać Ci trochę więcej Informacje o tym, jak przebiegów
utrzymywane są o formacie cyfrowym.
Ok fajnie.
>> Tak więc mamy do generowania dźwięku niczym sinus fal lub coś w tym stylu, może
440 Hz.
Tworzymy oscylator.
Jeśli chcemy, aby ustawić głośność, mamy nic podłączać do GainNode,
co może zrobić z .creategain.
To ustawia głośność.
Możesz przekazać, że na dowolnym drugiego options-- dobrze,
Bufor to źródło dźwięku węzeł, w którym może
przechowywać MP3, że już załadowany.
>> Biquad jest filtr do filtrowania, jeżeli chcesz wziąć całą bazę z
utworu, czy coś takiego.
Broń Boże chcesz wziąć baza z piosenką.
A węzłem AudioDestination jest znowu jak gdzie nasz finalizacja jest.
Jeśli kiedykolwiek ciekaw wszystkie inne możliwe opcje,
po prostu przejdź do zakładki i niech auto-complete wymyślić.
A jeśli nie tworzyć, zobaczysz wszystko różne rzeczy, które można utworzyć.
Możesz stworzyć dynamikę procesory skryptów,
Ja nawet nie wiem co to jest do mieszania łączenia kanałów
i rozgałęźniki kanałów i to wszystko.
Fajne.
>> Więc jest to tylko Przykład rurociągu.
Tak więc mamy trzy źródła w najbliższych.
Być może są to przebiegi, być może są to pliki MP3.
Jeden będzie przez filtrów, drugi pod
coraz zniekształcone innego czyjaś panoramowanie w lewo i prawo.
Można zrobić różne rzeczy i wszyscy mieszają się razem,
i obecnie jest dźwięk Na koniec, jako miejsca przeznaczenia.
Jest to przykład tego, co więcej skomplikowane Web Kod audio wygląda.
Tworzysz wszystko różne obiekty tuż here--
Nie jestem tego pewien.
Nie, to nie powiększać.
OK.
>> SAM GREEN: Robisz Control, Scroll-Up.
HUGH Zabriskie: Kontrola Scroll--
SAM GREEN: Nie, nie.
Kontrola--
>> HUGH Zabriskie: Och, sterowania, Przewiń?
Och, haczyka.
Tak.
Wow, Nie, Nie.
OK.
Nie zrobię tego.
>> Więc tak, w ten pierwszy Sekcja tu widzisz
tworzymy wszystko inaczej węzły z kontekstu.
Jesteśmy po prostu je składając razem w drugiej części
przez tę funkcję o nazwie Połącz.
To naprawdę kluczem Funkcja w sieci Web Audio.
Oznacza to tylko raz zrobiłeś coś z dźwiękiem w jednym węźle,
przekazać je do kolejnego węzła.
Tak więc mamy źródło, to łączy się z analizatora,
analizator robi coś z nim, idzie do zakłóceń, i tak dalej,
i przeznaczenia na dole tutaj.
Fajne.
OK, więc musimy ruszać dalej.
>> Pipeline-- Ponownie, są najczęściej rurociągi,
więc mówić o tych wszystkich rzeczach, takich jak zniekształceń, panoramowanie, wszystkie te rzeczy.
Jeśli jesteś naprawdę zainteresowany w korzystaniu z rzeczy, Pro Tools,
tych, prawdopodobnie Cię zainteresować.
Jeśli nie, to może po prostu Aby odtwarzać dźwięk,
a może po prostu chcesz ustawić głośność dźwięku.
Są to dwa najpopularniejsze sortowania rurociągów w produkcji audio.
>> Ponownie, sposoby, można go zabrać w jako oscillator-- tak, niech
zrobić demo o tym tutaj.
Tak więc mamy zamiar stworzyć proste kontekst dźwięku tutaj,
oraz, że będziemy aby stworzyć oscylator.
Tak to jest, ponownie, jesteśmy po prostu zamiar zadzwonić Tworzenie oscylatora.
Mamy zamiar ustawić częstotliwość na że 440 Hz, najbardziej lubianym.
Następnie łączymy się, że do miejsca przeznaczenia point-- który jest głośnik, więc
cel kontekstu.
Wreszcie, po prostu powiedzieć, start zera sekund od teraz, a nie mamy dźwięk?
>> [DZWONIENIE]
>> HUGH Zabriskie: Zaczynamy.
To tylko sinusoida.
Ok fajnie.
A potem będziemy przestań.
>> PUBLICZNOŚCI: W przypadku, gdy nie , że opinie pochodzą?
>> HUGH Zabriskie: Informacje zwrotne?
Och, pewnie nasze mikrofony.
Więc tak, to w jaki sposób to zrobić.
I rzeczywiście, gdybym miał utrzymywana jest uruchomiony,
mogą mieć częstotliwość wartość, jak to działa,
więc to dobra zabawa się bawić.
Fajne.
To zawsze piękny jeden przedstawić.
>> SAM GREEN: nie myśleć o tym, że nie mamy?
HUGH Zabriskie: Tak, to paskudny jeden.
Tak więc, bufor loading-- pokażę Przykładem, że na samym końcu.
To się ładowanie MP3.
I mikrofon, można używać tylko funkcji nazywa Navigator.getUserMedia ()
do żądania dostępu do użytkownika, mikrofon do tych informacji.
>> Oto, filtrowanie, będę po prostu ruszać z tego.
Jest to dość wysoki poziom, ale filtry tylko pozwalają na
>> [DŹWIĘKOWY]
Filtrowanie pozwala także stworzyć takie rzeczy jak różowy
hałas, brązowy hałas, szum biały.
Jeśli chcesz stworzyć czysty dźwięk, który niektórzy ludzie lubią poeksperymentować z,
można użyć Web Audio Filtrowanie to zrobić.
>> Dźwięk Panning-- więc sobie wyobrazić, jeśli piszesz gry
i chcesz dźwięk do brzmieć jak to nadchodzi, jak,
fotografowania na ekranie, można Można użyć panoramowania audio
do stworzenia tego rodzaju stożka, które like-- to całkiem Mathy,
ale to jest rzeczywiście bardzo fajne, jeśli masz pracować,
i nie ma jakiś dobry tutoriali na to mogę wysłać.
Zasadniczo, można rodzaju od tworzenia dźwięku
coś dzieje przez w sposób 3D.
A jeśli masz interes DJ, można rozpocząć mieszanie i krzyż blaknięcie piosenki.
>> To tylko niektóre bardzo podstawowe Kod, w zasadzie to, co zrobiłem wcześniej.
To ustawia głośność oscylatora, więc tworzymy naszą oscylator
który tworzy kształt fali.
Tworzymy naszą GainNode, ustawić naszą częstotliwość,
a następnie podłączyć oscylator do GainNode, które to zasadniczo zmienia
ile sygnał jest akceptowane.
Ale tak naprawdę, to cyfrowe rzeczą, więc jest to bardziej just-- tak.
To nie jest to, co naprawdę się dzieje, ale to, co dzieje się w prawdziwym życiu
z zyskiem.
>> PUBLICZNOŚCI: --quantization parametru głośności?
HUGH Zabriskie: Słucham?
PUBLICZNOŚCI: czy jest to Parametr objętość kwantyzowany?
HUGH Zabriskie: Tak.
I to jest jedna rzecz, jestem naprawdę niedobór w mojej wiedzy,
jak wzmocnienie działa na poziomie cyfrowym.
Wiem, ze faktyczna sygnały, to w zasadzie
kontrolowanie, ile jesteś wzmacniający sygnał.
Więc tak.
Wyślę ci więcej informacji na temat , że ponieważ byłbym ciekaw rzeczywistości
wiedzieć więcej na ten temat.
Ale w zasadzie parametry są, jedno jest fold--
głośniejszy signal-- i zero ma sygnał, lub nie będzie słychać żadnego dźwięku.
Będziemy pominąć czas demo za, bo to w zasadzie to, co zrobiłem wcześniej.
I znowu, Context.Destination jest węzeł docelowy dźwięk.
Niesamowite, OK.
>> Więc mam zamiar zrobić szybkie dwa dema.
Jak to robimy na czas?
>> Głośnik 1: około 10 minut.
>> HUGH Zabriskie: 10 minut?
Wielki!
Niesamowite.
>> Więc pierwszy będę nie, to się nazywa moja ulubiona piosenka.
Więc jest to tylko Trochę HTML JavaScript.
My będziemy mieć dwa przyciski na stronie grać moją ulubioną piosenkę
i zatrzymać moją ulubioną piosenkę.
Będę to zmienić.
>> PUBLICZNOŚCI: Przykryj mikrofon.
>> HUGH Zabriskie: Tak.
I już załadowany tutaj skrypt basically--
i to jest bardzo przydatne do ładowania plików MP3,
więc to właśnie sprawia, loading pliki MP3 sposób szybciej.
To w zasadzie tylko opakowaniem.
To właśnie sprawia, że ​​proces załadunku MP3 znacznie szybciej,
inaczej używasz żądania HTTP, tak jakby, co robimy
od aktualnego utworu zestaw z serwerem.
To naprawdę brzydki, jesteś nie chcę, aby to zrobić.
>> Więc ten facet, Boris SMUs, napisał naprawdę przydatne trochę narzędzie o nazwie BufferLoader.
Wszystko co musisz zrobić to po prostu przekazać go do kontekst, przekazać to list--
lub, tak, jest to lista w JavaScript?
SAM GREEN: Tablica.
HUGH Zabriskie: Och, to jest tablica, to prawda.
To szereg ścieżek do innych plików.
A następnie przekazać to funkcja.
To jest zwrotna rozmawialiśmy temat z asynchronicznego ładowania.
To będzie nazwane Gdy pliki ładowane.
I to funkcja, która jest wywoływana, gdy Plik zajmuje włożone w obwodzie
tablica obciążonych buforów.
Tak, że występuje tu.
Zasadniczo BufferList jest będzie jednym value--
czy to będzie tablica Długość jednego, który ma w nim w indeksie
wyzerować cały plik załadowany w formacie MP3.
Więc co zrobić, gdy skończę Ładowanie jest, po prostu
utworzyć źródło bufora, które jest audio węzeł źródłowy bufora.
Następnym krokiem jest załadować w source.buffer jako pełnego bufora ładowanego
z BufferList-- to dużo buffers--
a następnie podłączyć ten dźwięk bufor do miejsca przeznaczenia.
Więc co to będzie zrobić jest po prostu umieścić MP3
prosto do wyjściu i od razu zacząć go
na coraz to wezwanie.
>> Fajne, więc zobaczymy to się stało w akcji.
My [niesłyszalne] tutaj, zobaczmy.
Więc jestem po prostu będzie uruchomić serwer podstawowy.
To coś, co co trzeba zrobić, jeśli jesteś
co żądania wczytywania plików.
Zamierzam uruchomić serwer podstawowy.
Jest to w zasadzie cała PSET teraz w jednej linii,
ale to dopiero zaczyna serwer na porcie 80/80.
Więc idziemy tutaj, my będzie załadować 80/80,
mamy zamiar udać się moja ulubiona piosenka.
Więc jeśli uderzę "Play My ulubiona piosenka "już teraz,
to będzie załadować moje ulubiona piosenka i grać it--
[MUZYKA - The Eagles, "Życie w SZYBKO PAS RUCHU"]
--which dzieje się "Życie w Fast Lane "przez The Eagles.
Teraz mogę uderzyć "Stop moje ulubiona piosenka "i odtworzyć go.
>> [MUZYKA - The Eagles, "Życie w SZYBKO PAS RUCHU"]
>> A jeśli pójdę na pocieszyć, bo Kiedyś zmienną globalną tutaj
śledzić tej wartości, to w rzeczywistości Teraz będą rozpoznawane w konsoli.
Więc to automatycznie tworzy dla mnie.
Więc to, co gra teraz, i mogę po prostu zadzwonić source.stop ()
Na tym.
Cóż, wiesz co?
Tak wy słyszeliście to song-- może rozpoznać tę piosenkę.
>> [MUZYKA - Rick Astley, "nigdy nie poddam WSTAŁEŚ"]
[MUZYKA - The Eagles, "Życie w SZYBKO PAS RUCHU"]
Mamy teraz wszystkie zostały Rickrolled.
OK, świetnie, przejściem.
Fajne.
Tak to jest w zasadzie przykładem jak można załadować MP3 file--
[MUZYKA - The Eagles, "Życie w SZYBKO PAS RUCHU"]
--and grać i zatrzymać i uruchomić go.
Mogłem zrobić dużo więcej [niesłyszalne]
>> Ten ostatni Zrobię to, Pokażę ci w [niesłyszalne].
>> [MUZYKI]
>> To jak, ogg.wave.mp3.
Myślę, że, jeśli dobrze pamiętam, Zabrakło mi do niektórych problemów z .m4a,
ale nie jestem pewien.
Myślę mp3.wave--
>> [MUZYKA - Rick Astley, "nigdy nie poddam WSTAŁEŚ"]
>> Ok świetnie.
Nie powinienem tego mówić.
W każdym razie, cześć.
Mamy więc w tym otwarte.
Więc teraz wszystko co robię to, ja w zasadzie stworzył podstawowa składnia do tworzenia muzyki.
Więc jeśli mi się coś podobnego, dodać g4 2 na 1, co oznacza, że ​​jest to, że,
dodać notatki fortepianowej, G4, która jest czwartą G
się na fortepianu od dołu.
Jest to więc rodzaj MIDI mówić, więc dla tych, którzy są na bazie muzyki,
to jest po prostu nuty MIDI.
>> PUBLICZNOŚCI: To G Bliskiego C, prawda?
>> HUGH Zabriskie: To jest G powyżej Bliskim C, to prawda.
>> PUBLICZNOŚCI: Przede Bliski C.
>> HUGH Zabriskie: Tak.
Aktualnie tak.
Myślę, że rzeczywiście go jednym [niesłyszalne],
więc to może być o oktawę wyżej, że.
Więc zobaczymy.
Jeśli uderzę Play--
[Powtarzalne PIANO UWAGA]
--we're będzie słyszeć.
Chodzi o to, że działa podobnie jak wiersz polecenia będzie,
więc jeśli idę w górę iw dół na klawiaturze, można
można wrócić do poprzedniej Polecenia, które jest bardzo przydatne.
I poniżej jest moja lista utworów, które są uruchomione na pętli.
>> PUBLICZNOŚCI: Byłaś przy założeniu, że 88-klawiszowa klawiatura na tym, prawda?
>> HUGH Zabriskie: Pytanie było, ja przy założeniu 88-klawiszową klawiaturę,
i tak, jestem.
To, co zrobiłem to ja w zasadzie wziął 88 próbek
fortepianu, po jednym dla każdej nuty.
I tak za każdym razem kiedy usłyszeć nutę od teraz,
że w rzeczywistości jest pętla, która wygląda like-- ten jest coraz grał na pętli,
więc dla każdej nuty, to działa.
Co się dzieje w tym, że utworzenie bufora ponownie
Utworzyć węzeł wzmocnienia, aby ustawić głośność.
To po prostu naprawdę skomplikowany sposób powiedzenia I
przechowywać bufor w source.buffer.
Daję zysk, ja podłączyć go do zysku,
wzmocnienie jest połączony z wyjście, a potem grać.
Tak, że to rodzaj procesu podjęcia w źródle buforowej.
>> PUBLICZNOŚCI: rzeczywiście można podjąć, że suchy dźwięk i sprawiają, że mokre [niesłyszalne]?
>> HUGH Zabriskie: Można, tak.
Tam ponownie czasownik, nie opóźnienia, zakłócenia.
Można w zasadzie umieścić coś w między kanapki of-- w tym również,
Rurociąg jest lepsza metafora, ale można dodać coś w tym.
Fajne.
>> Więc kończę demo tutaj, aby dać poczucie
po prostu sama liczba czasów, które można uruchomić tę funkcję, wszystkie na raz.
Więc mam zamiar usunięcia tego.
Mam zamiar stworzyć generator that-- w zasadzie to, co does-- to jest naprawdę
rodzaj skomplikowanej syntax-- ale będzie generować notatki na bieżąco,
i po prostu zacząć grać im, jak ocenia je.
[Wstawienie PIANO]
>> Tak więc możemy po prostu zrobić tutaj trochę muzyki.
[Wstawienie PIANO]
>> Więc co to polecenie ma, na przykład,
trzeba te trzy notatki z fortepian, a następnie umieszcza je na B3.
Ta składnia może zrobić trochę więcej sensu
dla tych, którzy mają muzyka w tle tutaj.
>> Mogę dodać do bass drum.
Mogę--
>> [Wstawienie INSTRUMENTY]
>> --just bawić się z tym.
>> Więc można make--
[Wstawienie INSTRUMENTY]
Że jeden jest trochę bardziej irytujące.
[Wstawienie INSTRUMENTY]
>> Tak, że losowo dodaje suchy talerz na każde 16 notatki, z 16%
[NIESŁYSZALNY].
>> [Wstawienie INSTRUMENTY]
>> Tak, tak, droga ta works-- to zawsze w formacie 4: 4.
[Wstawienie INSTRUMENTY]
>> Tak, więc w okresie czterech kwartałów i 16/8.
[Wstawienie INSTRUMENTY]
>> Tak średnio, otrzymasz 60% trafień na 16 notatek.
>> W każdym razie, to tylko rodzaju, aby pokazać
niektóre z rzeczy, które mogłyby budować z Web Audio API.
To naprawdę potężne, to naprawdę szybko, i można zrobić wiele fajnych rzeczy
z tym.
Więc jeszcze raz, na wszelkie pytania, e-mail myself-- Hugh-- lub Sam,
i szczerze mówiąc, Google ma mnóstwo dobrych zasobów.
Jakieś ostatnie pytania?
Tak.
>> PUBLICZNOŚCI: Tak można uzyskać dostęp do wbudowany mikrofon.
Co zrobić, jeśli chcesz użyć lepszego mikrofonu?
HUGH Zabriskie: Jeśli chciałeś użyć lepszego mikrofonu?
Więc jeszcze raz, to jest częścią abstrakcja między Chrome
i reszta komputera.
O ile nie jest ona dostępna za pośrednictwem API, takich jak Web MIDI API,
można chyba znaleźć jakieś hacki, ale generalnie nie, jak to możliwe.
>> SAM GREEN: Możesz also-- wszystkie Chrome wie
jest to, co domyślny mikrofon jest i to, że dostęp.
Więc jeśli miał mikrofon mogłeś ustaw jako mikrofonu komputera,
można do niego dostęp w ten sposób i to prawdopodobnie będzie działać.
HUGH Zabriskie: To dobry punkt.
Nigdy nie próbowałem, ale może być w stanie do rodzaju
of-- jeśli przekierowanie głośnik wejściowego, może być w stanie to zrobić, tak.
>> Jakieś ostatnie pytania?
Fajne.
Dobrze dziękuję chłopaki tak wiele do oglądania.
Jestem Hugh.
SAM GREEN: Jestem Sam.
HUGH Zabriskie: I to jest CS50.