>> Sam GREEN: Hi, sa lahat.
Maligayang pagdating sa aming seminar.
Ang pangalan ko ay Sam.
HUGH Zabriskie: Ako Hugh.
Sam GREEN: At kami ay pagpunta sa makipag-usap ngayon tungkol sa JavaScript at ang Web Audio API.
Just upang simulan out, ito ay isang balangkas ng aming mga agenda para sa seminar.
Kami ay pagpunta sa magsimula sa pamamagitan ng pakikipag-usap tungkol kung bakit dapat kang maging interesado sa Web
Audio API, bakit JavaScript ang wika na kailangan mo para sa mga ito,
at pagkatapos ay makipag-usap tungkol JavaScript essentials-- kaya gusto,
ituturo sa iyo ang ilang mga pangunahing kaalaman sa wika,
at pagkatapos ay makipag-usap tungkol sa audio API sa isang mataas na antas.
Pagkatapos, Hugh ay makipag-usap tungkol sa ilang sa mga yugto ng audio produksyon
at pagkatapos ay demo ang kahanga-hangang sequencer proyekto ay nagtayo siya at ipapakita sa iyo ang code.
At pagkatapos, kami ay magkaroon ng panahon para tanong sa dulo para sa mga tao
na dito nakatira.
>> HUGH Zabriskie: Cool.
>> Sam GREEN: Cool.
>> HUGH Zabriskie: Cool.
Ako ay i-back up.
>> Sam GREEN: So, unang unang bagay-bagay.
Kaya isa sa mga mahusay na mga bagay tungkol sa Web Audio API
ay na mayroong walang kinakailangang set up.
Ito ay built-in na karamihan sa mga modernong browser,
kabilang ang Chrome, Edge, isang buong grupo ng mga others-- lahat ng mga iyan
na ang malaking bahagi ng mga tao ay gumagamit ngayon.
Kaya't mayroong walang-set up, sa tabi mula sa pagkuha lamang
isang web server pagpunta, para sa iyo upang makapagsimula nagtatrabaho
sa iyong proyekto, na kung saan ay malaki.
>> Inirerekumenda namin pretty mabigat na isaalang-alang mo
gamit ang Chrome para sa Web development JavaScript,
dahil lang sa developer nito kasangkapan ay talagang malakas.
Bilang isang halimbawa ng kung ano ang ibig sabihin namin sa pamamagitan ng pagsasabi buksan ang iyong JavaScript
console-- kung pumunta ka sa Chrome at tumingin ka sa anumang web page,
at iniwan mo click Siyasatin ang Elemento, at pagkatapos ay
pumunta ka sa mga ito maliit na drop-down karapatan dito at nag-click sa Console,
makikita mo kung ano ay bubukas up ng isang hitsura maraming tulad ng isang command prompt na kayo
maaaring makita sa iyong Mac, o sa ID.
At katulad nito, maaari naming command type dito, tulad ng I-clear,
at iba pang mga utos na tulad ng.
Maaari naming lumikha ng variable, tulad ng kami ay makita sa ibang pagkakataon sa JavaScript.
At kaya kahit ano ang magagawa natin sa JavaScript, maaari naming gawin sa mga console,
at iyon ang isang super madaling gamitin na paraan upang simulan ang paglalaro sa paligid na may mga API
at pagkuha ng komportable sa JavaScript karapatan off ang bat.
Walang kinakailangang set up, na kung saan ay talagang maganda.
Cool.
Kahanga-hanga.
>> Kaya lang ang isa pang bagay upang idagdag.
Kung mayroon kang anumang questions-- may mga marami sa inyo na hindi dito nakatira,
huwag mag-atubili na mag-email us-- mga ay ang aming mga email address.
Kung mayroon kang mga katanungan hindi mo nais na hilingin sa amin,
tulad ng, oh Mayroon akong isang bug sa aking code, o ng isang bagay
na ang isang maliit na mas tiyak, siguro Google muna ito.
Mayroong maraming mga mahusay na mga mapagkukunan tungkol sa Web Audio API out doon.
Ito ay talagang mahusay dokumentado at ito ay pagiging
ginagamit ng isang tonelada ng mga tao sa industriya, at mga tao na lamang
pagbuo ng mga nakakatuwang bagay para sa kanilang sarili.
Kaya dapat maging isang pulutong doon ng mga mapagkukunan out doon.
Kahanga-hanga.
>> Cool, bakit kaya ang Web Audio API?
Diagram na ito ay isang maliit na piraso ng isang ebolusyon ng paraan
sound sa web ay lumago sa paglipas ng panahon.
Bgsound ay tulad ng sa orihinal na tag na HTML na ang Internet Explorer na ginamit upang suportahan.
Ito lamang ang pinapayagan para sa pretty basic na tunog, ang pag-andar ay hindi masyadong matatag,
at hindi mo maaaring gawin kumplikado sequencing,
o kontrolin kapag nagsimula sound at tumigil very robustly.
Kaya, ito ay hindi partikular na mahusay na binuo.
Pagkatapos matapos na, Flash dumating along-- kung saan,
Ako ba na iyong guys ay ang lahat ng mga pamilyar may Flash-- marahil hindi kung paano ito gumagana,
ngunit tiyak na iyong nakita ito.
Mayroon kayong na-update ang iyong Flash Plug-in, lahat na uri ng mga bagay-bagay,
at na pinalawig tiyak ang range ng pag-andar na magagamit.
Subalit ang paggawa ng paggamit ng i-install isang plug-in ay tiyak
isang sagabal sa kabilang Flash sa iyong application, tama?
Dahil pagkatapos ikaw ay nakasalalay sa mga pagpunta sa paggamit at paghahanap na ito plug-in,
at marahil na nakabukas off ito sa pamamagitan ng dagdag na hakbang
mayroon sila upang gawin upang gamitin ang iyong app.
At pagkatapos ay maaaring maging isang update doon na makikita masira ang iyong buong application,
at ito ay nagtatapos up pagiging isang bangungot para sa mga developer, masyadong.
Kaya na ay isang sagabal.
>> At pagkatapos ay pagkatapos na dumating kasama, mga tag na HTML audio, kung saan
ay isang tampok ng mas modernong HTML-- saan tiyak na pinapayagan para sa isang pulutong ng mas maraming mga bagay-bagay,
pero kahit na ang mga bagay-bagay na maaari mong gawin doon ay isang maliit na bit limitado lamang
bilang resulta ng mga bagay-bagay na HTML ay may kakayahang.
Kaya kapag ang JavaScript API, ang Web Audio API,
naging isang standard pagsasanay sa mga browser,
na talagang broadened ang set ng mga pagkakataon para sa mga developer
upang makakuha ng tunay sa gusali cool na bagay para sa web.
Para sa isang mahabang panahon doon ay nagkaroon ay talagang matatag na tool
para sa mga katutubong aplikasyon audio, like-- alam ng lahat GarageBand,
at pagkatapos ay malinaw naman may mga mas propesyonal na mga application audio paghahalo,
at ang uri ng mga bagay-bagay.
Ngunit may ay hindi isang talagang magandang Cloud-- hindi
Cloud, oo, palagay ko Cloud-- platform na batay sa web
na ay magpapahintulot sa mga developer na bumuo ng mga application para sa mga tao
gawin audio paghahalo.
At bilang siya ay magpapakita sa iyo mamaya, ang Web Audio API
nagbibigay-daan para talagang malakas mga bagay-bagay na mangyari talagang lamang,
na kung saan ay medyo cool.
Kaya na ang pagtuturo sa kung bakit mo dapat panoorin ang natitirang bahagi ng seminar,
talaga.
>> At ngayon, ako pagpunta sa makipag-usap tungkol ilang JavaScript-- lamang pangunahing elemento
ng wika, upang ang kami ay maaaring maging sa parehong pahina
kapag kami makipag-usap tungkol sa API nang kaunti bago.
Cool.
>> Kaya, ito ay isang buod.
Nakalimutan ko na ito ay dito.
Oo.
>> HUGH Zabriskie: Mayroong dalawang mga slide dito.
>> Sam GREEN: Ito ang buod ng ilan sa mga limitasyon
sa mga iba pang bisa, lumang paraan.
At pagkatapos ngayon, mayroon kaming mga bagay na ito.
Cool.
Kahanga-hanga.
>> Kaya, mahahalaga JavaScript.
Unang unang bagay, may isang pretty makabuluhang pagkakaiba
sa JavaScript laban sa isang wika tulad ng C, sa paraan
na mga variable ay nilikha.
Kaya sa C, kami ay ginagamit upang pagkakaroon i-type ang aming mga variable, di ba?
At hindi ko ibig sabihin na uri tulad ng type ang mga ito sa uri, ibig sabihin ko
tulad ng magtalaga ng mga ito ng isang type-- kahulugan tulad ng, isang int, isang float, isang pansamantalang trabaho.
Sa C, talagang kami ay ginagamit sa hindi upang lumikha ng isang variable
at pagkatapos ay dumikit na uri para sa buong oras na ginagamit namin na variable.
At iyon ay hindi kinakailangang mas masahol pa, ngunit ito ay malamang na mas mahirap gamitin.
Isa sa mga cool na tampok ng JavaScript ay
na mga variable ay kung ano ang tinatawag "dynamic na-type," kung saan
Nangangahulugan ito na maaari kong lumikha ng isang variable sa na syntax,
varX katumbas ng 5, halimbawa.
Na orihinal na lumilikha isang integer variable--
karapatan sa ilalim ng hood somewhere-- ngunit ako
maaaring baguhin variable na upang tingnan ang isang string
nang hindi ginagawa ang anumang tulad paglikha ng isang bagong variable.
Hindi ko kailangan mag-alala tungkol sa pagbabago ng uri.
Alam na ang mga uri ng JavaScript nagbago, at na dynamic na mangyayari.
>> Kaya, may mga benepisyo at kahinaan sa mga iyon,
tulad ng kahit sino ay nagtrabaho sa Upang makilala ng JavaScript para sa isang habang.
May mga pagkakataon na maaaring hindi mo sinasadyang
palitan ang uri ng isang variable at hindi mahawakan na pagpapalit ng uri,
at pagkatapos ang iyong JavaScript Maaari crash-- o isang exception
bumalibag, dahil ikaw ay magkakaroon ng maling uri kapag inaasahan mo sa isang uri.
Cool.
>> Kaya, scoping-- na kung saan ay tulad ng, kung tayo tandaan ang mga unang linggo sa kurso,
ay tumutukoy sa kung paano nakikita ng isang variable ay at sa kung ano ang lugar ng code.
Ang lahat ng na mukhang katulad sa paraan ng hitsura nito sa C.
Kaya variable ay scoped sa pangkalahatan sa loob ng kulot tirante sa loob ng isang function,
at pagkatapos ay mayroon ding globally-scoped variable na
are-- kung sumulat ka ng isang variable sa labas ng isang function,
ito ay makikita sa buong teksto.
>> Isang pagkakaiba sa pagitan ng JavaScript at C sa partikular,
ay na kung ipinapahayag mo ang isang global variable kahit saan sa isang text file
ito ay makikita sa anumang function sa loob na text file.
Iyan ay tama, di ba?
>> HUGH Zabriskie: Yep.
>> Sam GREEN: Kaya na ang isang maliit na ring bit funky sa paghahambing sa C,
kung saan kami ay palaging upang magkaroon ng aming variable kahulugan sa itaas ng lugar
sila ay ginagamit.
Iyan ay hindi isang patakaran na ipapatupad anymore, kaya, Medyo naiiba.
At muli lamang upang muling bigyang-diin, pandaigdigang laban sa mga lokal na variables--
halos katulad sa C. Maaari kang magkaroon ng dalawang variable na may parehong pangalan,
at magkaroon ng isa sa kanilang mga pangalan ay shadowed sa pamamagitan ng isang lokal na variable na kung ang isa sa kanila
ay global.
Kaya, katulad na uri ng mga problema na ang ilan sa inyo
maaaring tumakbo sa sa ilang ng iyong problema nagtatakda sa ngayon.
Cool, kaya na ang mga variable.
>> Control daloy, ibig sabihin ay tulad ng, kung-else-- lohikal stuff-- at mga loop.
Kaya upang magsimula sa, ito ay kung ano kung-ibang Tumingin pahayag tulad ng sa JavaScript.
Ang paglalagay ng mga iba't-ibang mga bagay-bagay sa mga linya ay hindi mahalaga.
Ito ang isa sa mga kombensiyon lamang para sa mga paraan ng istraktura namin code.
Katulad ng sa C, mayroon kaming isang "kung," isang parenthesis statement.
Iyan ay hindi kung ano ang ibig sabihin ko na gawin.
Ginawa ko itong muli.
>> HUGH Zabriskie: Sinusubukang upang lumabas?
Sam GREEN: Hindi, ako lamang sinusubukan upang mag-zoom in.
Hindi mahalaga.
>> Kaya, kami ay isang "kung" pahayag at kami ay may isang kondisyon loob ng mga ito
na sinusuri sa true o false, at na tumutukoy kung o hindi
ipasok natin na block ng code.
Sa gayon ding paraan, mayroon kaming isang tao-kung, at isang tao, tulad ng kami ay ginagamit upang sa C.
>> Dapat kang maging pretty din kumportable karapatan off ang bat na may mga loop,
dahil sila rin tumingin isang pulutong tulad ng C hitsura.
Ngunit mapapansin mo muli na naming Mayroon, sa halip ng int initializations,
mayroon kaming var initializations.
At ako hulaan ikaw ay mag-ingat upang gumawa ng
Tiyaking hindi mo baguhin ang mga halaga ng ko mula sa isang int sa isang string,
halimbawa, dahil na pupuntahan maging sanhi ng kakaibang pag-uugali na hindi mo maaaring
asahan.
Ngunit ito ay dapat magmukhang medyo pamilyar, pati na rin.
>> Kaya ito ay kung saan ang mga bagay simulan upang makakuha ng isang maliit na piraso ng mabaliw sa JavaScript
para sa isang tao kung sino ang pagpunta mula sa isang background ng C. May mga pag-andar
sa JavaScript, at mayroong isang paraan upang magpahayag ng isang function na ganito
uri ng katulad sa C, at pagkatapos ay may isa pa na
mukhang uri ng iba't-ibang.
>> Ang unang bersyon, kung saan maaari naming makita dito,
ay uri ng C-tulad ng, kung saan sabihin namin, ito ay isang function,
bigyan ito ng pangalan, bigyan ang bilang ng mga argumento,
at pagkatapos ay ang mga nilalaman ng ang pag-andar pumunta sa loob ng mga kulot braces.
Susubukan naming makita ang isang halimbawa ng argumento sa isang segundo lang.
>> Sapagkat sa susunod na linya, nakita namin, oh, narito ang isang variable na tinatawag na "myFunction,"
at pantay na namin ito sa ganitong generic thing-- function-- na
Mukhang hindi magkaroon ng anumang bagay na nangyayari.
Ang dahilan na iba kaysa sa C ay na JavaScript
ay kung ano ang tinatawag na isang functional na wika, o may functional na mga elemento, na nangangahulugan
na function ay talagang halaga.
At na nangangahulugan na maaari naming i-set isang variable sa pantay na ang isang function
at pagkatapos ay ilipat ang function sa paligid, ipasa ang mga ito bilang isang argument,
gawin ang lahat ng mga uri ng mga bagay-bagay tulad na sa pag-andar.
>> Isa iba pang mga bagay na note-- function ay nakasulat
na may isang tiyak na bilang ng mga argumento.
Susubukan naming makita ang isang halimbawa ng isang function may isang argument sa susunod na slide.
Ngunit JavaScript ay hindi sumigaw sa iyo kung susubukan mo
na gumamit ng isang function na may mga maling bilang ng mga argumento.
Makikita lamang ito gawin ang lahat upang gumawa ng gawin, ibig sabihin na kung ikaw ay pumasa,
tumawag ka ng isang function na inaasahan ng isang argument na walang argument, ang lahat na
ang mangyayari ay magkakaroon ito gawin ang kanyang pinakamahusay upang subukan at execute na code,
at kung sa huli ito ay tumatakbo sa isang pagbubukod o ng isang error,
makikita ito ihagis exception na iyon at magpatuloy lang going-- na kung saan ay isa sa mga paraan lamang
na gumagana ang JavaScript.
Oo.
>> Madla: Ano ang mangyayari kung may masyadong maraming mga argumento?
Sam GREEN: Kaya ang tanong ay, kung ano ang mangyayari
kung may masyadong maraming mga argumento?
At ang sagot ay na JavaScript ay lamang
huwag pansinin ang mga iyon ay matapos ang mga ito inaasahan.
Makikita ito subukan upang maisagawa ang pag-andar tumawag na parang ito ay lamang ang unang dalawang.
Right?
>> HUGH Zabriskie: Tama iyon, oo.
Katulad nito, kung may ay masyadong ilang mga argumento,
ito lamang ang uri ng mga nagbibigay sa null sa lahat ng mga argumento ito ay walang anumang mga halaga
para sa.
>> Sam GREEN: Aling Maaari tunay na maging madaling-magamit, kung ikaw
nais na magsulat ng isang function na tumatagal ng isang variable arguments number.
Maaari mong itakda ang default na halaga sa mga kahulugan ng mga function,
at maaari itong huwag pansinin ang katunayan na ang input ay hindi doon.
Kaya gusto kong makipag-usap nang kaunti ang nalalaman tungkol sa huling bala
point, na kung saan ay pag-andar ay halaga.
Ito ay isang halimbawa na Medyo isip-pamumulaklak
kung ikaw lamang basahin ito, at huwag mag-isip tungkol sa kung ano ang nangyayari para sa isang segundo.
Kaya, sabihin lamang tumingin sa ipaalam ang unang linya dito.
Mayroon kaming na ito variable, F1, na sinasabi namin ay isang function na ang bagay na ito.
At ang mga nilalaman ng ang pag-andar ay console.log ('hello').
Maaari mong isipin na console.log bilang ang JavaScript katumbas ng printf.
Kaya kung ano ang mangyayari ay, kung kami ay tumakbo ang code na ito sa aming mga browser,
makikita ito i-print out ang isang string.
Maaari ko bang ipakita na.
Madla: Sa pamamagitan ng log, bagaman, ay na Ibig sabihin ito ay ini-record na lugar?
Sam GREEN: Oo.
Kaya kukunin ko na ipakita sa iyo kung ano ang nangyayari sa mangyari.
Kaya ang tanong ay, kung ano ang ibig sabihin ng mag-log?
>> HUGH Zabriskie: So console.log ay tulad ng printf para sa C.
Sam GREEN: So console.log ay tulad ng printf,
kaya kung may ganito akong console.log ('hello'), at tawagan ko na, ang string "hello"
makakakuha ng naka-print out sa console.
Ito ay ang console.
Ito ay tulad ng printf, kung saan ito kopya sa standard out.
At kami na makita sa isang minuto, ngunit ito ay tunay na
pagsangguni sa mga console object, at pagtawag ng isang paraan sa bagay na iyon.
Na kailangan maging mas makatuturan sa isang minuto kapag kami
kumuha sa pakikipag-usap tungkol mga bagay sa JavaScript,
ngunit naisip ko na gusto kong banggitin na lang.
HUGH Zabriskie: Kami ginagamit upang sa C, right--
kami ay karaniwang magsulat ng isang malaking programa sa pangunahing gawin.
Ngunit kung ano ang cool na sa JavaScript ay sa iyo magkaroon ng ganitong uri ng interpreter na
ay tumatakbo sa real time, sa gayon ito tumatagal lamang linya sa pamamagitan ng linya,
maaari itong lamang bigyan ng kahulugan na sa lugar.
At iniingatan nito ang track ng mga bagay na tumakbo bago,
kaya ito ay isang medyo kapaki-pakinabang na tool upang gamitin console.log, o ang console,
sa pangkalahatan, para sa pag-play lamang sa paligid sa JavaScript.
>> Sam GREEN: So balik sa ito example-- ang pangalawang linya ng code
dito ay medyo isip-boggling sa aking ulo.
Ang unang pagkakataon na basahin ko ito, ito ay tulad ng, kung ano ang nangyari?
Kaya kung ano ang nangyayari ay, ito sabi function deklarasyon,
Mayroon akong isang function na tinatawag na F2 na umaasa sa isang argument, f,
at pagkatapos ito tawag na function, f, na
ay lumipas na ito bilang isang argument na walang argumento mismo.
Kaya, na maaaring ay nakalilito.
Kung nauunawaan natin na ito bilang F2 tumatagal F1 bilang isang argument, at pagkatapos ay sa loob ng F2,
f makakakuha called-- na paraan na ito sa linya ng code,
Pagkatapos ng mga dalawang linya ng code, mga resulta sa "hello"
na naka-print sa console.
>> Ang katotohanan na maaari naming pumasa function sa paligid bilang mga halaga
ay nauuwi sa pagiging isa sa mga pinaka malakas na tampok ng JavaScript
bilang isang programming language.
Sa labas ng lahat ng mga kahanga-hangang mga bagay na maaari itong gawin,
tulad ng isang tampok ng wika sa mga tuntunin ng ang paraan
na ito ay gumagawa ng mga bagay na madali sa mga programa at nagbibigay-daan sa
para sa mga bagay na hindi partikular na well-ugma sa web,
functional programming at functional programming aspeto ng JavaScript
ay isa sa mga pinaka malakas na konsepto na
umiiral sa JavaScript-- kung magtatanong kayo sa akin.
Cool.
>> Kaya, sa susunod na bagay.
Bilang karagdagan sa pagiging functional, mayroong mga elemento ng JavaScript din
na object-oriented, na kung saan ay isa sa mga tunay
popular na mga salita buzz sa computer science.
Object-oriented programming ay isang tunay popular na bagay.
Ay isang bersyon ng na JavaScript, kung saan sa tingin ko ang bawat halaga ay din
isang bagay, na nangangahulugan na ang bawat bagay bumabalot sama ang ilang bilang ng mga halaga.
Kaya para sa mga halaga na simple, tulad ng isang integer, tulad varX katumbas ng 5,
object na bumabalot lamang na ang isa na halaga.
>> Ngunit maaari rin naming isipin ang isang sitwasyon where-- maaari naming isipin ng mga sitwasyon sa C
kung saan gusto naming gawin isang bagay na may structs,
halimbawa, na bumabalot sa ilang mga halaga ng sama-sama at gumagawa
talagang madali upang pumasa sa mga bagay sa paligid.
Iyan ay kapag ang isang bagay ay sa JavaScript.
>> Ito ay mahalaga na tandaan kapag sinasabi ko na ang mga bagay na nakabalot
ilang bilang ng mga halaga ng magkasama, na function ay din
mga halaga, na nangangahulugan na ang mga pag-andar na maaari din sa loob ng isang JavaScript object.
At ang dahilan na mahalaga ay na, samantalang kami ay madalas
tingin ng pagtawag ng isang paraan sa isang bagay na
ng isang popular na kataga mula sa iba pang popular object-oriented wika,
isa sa mga pagkakaiba dito ay na lahat na ang isang paraan ay sa JavaScript
ay ang halaga na naka-imbak sa loob ng isang bagay na gumaganap ng ilang action-- posibleng
gamit ang iba pang mga halaga na loob ng bagay na iyon, ngunit hindi kinakailangan.
Kaya maaari mong isipin ang isang sitwasyon, ako hulaan sa isang maliit na piraso ng isang nakatutuwang paraan,
kung saan tinatawag na sa iyo ng isang paraan ng isa bagay sa isa pang bagay, halimbawa.
Kaya, ito ay isang maliit na bit funky sa paraang iyon.
>> At maaari mo ring baguhin ang mga pamamaraan na nauugnay sa isang bagay
sa pamamagitan ng pagtatalaga na paraan ng bagong pag-andar, kung saan ay din
medyo iba mula sa iba pang mga object-oriented wika, kung saan
isang beses ipinahahayag natin ang isang bagay at magbigay ng halimbawa nito,
hindi namin maaaring baguhin ang mga pamamaraan na kaugnay sa bagay na iyon ngayon.
Kaya na medyo naiiba.
Cool.
>> Kaya narito ang isang halimbawa, una, ng isang bagay sa aksyon.
Ito ay kung ano ang tawag dito isang pangkaraniwang bagay, na
ay nangangahulugan na ito ay walang anumang partikular na pangalan, ay hindi magkaroon ng isang klase,
ito ay ilan lamang wrapping ng mga halaga.
At ang paraan na mukhang ay, kami ay ito panlabas na pares ng mga kulot tirante dito
na nagpapahiwatig sa JavaScript at sabihin, ito ay isang bagay.
Ang mga halaga sa loob ng mga ito ay bawat halaga sa loob
ng mga bagay na dapat balot magkasama.
At sa loob ng bagay na iyon, pagkatapos kami ay may pangunahing mga pares ng halaga,
kung saan ang susi ay tumutukoy sa pangalan ng halaga sa loob ng mga bagay,
at ang iba pang side-- sa tapat ng colon here--
ay ang aktwal na halaga na dapat ay naka-imbak.
>> Kaya tingnan mo dito na kami ay may isang key na tinatawag fn na may halaga Sam,
sinusundan ng isang kuwit, sinasabi papunta sa susunod na entry.
Pagkatapos ng isang key na tinatawag na ln, may isang halaga ng green,
sinusundan ng isang kuwit, sinusundan ng "print"
na kung saan ay pagpunta sa magkaroon ng isang halaga ng function na pagpunta sa gawin ito sa linya ng code.
Tingnan natin ang isang hakbang pabalik at alisan ng laman kung ano ang nangyayari sa dito.
Kaya ito ay isang maliit na bit kumplikado, at kami ay nakakakita ng isang bagong bagay
sa unang beses.
Ang mga keyword na "ito" ay ang bagong bagay namin nakikita dito, at kung ano ang ginagawa
ay, ay tumutukoy sa kasalukuyang tumutol sa saklaw, right?
Kaya kapag sinabi namin, ito points lahat ng paraan bumalik
upang ang buong object-- kapag ginagawa namin this.fn,
kami ay pagpunta sa pumunta sa lahat ng mga paraan pabalik sa bagay na ito, pumunta sa ang halaga fn
at makakuha ng Sam, hilahin ito ang lahat ng paraan likod, ilagay ito dito, at pagkatapos ay ilipat sa.
>> Madla: Kaya sa pagkuha, ay na nagawa dahil sa mga parameter
kahulugan?
Sam GREEN: Kaya ang tanong ay, ay ang tapos retrieval dahil sa mga parameter
kahulugan?
Oo, walang pasubali.
Ano kaya ang mangyari dito ay, ito dot sabi sa JavaScript,
OK, Nakakakuha ako ng ilang mga halaga mula sa bagay na ito mula sa aking sarili.
At pagkatapos ay makikita ito hitsura para sa isang entry tinatawag fn, at kung ito ay hahanap ng mga ito,
Makikita ito ay babalik upang ang value--, ito ay Sam.
Ngunit ko rin ay nag-type isang bagay na hindi tinukoy dito,
at pagkatapos ay ito lamang bumalik undefined-- saan
ay isang bagay na JavaScript ay maaaring gawin, na kung saan ay maaaring magkaroon ng mga benepisyo,
ngunit ito ay also-- kung gumawa ka ng typo, Maaari itong magresulta sa mga kakaibang mga error.
Kaya ito na lang subukan upang mahanap ang kahit anong sabihin mo ito upang makahanap ng
at ito ay hindi pagpunta sa magreklamo kung hindi mahanap ito.
Makikita lamang ito sabihin, ako ay hindi hanapin ito, at pagkatapos ay ilipat sa.
Kaya ito ay hindi natukoy, plus blangko, plus apelyido.
Oo.
At pagkatapos ay maaari naming makita na kung tayo maaaring bumaba pagkatapos at access--
at ang tawag namin tf.print () na may panaklong.
Ito ay pagpunta sa tumawag na print function na walang arguments, di ba?
Ngunit kung sinabi lang namin tf.print () semicolon, wala ang mga panaklong,
lahat na ay nagawa ay hilahin ang mga function mula sa halaga,
ngunit hindi tunay na tinatawag na ito.
Cool.
HUGH Zabriskie: Dapat gawin namin ang isang bagay?
Sam GREEN: Oo naman, ni gawin na ipaalam.
Kaya ang maaari kong ilipat ito halimbawa sa mga console.
Maaari naming isipin na mayroon akong isang bagay.
Kaya ito ay isang simpleng bagay.
Ito ang isang bagay na naglalaman ng dalawang mga halaga na may dalawang mga pindutan, dalawang susi halaga
pares.
Kaya maaari pagkatapos ma-access ko ang halaga na naka-imbak sa loob ng bagay na ito sa pamamagitan ng paggawa x.x1,
halimbawa, at kumuha ako ng 1 pabalik.
Gayon din naman, x.x2, makakuha ng halaga na bumalik.
>> At ngayon, ang talagang cool na bagay ay, maaari ko tunay na magdagdag ng isang bagay sa bagay na ito
pagkatapos nilikha ko na ito.
Kaya maaari mong isipin, sabihin sabihin ako ng isang function.
>> HUGH Zabriskie: You kailangang gawin Shift-Enter.
>> Sam GREEN: Oh, na nakakainis.
Ano ang hindi gusto ang mga ito?
Oh.
Ayan na naman.
Cool.
>> Kaya lang Lumikha ako mga function na ito, f, na
ay pagpunta sa pumunta sa kasalukuyang object at i-print this.x1.
Kaya kung tawagin ko lang f pamamagitan mismo, walang pupuntahan
mangyari, kanan, dahil walang x1 patlang sa object na ito ay tumutukoy sa.
Subalit, kung ang sinasabi ko, x.f = f, at pagkatapos ay ako tumawag x.f (), ako pagpunta upang makabalik 1.
Na f function ay ngayon kaugnay sa mga object x,
na may isang key na tinatawag na x1 na nauugnay sa halaga ng 1,
kaya kapag ang tawag namin this.x1, ito ay pagpunta upang makita kung ano ito ay naghahanap para sa
at maaaring i-print ang halaga ng isang out.
Kaya na ang isa lamang halimbawa ng uri ng mga nakatutuwang bagay
maaari mong gawin sa mga bagay sa JavaScript.
>> Kaya na bersyon ay ang generic na bersyon, kahulugan
na lumikha kami ng isang bagay gamit ang panaklong notation-- notation suhay,
rather-- at iyon ang madaling gamitin kung gusto namin lamang
sa isang pagkakataon ng isang partikular na bagay, ngunit paano kung gusto naming magkaroon ng higit sa isang
ng parehong uri?
At ang kasagutan sa na tanong ay, may mga bagay
tinatawag na mga klase sa JavaScript rin.
Maaari naming lumikha ng isang function na ang ilang mga uri ng Pinasimulan
para sa isang banyagang bagay, at gusto naming sabihin, tulad ng,
aking class-- kaya ang pangalan ng magagamit muli object--
ay katumbas ng pag-andar na set up ito.
Kaya kung ano ito ay magiging katumbas na ay ang paglikha ng isang bagay na
ay magiging tulad lamang, kulot suhay, STR, colon,
ito ay isang string, tuldok-kuwit, kulot suhay.
Iyon ay ang generic object namin initialize,
may isang pagkakaiba sa pagiging sa susunod na linya naming lumikha ng isang prototype, na
nangangahulugan na ito ay isang default na key na magdagdag kami sa aming object na
ay ang halaga na nakalista dito.
Ibig sabihin na, kapag lumikha ako ng bagong Halimbawa ng mga ito MyClass object,
ito ay pagpunta sa may pre-binuo sa loob ng ito ng isang halaga na tinatawag na str at ng iba pang halaga
tinatawag myPrint, na kung saan ay pagpunta sa isang function.
Kahanga-hanga.
>> Great.
Kaya ang huling bagay na sabihin tungkol sa JavaScript
ay na ito ay talagang kapaki-pakinabang para sa kung ano ay tinatawag na asynchronous operasyon.
Asynchronous paraan ay na tayo maghintay para sa ilang mga operasyon
upang makumpleto bago naming ilipat sa, ngunit lumipat sa habang naghihintay kami
at pagkatapos ay may isang bagay na mangyayari sa susunod.
At kung ano ang ibig sabihin ng mga iyon ay, ikaw maaaring maisip ng isang sitwasyon kung saan
magpadala sa iyo ng isang kahilingan sa ang ilang mga web server sa isang lugar,
at ito ay pagpunta sa na padalhan ka ng bumalik ilang malaking tipak ng data, i-right?
At ang iyong mga user ay maaaring maghintay sa Samantala para sa na mangyari,
at wala ay maaaring nangyayari sa oras na iyon.
Ngunit hindi iyon isang mahusay na disenyo, tama?
Hindi mo gusto ang mga web page upang mag-freeze.
Paano kung ang user ay nagnanais na mag-click sa isang drop-down menu?
Ito ay hindi isang mahusay na disenyo ng pattern.
Sa halip, kung ano talaga JavaScript ay ay nagsasabing,
OK, gawin ang operasyon na ito asynchronously.
Kaya tulad ng, maghintay sa background, at pagkatapos ay kapag ang operasyon ay tapos na,
tawagan ang callback function-- tumawag ilang function,
ang ilang mga action-- sa signal na ang operasyon kami ay naghihintay para sa mga end
Tapos na.
At ang dahilan na ang sobrang malakas na ay, maaari naming gawin ang isang bagay, ipasa ang isang argument,
gawin ang isang bagay, at pagkatapos ay maghintay para sa isang bagay na mangyayari.
Pagkatapos, sa sandaling na ang isang bagay nakatapos, maaari naming tumawag ng callback.
Iyan ay tunay na magaling dahil nagbibigay-daan ito amin gawin ang mga bagay na may Web Audio API,
halimbawa, tulad ng pag-load ng isang audio file mula sa isang remote server
nang hindi na maghintay para sa mga buong audio file upang i-load,
na kung saan ay talagang masama para sa karanasan ng gumagamit.
Cool.
>> Huling ilang mga tala tungkol sa debugging, dahil ito
ay isang bagay na ikaw ay pagpunta sa may sa gawin bilang bahagi ng iyong proyekto, garantisadong.
Nabanggit ko ang console ng JavaScript.
Ito ay isang super-pakinabang na tampok ng lahat ng mga modernong browser,
At kami ay talagang hinihikayat ka upang makakuha ng komportable gamit ang iyong console,
kung gusto mong makakuha ng magandang sa JavaScript.
Ito ay sobrang madaling gamitin para sa debugging, ngunit ito rin ang
talagang kapaki-pakinabang para sa pag-uunawa kung paano gamitin ang isang API.
Pinapayagan nito para sa tunay na madaling pag-eksperimento
nang hindi na kinakailangang i-type ang ilang mga code, at pagkatapos ay sumulat ng libro ito.
Hindi mo kailangang gawin ang lahat ng mga hakbang na ito.
Maaari mo lamang isulat ang ilang mga code sa isang linya,
at pagkatapos ay agad na makakuha ng feedback sa kung o hindi na linya ng code
worked-- tunay magaling.
>> At din, isa lamang sa mga teknikal na note-- ang console ng JavaScript ay isang halimbawa
ng isang REPL-- kaya na R-E-P-L, REPL, na ang ibig sabihin nabasa, suriin,
loop print.
Ikaw ay pagpunta sa uri ng ilang mga bagay-bagay in, makikita ito basahin kung ano ang iyong nai-type sa,
makikita ito suriin ito, at makikita ito i-print ang mga output, at pagkatapos ay magsisimula itong muli.
Na nagbibigay-daan sa mabilis mong upang pumunta sa circles iterating, na kung saan ay talagang cool.
>> Hulaan ko real huling note-- ito ay ang aktwal na huling nota, yes.
Paano namin talagang gamitin JavaScript?
Kaya unang, maaari naming i-import ito gamit ang isang script tag
sa tuktok o ibaba ng isang HTML file-- kahit saan sa loob ng isang file na HTML,
Talaga.
At sa loob ng isang script tag, may mga dalawang sub-paraan ng pag-import JavaScript.
Ang una ay sa pamamagitan ng pagkakaroon ng isang hiwalay na JavaScript file
na-import namin sa kabuuan nito, o sa pamamagitan ng pagkakaroon ng isang lugar ng code tulad ng script
upang simulan, at pagkatapos ay backslash script sa dulo.
At pagkatapos ay isulat namin lamang JavaScript sa loob ng HTML file.
Ang mga ay ang dalawang paraan.
Hindi ka maaaring magkaroon ng mga ito sa loob ng HTML.
Madla: isang mas mahusay kaysa sa iba pang mga ba?
Sam GREEN: Ang tanong ay, ay isang mas mahusay kaysa sa iba.
Kaya, oo, bilang isang pagsasanay style coding, at ito rin ay tulad ng isang disenyo ng pagsasanay.
Mayroong dalawang dahilan bakit maaaring maging mas mahusay.
Ang una ay, ito ay gumagawa ng iyong code sa isang mas nababasa maraming kung ang lahat ng iyong HTML
ay sa isang lugar, ang lahat ng iyong CSS ay sa ibang lugar, ang lahat ng iyong JavaScript
ay nasa isang third place.
Right?
Sa tingin ko dapat na namin ang usapan tungkol dito sa sections-- tulad CSS-- ano
na is-- at ito napupunta madalas sa isa pang file.
Kaya, katulad na uri ng konsepto dito.
Maaari mo ring isipin na ang JavaScript Gusto gamiting muli sa higit sa isang
HTML na pahina, o marahil ay isang mahusay na maraming mga pahina ng HTML,
at ang pagkakaroon ng na JavaScript refactored sa isa
maghain na maaari mong i-import sa higit sa isang lugar
Pinapayagan ang code upang maging paraan na mas maintainable.
Maaari mong isipin ang paggawa ng isa baguhin sa JavaScript
at pagkakaroon upang baguhin ito sa 100 iba't ibang mga file.
At sa halip na lamang namin maaaring baguhin ito sa isa, na kung saan ay paraan mas malakas.
Nasagot ba ang iyong katanungan?
Cool.
>> Maaari din namin type sa console, bilang namin na nabanggit bago.
At muli, isa huling note-- Web Audio ay built-in,
hindi mo na kailangan mag-load ng kahit ano.
Cool.
Mayroon bang anumang mga katanungan, ang mayroon kayo anumang karagdagang mga katanungan tungkol JavaScript,
bago lumipat kami sa?
>> Madla: [hindi marinig]
Sam GREEN: Ang lahat ng mga karapatan, cool.
Kaya ngayon siya ay pagpunta sa makipag-usap tungkol sa mga API.
>> HUGH Zabriskie: Cool.
Salamat, Sam.
>> Sam GREEN: Oo naman.
HUGH Zabriskie: Galing, kaya kami ay ilipat sa mula sa JavaScript.
Kaya ko na usapan natin ang tungkol sa ilan sa ang mga mahahalaga ng JavaScript,
at iyon ay ang mga variable, function, mga bagay, pag-andar ng mga variable,
asynchronous loading.
Ito ang lahat ng mga bagay na makikita mo tignan habang ginagamit mo ang Web Audio.
Kaya lamang kami ay pagpunta sa makipag-usap tungkol dito muna sa isang mataas na antas.
>> Ito ay isang API, kaya ito ay isang bagay na na binuo, tulad ng sabi ni Sam,
pakanan papunta sa JavaScript na gamitin mo sa console.
At ito ay tunay na tulad ng C ++ code na ang tunay na binuo sa Chrome
at Firefox, at lahat ng mga browser.
Kaya ang pangunahing ideya sa Web Audio ay na mayroon ka
ang ganitong uri ng pipeline ng audio, i-right?
Kaya ang iyong mga audio data lumapit sa sa ilang mga form.
>> May mga uri ng tatlong pangunahing forms-- mayroon ka ng osileytor, na
lumilikha ng isang sine wave, cosine alon, kami ay pagpunta upang makita kung paano na gumagana.
Isa pang napaka-karaniwang isa, siyempre, ay isang MP3.
Kaya marahil kang magsimula sa isang kanta, at pagkatapos ay sa iyo
nais na gawin ang ilang mga pag-filter na iyon at output
na- na maaaring maging isang posibleng pinagmulan.
At pagkatapos ay isang tunay na cool ang isa ay ang microphone.
Kaya maaari mong gamitin ang ilang mga napaka pangunahing mga tawag sa JavaScript
upang makakuha ng access sa mga mikropono, at kaya kung ikaw
Nais na gumawa ng isang app tulad ng isang sukdulang detector,
halimbawa, na tumatagal sa ang iyong boses at mga numero out
ang pitch-- napakadaling paraan upang iyon.
Maaari mo lamang uri ng basahin ito sa, malaman kung ang dalas,
at pagkatapos ay output ng isang numero.
Kaya makikita namin makita kung paano na gumagana, pati na rin.
>> Ang patutunguhan ay talaga kung saan ang data ng audio ay output.
Kaya sa pangkalahatan, na tulad ng iyong laptop speakers.
Iba pang mga opsyon ay tulad ng isang ScriptProcessorNode--
susuriin namin ang mga node sa isang second-- ngunit karaniwang,
alinman naglalagay ka ng sound out sa pamamagitan ng iyong computer sa pamamagitan ng mga nagsasalita,
o ikaw ay uri ng pagtatala ng mga ito, kaya ikaw ay pagtatago ito bilang data ng audio.
Kaya siguro kung may isang taong lumilikha ng musika sa iyong app at pagkatapos ay
Gusto mong i-record na at baka gusto i-export ito sa SoundCloud, para example--
na magiging isang paraan upang gawin iyon.
Ang lahat ng mga nakakatuwang bagay-bagay, na kung saan namin makipag-usap tungkol sa,
ang mangyayari sa pagitan ng dalawang mga punto, kung saan namin load sa musika
at pagkatapos ay output ito.
>> Kaya ako ng pagpunta sa makipag-usap tungkol sa limang yugto ng audio produksyon sa isang segundo.
Mayroon kaming ito bagay na tinatawag isang AudioContext, na
ay ang maliit na wrapper nakikita natin dito.
Talaga kung ano AudioContext is-- kung tayo pumunta sa JavaScript console sa ngayon,
maaari naming lumikha ng isa ngayon.
Isang halimbawa lang ng REPL, di ba?
Kami ay pagbabasa, evaluate, at ito ng mga kopya.
>> AudioContext ay isang pandaigdigang estado.
Ito ay isang struct, na ang lahat ng isang bagay dito, iniingatan at ito impormasyon
tungkol sa mga bagay na nangyayari sa sa screen na may kaugnayan sa audio.
Ang isang halimbawa ay ang kasalukuyang oras.
Ito ay nagsasabi sa iyo ang bilang ng mga segundo, napaka tiyak,
dahil sa ang mga web page load.
Kaya ito ay isang talagang kapaki-pakinabang maliit na ari-arian na maaari mong gamitin.
Ito ay basahin only-- tingin ko talaga maaari mong subukan na i-set ito ng isang halaga.
Makikita ito sabihin itinakda mo ito, at pagkatapos ay kung i-print mo ito
again-- ito ay hindi tunay na ganap na trabaho.
Kaya doon ay read-only mga katangian sa JavaScript.
Ito ay talagang kapaki-pakinabang kung ikaw ay ang uri ng pag-sync
isang pulutong ng mga iba't-ibang impormasyon, kapag ikaw ay
uri ng paglalaro ng iba't ibang mga tunog.
>> Ang isa pang talagang kapaki-pakinabang ang isa ay ang konteksto destination.
Tiyak, kung interesado ka, maging sinusubukan ito sa iyong sariling console karapatan
ngayon.
Kaya ito ay isang AudioDestinationNode.
Talaga kung ano ang sinasabi ay, kung saan ang pagpunta ay ang output?
Kaya may dalawang tunay na mga pagpipilian dito.
Karaniwan ang mga default ay ang iyong mga nagsasalita lamang,
kaya AudioDestinationNode talaga lang sabi
may mga zero output sa tunog pagpasok, na ipinadala sa mga speaker.
Kaya sa pangkalahatan, hindi mo upang i-play sa mga iyon.
Kung ikaw ay interesado sa aktwal na paggamit ang ScriptProcessorNode para sa recording,
siguradong shoot akin ng isang email sa ibang pagkakataon dahil na
mas kumplikado nang kaunti.
Ngunit sa pangkalahatan, ikaw ay uri lamang ng outputting tunog sa ilang mga form.
So cool, makikita namin lumipat pabalik dito.
Madla: Sorry.
HUGH Zabriskie: Oo.
Madla: alam ko sinabi mong makipag-usap sa iyo mamaya tungkol sa pagtatala.
Maaari mong interface na may Tools Pro?
>> HUGH Zabriskie: Sa Tools Pro?
Tingnan natin.
Hindi sa tingin ko.
Kaya pagpunta sa pagitan ng mga client, kung saan ay ang JavaScript
console, at ang iyong aktwal computer, ay sa pangkalahatan
isang bagay na uri ng off ang mga limitasyon, kung ikaw
ay, uri ng likas na katangian ng the-- ito ay uri ng isang disenyo ng bagay,
ngunit subukan mong panatilihing hiwalay ang browser mula sa aktwal na computer ng user.
Sa pangkalahatan, ang tanging bagay na nagawa mong access ang mikropono o camera.
Kayo ay hindi maaaring, ako hindi nag-iisip, gamitin ang Tools Pro.
Gayunpaman, kung ikaw ay lumikha isang track sa Tools Pro,
nailipat na, maaari mong i-load na sa dito, ang filter na ito, halimbawa,
prosesong iyon, at i-record na ito sa isang Audio Destination-- o, no-- isang globo
Processor Node.
At pagkatapos ay mula doon, maaari mong i-export na sa SoundCloud, ikaw
maaaring ipadala ito sa isang email, o kahit anong gusto mo mula doon.
>> Subalit mayroong mga uri ng isang bahagyang barrier pagitan ng paggawa ng musika sa iyong computer
at sa paggawa ng musika online.
>> Sam GREEN: At na hindi natatangi sa API na ito.
Ito ay isang tampok ng seguridad ng Chrome, at Tingin ko ang bawat iba pang mga modernong browser.
Ang browser ay self-contained.
Kaya halimbawa, ang isang pahina ng web ay hindi maaaring gumamit ng JavaScript upang i-on ang tunog
on sa iyong speaker, halimbawa.
O kaya hindi ito maaaring buksan ang iyong computer off.
At walang intermediate point pagitan ng mga dalawang mga bagay, kanan,
kaya alinman mayroon kang isang kumpleto abstraction,
o buksan mo ang seguridad kapintasan ng pagpapaalam
isang programmer may hindi magandang intensyon gawin kahit anong gusto nila sa iyong laptop.
At iyon ang dahilan kung bakit Chrome ay self-contained.
>> HUGH Zabriskie: Oo.
Ba na magkaroon ng kahulugan?
Cool, cool.
Lamang ako ay pumapasok sa ipakita ang isang halimbawa ng isa.
Ito ay medyo marami bilang malayo gaya ka ng, sa mga tuntunin
ng pag-access sa computer ng gumagamit.
Kung mayroon kang isang USB keyboard naka-plug in, maaari mong gamitin ang isang bagay na tinatawag na ang Web
MIDI API, na kung saan hindi kami talagang makipag-usap tungkol dito,
ngunit ito ay isa pang API na binuo sa hindi bababa sa Chrome-- muli,
ito ang dahilan kung bakit gustung-gusto namin Chrome-- Sa tingin ko ang Firefox o Safari,
ito ay isang madaling bagay na Mayroon google-- iba't ibang mga browser
iba't-ibang suporta para saan APIs sila ay ipinatupad.
Ngunit kung nais mong i-plug sa isang keyboard at trabaho sa impormasyon na iyon,
uri ng ipadala ang keyboard impormasyon sa paglipas ng sa computer
at pagkatapos ay gamitin na online, ito API ay kung saan gusto mo ay nagtatrabaho na.
>> Cool.
SIGE.
Kaya, mabilis na gumagalaw sa dito.
Paano kami ginagawa sa oras?
>> Tagapagsalita 1: Mga 15.
>> HUGH Zabriskie: 15 minuto ang natitira?
OK, cool.
Kaya makikita namin lahi maaga dito.
>> Kaya talaga, ang pangunahing punto ng nag-iisip ng mga ito bilang isang tubo
ay na ang bawat hakbang sa tubo ay isang serye ng mga nodes audio.
Ang aming source, sabihin natin, ay isang osileytor.
Kailangan namin na lumikha ng isang osileytor node.
At iyon ay uri lamang ng maliit na function--
at lahat sila ay base sa labas ng audio konteksto dito.
>> Madla: Kapag nagsabi na ito osileytor, ang ibig sabihin na
ito ay tunay na literal ng pagpunta mula sa dalawang magkaibang pole pabalik-balik?
>> HUGH Zabriskie: Hindi, ito ay tulad ng isang digital representasyon.
Talaga Ito ay ipinatupad sa C ++.
Ako, hindi nga ang specs ng kung paano aktwal na ito ay ipinatupad,
ngunit ang lahat ng ito ay gumagana tulad ng binary data.
Sa totoo lang, oo.
Iyon ay nagsasabi, kaya kong talaga, kung kayo ay interesado,
Kaya kong magpadala sa iyo ng kaunti pa impormasyon tungkol sa kung paano waveforms
ay nag-iingat sa pagkakaroon ng isang digital format.
OK, cool.
>> Kaya kami ay pagbuo ng isang tono tulad ng isang sine iwagayway o isang bagay tulad na, siguro
440 Hertz.
Lumikha kami ng isang osileytor.
Kung gusto naming i-set ang lakas ng tunog, namin kumonekta sa anumang bagay sa isang GainNode,
kung saan maaari naming gawin sa .creategain.
Na set ang iyong lakas ng tunog.
Maaari mong pumasa na papunta sa anumang sa mga iba pang options-- rin,
kaya isang pinagmulan buffer audio node ay kung saan maaari ka
tindahan ng isang MP3 na na-load sa.
>> Biquad filter ay para sa pag-filter kung gusto mong gawin ang lahat ng base sa labas
ng isang kanta, o isang bagay na tulad ng.
Huwag sana nais mong kumuha ng ang base sa labas ng isang kanta.
At AudioDestination node ay, muli, tulad ng kung saan ang aming mga finalization ay.
Kung ikaw ba ay interesado sa nakikita mo lahat ng iba't ibang posibleng pagpipilian,
pumunta lamang sa tab at hayaan ang auto-complete lumapit.
At kung ikaw ay lumikha, makikita mo ang lahat ng iba't-ibang mga bagay-bagay na maaari mong likhain.
Maaari kang lumikha ng mga dynamic na script processors,
Hindi ko kahit na alam kung ano na ay, para sa paghahalo mergers channel
at splitters channel at lahat na.
Cool.
>> Kaya ito ay lamang ng isang halimbawa ng isang pipeline.
Kaya kami ay may tatlong mga pinagkukunan na pumapasok.
Siguro ang mga ito ay waveforms, marahil ito ay mga MP3.
One ang pagpunta sa pamamagitan ng isang filter, isa pa ni
pagkuha ng pangit ng ibang ang sariling pag-pan pakaliwa at pakanan.
Maaari mong gawin ang lahat ng uri ng bagay at lahat sila makakuha ng mixed paligid ng sama-sama,
at pagkatapos ay sa labas dumating ang audio sa dulo, tulad ng destination.
Ito ay isang halimbawa ng kung ano ang higit pa Mukhang kumplikado Web code Audio.
Lumilikha ka ng lahat ng mga iba't ibang bagay kanan here--
Hindi ako sigurado ng mga ito.
Hindi, ito ay hindi mag-zoom in.
SIGE.
>> Sam GREEN: Gawin mo Control, Scroll-Up.
HUGH Zabriskie: Control Scroll--
Sam GREEN: Hindi, hindi.
Control--
>> HUGH Zabriskie: Oh, Control, scroll?
Oh, gotcha.
Oo.
Wow, nope, nope.
SIGE.
Hindi ko gagawin iyon.
>> Kaya oo, ito sa unang section dito, tingnan mo
kami ay ang paglikha ng lahat ng mga iba't-ibang nodes sa labas ng konteksto.
Lang kami piecing ito magkasama sa ikalawang bahagi
sa pamamagitan ng function na ito na tinatawag na Connect.
Iyan ay isang tunay na key function sa Web Audio.
Ito ay nangangahulugan lamang sa sandaling nagawa mo isang bagay na may tunog sa isang node,
ipasa ito sa mga susunod na node.
Kaya kami ng pinagmulan, ito nag-uugnay sa analyzer,
analyzer ay isang bagay na may ito, ito ang papunta sa pagbaluktot, at iba pa,
at sa patutunguhang sa ibaba dito mismo.
Cool.
OK, kaya kami ay patuloy na gumagalaw sa.
>> Pipeline-- Ang muli, ang mga ang pinaka karaniwang mga pipeline,
kaya makipag-usap namin tungkol sa lahat ng mga bagay tulad ng pagbaluktot, pag-pan, ang lahat ng mga bagay-bagay na ito.
Kung talagang interesado ka sa iyo sa paggamit ng mga bagay-bagay Tools Pro,
mga marahil interes sa inyo.
Kung hindi, maaaring mo lamang nais na i-play ang tunog,
o marahil ay gusto mo lamang itakda ang lakas ng tunog sa tunog.
Ang mga ay ang dalawang pinaka-karaniwang uri ng pipelines sa audio produksyon.
>> Muli, ang mga paraan na maaari mong gawin ito in bilang isang oscillator-- gayon, sabihin
gawin ang isang demo ng na karapatan dito.
Kaya kami ay pagpunta upang lumikha ng isang simpleng context audio dito,
at mula sa na kami ay pagpunta upang lumikha ng aming osileytor.
Kaya na ay, muli, hindi namin lamang pagpunta sa tawag Lumikha Oscillator.
Kami ay pagpunta upang itakda ang isang dalas sa na iyon, 440 Hertz, paborito ng lahat.
Pagkatapos ay ikonekta namin na sa destination point-- na kung saan ay ang speaker, para
context destination.
Sa wakas, sinasabi lang namin, simulan zero segundo mula ngayon, at kami ay may tunog?
>> [Tugtog]
>> HUGH Zabriskie: Ayan na naman.
Ito lamang ay isang sine wave.
OK, cool.
At pagkatapos ay makikita itigil namin na.
>> Madla: Saan mo dumating feedback na mula sa?
>> HUGH Zabriskie: feedback Ang?
Oh, marahil ang aming mga mikropono.
Kaya oo, na kung paano mo gawin ito.
At talagang, kung ako ay iningatan ito tumatakbo, ikaw ay
ay maaaring magkaroon ng mga frequency halaga bilang ito ay tumatakbo,
kaya na ang isang bagay na masaya upang i-play sa paligid.
Cool.
Iyan ay palaging isang magandang isa upang ipakita.
>> Sam GREEN: Kami ay hindi isipin ang tungkol na, ay namin?
HUGH Zabriskie: Oo, iyan ay isang isang bastos.
Kaya, buffer loading-- kukunin ko na ipakita ang isang halimbawa ng na sa dulo.
Na-load ng isang MP3.
At mikropono, gumamit ka ng isang function na lamang tinatawag Navigator.getUserMedia ()
upang humiling ng access sa mga gumagamit mikropono para sa impormasyon na iyon.
>> Narito ang pag-filter, makikita ko lamang panatilihin ang paglipat mula sa ito.
Ito ay medyo mataas na antas, ngunit lamang daan sa iyo filter upang
>> [Beep]
Pinapayagan din ng Filtering mo upang lumikha ng mga bagay-bagay tulad ng rosas
ingay, brown ingay, puti ingay.
Kung nais mong lumikha ng purong ingay, na ang ilang mga tao ang pag-ibig sa gulo sa paligid na may,
maaari mong gamitin ang Web Audio pag-filter upang gawin iyon.
>> Audio Panning-- kaya isipin kung ikaw ay sumusulat ng isang laro
at gusto mo ang tunog sa tunog tulad ng ito ay darating, tulad ng,
shooting sa buong screen, ikaw ay maaaring gamitin ang pag-pan ng audio
upang lumikha ng ganitong uri ng kono, saan like-- ito ay medyo mathy,
ngunit ito ay aktwal na talagang cool na kung ikaw ay makakuha ito ng trabaho,
at mayroong ilang mga mabuting tutorial sa mga ito ang maaari kong ipadala sa iyo.
Talaga, maaari mong uri ng lumikha ng mga sound
ng isang bagay na nangyayari sa pamamagitan ng sa isang 3D na paraan.
At kung ikaw ay may isang DJ interes, maaari mong simulan ang paghahalo at cross-dahan songs.
>> Ito ay lamang ng ilang mga tunay pangunahing code, talaga kung ano ang aking ginawa bago.
Itinatakda nito ang dami ng osileytor, kaya gumawa kami ng aming mga oscillator
na lumilikha ng waveform.
Gumawa kami ng aming GainNode, itakda ang aming mga frequency,
at pagkatapos ay ikonekta ang osileytor sa GainNode, na pagkatapos ay karaniwang nagbabago
kung magkano ang signal ay pinahihintulutan sa pamamagitan ng.
Ngunit talagang, ito ay isang digital bagay, kaya ito ay mas just-- oo.
Iyan ay hindi kung ano ang aktwal na nangyayari, ngunit iyan ay kung ano ang mangyayari sa tunay na buhay
may makakuha.
>> Madla: --quantization mga parameter lakas ng tunog?
HUGH Zabriskie: Sorry?
Madla: Ito ba ay isang quantized parameter volume?
HUGH Zabriskie: Oo.
At ito ay isang bagay na talagang ako kulang pa sa aking kaalaman,
kung paano gumagana ang pakinabang sa isang digital na antas.
Alam ko na may aktwal na signal, ito ay isa lamang
pagkontrol ng kung magkano ang iyong pagpapalakas ng signal.
Kaya, oo.
Magpapadala ako sa iyo ng karagdagang impormasyon tungkol na, dahil gusto ko maging curious talaga
upang malaman ang higit pa tungkol sa na.
Ngunit isa lamang ang mga parameter ay, ang isa ay ang fold--
ang louder signal-- at zero ay walang signal, o hindi mo marinig ang anumang tunog.
Susubukan naming laktawan time demo para dahil na ito ay isa lamang ang aking ginawa bago.
At muli, ang Context.Destination ay ang destination node audio.
Kahanga-hanga, OK.
>> Kaya ako ng pagpunta sa gawin ang isang mabilis na dalawang demo.
Paano kami ginagawa sa oras?
>> Tagapagsalita 1: Tungkol sa 10 minuto.
>> HUGH Zabriskie: 10 minuto?
Great!
Kahanga-hanga.
>> Kaya ang unang isa ako pagpunta sa huwag, ito ay tinatawag My Favorite Song.
Kaya ito ay lamang ng isang maliit na HTML JavaScript.
Kami ay pagpunta sa may dalawang mga pindutan sa pahina ng i-play ang aking paboritong kanta
at itigil ang aking mga paboritong kanta.
Kukunin ko na baguhin ito.
>> Madla: Takpan ang iyong mikropono.
>> HUGH Zabriskie: Oo.
At ako load in dito isang script na basically--
at ito ay talagang kapaki-pakinabang para sa paglo-load ng isang MP3,
kaya ito ay gumagawa lamang ng naglo-load ng mga MP3 na paraan ng mas mabilis.
Ito ay karaniwang lamang ng isang bata.
Ito lamang ang gumagawa ang proseso ng naglo-load sa MP3s mas mabilis,
sa kabilang banda ikaw ay gumagamit ng HTTP kahilingan, uri ng tulad ng kung ano ang aming ginagawa
sa kasalukuyang piraso-set na may Server.
Ito ay talagang pangit, mo hindi mo nais na gawin ito.
>> Kaya ang tao na ito, Boris SMUs, isinulat ng isang tunay na kapaki-pakinabang na maliit na kasangkapan na tinatawag na BufferLoader.
Lahat ng gagawin mo ay para lang pumasa ito sa konteksto, ipasa mo ito ng isang list--
o, oo, ito ay isang listahan sa JavaScript?
Sam GREEN: Ang isang array.
HUGH Zabriskie: Oh, ito ay isang array, na karapatan.
Ito ay isang hanay ng mga landas sa iba't-ibang mga file.
At pagkatapos mong ipasa ito ng isang function.
Ito ang callback kami ay pakikipag-usap tungkol sa asynchronous loading.
Iyon ay tatawaging sa sandaling ang file load.
At na function na ay tinatawag na kapag ng file load tumatagal bilang perimeter
isang array ng load buffer.
Kaya na nangyayari dito.
Karaniwang, BufferList ay magiging isa value--
o ito ay magiging isang hanay ng mga haba ng isa, na may sa ito sa index
zero ang buong load ng file ng MP3.
Kaya kung ano ang gagawin ko kapag matapos ko loading ay, ako lang
lumikha ng isang pinagmulan buffer, na ay isang audio buffer source node.
Ang susunod na hakbang ay ang load ko sa source.buffer bilang ang buong load buffer
mula sa BufferList-- ito ay isang pulutong ng mga buffers--
at pagkatapos ay kumonekta sa iyo na ang audio nagpapahina ng lakas sa patutunguhan.
Kaya kung ano ito ay pagpunta sa gawin ay lamang maglagay lamang ng mga MP3
sa pamamagitan ng tuwid sa output, at agad na simulan ito
sa pagkuha ng mga tawag na ito.
>> Cool, ni makita kaya hayaan ito mangyayari sa pagkilos.
Aking [hindi marinig] dito, tingnan natin.
Kaya ako lamang ang pagpunta sa magsimula ng isang pangunahing server.
Iyan ay isang bagay na kailangan mong gawin kung ikaw ay
paggawa ng mga kahilingan para sa paglo-load ng mga file.
Pupunta ako upang simulan ang isang pangunahing server.
Ito ay isa lamang ang iyong buong Pset ngayon sa isang linya,
ngunit lamang ito ay nagsisimula isang server sa port 80/80.
Kaya pumunta kami sa paglipas dito, kami ay pagpunta sa load 80/80,
kami ay pagpunta sa pumunta sa My Favorite Song.
Kaya kung ako pindutin ang "Play aking paboritong kanta "sa ngayon,
ito ay pagpunta upang i-load ang aking paboritong kanta at maglaro it--
[MUSIC - THE EAGLES, "BUHAY SA FAST LANE "]
--which ang mangyayari sa "Life in Mabilis Lane "sa pamamagitan ng Eagles.
Ngayon, maaari ko pindutin ang "Ihinto ang aking paboritong kanta "at i-replay ito.
>> [MUSIC - THE EAGLES, "BUHAY SA FAST LANE "]
>> At kung pumunta ako sa ibabaw sa console, dahil Ginamit ko ang isang global variable sa paglipas dito
upang subaybayan ang mga halaga na ito, ito ang tunay ay ngayon ay kinikilala sa console.
Kaya ito ang auto-lumilikha para sa akin.
Kaya na kung ano ang pag-play sa ngayon, at maaari kong tumawag source.stop lang ()
sa mga iyon.
Well, alam mo kung ano?
Kaya lang kayo guys may naririnig na ito song-- maaaring makilala mo ang kantang ito.
>> [MUSIC - Rick Astley, "HINDI GONNA GIVE YOU UP "]
[MUSIC - THE EAGLES, "BUHAY SA FAST LANE "]
Aming ngayon ang lahat ng na-Rickrolled.
OK, mahusay, lumipat sa.
Cool.
Kaya ito ay isa lamang ng isang halimbawa ng lamang kung paano maaari mong i-load ang isang MP3 file--
[MUSIC - THE EAGLES, "BUHAY SA FAST LANE "]
--at i-play ito, at itigil at simulan ang mga ito.
Kaya kong nagawa pa ng maraming [hindi marinig]
>> Ang huling isa ang makikita ko ay, Ipapakita ko sa iyo ng isang [hindi marinig].
>> [MUSIC nagpe-play]
>> Ito ay tulad ng, ogg.wave.mp3.
Sa tingin ko, kung matandaan ko nang tama, Ko na tumakbo sa ilang mga isyu sa M4a,
ngunit hindi ako sigurado tungkol na.
Sa tingin ko mp3.wave--
>> [MUSIC - Rick Astley, "HINDI GONNA GIVE YOU UP "]
>> OK, malaki.
Hindi mo dapat sinabi ko na.
Gayon pa man, hello.
Kaya mayroon kaming ito bukas.
Kaya ngayon ang lahat ko ay, talaga aking nilikha isang pangunahing syntax para sa paglikha ng musika.
Kaya kung gagawin ko ang isang bagay tulad ng, magdagdag g4 on 1 2, ano ang ibig sabihin nito ay na,
idagdag ang mga piano note, G4, kung saan ay ang ika-apat na G
up sa piano mula sa ibaba.
Kaya ito ay uri ng MIDI makipag-usap, kaya para sa mga taong based music,
ito ay lamang ng MIDI tala.
>> Madla: Iyan ang G ng Middle C, right?
>> HUGH Zabriskie: Ito ang G itaas Middle C, na karapatan.
>> Madla: Above Middle C.
>> HUGH Zabriskie: Oo.
Sa totoo lang, oo.
Sa tingin ko ang tunay na ako ginawa itong isa [hindi marinig],
kaya ito ay maaaring maging isang oktaba sa itaas na.
Kaya sabihin makita.
Kung pinindot ko Play--
[Paulit-ulit na piano NOTE]
--we're pagpunta sa marinig na.
Ang ideya ay na ito ay nagpapatakbo tulad ng isang command line ay,
kaya kung pumunta ako pataas at pababa sa aking keyboard, ikaw
maaaring bumalik sa nakaraan utos, na kung saan ay medyo kapaki-pakinabang.
At sa ibaba ay ang aking listahan ng track, na kung saan ay nagpapatakbo ng lahat sa loop.
>> Madla: Ikaw ay pag-aakala ang 88-key keyboard sa na, i-right?
>> HUGH Zabriskie: Ang tanong ay, ako sa pag-aakala ng isang 88-key keyboard,
at oo, ako.
Ano ang ginawa ko ay ako talaga kinuha 88 samples
ng piano, isa para sa bawat tala.
At kaya sa bawat oras na marinig ng isang tala mula ngayon,
iyon ay talagang isang loop na ganito like-- ito ay nakakakuha ng play sa loop,
kaya para sa bawat tala, ito ay tumatakbo.
Ano ang mangyayari ay, ako lumikha muli ng isang buffer,
Gumawa ako ng isang makakuha node upang itakda ang lakas ng tunog.
Ito lamang ng isang tunay masalimuot na paraan ng pagsasabi ko
tindahan ang buffer sa isang source.buffer.
Ako bigyan ito ng pakinabang, ako ikonekta ito sa ang makakuha,
ang makakuha ay konektado sa output, at pagkatapos i-play ko ito.
Kaya na ay uri ng proseso ng pagkuha sa isang source buffer.
>> Madla: Maaari mong aktwal na tumagal na dry sound at gawin itong wet [hindi marinig]?
>> HUGH Zabriskie: Maaari mong, oo.
May re-verb, may pagkaantala, kabaligtaran.
Maaari ka talaga maglagay ng anumang bagay sa pagitan of-- rin sa sandwich na iyon,
pipeline ay isang mas mahusay na talinghaga, ngunit maaari kang magdagdag ng kahit na ano sa mga iyon.
Cool.
>> Kaya kailangan ko tapusin ang demo dito upang mabigyan ka ng ideya
na lamang ang lubos na bilang ng beses na kayo maaaring tumakbo na function na ang lahat nang sabay-sabay.
Kaya ako pagpunta sa alisin ito.
Pupunta ako upang lumikha ng isang generator na- talaga kung ano does-- ito ay talagang
uri ng isang komplikadong syntax-- ngunit ito ay pagpunta upang bumuo ng mga tala sa mabilisang,
at simulan ang pag-play lamang ang mga ito bilang ito sinusuri ang mga ito.
[INTERPOSING piano]
>> Kaya maaari lamang naming gumawa ng isang maliit na musika dito.
[INTERPOSING piano]
>> Kaya kung ano ang command na ito ay, halimbawa, ay
ito ay tumatagal ng tatlong tala ang mga para sa piano at pagkatapos ay inilalagay ang mga ito sa B3.
Maaaring gumawa ng syntax na ito isang maliit na higit pang-unawa
sa mga taong magkaroon ng isang background music dito.
>> Maaari ba akong magdagdag ng isang sipa drum.
Kaya ko--
>> [INTERPOSING Instrumentong]
>> --just play sa paligid na may.
>> Kaya maaari mong make--
[INTERPOSING Instrumentong]
Ang isang iyon ay isang maliit na mas nakakainis.
[INTERPOSING Instrumentong]
>> Kaya na random na nagdadagdag ng isang dry umaalingawngaw sa bawat ika-16 ng tala, na may isang 16%
[Hindi marinig].
>> [INTERPOSING Instrumentong]
>> Oo, kaya ang paraan na ito works-- ito ay palaging sa 4: 4.
[INTERPOSING Instrumentong]
>> Oo, kaya sa apat na sulok, at 16/8.
[INTERPOSING Instrumentong]
>> Kaya sa karaniwan, makakakuha ka ng 60% ng mga hit sa ika-16 na mga tala.
>> Anyways, ito ay lamang uri ng gustong ipakita
ang ilan sa mga bagay na maaari mong bumuo sa Web Audio API.
Ito ay talagang malakas, ito ay talagang mabilis, at maaari kang gumawa ng maraming cool na mga bagay-bagay
kasama.
Kaya muli, ang anumang mga tanong na mayroon ka, email myself-- Hugh-- o Sam,
at sa totoo lang, ang Google ay may isang tonelada ng mahusay na mga mapagkukunan.
Anumang mga huling katanungan?
Oo.
>> Madla: Kaya maaari mong ma-access ang ang built-in na mikropono.
Paano kung gusto mong gumamit ng isang mas mahusay na mikropono?
HUGH Zabriskie: Kung iyong nais upang gamitin ang mas mahusay na mikropono?
Kaya muli, ito ay bahagi ng abstraction sa pagitan ng Chrome
at ang natitirang bahagi ng iyong computer.
Maliban kung ito ay magagamit sa pamamagitan ng isang API, tulad ng Web MIDI API,
maaari mong malamang na mahanap ang ilang mga hack, ngunit sa pangkalahatan ay hindi bilang magagawa.
>> Sam GREEN: Maaari mong also-- lahat alam ang Chrome
ay kung ano ang iyong default microphone ay, at ito-access na iyon.
Kaya't kung ikaw ay isang mikropono dati mo itakda bilang default microphone computer,
maaari mong ma-access ang mga ito na paraan at ito ay marahil sa trabaho.
HUGH Zabriskie: Iyon ay isang magandang punto.
Hindi ko na sinubukan na, ngunit maaari mong ma-uri
of-- kung redirect ka sa input na speaker, maaaring ikaw ay maaaring gawin na, oo.
>> Anumang mga huling katanungan?
Cool.
Well thank you guys magkano kaya para sa panonood.
Ako ay Hugh.
Sam GREEN: Ako Sam.
HUGH Zabriskie: At ito ay CS50.