SAM GREEN: Hi, bawb. Croeso i'n seminar. Fy enw i yw Sam. HUGH Zabriskie: Rwy'n Hugh. SAM GWYRDD: Ac rydym yn mynd i siarad heddiw am JavaScript a'r API We Sain. Dim ond i ddechrau, mae hyn yn amlinelliad o'n hagenda ar gyfer y seminar. Rydym yn mynd i ddechrau drwy siarad am pam y dylech chi fod â diddordeb yn y We API sain, pam mae JavaScript yr iaith yr ydych ei angen ar ei gyfer, ac yna siarad am JavaScript essentials-- felly fel, chi gerdded drwy rai hanfodion yr iaith, ac yna siarad am y API sain ar lefel uchel. Yna, bydd Hugh sôn am rai o'r cam o'r broses gynhyrchu sain ac yna demo hwn dilyniannwr anhygoel prosiect adeiladodd ac yn dangos i chi y cod. Ac yna, bydd gennym amser ar gyfer cwestiynau ar y diwedd i bobl sydd yma yn byw. HUGH Zabriskie: Cool. SAM GWYRDD: Cool. HUGH Zabriskie: Cool. Byddaf yn ôl i fyny. SAM GREEN: Felly, pethau cyntaf yn gyntaf. Felly, un o'r pethau gwych am y We API Sain yw nad oes unrhyw set i fyny ei angen. Mae'n dod adeiledig mewn i rhan fwyaf o borwyr modern, gan gynnwys Chrome, Edge, yn ei gyfanrwydd criw o others-- y holl rai dogn hynny fawr o bobl yn defnyddio heddiw. Felly nid oes ei sefydlu, ar wahân i jyst mynd yn weinydd y we yn mynd, am chi i ddechrau arni yn gweithio ar eich prosiect, sy'n wych. Rydym yn argymell 'n bert drwm eich bod yn ystyried gan ddefnyddio Chrome ar gyfer Datblygu gwefan JavaScript, dim ond oherwydd ei datblygwr offer yn wirioneddol gryf. Fel enghraifft o union beth ydym yn ei olygu drwy ddweud agor eich JavaScript console-- os byddwch yn mynd i mewn i Chrome ac edrychwch ar unrhyw dudalen ar y we, ac rydych yn gadael cliciwch Archwiliwch Elfen, ac yna byddwch yn mynd i'r hyn ychydig galw-i-lawr i'r dde yma ac rydych yn clicio ar Chysura, byddwch yn gweld yr hyn yn agor i fyny yn edrych yn lot fel gorchymyn 'n barod eich bod Efallai y gwelwch ar eich Mac, neu ar y adnabod. Ac yn union fel 'na, allwn math gorchmynion yma, fel Clear, a gorchmynion eraill fel 'na. Gallwn greu newidynnau, fel y byddwn yn gweld yn nes ymlaen yn JavaScript. Ac felly unrhyw beth y gallwn ei wneud yn JavaScript, gallwn wneud gyda'r consol, ac mae hynny'n ffordd super 'n hylaw i ddechrau chwarae o gwmpas gyda APIs a chael gyfforddus gyda JavaScript dde oddi ar y ystlumod. Nid oes set i fyny ei angen, sydd yn neis iawn. Cool. Awesome. Felly, dim ond un peth arall i'w ychwanegu. Os oes gennych unrhyw questions-- mae llawer ohonoch nad ydynt yma yn byw, mae croeso i chi anfon e-bost us-- hyn yw ein cyfeiriadau e-bost. Os oes gennych gwestiynau nad ydych am i ofyn i ni, fel, oh gen i nam yn fy cod, neu rywbeth dyna ychydig yn fwy penodol, efallai Google yn gyntaf. Mae llawer o adnoddau gwych am y We Sain API i maes 'na. Mae'n wirioneddol dda dogfennu ac mae'n cael ei a ddefnyddir gan tunnell o bobl yn diwydiant, a phobl sy'n unig adeiladu pethau hwyliog ar gyfer eu hunain. Felly dylai fod yn llawer o adnoddau i maes 'na. Awesome. Cool, felly pam y We API Audio? Mae'r diagram hwn yn ychydig o esblygiad y ffordd gadarn ar y we wedi tyfu dros gyfnod o amser. Roedd Bgsound fel y tag HTML gwreiddiol a oedd yn arfer Internet Explorer i gefnogi. Dim ond yn caniatáu i seiniau 'n bert sylfaenol, nid oedd y functionality yn gadarn iawn, ac ni allai chi ei wneud dilyniannu cymhleth, neu reoli pan ddechreuodd gadarn a rhoi'r gorau gadarn iawn. Felly, nid oedd yn arbennig o datblygu'n dda. Yna ar ôl hynny, Flash Daeth along-- sydd, Rwy'n siŵr eich bod guys i gyd yn gyfarwydd gyda Flash-- efallai nad sut mae'n gweithio, ond yn sicr eich bod wedi ei weld. Mae'n rhaid i chi ddiweddaru eich Flash Plug-in, pob math hwnnw o bethau, ac mae hynny'n sicr yn ymestyn yr ystod o swyddogaethau a oedd ar gael. Ond gan wneud y defnyddiwr osod plug-in yn bendant yn anfantais i gynnwys Flash yn eich cais, dde? Gan fod yna rydych chi'n ddibynnol ar y defnyddiwr yn mynd a dod o hyd plug-in hon, ac yn ôl pob tebyg yn cael eu troi i ffwrdd gan y cam ychwanegol mae'n rhaid iddynt gymryd i ddefnyddio eich app. Ac yna gallai fod diweddariad bydd hynny'n torri eich cais cyfan, ac mae'n dod i ben i fyny fod yn hunllef i'r datblygwr, hefyd. Felly yr oedd yn barricade. Ac yna ar ôl a ddaeth ynghyd, y tag HTML sain, a oedd yn yn nodwedd o fwy HTML-- modern sy'n yn sicr yn caniatáu i lawer mwy o bethau, ond hyd yn oed y pethau y gallech eu gwneud nid oedd ychydig bach cyfyngedig yn unig o ganlyniad i'r pethau bod HTML yn gallu. Felly, pan fydd yr JavaScript API, y We API Sain, Daeth safon ymarfer ar draws porwyr, sydd wir yn ehangu y set o gyfleoedd i ddatblygwyr i wir yn mynd i mewn i'r adeilad pethau oeri am y we. Am gyfnod hir bu bod offer yn wirioneddol gadarn ar gyfer ceisiadau sain brodorol, like-- pawb yn gwybod GarageBand, ac yna yn amlwg mae mwy ceisiadau sain cymysgu proffesiynol, a bod y math o bethau. Ond nid oedd Cloud-- da iawn nid Cloud, ie, yr wyf yn dyfalu Llwyfan ar y we Cloud-- a fyddai'n caniatáu i ddatblygwyr adeiladu ceisiadau ar gyfer pobl i wneud cymysgu sain. Ac fel y bydd yn dangos i chi yn ddiweddarach, y We API Sain caniatáu ar gyfer 'n sylweddol pwerus pethau i ddigwydd mewn gwirionedd yn syml, sydd yn eithaf oer. Felly dyna y cyfarwyddyd i pam eich Dylai wylio gweddill y seminar, yn y bôn. Ac yn awr, yr wyf i'n mynd i siarad am rhai JavaScript-- elfennau sylfaenol yn unig yr iaith, fel bod gallwn fod ar yr un dudalen pan fyddwn yn sôn am y API ychydig yn ddiweddarach. Cool. Felly, mae hyn yn grynodeb. Wedi anghofio hyn yn fan hyn. Yeah. HUGH Zabriskie: Mae dwy sleid yma. SAM GWYRDD: yw hwn y crynodeb o rai o'r cyfyngiadau o'r hen ddulliau rhwymo eraill,. Ac yna yn awr, mae gennym y pethau hyn. Cool. Awesome. Felly, hanfodion JavaScript. Pethau cyntaf yn gyntaf, mae 'na gwahaniaeth eithaf sylweddol yn JavaScript erbyn mewn iaith fel C, yn y ffordd bod newidynnau yn cael eu creu. Felly, yn C, rydym yn arfer cael teipio ein newidynnau, dde? Ac nid wyf yn golygu y math tebyg teipio nhw i mewn, yr wyf yn golygu math fel aseinio ystyr type-- iddynt fel, yn int, fflôt, mae torgoch. Yn C, rydym yn cael eu defnyddio mewn gwirionedd i gorfod greu newidyn ac yna cadw at y math hwnnw ar gyfer y amser cyfan ein bod yn defnyddio y newidyn. Ac nid yw hynny o reidrwydd yn waeth, ond mae'n debyg anoddach i'w defnyddio. Un o nodweddion oer o JavaScript yw bod newidynnau yn yr hyn a elwir "Teipio yn ddeinamig," sy'n yn golygu fy mod yn gallu creu amrywiol gyda'r cystrawen, varX hafal 5, er enghraifft. Mae hynny'n creu yn wreiddiol yn gyfanrif variable-- i'r dde o dan y cwfl somewhere-- ond yr wyf yn yn gallu newid y newidyn i gyfeirio at llinyn heb wneud unrhyw beth fel gan greu newidyn newydd. Nid oes angen i mi boeni am y math newidiol. JavaScript yn gwybod bod y math o newid, ac mae hynny'n digwydd yn ddeinamig. Felly, mae manteision ac anfanteision i hynny, ag unrhyw un sydd wedi gweithio yn Gallai JavaScript am gyfnod gwybod. Mae yna adegau pan efallai y byddwch yn ddamweiniol newid y math o newidyn a Nid yw trin y math hwnnw sy'n newid, ac yna eich JavaScript Gall crash-- neu eithriad eu taflu, oherwydd bydd gennych y math anghywir pryd y disgwyliwch un math. Cool. Felly, scoping-- sydd fel, os ydym cofio'r wythnosau cynnar yn y cwrs, cyfeirio at ba mor weladwy newidyn yw ac ym mha ardal o'r cod. Mae hynny i gyd yn edrych yn debyg iawn i'r ffordd y mae'n edrych yn C. Felly newidynnau yn cael eu cwmpasu yn gyffredinol o fewn braces cyrliog fewn swyddogaeth, ac yna mae yna hefyd newidynnau yn fyd-eang-cwmpasu sy'n yw-- os byddwch yn ysgrifennu newidyn y tu allan i swyddogaeth, bydd yn weladwy yn y testun cyfan. Un gwahaniaeth rhwng JavaScript a C yn benodol, yw os byddwch yn datgan byd-eang yn unrhyw le amrywiol mewn ffeil testun mae'n weladwy mewn unrhyw swyddogaeth o fewn y ffeil testun. Mae hynny'n gywir, dde? HUGH Zabriskie: Yep. SAM GWYRDD: Felly dyna hefyd ychydig bit ffynci o'i gymharu â C, lle yr ydym bob amser wedi cael ein diffiniadau amrywiol uwchben y lleoedd cawsant eu defnyddio. Nid yw hyn yn rheol sy'n ei orfodi anymore, felly, ychydig yn wahanol. Ac eto dim ond i reemphasize, byd-eang yn erbyn variables-- lleol debyg iawn i C. Gallech gael dau newidyn gyda'r un enw, ac mae ganddynt un o'u henwau yn cael eu cysgodi gan newidyn lleol os yw un ohonynt Roedd byd-eang. Math Felly, yn debyg o problemau y rhai ohonoch Efallai fod wedi rhedeg i mewn i mewn rhai eich problem yn gosod hyd yn hyn. Cool, felly dyna newidynnau. Llif Rheoli, sy'n golygu fel, os-else-- stuff-- a dolenni rhesymegol. Felly, i ddechrau, mae hyn yn beth os-arall datganiadau yn edrych yn JavaScript. Mae'r lleoliad yr amrywiol bethau ar y llinellau nid yn bwysig. Mae hyn yn un yn unig o'r confensiynau am y ffordd yr ydym yn strwythur y cod. Yn union fel yn C, mae gennym Datganiad cromfachau "os,". Nid Dyna beth yr wyf yn fod i'w wneud. Gwnawn 'eto. HUGH Zabriskie: Ceisio ymadael? SAM GREEN: Na, rwy'n dim ond ceisio chwyddo i mewn. Nid yw o bwys. Felly, mae gennym "os" datganiad a mae gennym gyflwr tu mewn iddo sy'n gwerthuso i wir neu'n anwir, ac sy'n penderfynu a yw i ni gychwyn y bloc o god. Ac yn yr un modd, mae gennym arall-os, ac mae arall, yn union fel rydym yn ei defnyddio i mewn C. Dylech hefyd fod yn eithaf cyfforddus dde oddi ar y ystlumod gyda dolenni, oherwydd eu bod hefyd yn edrych llawer yn hoffi C yn edrych. Ond byddwch yn sylwi eto ein bod yn cael, yn lle int initializations, mae gennym initializations var. Ac yr wyf yn dyfalu bod gennych i fod yn ofalus i wneud siwr nad ydych yn newid y gwerth o I o int i'r llinyn, er enghraifft, oherwydd mae hynny'n mynd i achosi ymddygiad rhyfedd nad ydych efallai ei ddisgwyl. Ond dylai hyn edrych 'n bert cyfarwydd, yn ogystal. Felly dyma lle pethau'n dechrau cael ychydig yn wallgof yn JavaScript i rywun sy'n mynd o cefndir o C. Mae swyddogaethau yn JavaScript, a does un ffordd i ddatgan swyddogaeth sy'n edrych fath o debyg i C, a yna mae un arall sy'n yn edrych yn fath o yn wahanol. Mae'r fersiwn cyntaf, y gallwn weld yma, yn fath o C-fel, lle ydym yn ei ddweud, mae hyn yn un o swyddogaethau, rhoi enw, rhowch mae nifer o ddadleuon, ac yna cynnwys y swyddogaeth fynd y tu mewn bresys cyrliog hynny. Byddwn yn gweld enghraifft o dadleuon mewn dim ond eiliad. Tra ar y llinell nesaf, rydym yn gweld, o, dyma newidyn enw "myFunction," ac yr ydym yn gyfartal i'r hyn function-- thing-- generig sy'n nid yw'n ymddangos i gael unrhyw beth yn digwydd. Y rheswm mae hynny'n wahanol na C yw bod Javascript yn hyn a elwir yn iaith swyddogaethol, neu os oes ganddo elfennau swyddogaethol, sy'n golygu bod swyddogaethau'n gwerthoedd mewn gwirionedd. Ac mae hynny'n golygu y gallwn osod newidyn i cyfartal swyddogaeth ac yna symud y swyddogaeth honno o gwmpas, ei drosglwyddo fel dadl, wneud pob math o bethau fel 'na gyda swyddogaethau. Un peth arall i note-- swyddogaethau yn cael eu hysgrifennu gyda nifer penodol o ddadleuon. Byddwn yn gweld enghraifft o swyddogaeth gyda dadl ar y sleid nesaf. Ond ni fydd JavaScript gweiddi ar chi os ydych yn ceisio i ddefnyddio swyddogaeth gyda'r Nifer anghywir o ddadleuon. Fe 'i jyst yn gwneud ei orau i wneud gwneud, sy'n golygu os byddwch yn pasio, byddwch yn ffonio swyddogaeth sy'n disgwyl i ddadl heb unrhyw ddadl, y cyfan y a fydd yn digwydd yw y bydd yn gwneud ei orau i geisio gweithredu y cod, ac os bydd yn y pen draw yn rhedeg i mewn i eithriad neu gamgymeriad, bydd yn taflu bod eithriad a dim ond cadw going-- sydd yn un o'r ffyrdd bod JavaScript yn gweithio. Yeah. GYNULLEIDFA: Beth sy'n digwydd os mae gormod o ddadleuon? SAM GWYRDD: Felly y cwestiwn oedd, beth sy'n digwydd os mae gormod o ddadleuon? A'r ateb yw bod Bydd JavaScript unig anwybyddwch y rhai sy'n cael eu ar ôl y rhai mae'n eu disgwyl. Bydd yn ceisio gyflawni'r swyddogaeth alw fel pe ei fod yn unig y ddau gyntaf. Iawn? HUGH Zabriskie: Mae hynny'n iawn, yeah. Yn yr un modd, os oes oes digon o ddadleuon, 'i jyst fath o yn rhoi null i'r holl dadleuon nid oes ganddo unrhyw werthoedd am. SAM GWYRDD: Pa all mewn gwirionedd fod yn ddefnyddiol, os ydych yn am ysgrifennu swyddogaeth sy'n yn cymryd dadleuon nifer amrywiol. Gallwch osod gwerthoedd diofyn yn y diffiniad o swyddogaeth, a gall anwybyddu'r ffaith nad oedd y mewnbwn yno. Felly, yr wyf am siarad ychydig bach mwy am hyn bwled olaf bwynt, sef swyddogaethau yn werthoedd. Mae hyn yn enghraifft sy'n ychydig bach meddwl chwiban os ydych yn unig yn ei ddarllen, ac nid ydynt yn meddwl am yr hyn sy'n mynd ymlaen am eiliad. Felly, gadewch i ni edrych yn unig ar y llinell gyntaf yma. Rydym wedi newidyn hwn, f1, ein bod yn ei ddweud yn swyddogaeth sy'n gwneud y peth hyn. A chynnwys y swyddogaeth yn console.log ('helo'). Gallwch chi feddwl am console.log fel y JavaScript cyfateb i printf. Felly, beth fydd yn digwydd yw, os ydym rhedeg y cod hwn yn ein porwr, bydd yn argraffu llinyn. Gallaf ddangos fod. GYNULLEIDFA: Drwy log, fodd bynnag, yn gwneud hynny yn golygu ei fod yn cael ei gofnodi yn rhywle? SAM GWYRDD: Yeah. Felly, byddaf yn dangos i chi beth sy'n mynd i ddigwydd. Felly, y cwestiwn oedd, beth mae log yn ei olygu? HUGH Zabriskie: Felly console.log Mae fel printf i C. SAM GWYRDD: Felly console.log Mae fel printf, felly os oes gen i console.log hwn ('helo'), a galwaf bod, y llinyn "helo" yn cael ei hargraffu allan at y consol. Mae hyn yn y consol. Mae'n union fel printf, lle mae'n argraffu i allan safonol. A byddwn yn gweld mewn munud, ond mae hyn yn mewn gwirionedd gan gyfeirio at y gwrthrych consol, ac yn galw dull ar y gwrthrych. Bydd hynny'n gwneud mwy o synnwyr mewn munud pan fyddwn cyrraedd siarad am gwrthrychau yn JavaScript, ond yr wyf yn meddwl y byddwn i'n jyst yn sôn am hynny. HUGH Zabriskie: Rydym yn arfer yn C, right-- Fel arfer, byddwn yn ysgrifennu rhaglen fawr yn y prif i wneud unrhyw beth. Ond yr hyn sy'n oer yn JavaScript yw eich cael y math hwn o cyfieithydd y yn rhedeg mewn amser real, felly mae'n cymryd ychydig fesul llinell, Gall 'i jyst yn dehongli bod y fan a'r lle. Ac mae'n cadw golwg ar pethau sydd wedi rhedeg o'r blaen, felly mae'n arf eithaf defnyddiol i defnyddio console.log, neu y consol, yn gyffredinol, am ddim ond chwarae o gwmpas gyda JavaScript. SAM GWYRDD: Felly mynd yn ôl at hyn example-- yr ail linell o god dyma ydy 'n bert meddwl-boggling yn fy mhen. Y tro cyntaf i mi ddarllen hwn, yr oedd yn hoffi, beth sy'n mynd ymlaen? Felly, yr hyn sy'n digwydd yw, mae hyn yn Datganiad swyddogaeth yn dweud, Mae gen i swyddogaeth o'r enw f2 sy'n disgwyl un ddadl, f, ac yna mae'n galw bod swyddogaeth, f, a oedd yn pasiwyd iddo fel dadl heb unrhyw ddadleuon ei hun. Felly, a allai fod wedi bod yn ddryslyd. Os ydym yn deall hyn fel f2 yn cymryd f1 fel dadl, ac yna y tu mewn o F2, f yn cael called-- pa fodd bod y llinell hon o god, ar ôl y ddwy linell o cod, yn arwain at "helo" cael eu hargraffu ar y consol. Mae'r ffaith ein bod yn gallu pasio swyddogaethau o gwmpas fel gwerthoedd yn dod i ben i fyny yn un o'r rhai mwyaf nodweddion pwerus o JavaScript fel iaith raglennu. Y tu allan bob un o'r pethau anhygoel y gall ei wneud, yn union fel nodwedd o iaith o ran y ffordd ei fod yn gwneud pethau'n hawdd i raglennu ac yn caniatáu am bethau nad ydynt yn arbennig o addas at y we, rhaglennu swyddogaethol a swyddogaethol agweddau rhaglennu ar JavaScript yn un o'r rhai mwyaf cysyniadau pwerus sy'n yn bodoli yn JavaScript-- os byddwch yn gofyn i mi. Cool. Felly, beth nesaf. Yn ogystal â bod yn ymarferol, mae yna hefyd elfennau o JavaScript sy'n cael eu gwrthrych-oriented, sydd yn un o'r iawn wefr geiriau poblogaidd mewn gwyddoniaeth gyfrifiadurol. Rhaglennu gwrthrych-oriented yn beth wirioneddol boblogaidd. Mae JavaScript fersiwn o hynny, lle yr wyf yn credu pob gwerth yn hefyd gwrthrych, sy'n golygu bod pob gwrthrych lapio ynghyd rai nifer o werthoedd. Felly, ar gyfer gwerthoedd sy'n syml, fel yn gyfanrif, fel varX hafal 5, y gwrthrych yn unig lapio bod un gwerth. Ond gallwn hefyd ddychmygu sefyllfa where-- gallwn feddwl am sefyllfaoedd yn C lle rydym am ei wneud rhywbeth gyda structs, er enghraifft, y nifer o wraps Gwerthoedd at ei gilydd ac yn gwneud mae'n hawdd iawn i basio pethau o gwmpas. Dyna pryd gwrthrych yn JavaScript. Mae'n bwysig cofio wrth ddweud bod gwrthrychau lapio rhyw nifer o werthoedd gyda'i gilydd, bod swyddogaethau hefyd gwerthoedd, sy'n golygu y gall swyddogaethau hefyd fod tu mewn gwrthrych JavaScript. A'r rheswm sy'n bwysig yw bod, ond yr ydym ni yn aml meddwl am alw dull ar wrthrych sy'n o derm poblogaidd o eraill ieithoedd gwrthrych-oriented boblogaidd, un o'r gwahaniaethau yma yw bod i gyd bod dull yn JavaScript mae gwerth storio y tu mewn gwrthrych sy'n perfformio rhywfaint action-- o bosib gan ddefnyddio'r gwerthoedd eraill sydd y tu mewn o hynny gwrthrych, ond nid o reidrwydd. Felly, gallwch ddychmygu sefyllfa, yr wyf yn dyfalu mewn ychydig o ffordd crazy, lle rydych yn a elwir yn ddull o un gwrthwynebu ar wrthrych arall, er enghraifft. Felly, mae'n ychydig yn ffynci yn y modd hwnnw. A gallwch hefyd newid y dulliau sy'n gysylltiedig â gwrthrych drwy neilltuo dull y byddai swyddogaeth newydd, sydd hefyd 'n bert wahanol i eraill ieithoedd gwrthrych-oriented, lle ar ôl i ni yn datgan gwrthrych ac enghreifftio ef, Ni allwn newid y dulliau sy'n gysylltiedig â'r gwrthrych anymore. Felly dyna 'n bert wahanol. Cool. Felly dyma enghraifft, yn gyntaf, o wrthrych ar waith. Mae hyn yn yr hyn a elwir gwrthrych generig, a oedd yn yn golygu nad oes ganddo unrhyw enw penodol, nid oes gan y dosbarth, 'i' dim ond rhai lapio o werthoedd. A'r ffordd sy'n edrych yn, mae gennym y pâr allanol cyrliog bresys yma sy'n dangos i JavaScript a dweud, mae hyn yn wrthrych. Mae'r gwerthoedd tu mewn iddo yn mhob gwerthoedd y tu mewn y gwrthrych y dylai ei lapio gyda'i gilydd. Ac tu mewn y gwrthrych, yna mae gennym barau gwerth allweddol, lle yr allwedd yn cyfeirio at yr enw o werth y tu mewn y gwrthrych, ac mae'r side-- arall gyferbyn â'r Yma-- colon yw gwerth gwirioneddol y dylid eu cadw. Felly, byddwch yn gweld yma bod gennym allweddol a elwir yn fn â gwerth sam, ddilyn gan atalnod, gan ddweud ar y cofnod nesaf. Yna allwedd o'r enw ln, gyda gwerth o wyrdd, ddilyn gan atalnod, wedi'i ddilyn gan "print," sydd yn mynd i gael gwerth swyddogaeth sy'n mynd i wneud y llinell hon o god. Gadewch i ni gymryd cam yn ôl a ddadbacio beth sy'n digwydd fan hyn. Felly mae hyn yn ychydig yn gymhleth, ac rydym yn gweld rhywbeth newydd am y tro cyntaf. Mae'r "hyn yn" gair allweddol yw'r peth newydd rydym yn gweld yma, a beth mae hyn yn ei wneud yw, yn cyfeirio at y presennol yn gwrthwynebu o ran cwmpas, dde? Felly, pan fyddwn yn dweud, mae hyn yn pwyntiau holl ffordd yn ôl i'r hwn object-- cyfan pan ydym yn ei wneud this.fn, rydyn ni'n mynd i fynd yr holl ffordd yn ôl i'r amcan hwn, ewch at werth fn a chael sam, dynnu yr holl ffordd yn ôl, ffon yma, ac yna symud ymlaen. GYNULLEIDFA: Felly, gyda adalw, yn hynny ei wneud oherwydd y paramedr diffiniad? SAM GWYRDD: Felly, y cwestiwn oedd, yw'r adfer a wneir oherwydd y paramedr diffiniad? Yeah, yn hollol. Beth sy'n mynd i ddigwydd yma yw, dot hon yn dweud i'r JavaScript, OK, Im 'yn cael rhywfaint o werth o'r gwrthrych hwn oddi fy hun. Ac yna bydd yn chwilio am gofnod Gelwir fn, ac os bydd yn ei chael yn, bydd yn dychwelyd y value-- felly, mae'n sam. Ond gallai Rwyf hefyd wedi teipio rhywbeth nad oedd ddiffinnir yma, ac yna fyddai dim ond dychwelyd undefined-- sy'n yn beth y gall JavaScript yn ei wneud, a all gael budd-daliadau, ond mae'n also-- os byddwch yn gwneud typo, gall arwain at gamgymeriadau 'n annaearol. Felly, bydd yn jyst ceisio dod o hyd beth bynnag yr ydych yn dweud iddo i ddod o hyd ac nid yw'n mynd i gwyno os nad yw'n ei chael yn. Bydd yn dim ond dweud, doeddwn i ddim yn ei chael yn, ac yna symud ymlaen. Felly byddai'n cael ei heb eu diffinio, yn ogystal wag, yn ogystal enw olaf. Yeah. Ac yna gallwn weld bod os ydym yna gallai fynd i lawr ac access-- ac rydym yn galw tf.print () gyda cromfachau. Mae'n mynd i alw y print swyddogaeth heb unrhyw ddadleuon, dde? Ond os ydym newydd ei ddweud tf.print () hanner colon, heb y cromfachau, i gyd y byddai wedi'i wneud yw tynnu swyddogaeth o werth, ond nid ei alw mewn gwirionedd. Cool. HUGH Zabriskie: A ddylai rydym yn gwneud gwrthrych? SAM GREEN: Cadarn, gadewch i ni wneud hynny. Felly yr wyf yn gallu symud hyn esiampl i'r consol. Gallwn ddychmygu bod gennyf gwrthrych. Felly, mae hwn yn wrthrych syml. Mae hwn yn wrthrych sy'n cynnwys dau Gwerthoedd gyda dau allweddi, dau gwerth allweddol parau. Felly, gallaf wedyn gael mynediad at y gwerth ei storio tu mewn gwrthrych hwn drwy wneud x.x1, er enghraifft, ac yr wyf yn cael 1 yn ôl. Yn yr un modd, x.x2, cael y gwerth yn ôl. Ac yn awr y peth 'n sylweddol oera yw, gallaf mewn gwirionedd yn ychwanegu rhywbeth at y gwrthrych ar ôl i mi ei greu. Felly, gallwch ddychmygu, gadewch i ni dweud gen i swyddogaeth. HUGH Zabriskie: Chi rhaid iddynt ei wneud Shift-Enter. SAM GREEN: O, dyna blino. Yr hyn nad oedd yn ei hoffi? Oh. Yma rydym yn mynd. Cool. Felly dwi newydd ei greu swyddogaeth hon, f, sy'n yn mynd i fynd i'r presennol gwrthrych ac argraffu this.x1. Felly, os Fi jyst yn galw f gan ei hun, nid oes dim sy'n mynd i ddigwydd, ar y dde, gan nad oes x1 maes yn y gwrthrych mae'n cyfeirio at. Ond, os wyf yn dweud, x.f = f, ac yna yr wyf yn ffoniwch x.f (), yr wyf i'n mynd i fynd yn ôl 1. Dyna ffwythiant f yn awr sy'n gysylltiedig â'r gwrthrych x, sydd â x1 allwedd o'r enw sy'n gysylltiedig â'r gwerth 1, felly pan fyddwn yn galw this.x1, 'i' yn mynd i ddod o hyd i beth mae'n chwilio amdano ac yn gallu argraffu gwerth allan. Felly dyna un enghraifft yn unig o'r math o'r pethau gwallgof gallwch ei wneud gyda gwrthrychau yn JavaScript. Felly dyna fersiwn oedd y Fersiwn generig, ystyr ein bod wedi creu gwrthrych yn arfer hon cromfachau nodiant Brace notation--, rather-- a dyna 'n hylaw os ydym yn unig eisiau un enghraifft o gwrthrych penodol, ond beth os ydym am gael mwy nag un o'r un fath? Ac yr ateb i hynny cwestiwn yw, mae yna bethau Gelwir dosbarthiadau yn JavaScript hefyd. Gallwn greu swyddogaeth sy'n yn gwneud rhyw fath o initialization ar gyfer gwrthrych estron, a byddem yn dweud, fel, fy class-- felly mae'r enw o'r object-- y gellir eu hailddefnyddio yn hafal i swyddogaeth sy'n gosod i fyny. Felly beth byddai hyn yn gyfwerth i yn creu gwrthrych sy'n fyddai yn union fel, Brace cyrliog, str, colon, mae hyn yn llinyn, hanner colon, Brace cyrliog. Dyna fyddai'r generig gwrthrych rydym ymgychwyn, gyda'r un gwahaniaeth fod ar y llinellau nesaf rydym yn creu prototeip, a oedd yn yn golygu ei fod yn allwedd diofyn sy'n rydym yn ychwanegu at ein gwrthrych sy'n Mae gwerth rhestru yma. Ystyr hynny, pan fyddaf yn creu newydd enghraifft o hyn gwrthrych MyClass, mae'n mynd i wedi rhag-adeiladu tu mewn ei fod yn werth enw str a gwerth arall Gelwir myPrint, sef mynd i fod yn swyddogaeth. Awesome. Great. Felly, y peth olaf i ddweud am JavaScript yw ei fod yn ddefnyddiol iawn ar gyfer yr hyn yn cael eu galw'n gweithrediadau asynchronous. Fodd Asynchronous yw ein bod yn Gall aros am rai llawdriniaeth i'w gwblhau cyn i ni symud ar, ond yn symud ymlaen wrth i ni aros ac yna rywbeth yn digwydd yn nes ymlaen. A hyn yr wyf yn ei olygu wrth hynny yw, eich Gall ddychmygu sefyllfa lle byddwch yn anfon cais i rhywfaint gweinydd gwe yn rhywle, ac mae'n mynd i anfon yn ôl i chi rhyw darn mawr o ddata, dde? A gallai eich defnyddiwr yn aros yn y cyfamser er mwyn i hynny ddigwydd, ac ni allai dim fod yn mynd ymlaen ar y pryd. Ond nid yw hynny'n dyluniad gwych, dde? Nid ydych am y dudalen gwefan hon i rewi. Beth os bydd y defnyddiwr eisiau cliciwch ar cwymplen? Dyw hi ddim yn batrwm dylunio gwych. Yn lle hynny, yn y bôn yr hyn JavaScript yn ei ddweud, OK, yn gwneud y llawdriniaeth hon asynchronously. Felly debyg, aros yn y cefndir, ac yna pan fydd y llawdriniaeth yn cael ei wneud, ffoniwch y galw'n ôl function-- ffoniwch rhywfaint o swyddogaeth, mae rhai action-- i ddangos bod y llawdriniaeth rydym yn aros am i roi diwedd wedi dod i ben. A'r rheswm dyna super pwerus yw, y gallwn wneud rhywbeth, pasio dadl, gwneud rhywbeth, ac yna aros am i rywbeth ddigwydd. Yna, unwaith bod rhywbeth yn cwblhau, gallwn alw am alwad yn ôl. Mae hynny'n wir gyfleus oherwydd ei fod yn gadael ohonom yn gwneud pethau gyda Web API Sain, er enghraifft, fel llwyth ffeil sain o weinydd pell heb orfod aros am y ffeil sain cyfan i gael eu llwytho, a fyddai'n fod yn wirioneddol ddrwg i brofiad y defnyddiwr. Cool. Ddwy ddiwethaf nodiadau am debugging, gan fod hyn yn beth rydych yn mynd i gael i wneud fel rhan o'ch prosiect, gwarantu. Soniais am y consol JavaScript. Mae'n nodwedd ddefnyddiol super yr holl borwyr modern, Ac rydym yn eich annog i gael gyfforddus gan ddefnyddio eich consol, os ydych chi am gael dda yn JavaScript. Mae'n super ddefnyddiol ar gyfer debugging, ond mae hefyd ddefnyddiol iawn ar gyfer figuring gwybod sut i ddefnyddio API. Mae'n caniatáu ar gyfer 'n sylweddol arbrofi hawdd heb orfod teipio rhai cod, ac yna llunio ei. Nid oes rhaid i chi wneud yr holl gamau hynny. Alli jyst ysgrifennu rhyw cod mewn llinell, ac yna yn cael adborth ar unwaith ar a yw'r llinell o god neu beidio worked-- handi iawn. A hefyd, dim ond un note-- technegol y consol JavaScript yn enghraifft o REPL-- felly dyna R-E-P-L, REPL, sy'n sefyll am ddarllen, gwerthuso, dolen print. Rydych yn mynd i deipio rhai pethau i mewn, bydd yn darllen yr hyn yr ydych ei deipio i mewn, bydd yn gwerthuso, ac bydd yn argraffu'r allbwn, ac yna bydd yn dechrau eto. Sy'n eich galluogi i fynd yn gyflym mewn cylchoedd ailadrodd, sydd yn 'n sylweddol oera. Amcana real diwethaf note-- hwn yw'r nodyn olaf gwirioneddol, ie. Sut rydym yn ei ddefnyddio JavaScript? Felly gyntaf, gallwn fewnforio gan ddefnyddio tag sgript ar frig neu waelod o HTML file-- yn unrhyw le y tu mewn o ffeil HTML, mewn gwirionedd. Ac o fewn tag sgript, mae yna dau is-ffyrdd o fewnforio JavaScript. Y cyntaf yw drwy gael ffeil JavaScript ar wahân ein bod yn mewnforio yn ei chyfanrwydd, neu drwy gael ardal o cod fel sgript i ddechrau, ac yna sgript slaes i ben. Ac yna rydym yn unig yn ysgrifennu JavaScript y tu mewn i'r ffeil HTML. Dyna'r ddwy ffordd. Ni allwch gael y tu mewn o HTML. GYNULLEIDFA: A yw un yn well na'r llall? SAM GWYRDD: Y cwestiwn oedd, yn un well na'r llall. Felly, ie, fel arfer arddull codio, a hefyd mae fel arfer dylunio. Mae dau reswm pam y gallai fod yn well. Y cyntaf yw, mae'n gwneud eich cod yn llawer mwy darllenadwy os yw eich holl HTML yw mewn un lle, pob un o'ch CSS yw mewn man arall, pob un o'ch JavaScript mewn trydydd safle. Iawn? Rwy'n meddwl y dylen ni eisoes wedi siarad am y peth yn sections-- tebyg CSS-- beth hynny yw-- ac mae'n mynd yn aml mewn ffeil arall. Felly, math tebyg o gysyniad yma. Gallwch hefyd ddychmygu bod Javascript Byddai eu hailddefnyddio ar fwy nag un Dudalen HTML, neu efallai mae llawer o dudalennau HTML mawr, a chael bod Javascript refactored i mewn i un ffeil y gallwch fewnforio i fwy nag un lle caniatáu i'r cod fod yn ffordd fwy gynhelir. Gallwch ddychmygu gwneud un newid i'r JavaScript a gorfod newid mewn 100 ffeil gwahanol. Ac yn lle y gallwn ni yn unig ei newid mewn un, sydd yn ffordd fwy grymus. Wnes i ateb eich cwestiwn? Cool. Gallwn hefyd deipio i mewn i'r consol, fel yr ydym wedi crybwyll o'r blaen. Ac eto, un note-- diwethaf Gwe Audio ei adeiladu i mewn, Nid oes angen i chi lwytho unrhyw beth. Cool. A oes unrhyw gwestiynau, a oes gennych mwy o gwestiynau am JavaScript, cyn i ni symud ymlaen? GYNULLEIDFA: [Anghlywadwy] SAM GWYRDD: pob hawl, oer. Felly nawr mae'n mynd i siarad am y API. HUGH Zabriskie: Cool. Diolch, Sam. SAM GWYRDD: Cadarn. HUGH Zabriskie: Awesome, felly byddwn yn symud ymlaen o JavaScript. Felly, rydym wedi siarad am rai o hanfodion JavaScript, a'r rheini yw'r newidynnau, swyddogaethau, gwrthrychau, swyddogaethau fel newidynnau, llwytho asynchronous. Mae'r rhain i gyd yn bethau yr ydych yn chi helpu gweld wrth i chi ddefnyddio'r We Sain. Felly rydym yn jyst yn mynd i siarad am y peth yn gyntaf ar lefel uchel. Mae'n API, felly mae'n rhywbeth sy'n eu hadeiladu, fel y dywedodd Sam, i'r dde i mewn i'r JavaScript eich bod yn ei ddefnyddio yn y consol. Ac mae'n mewn gwirionedd yn union fel C ++ cod sy'n cael ei hadeiladu mewn gwirionedd i mewn Chrome a Firefox, a phob un o'r porwyr hyn. Felly, y prif syniad gyda Gwe Audio yw bod gennych y math hwn o bibell o sain, dde? Felly eich data sain dod i mewn ar ryw ffurf. Mae math o dri phrif forms-- mae gennych yr osgiliadur, a oedd yn yn creu ton sin, cosin ton, rydym yn mynd i weld sut mae hynny'n gweithio. Un arall gyffredin iawn, wrth gwrs, yn MP3. Felly efallai y byddwch yn dechrau gyda cân, ac yna rydych am wneud rhywfaint o hidlo i hynny ac allbwn that-- a allai fod yn ffynhonnell bosibl. Ac yna mae 'n sylweddol oera mae un yn y meicroffon. Felly, gallwch ddefnyddio rhai iawn galwadau sylfaenol yn JavaScript i gael mynediad at y meicroffon, ac felly os ydych yn awyddus i wneud app fel synhwyrydd cae, er enghraifft, sy'n cymryd yn eich llais a ffigurau allan y pitch-- ffordd hawdd iawn i hynny. Alli jyst fath o ddarllen i mewn, ffigwr allan yr amlder, ac yna allbwn rhif. Felly, byddwn yn gweld sut mae hynny'n gweithio, yn ogystal. Mae'r cyrchfan yn y bôn lle bo'r data sain yn allbwn. Felly ar y cyfan, dyna fel eich siaradwyr laptop. Opsiynau eraill yn debyg a ScriptProcessorNode-- byddwn yn mynd i nodau mewn second-- ond yn y bôn, naill ai eich bod yn rhoi sain allan drwy eich cyfrifiadur drwy seinyddion, neu os ydych yn fath o gofnodi, felly eich bod yn storio fel data sain. Felly efallai os bydd rhywun yn creu cerddoriaeth yn eich app ac yna ydych am gofnodi bod ac efallai yn hoffi allforio i Soundcloud, er example-- byddai hynny'n un ffordd o wneud hynny. Mae'r holl stwff hwyliog, y byddwn yn siarad am, sy'n digwydd rhwng y ddau bwynt, lle rydym yn llwytho yn y gerddoriaeth ac yna allbwn iddo. Felly dw i'n mynd i siarad am y pum cam o'r broses gynhyrchu sain mewn eiliad. Mae gennym y peth hyn a elwir yn mae AudioContext, a oedd yn oes fawr hon deunydd lapio a welwn yma. Yn y bôn yr hyn AudioContext yw-- os ydym mynd i'r JavaScript chysura ar hyn o bryd, gallwn greu un ar hyn o bryd. Dim ond enghraifft o REPL, dde? Rydym yn darllen, gwerthuso, ac mae'n printiau. AudioContext yn gyflwr fyd-eang. Mae wedi bod yn struct, mae'n gwrthrych yma, ac mae'n cadw gwybodaeth am bethau sy'n mynd ymlaen ar y sgrin yn ymwneud â sain. Un enghraifft yw hyn o bryd. Mae hyn yn dweud wrthych y rhif o eiliadau, fanwl iawn, ers i'r dudalen gwe llwytho. Felly, mae hwn yn ddefnyddiol iawn ychydig iawn o eiddo y gallwch eu defnyddio. Mae wedi darllen only-- wyf yn meddwl mewn gwirionedd gallwch geisio gosod gwerth. Bydd yn rhoi gwybod i chi osod, ac yna os ydych yn ei hargraffu again-- nid oedd mewn gwirionedd yn eithaf gwaith. Felly mae eu darllen yn unig eiddo yn JavaScript. Mae hyn yn ddefnyddiol iawn os eich bod yn fath o syncing llawer o wahanol gwybodaeth, pan fyddwch yn math o chwarae gwahanol synau. Un 'n sylweddol defnyddiol arall yw'r gyrchfan cyd-destun. Yn bendant, os oes gennych ddiddordeb, yn rhoi cynnig hwn ar eich hawl consol hun yn awr. Felly mae hwn yn AudioDestinationNode. Yn y bôn beth mae hyn yn ei ddweud yw, lle mae allbwn yn mynd? Felly mae yna ddau ddewis go iawn yma. Fel arfer 'r ball yn unig yw eich siaradwyr, felly AudioDestinationNode y bôn yn unig yn dweud mae sero allbynnau i sŵn yn dod i mewn, a anfonwyd at y siaradwr. Felly ar y cyfan, nid ydych yn ei wneud rhaid i chwarae gyda hynny. Os oes gennych ddiddordeb mewn gwirionedd yn defnyddio y ScriptProcessorNode ar gyfer cofnodi, bendant saethu mi e-bost yn ddiweddarach oherwydd dyna ychydig yn fwy cymhleth. Ond yn gyffredinol, rydych yn unig fath o outputting sain ar ryw ffurf. Felly oer, byddwn yn neidio yn ôl yma. GYNULLEIDFA: Mae'n ddrwg gen i. HUGH Zabriskie: Yeah. GYNULLEIDFA: Yr wyf yn gwybod eich bod dweud i siarad i chi yn nes ymlaen am gofnodi. A allwch rhyngwyneb hynny gyda Pro Tools? HUGH Zabriskie: Gyda Pro Tools? Gawn ni weld. Nid wyf yn credu hynny. Felly mynd rhwng y cleient, sef y JavaScript consol, ac yn eich gwirioneddol cyfrifiadur, yn gyffredinol rhywbeth sy'n garedig o oddi ar derfynau, os ydych yn fydd, caredig gan natur the-- mae'n fath o beth dylunio, ond eich bod yn ceisio cadw'r porwr ar wahân o gyfrifiadur gwirioneddol y defnyddiwr. Yn gyffredinol, yr unig beth rydych chi'n gallu mae mynediad yn y meicroffon neu'r camera. Nid ydych yn gallu, yr wyf yn peidiwch â meddwl, defnyddiwch Pro Tools. Fodd bynnag, os ydych yn ei greu trac yn Pro Tools, hallforio hynny, gallech lwytho hynny mewn yma, hidlo, er enghraifft, y broses honno, a chofnodi hynny i mewn i Sain Destination-- neu, no-- a Bywyd Nôd Prosesydd. Ac yna oddi yno, gallech allforio hynny i Soundcloud, chi Gallai ei anfon mewn e-bost, neu beth bynnag yr ydych yn hoffi oddi yno. Ond mae yna fath o ychydig o rwystr rhwng creu cerddoriaeth ar eich cyfrifiadur ac yn gwneud cerddoriaeth ar-lein. SAM GWYRDD: A dyna Nid unigryw i'r API hwn. Mae'n nodwedd diogelwch Chrome, a Rwy'n credu pob porwr modern eraill. Mae'r porwr yn hunangynhwysol. Felly, er enghraifft, ni all tudalen we defnyddio JavaScript i droi'r sain ar ar eich siaradwyr, er enghraifft. Neu ni all droi eich cyfrifiadur i ffwrdd. Ac nid oes pwynt canolradd rhwng y ddau beth, ar y dde, hynny naill ai gennych chi tynnu gyflawn, neu os ydych yn agor y nam diogelwch o adael yn rhaglennydd gyda bwriadau drwg yn ei wneud beth bynnag y maent ei eisiau gyda eich gliniadur. A dyna pam Chrome yn hunangynhwysol. HUGH Zabriskie: Yeah. A yw hynny'n gwneud synnwyr? Cool, oer. Yr oeddwn yn jyst yn mynd i yn dangos enghraifft o un. Mae hyn yn 'n bert lawer fel belled ag y byddwch yn ei gael, o ran o gael gafael ar gyfrifiadur y defnyddiwr. Os oes gennych bysellfwrdd USB blygio i mewn, gallwch ddefnyddio rhywbeth o'r enw y We MIDI API, nad ydym fydd wir yn siarad am fan hyn, ond mae hyn yn API arall sy'n adeiladu i mewn o leiaf Chrome-- eto, dyma pam ein bod yn caru Chrome-- Yr wyf yn meddwl Firefox neu Safari, mae hyn yn beth hawdd i'w gwahanol borwyr google-- cael cefnogaeth gwahanol y mae APIs maent wedi gweithredu. Ond os ydych yn dymuno i blygio mewn bysellfwrdd a gweithio gyda wybodaeth honno, math o anfon y bysellfwrdd gwybodaeth draw at y cyfrifiadur ac yna defnyddio hynny ar-lein, API hwn lle byddech yn gweithio ar hynny. Cool. IAWN. Felly, gan symud yn gyflym ar yma. Sut ydym ni'n gwneud yn brydlon? SIARADWR 1: Amdanom 15. HUGH Zabriskie: 15 munud ar ôl? OK, oer. Felly byddwn yn rasio ar y blaen yma. Felly y bôn, y prif bwynt meddwl am hyn fel biblinell yw bod pob cam ar y gweill yn gyfres o nodau sain. Mae ein ffynhonnell, gadewch i ni ddweud, yn osgiliadur. Mae angen i ni greu nod osgiliadur. A dyna yn unig fath o'r function-- bach ac maen nhw i gyd yn seiliedig allan o'r cyd-destun sain yma. GYNULLEIDFA: Pan ddywedodd osgiliadur, mae hynny'n ei olygu 'i' mewn gwirionedd yn llythrennol yn mynd o ddau begwn gwahanol yn ôl ac ymlaen? HUGH Zabriskie: Na, mae fel cynrychiolaeth ddigidol. Mae wedi rhoi ar waith mewn gwirionedd yn C ++. Fi 'n weithredol ddim yn gwybod y specs o sut y mae'n cael ei roi ar waith mewn gwirionedd, ond mae hyn i gyd yn gweithio fel data deuaidd. A dweud y gwir, yeah. Byddai hynny'n cael ei ddweud, y gallwn mewn gwirionedd, os oes gennych ddiddordeb, Gallwn anfon ychydig yn fwy i chi gwybodaeth am sut y tonffurfiau yn cael eu cadw cael fformat digidol. OK, oer. Felly rydym yn cynhyrchu tôn fel sine tonnau neu rywbeth fel 'na, efallai 440 Hertz. Rydym yn creu osgiliadur. Os ydym am osod y gyfrol, rydym yn cysylltu unrhyw beth i GainNode, y gallem ei wneud gyda .creategain. Sy'n gosod eich cyfaint. Gallwch drosglwyddo hynny ar unrhyw y llall options-- dda, felly ffynhonnell byffer sain nôd yn lle rydych efallai storio MP3 yr ydych wedi llwytho i mewn. Biquad hidlo ar gyfer hidlo os ydych chi am gymryd yr holl y sylfaen allan o gân, neu rywbeth fel 'na. Duw yn gwahardd ydych am gymryd y sylfaen allan o gân. A nod AudioDestination yw, unwaith eto, fel lle mae ein gwblhau yn. Os oes gennych ddiddordeb mewn gweld erioed yr holl opsiynau gwahanol posibl, dim ond yn mynd i'r tab a gadael y auto-gwblhau yn dod i fyny. Ac os ydych yn creu, byddwch yn gweld yr holl gwahanol bethau y gallwch greu. Gallwch greu deinamig proseswyr sgript, Dydw i ddim hyd yn oed yn gwybod beth sy'n yw, ar gyfer cymysgu uno sianel a holltwyr sianel a hynny i gyd. Cool. Felly, mae hyn yn unig yw enghraifft o biblinell. Felly mae gennym dair ffynhonnell yn dod i mewn. Efallai y rhain yn tonffurfiau, efallai y rhain yn MP3s. Mae un yn mynd trwy hidlo, y naill a'r llall cael gwyrgam arall un yn panio chwith ac i'r dde. Gallwch wneud pob math o bethau a maent i gyd yn cael eu cymysgu gyda'i gilydd o amgylch, ac yna allan daw'r sain ar y diwedd, fel cyrchfan. Mae hyn yn enghraifft o'r hyn y mwy Web cod Audio cymhleth edrych fel. Rydych yn creu rhain i gyd gwahanol wrthrychau iawn Yma-- Dwi ddim yn siŵr o hyn. Na, nid yw'n chwyddo i mewn. IAWN. SAM GWYRDD: Rydych yn gwneud Reoli, Sgroliwch-Up. HUGH Zabriskie: Rheoli Scroll-- SAM GREEN: Na, na. Control-- HUGH Zabriskie: O, Rheolaeth, Sgroliwch? Oh, gotcha. Yeah. Wow, Na, Na. IAWN. Ni fyddaf yn gwneud hynny. Felly ie, yn hyn yn gyntaf adran yma, byddwch yn gweld rydym yn creu rhain i gyd yn wahanol nodau allan o'r cyd-destun. Rydym yn unig yn eu piecing gyda'i gilydd yn yr ail ran gan y swyddogaeth hon o'r enw Connect. Mae hynny'n wir yn allweddol swyddogaeth mewn Gwe Sain. 'I jyst yn golygu unwaith y byddwch wedi gwneud rhywbeth gyda'r sain mewn un nod, basio ymlaen at y nôd nesaf. Felly mae gennym y ffynhonnell, mae'n cysylltu i'r analyzer, y dadansoddwr yn gwneud rhywbeth ag ef, mae'n mynd i ystumio, ac yn y blaen, ac i'r gyrchfan ar y gwaelod ar y dde yma. Cool. Iawn, felly byddwn yn dal i symud ymlaen. Mae'r pipeline-- eto, mae'r rhain yn yw'r piblinellau mwyaf cyffredin, felly byddwn yn sôn am yr holl bethau hyn fel distortion, panio, holl bethau hyn. Os oes gennych ddiddordeb gwirioneddol wrth ddefnyddio pethau Pro Tools, Mae'n debyg y rhai o ddiddordeb i chi. Os na, efallai eich bod yn unig eisiau chwarae y sain, neu efallai eich bod am gosod y gyfrol ar y sain. Dyna'r ddau fath mwyaf cyffredin pibellau mewn cynhyrchu sain. Unwaith eto, y ffyrdd y gallwch fynd â hi mewn fel oscillator-- felly, gadewch i ni yn gwneud y demo o hynny dde yma. Felly rydym yn mynd i greu cyd-destun sain syml yma, ac o hynny rydym yn mynd i greu ein osgiliadur. Felly mae hynny'n, unwaith eto, rydym yn unig mynd i alw Creu Oscillator. Rydym yn mynd i osod amlder ar hynny, 440 Hertz, hoff pawb. Yna, rydym yn cysylltu hynny i'r gyrchfan point-- sef y siaradwr, felly y gyrchfan cyd-destun. Yn olaf, rydym yn unig yn dweud, yn dechrau sero eiliad o hyn, ac nid ydym wedi swnio? [Modrwyo] HUGH Zabriskie: Yma rydym yn mynd. 'I' jyst ton sin. OK, oer. Ac yna byddwn yn rhoi'r gorau i hynny. GYNULLEIDFA: Ble wnaeth bod adborth yn dod? HUGH Zabriskie: Y adborth? O, yn ôl pob tebyg mae ein meicroffonau. Felly ie, dyna sut yr ydych yn ei wneud. Ac mewn gwirionedd, os oedd gen i cadw rhedeg, byddwch yn Gallai gael pa mor aml werth fel ei fod yn rhedeg, felly mae hynny'n beth hwyliog i'w chwarae o gwmpas. Cool. Mae hynny bob amser yn un hyfryd i gyflwyno. SAM GWYRDD: Nid ydym yn gwneud meddwl am hynny, wnaethom ni? HUGH Zabriskie: Yeah, mae hynny'n un cas. Felly, byffer loading-- 'n annhymerus' yn dangos enghraifft o hynny yn y pen iawn. Dyna llwytho ar MP3. A meicroffon, byddwch yn defnyddio dim ond swyddogaeth Gelwir Navigator.getUserMedia () i ofyn am fynediad at y defnyddiwr meicroffon am y wybodaeth honno. Sy'n hidlo Yma, byddaf jyst cadw i symud o hyn. Mae hyn yn lefel eithaf uchel, ond hidlwyr dim ond byddwch yn caniatáu i [Gwneud sain] Hidlo hefyd yn caniatáu i chi i greu pethau fel pinc sŵn, sŵn brown, sŵn gwyn. Os ydych am greu sŵn pur, a oedd yn mae rhai pobl wrth eu bodd yn chwarae o gwmpas gyda, gallwch ddefnyddio Gwe Audio hidlo i wneud hynny. Sain Panning-- felly dychmygwch os ydych yn ysgrifennu gêm ac rydych am i'r sain i swnio fel ei fod yn dod, fel, saethu ar draws y sgrin, byddwch yn yn gallu defnyddio'r panio y sain i greu y math hwn o côn, sy'n like-- 'i' 'n bert Mathy, ond mae'n mewn gwirionedd 'n sylweddol oer os ydych yn cael iddo weithio, ac mae rhywfaint da sesiynau tiwtorial arno gallaf anfon atoch. Yn y bôn, gallwch garedig o greu'r sain o rywbeth sy'n mynd trwy mewn ffordd 3D. Ac os oes gennych fuddiant DJ, gallwch dechrau cymysgu a croesi caneuon pylu. Mae hyn yn unig rhai sylfaenol iawn cod, yn y bôn yr hyn a wnaeth i mi o'r blaen. Mae hyn yn gosod y cyfaint y osgiliadur, felly rydym yn creu ein osgiliadur sy'n creu'r tonffurf. Rydym yn creu ein GainNode, gosod ein amlder, ac yna cysylltu y osgiliadur i'r GainNode, sydd wedyn yn y bôn yn newid faint o signal yn cael ei ganiatáu drwodd. Ond mewn gwirionedd, mae'n digidol peth, felly mae'n fwy just-- yeah. Dyw hynny ddim yn beth sy'n digwydd mewn gwirionedd, ond dyna beth sy'n digwydd mewn bywyd go iawn gyda chynnydd. GYNULLEIDFA: --quantization y paramedr gyfrol? HUGH Zabriskie: Mae'n ddrwg gennyf? GYNULLEIDFA: A yw'n paramedr cyfaint quantized? HUGH Zabriskie: Yeah. Ac mae hyn yn un peth Dwi wir ddiffygiol ymlaen yn fy ngwybodaeth, sut mae ennill yn gweithio ar lefel digidol. Yr wyf yn gwybod â gwir signalau, yn y bôn rheoli faint rydych yn ymhelaethu y signal. Felly, yeah. 'N annhymerus' yn anfon rhagor o wybodaeth amdanoch chi hynny, oherwydd byddwn i'n fod yn chwilfrydig mewn gwirionedd wybod mwy am hynny. Ond yn y bôn y paramedrau chi, mae un yn y fold-- y signal-- uwch ac sero oes arwydd, neu ni fyddwch yn clywed unrhyw sŵn. Byddwn yn sgipio amser demo ar gyfer hynny oherwydd yn y bôn yr hyn a wnaeth i mi o'r blaen. Ac eto, mae'r Context.Destination yw'r nod gyrchfan sain. Awesome, OK. Felly, yr wyf i'n mynd i wneud cyflym dau demos. Sut ydym ni'n gwneud yn brydlon? SIARADWR 1: Tua 10 munud. HUGH Zabriskie: 10 munud? Great! Awesome. Felly, mae'r un cyntaf i mi i'n mynd i peidiwch, fe'i gelwir My Song Hoff. Felly, mae hyn yn unig yw Ychydig HTML JavaScript. Rydym yn mynd i gael dau fotwm ar y dudalen chwarae fy hoff gân a rhoi'r gorau i fy hoff gân. 'N annhymerus' newid hyn. GYNULLEIDFA: Gorchuddiwch eich meicroffon. HUGH Zabriskie: Yeah. Ac yr wyf i wedi llwytho i mewn yma sgript sy'n basically-- ac mae hyn yn ddefnyddiol iawn ar gyfer llwytho MP3, felly mae hyn yn unig yn gwneud llwytho MP3s ffordd gyflymach. Mae'n bôn yn unig papur lapio. 'I jyst yn gwneud y broses o llwytho yn MP3s yn gynt o lawer, fel arall ydych yn defnyddio cais HTTP, math o fel hyn yr ydym yn ei wneud ar y darn cyfredol gosod gyda Gweinydd. Mae'n wirioneddol hyll, yr ydych nad ydynt am wneud hynny. Felly guy hwn, Boris Smus, ysgrifennodd 'n sylweddol teclyn bach defnyddiol o'r enw BufferLoader. Mae'r holl chi ei wneud yn syml basio y cyd-destun, byddwch yn mynd heibio iddo yn list-- neu, ie, a yw'n rhestr yn JavaScript? SAM GWYRDD: Mae rhesi. HUGH Zabriskie: O, mae'n amrywiaeth, sy'n iawn. Mae'n amrywiaeth o lwybrau i wahanol ffeiliau. Ac yna byddwch yn mynd heibio ei swyddogaeth. Mae hyn yn y galw'n ôl oeddem yn sôn am â llwytho asynchronous. Bydd hynny'n cael eu galw unwaith y bydd y ffeiliau llwytho. A bod swyddogaeth sy'n cael ei alw'n pan y ffeil yn llwytho yn cymryd fel perimedr amrywiaeth o byfferau llwytho. Felly mae hynny'n digwydd yma. Yn y bôn, BufferList yw mynd i fod yn un value-- neu mae'n mynd i fod yn amrywiaeth o Hyd un, sydd wedi yn ei yn y mynegai sero y ffeil llwytho cyfan y MP3. Felly, yr hyn yr wyf yn ei wneud pan fyddaf yn gorffen llwytho yw, yr wyf yn syml creu ffynhonnell byffer, a oedd yn yn nod ffynhonnell byffer sain. Y cam nesaf yw fy mod yn llwytho yn y source.buffer gan fod y byffer llwytho llawn oddi wrth y BufferList-- ei fod yn llawer o buffers-- ac yna byddwch yn cysylltu y sain byffer i'r gyrchfan. Felly, beth mae'n mynd i wneud dim ond yn syml, rhowch y MP3 yn syth drwodd i'r allbwn, a dechrau ar unwaith ar gael yr alwad hon. Cool, felly gadewch i ni weld hyn yn digwydd ar waith. My [Anghlywadwy] yma, gadewch i ni weld. Felly, Im 'jyst yn mynd i cychwyn gweinydd sylfaenol. Mae hynny'n rhywbeth y angen i chi ei wneud os ydych chi'n gwneud ceisiadau am ffeiliau llwytho. Rydw i'n mynd i ddechrau gweinydd sylfaenol. Mae hyn yn y bôn eich cyfan PSET ar hyn o bryd yn un llinell, ond mae ond yn dechrau gweinydd ar borth 80/80. Felly, rydym yn mynd dros yma, rydym yn mynd i lwytho 80/80, rydym yn mynd i fynd i Fy Hoff Song. Felly, os wyf yn taro "Chwarae fy hoff gân "ar hyn o bryd, mae'n mynd i lwytho fy hoff gân a chwarae iddo-- [CERDDORIAETH - THE EAGLES, "BYWYD YN Y FAST  LANE "] --which digwydd bod "Mae bywyd yn mae'r Lane Cyflym "gan The Eagles. Yn awr, gallwn i daro "Stopiwch fy hoff gân "ac yn ail-chwarae iddo. [CERDDORIAETH - THE EAGLES, "BYWYD YN Y FAST  LANE "] Ac os af draw i chysura, oherwydd Roeddwn i'n arfer newidyn byd-eang dros yma i gadw golwg ar y gwerth hwn, mewn gwirionedd mae'n yn awr yn cael ei gydnabod yn y consol. Felly mae'n auto-greu i mi. Felly dyna beth sy'n chwarae ar hyn o bryd, a gallaf ffoniwch source.stop () ar hynny. Wel, chi'n gwybod beth? Yn union fel eich guys wedi clywed hyn song-- efallai y byddwch yn adnabod y gân. [CERDDORIAETH - RICK Astley, "PEIDIWCH BYTH gonna RHOI  CHI UP "] [CERDDORIAETH - THE EAGLES, "BYWYD YN Y FAST  LANE "] Rydym wedi erbyn hyn i gyd wedi'u Rickrolled. OK, mawr, gan symud ymlaen. Cool. Felly, mae hyn yn y bôn yn enghraifft o yn union sut y gallech lwytho MP3 file-- [CERDDORIAETH - THE EAGLES, "BYWYD YN Y FAST  LANE "] --and ei chwarae, ac yn stopio a dechrau ei. Gallwn fod wedi gwneud llawer mwy [Anghlywadwy] Mae'r un olaf 'n annhymerus' ei wneud yw, Byddaf yn dangos i chi a [Anghlywadwy]. [CHWARAE CERDDORIAETH] Mae fel, ogg.wave.mp3. Yr wyf yn meddwl, os cofiaf yn iawn, Rydw i wedi rhedeg i mewn i rai materion gyda .m4a, ond nid wyf yn siŵr am hynny. Rwy'n credu mp3.wave-- [CERDDORIAETH - RICK Astley, "PEIDIWCH BYTH gonna RHOI  CHI UP "] OK, mawr. Ni ddylai wyf wedi dweud hynny. Beth bynnag, helo. Felly, rydym wedi hyn ar agor. Felly, erbyn hyn i gyd yr wyf yn ei wneud yw, yr wyf yn creu y bôn yn gystrawennau sylfaenol ar gyfer creu cerddoriaeth. Felly, os wyf yn gwneud rhywbeth fel, ychwanegwch G4 ar 1 2, beth mae hynny'n ei olygu yw bod, ychwanegwch y nodyn piano, G4, sef y pedwerydd G i fyny ar y piano o'r gwaelod. Felly, mae hyn yn fath o MIDI siarad, felly ar gyfer y rhai sy'n seiliedig ar gerddoriaeth, mae hyn yn nodiadau unig MIDI. GYNULLEIDFA: Dyna y G o'r Canol C, dde? HUGH Zabriskie: Mae hyn yn y G uwchlaw Middle C, sy'n iawn. GYNULLEIDFA: Uwchben Canol C. HUGH Zabriskie: Yeah. A dweud y gwir, ie. Rwy'n credu fy mod ei wneud mewn gwirionedd mae'n un [Anghlywadwy], felly gallai hyn fod yn wythfed yn uwch hynny. Felly, gadewch i ni weld. Os byddaf yn taro Play-- [NODER PIANO AILADRODDOL] --we're mynd i glywed hynny. Y syniad yw ei fod yn gweithredu yn union fel y byddai llinell gorchymyn, felly os wyf yn mynd i fyny ac i lawr ar fy bysellfwrdd, i chi Gall fynd yn ôl at blaenorol gorchmynion, sydd yn eithaf defnyddiol. Ac isod mae fy rhestr o draciau, sydd i gyd yn rhedeg ar ddolen. GYNULLEIDFA: Yr oeddech yn tybio y 88-allweddol bysellfwrdd ar hynny, dde? HUGH Zabriskie: Y cwestiwn oedd, ydw i'n tybio bysellfwrdd 88-allweddol, ac ydw, dw i'n. Beth wnes i yw fy mod Cymerodd y bôn 88 o samplau y piano, un ar gyfer pob nodyn. Ac felly bob tro y byddwch clywed nodyn o hyn ymlaen, sydd mewn gwirionedd dolen sy'n edrych like-- mae hyn yn cael ei chwarae ar ddolen, felly ar gyfer pob nodyn, mae hyn yn rhedeg. Beth fydd yn digwydd yw, yr wyf yn creu byffer eto, Yr wyf yn creu ennill nod i osod y gyfrol. Mae hyn yn unig yw n sylweddol ffordd gymhleth o ddweud fy mod storio'r byffer mewn source.buffer. Yr wyf yn rhoi yr ennill, yr wyf yn cysylltu i'r enillion, yr ennill yn gysylltiedig â'r allbwn, ac yna yr wyf yn chwarae arno. Felly dyna'r fath o broses o gymryd yn ffynhonnell clustogi. GYNULLEIDFA: Allwch chi mewn gwirionedd yn cymryd hynny sain sych a'i wneud yn wlyb [Anghlywadwy]? HUGH Zabriskie: Gallwch, yeah. Mae ail-ferf, mae ' oedi, aflunio. Gallwch bôn rhoi unrhyw beth mewn rhwng yn y frechdan o- dda, biblinell yn drosiad gwell, ond gallwch ychwanegu unrhyw beth yn hynny. Cool. Felly byddaf yn gorffen y demo yma i roi ymdeimlad i chi o ddim ond y nifer fawr o weithiau yr ydych Gall rhedeg y swyddogaeth honno i gyd ar unwaith. Felly dw i'n mynd i gael gwared ar hyn. Rydw i'n mynd i greu generadur that-- yn y bôn yr hyn does-- hyn yn wir fath o syntax-- gymhleth ond mae'n mynd i gynhyrchu nodiadau ar y hedfan, a dim ond dechrau chwarae iddynt fel ei fod yn eu gwerthuso. [Gosod eu hunain yn PIANO] Felly, gallwn yn unig yn gwneud ychydig o gerddoriaeth yma. [Gosod eu hunain yn PIANO] Felly beth gorchymyn hwn ei wneud, er enghraifft, yw mae'n cymryd tri nodyn rhai ar gyfer y piano ac yna yn eu rhoi ar B3. Gallai hyn gystrawen yn gwneud ychydig mwy o synnwyr i'r rhai sydd â cefndir cerddoriaeth yma. Gallaf ychwanegu drwm cic. Dwi'n gallu-- [Gosod eu hunain yn OFFERYNNAU] --just chwarae o gwmpas gyda hynny. Felly, gallwch make-- [Gosod eu hunain yn OFFERYNNAU] Dyna un ychydig yn fwy blino. [Gosod eu hunain yn OFFERYNNAU] Er mwyn i hap ychwanegu symbal sych ar bob 16eg nodyn, gyda 16% [Anghlywadwy]. [Gosod eu hunain yn OFFERYNNAU] Yeah, felly y ffordd hon works-- mae bob amser yn 4: 4. [Gosod eu hunain yn OFFERYNNAU] Yeah, felly y pedwar chwarter, a 16/8. [Gosod eu hunain yn OFFERYNNAU] Felly, ar gyfartaledd, byddwch yn cael 60% o hits ar y nodiadau 16eg. Anyways, roedd hyn yn unig math o i ddangos rhai o'r pethau gallech adeiladu gyda'r We API Sain. Mae'n wirioneddol pwerus, 'i' 'n sylweddol yn gyflym, a gallwch wneud llawer o bethau cŵl ag ef. Felly unwaith eto, unrhyw gwestiynau sydd gennych, anfonwch e-bost myself-- Hugh-- neu Sam, ac yn onest, Google wedi tunnell o adnoddau da. Unrhyw gwestiynau diwethaf? Yeah. GYNULLEIDFA: Felly gallwch gael mynediad y meicroffon adeiledig yn. Beth os ydych chi eisiau defnyddio meicroffon yn well? HUGH Zabriskie: Os ydych yn dymuno i ddefnyddio well meicroffon? Felly unwaith eto, mae hyn yn rhan o'r tynnu rhwng Chrome a gweddill eich cyfrifiadur. Oni bai ei fod ar gael trwy API, fel y We MIDI API, Gallai pob tebyg chi ddod o hyd rhai haciau, ond yn gyffredinol nid fel ymarferol. SAM GWYRDD: Gallwch also-- i gyd yn gwybod y Chrome yw beth yw eich meicroffon rhagosodedig yw, ac mae'n mynedfeydd hynny. Felly, os ydych wedi cael meicroffon gallech osod fel meicroffon diofyn cyfrifiadur, gallech gael gafael yn y ffordd ac mae'n debyg y byddai'n gweithio. HUGH Zabriskie: Mae hynny'n bwynt da. Dydw i erioed wedi rhoi cynnig ar hynny, ond efallai y byddwch yn gallu garedig o- os byddwch yn ailgyfeirio y siaradwr mewnbwn, efallai y byddwch yn gallu gwneud hynny, yeah. Unrhyw gwestiynau diwethaf? Cool. Wel diolch i chi guys cymaint am wylio. Rwy'n Hugh. SAM GREEN: Rwy'n Sam. HUGH Zabriskie: Ac mae hyn yn CS50.