>> SAM GREEN: Hi, almal.
Welkom by ons seminaar.
My naam is Sam.
HUGH Zabriskie: Ek is Hugh.
SAM GREEN: En ons gaan vandag praat oor JavaScript en die Web Audio API.
Net om te begin, is dit 'n uiteensetting van ons agenda vir die seminaar.
Ons gaan om te begin deur te praat oor Hoekom jy belangstel in die Web te wees
Audio API, hoekom is JavaScript die taal wat jy nodig het vir dit,
en dan praat oor JavaScript essentials-- so soos,
loop jy deur 'n paar basiese beginsels van die taal,
en dan praat oor die klank API op 'n hoë vlak.
Dan sal Hugh praat oor 'n van die stadiums van produksie klank
en dan demo hierdie awesome sequencer projek het hy en wys jou die kode.
En dan, sal ons tyd vir vrae aan die einde vir mense
wat hier woon.
>> HUGH Zabriskie: Cool.
>> SAM GREEN: Cool.
>> HUGH Zabriskie: Cool.
Ek sal back-up.
>> SAM GREEN: So, eerste dinge eerste.
So een van die groot dinge oor die Web Audio API
is dat daar geen opstel vereis.
Dit kom ingeboude om mees moderne implementeer,
insluitend Chrome, Edge, 'n hele n klomp van die mense al others--
dat groot gedeeltes van mense gebruik vandag.
So is daar geen opstel, Afgesien van net om
'n web bediener te gaan, want jy het om te begin werk
op jou projek, wat is groot.
>> Ons beveel mooi swaar dat jy dit oorweeg
gebruik van Chrome vir JavaScript web ontwikkeling,
net omdat die ontwikkelaar gereedskap is baie sterk.
As 'n voorbeeld van net wat ons bedoel deur te sê maak jou JavaScript
console-- as jy gaan in Chrome en jy kyk na 'n webblad,
en jy klik links Inspekteer Element, en dan
jy gaan na hierdie klein drop-down hier en jy op Console,
jy sal sien wat oopmaak lyk baie soos 'n opdrag prompt dat jy
kan sien op jou Mac, of op die ID.
En net soos wat, ons kan tipe opdragte hier, soos Clear,
en ander opdragte soos dit.
Ons kan veranderlikes te skep, soos ons sal later sien in JavaScript.
En so iets is wat ons kan doen in JavaScript, kan ons doen met die konsole,
en dit is 'n super handige manier om begin rondspeel met APIs
en raak gemaklik met JavaScript regs af die vlermuis.
Geen opstel vereis, wat is regtig mooi.
Koel.
Awesome.
>> Dus net een ding om te voeg.
As jy enige questions-- daar baie van julle wat nie hier woon,
voel vry om te e-pos hierdie us-- is ons e-pos adresse.
As jy vrae het jy wil nie om ons te vra,
soos, ag ek het 'n fout in my kode, of iets
dit is 'n bietjie meer spesifiek, Miskien eerste google dit.
Daar is 'n baie groot hulpbronne oor die Web Audio API daar buite.
Dit is baie goed gedokumenteer en dit is wat
gebruik word deur 'n ton van die mense in bedryf, en mense wat net
bou pret dinge vir hulself.
So is daar 'n baie moet van hulpbronne wat daar is.
Awesome.
>> Cool, so hoekom die Web Audio API?
Hierdie diagram is 'n bietjie van 'n evolusie van die pad
klank op die web het gegroei met verloop van tyd.
Bgsound was soos die oorspronklike HTML tag Internet Explorer gebruik om te ondersteun.
Dit slegs toegelaat vir redelik basiese klanke, die funksie was nie baie sterk,
en jy kan dit nie doen nie ingewikkelde opeenvolging,
of beheer wanneer klank begin en gestop baie kragtig.
So, dit was nie besonder goed ontwikkel.
Eers daarna, Flash gekom along-- wat
Ek is seker dat jy ouens is almal bekend met Flash-- miskien nie hoe dit werk,
maar jy het beslis dit gesien.
Jy het om jou Flash werk Plug-in, al daardie soort van dinge,
en wat seker die reeks uitgebrei van funksies wat beskikbaar was.
Maar maak die gebruiker installeer 'n plug-in is beslis
'n nadeel aan insluitend Flash in jou aansoek, reg?
Want dan is jy afhanklik van die is gebruiker gaan en vind hierdie plug-in,
en waarskynlik omgedraai af deur hierdie ekstra stap
hulle moet neem om jou inligting te gebruik.
En dan kan daar 'n update wees dit sal jou hele aansoek te breek,
en dit eindig as 'n nagmerrie vir die ontwikkelaar, ook.
So dit was 'n versper.
>> En dan na wat gekom het, die HTML klank tag, wat
is 'n kenmerk van meer moderne HTML-- wat beslis toegelaat vir 'n baie meer dinge,
maar selfs die dinge wat jy kan doen daar is 'n bietjie beperk net
as 'n gevolg van die dinge dat HTML was in staat is.
So wanneer die JavaScript API, die Web Audio API,
het 'n standaard oefen oor blaaiers,
wat werklik verbreed die stel geleenthede vir ontwikkelaars
om werklik te kry in die bou cool stuff vir die web.
Vir 'n lang tyd was daar was regtig kragtige gereedskap
vir die inheemse klank programme, like-- almal weet Garage
en dan natuurlik is daar meer professionele klank meng aansoeke,
en dat die soort dinge.
Maar daar was nie 'n regtig 'n goeie Cloud-- nie
Wolk, ja, ek dink Cloud-- web-gebaseerde platform
wat sou toelaat dat ontwikkelaars bou aansoeke vir mense
klank meng nie.
En as hy sal jou wys later, die Web Audio API
maak voorsiening vir baie kragtige dinge om werklik net gebeur nie,
wat is pretty cool.
So wat is die opdrag aan waarom jy moet die res van die seminaar te kyk,
basies.
>> En nou, ek gaan om te praat oor sommige JavaScript-- net die basiese elemente
van die taal, sodat kan ons op dieselfde bladsy
wanneer ons praat oor die API 'n bietjie later.
Koel.
>> So, dit is 'n opsomming.
Ek het vergeet hier was.
Ja.
>> HUGH Zabriskie: Daar is hier twee skyfies.
>> SAM GREEN: Dit is die opsomming van sommige van die beperkings
van die ander bindende, ou metodes.
En dan nou, ons het hierdie dinge gesien.
Koel.
Awesome.
>> So, JavaScript noodsaaklikhede.
Eerste dinge eerste, daar is 'n mooi beduidende verskil
in JavaScript versus in 'n taal soos C, in die pad
dat veranderlikes geskep word.
So in C, ons gebruik om met ons veranderlikes tik, reg?
En ek bedoel nie tipe soos tik hulle in, ek bedoel tipe
soos 'n type-- betekenis toeken hulle soos 'n int, 'n float, 'n kar.
In C, is ons regtig gebruik word om dat 'n veranderlike te skep
en dan hou dat die tipe vir die hele tyd wat ons gebruik wat veranderlike.
En dit is nie noodwendig erger, maar dit is waarskynlik harder te gebruik.
Een van die interessante eienskappe JavaScript is
dat veranderlikes is wat genoem "dinamiese getik," wat
beteken dat ek 'n kan skep veranderlike met daardie sintaksis,
varX gelyk 5, byvoorbeeld.
Wat oorspronklik skep 'n heelgetal variable--
reg onder die kap somewhere-- maar ek
kan daardie veranderlike verander om te verwys na 'n string
sonder om iets te doen soos skep van 'n nuwe veranderlike.
Ek het nie nodig om te bekommer oor die tipe verander.
JavaScript weet dat die tipe se verander, en wat dinamiese gebeur.
>> So, daar is voordele en nadele dat
as iemand wie se werk in JavaScript vir 'n rukkie kan weet.
Daar is tye wanneer jy dalk per ongeluk
verander die tipe van 'n veranderlike en nie hanteer dat die tipe verandering,
en dan jou JavaScript kan crash-- of 'n uitsondering
gegooi word, want jy het die verkeerde tipe wanneer jy verwag 'n tipe.
Koel.
>> So, wat is soos scoping--, as ons onthou die vroeë weke in die kursus,
verwys na hoe sigbaar 'n veranderlike is en in watter area van die kode.
Al wat lyk baie soortgelyk die manier waarop dit lyk in C.
So veranderlikes algemeen scoped binne krulhakies binne 'n funksie,
en dan is daar ook globaal scoped veranderlikes wat
are-- as jy 'n veranderlike te skryf buite 'n funksie,
dit sal sigbaar in die hele teks.
>> Een verskil tussen JavaScript en C in die besonder,
is dat as jy 'n globale verklaar veranderlike oral in 'n teks lêer
dit is sigbaar in enige funksie binne daardie teks lêer.
Dit is korrek, reg?
>> HUGH Zabriskie: Yep.
>> SAM GREEN: So dit is ook 'n bietjie bietjie funky in vergelyking met C,
waar ons moes altyd het ons veranderlike definisies bo die plekke
hulle gebruik is.
Dit is nie 'n reël wat is afgedwing nie, wel, 'n bietjie anders.
En weer net om reemphasize, globale versus plaaslike variables--
baie soortgelyk aan C. Jy kan hê twee veranderlikes met dieselfde naam,
en het een van hul name word skaduwee deur 'n plaaslike veranderlike as een van hulle
was globale.
So, soortgelyke soort probleme wat sommige van julle
mag in loop in sommige van jou probleem sit so ver.
Cool, so dit is veranderlikes.
>> Beheer vloei, wat beteken soos, if-else-- logiese spul en loops.
So om mee te begin, dit is wat if-else stellings lyk soos in JavaScript.
Die plasing van die verskillende dinge op die lyne is nie belangrik nie.
Dit is net een van die konvensies vir die manier waarop ons struktuur code.
Net soos in C, ons het 'n "As 'n" hakies verklaring.
Dit is nie wat ek bedoel om te doen.
Ek het dit weer.
>> HUGH Zabriskie: Probeer om af te sluit?
SAM GREEN: Nee, ek is net probeer om in te zoomen.
Dit maak nie saak nie.
>> So, ons het 'n "as" verklaring en ons het 'n toestand binnekant van dit
wat evalueer waar of vals, en wat bepaal of nie
ons in daardie blok van die kode.
En so ook, ons het 'n ander-as, en 'n ander, net soos ons gebruik om in C.
>> Jy moet ook mooi gemaklik regs af die vlermuis met loops,
want hulle kyk ook 'n baie soos C lyk.
Maar jy sal weer agterkom dat ons het, in plaas van int initializations,
ons het var initializations.
En ek dink jy het versigtig wees om te maak om te wees
seker dat jy nie die waarde te verander van I van 'n int om 'n string,
byvoorbeeld, omdat dit gaan om veroorsaak vreemde gedrag wat jy dalk nie
verwag.
Maar dit moet kyk mooi bekende, as well.
>> So dit is waar dinge begin kry 'n bietjie mal in JavaScript
vir iemand wat gaan van 'n agtergrond van C. Daar is funksies
in JavaScript, en daar is een manier om 'n funksie wat lyk verklaar
soort van soos C en dan is daar 'n ander een wat
lyk soort van verskillende.
>> Die eerste weergawe, wat kan ons hier sien,
is 'n soort van C-agtige, waar Ons sê, dit is 'n funksie,
gee dit 'n naam gee die aantal argumente,
en dan die inhoud van die funksie gaan binne die krullerige draadjies.
Ons sal 'n voorbeeld van sien argumente in net 'n sekonde.
>> AANGESIEN op die volgende reël, sien ons, o, hier is 'n veranderlike genaamd "myFunction,"
en ons vergelyk word om hierdie generiese thing-- function-- dat
Dit lyk nie of enigiets aangaan nie.
Die rede is dat dit anders as C is dat JavaScript
is wat genoem word 'n funksionele taal, of het funksionele elemente, wat beteken
wat funksioneer is eintlik waardes.
En dit beteken dat ons kan stel 'n veranderlike om 'n funksie gelyk
en dan skuif daardie funksie rond, slaag dit as 'n argument,
doen allerhande dinge soos wat met funksies.
>> Een ander ding om te note-- funksies geskryf
met 'n sekere aantal argumente.
Ons sal 'n voorbeeld van 'n funksie te sien met 'n argument op die volgende skuif.
Maar JavaScript sal nie gil op jou as jy probeer
om 'n funksie by die gebruik verkeerde getal argumente.
Dit sal net sy bes doen om te maak doen, wat beteken dat as jy slaag,
jy 'n funksie wat 'n beroep verwag argument met geen argument, alles wat
sal gebeur is dit sal sy bes doen om te probeer en uit te voer wat die kode,
en as dit uiteindelik loop in 'n uitsondering of 'n fout,
dit sal gooi dat uitsondering nie en hou net going-- wat net een van die maniere
dat JavaScript werk.
Ja.
>> GEHOOR: Wat gebeur as daar is te veel argumente?
SAM GREEN: So het die vraag was, wat gebeur
As daar te veel argumente?
En die antwoord is dat JavaScript sal net
ignoreer die kinders wat na die kinders dit verwag.
Dit sal probeer om die funksie uit te voer roep asof dit was net die eerste twee.
Reg?
>> HUGH Zabriskie: Dis reg, ja.
Net so, as daar is te min argumente,
dit net soort van gee null om al die argumente dit nie enige waardes
vir.
>> SAM GREEN: wat eintlik handig, as jy
wil 'n funksie te skryf wat neem 'n veranderlike argumente nommer.
Jy kan die standaard waardes in die definisie van die funksie,
en dit kan ignoreer die feit dat die insette is nie daar nie.
So ek wil 'n bietjie praat meer oor hierdie laaste bullet
punt, wat funksies waardes.
Dit is 'n voorbeeld wat 'n bietjie mind-blowing
as jy net lees nie, en dink nie oor wat aan die gang vir 'n tweede.
So, laat ons kyk net op die eerste reël hier.
Ons het hierdie veranderlike, f1, dat ons sê is 'n funksie wat hierdie ding doen.
En die inhoud van die funksie is console.log ('hallo').
Jy kan dink console.log as die JavaScript ekwivalent van printf.
So, wat sal gebeur is, as ons hardloop hierdie kode in ons leser,
dit sal druk 'n string.
Ek kan bewys dat.
GEHOOR: Deur log, al is, doen dit bedoel dit is wat iewers opgeteken?
SAM GREEN: Ja.
So ek sal jou wys wat gaan gebeur.
So die vraag is, wat beteken log beteken?
>> HUGH Zabriskie: So console.log is soos printf vir C.
SAM GREEN: So console.log is soos printf,
so as ek hierdie console.log ('hallo'), en ek noem dat die string "hallo"
kry gedruk om die konsole.
Dit is die konsole.
Dit is net soos printf, waar dit druk op standaard nie.
En ons sal sien in 'n minuut, maar dit is eintlik
verwys na die konsole voorwerp, en roep 'n metode op daardie voorwerp.
Dit sal meer sin maak in 'n minuut wanneer ons
kry om te praat oor voorwerpe in JavaScript,
maar ek het gedink ek wil net noem dat.
HUGH Zabriskie: Ons is gebruik om in C, right--
ons gewoonlik skryf 'n groot program in die belangrikste om iets te doen.
Maar wat is koel in JavaScript is jy hierdie soort van tolk wat
lopies in reële tyd, so dit neem net reël vir reël,
dit kan net interpreteer wat op die plek.
En dit hou van dinge wat voor loop,
so dit is 'n mooi nuttige instrument om gebruik console.log, of die console,
algemeen, vir net speel rond met JavaScript.
>> SAM GREEN: So terug te gaan na die example-- die tweede reël van die kode
hier is redelik hoogs verwonder in my kop.
Die eerste keer wat ek lees hierdie, Dit was soos, wat gaan aan?
So wat gebeur is, is hierdie funksie verklaring sê,
Ek het 'n funksie genoem f2 dit is verwag een argument, f,
en dan is dit 'n beroep wat funksie, f, wat
geslaag om dit as 'n argument met geen argumente self.
So, wat kan verwarrend gewees het.
As ons dit verstaan ​​as f2 neem f1 as 'n argument, en dan binnekant van f2,
f kry called-- wat beteken dat hierdie lyn van die kode,
ná hierdie twee lyne van kode, resultate in "hallo"
gedruk om die konsole.
>> Die feit dat ons kan slaag funksies rond soos waardes
eindig een van die mees kragtige kenmerke van JavaScript
as 'n programmeertaal.
Buitekant van alle van die vreeslike dinge wat dit kan doen,
net soos 'n kenmerk van die taal in terme van die manier
dat dit maak dinge maklik om die program en kan
vir dinge wat nie is veral goed geskik is vir die web,
funksionele programmering en funksionele programmering aspekte van JavaScript
is een van die mees kragtige konsepte wat
bestaan ​​in JavaScript-- as jy my vra.
Koel.
>> So, volgende ding.
Benewens die feit dat funksionele, daar is ook elemente van JavaScript
wat objekgeoriënteerde, wat is een van die baie
gewilde gonswoorde in rekenaarwetenskap.
Objekgeoriënteerde programmering is 'n baie gewilde ding.
JavaScript is 'n weergawe van dat, waar ek glo elke waarde is ook
'n voorwerp, wat beteken dat elke voorwerp vou saam 'n paar aantal waardes.
So vir waardes wat eenvoudig is, soos 'n heelgetal, soos varX gelyk 5,
daardie voorwerp net vou dat een waarde.
>> Maar ons kan ook 'n situasie indink where-- ons kan dink situasies in C
waar ons wou doen iets structs,
byvoorbeeld dat verskeie vou waardes saam en maak die
dit baie maklik om dinge rondom slaag.
Dit is wanneer 'n voorwerp is in JavaScript.
>> Dit is belangrik om te onthou as ek sê dat voorwerpe toegedraai
sommige aantal waardes saam wat funksioneer is ook
waardes, wat beteken dat funksies kan ook binnekant van 'n JavaScript voorwerp.
En die rede wat belangrik is is dat, terwyl ons dikwels
dink roep 'n metode op 'n voorwerp wat
van 'n gewilde term uit ander gewilde objekgeoriënteerde tale,
een van die verskille hier is dat alles wat 'n metode is in JavaScript
'n waarde is gestoor binnekant van 'n voorwerp wat verrig 'n action-- moontlik
die gebruik van die ander waardes wat binne is van daardie voorwerp, maar nie noodwendig nie.
So jy kan dink 'n situasie, ek dink in 'n bietjie van 'n mal manier,
waar jy 'n metode van een wat geroep is beswaar op 'n ander voorwerp, byvoorbeeld.
So, dit is 'n bietjie funky op dié manier.
>> En jy kan ook die metodes verander wat verband hou met 'n voorwerp
deur die toeken van hierdie metode 'n nuwe funksie, wat ook
mooi anders as ander objekgeoriënteerde tale, waar
Sodra ons 'n voorwerp verklaar en instansieer dit
Ons kan nie die metodes wat verander wat verband hou met daardie voorwerp nie.
So dis nogal anders.
Koel.
>> So hier is 'n voorbeeld, in die eerste, van 'n voorwerp in aksie.
Dit is wat genoem 'n generiese voorwerp, wat
beteken dat dit nie het nie bepaalde naam, het nie 'n klas,
dit is net 'n paar wikkel waardes.
En die manier waarop lyk is, het ons ' hierdie buitenste denim krullerige draadjies hier
wat aandui JavaScript en sê, dit is 'n voorwerp.
Die waardes binnekant van dit is elke waardes binnekant
van die voorwerp wat behoort word opgerol.
En binnekant van die voorwerp, ons dan sleutel waarde pare
waar die sleutel verwys na die naam van die waarde binnekant van die voorwerp,
en die ander side-- teenoor die kolon here--
is die werklike waarde wat gestoor moet word.
>> So jy sien hier dat ons 'n sleutel genoem fn met waarde sam,
gevolg deur 'n komma, sê op die volgende inskrywing.
Dan is 'n sleutel genoem ln, met 'n waarde van groen,
gevolg deur 'n komma, gevolg deur "druk,"
wat gaan om 'n funksie waarde wat gaan om hierdie reël van die kode te doen.
Kom ons neem 'n stap terug en pak wat gaan hier aan.
So, dit is 'n bietjie ingewikkeld, en ons sien iets nuuts
vir die eerste keer.
Die "dit" navraag is die nuwe ding ons hier sien, en wat dit doen
is, verwys na die huidige beswaar in omvang, reg?
So wanneer ons sê, dit wys al die pad terug
om hierdie hele object-- wanneer ons dit doen this.fn,
ons gaan al die pad terug te gaan om hierdie voorwerp, gaan na die FN waarde
en kry sam, trek dit al die pad rug, hou dit hier, en dan beweeg op.
>> GEHOOR: So met die herwinning, is wat gedoen as gevolg van die parameter
definisie?
SAM GREEN: So die vraag is, is die herwinning gedoen as gevolg van die parameter
definisie?
Ja, absoluut.
Wat gaan hier gebeur nie, hierdie dot sê die JavaScript,
OK, ek kry 'n bietjie waarde Van hierdie voorwerp van myself.
En dan sal dit vir 'n inskrywing te kyk genoem FN, en as dit kry,
dit sal terugkeer wat value-- so, dit is Sam.
Maar ek kon ook getik iets wat nie hier is gedefinieer,
en dan is dit net terugkeer undefined-- wat
is 'n ding wat kan JavaScript doen, wat voordele kan hê,
maar dit is also-- as jy 'n tikfout maak, dit kan lei tot vreemde foute.
So dit sal net probeer om uit te vind alles wat jy sê dit om uit te vind
en dit is nie van plan om kla as dit nie vind nie.
Dit sal net sê, ek het nie vind dit, en dan beweeg op.
So dit sal ongedefinieerd, plus leeg, plus die laaste naam.
Ja.
En dan kan ons sien dat as ons kan dan neerdaal en access--
en ons tf.print () met hakies noem.
Dit gaan om daardie druk noem funksie met geen argumente, reg?
Maar as ons sê net tf.print () kommapunt, sonder die hakies,
al sou dit gedoen het, is trek die funksie van die waarde,
maar nie eintlik dit genoem.
Koel.
HUGH Zabriskie: Indien ons 'n voorwerp te maak?
SAM GREEN: Sure, laat ons dit doen.
So ek kan dit beweeg byvoorbeeld om die konsole.
Ons kan dink dat ek 'n voorwerp.
So, dit is 'n eenvoudige voorwerp.
Dit is 'n voorwerp wat twee bevat waardes met twee sleutels, twee belangrike waarde
pare.
So ek kan dan toegang tot die waarde gestoor binnekant van hierdie voorwerp deur te doen x.x1,
byvoorbeeld, en ek kry 1 rug.
Net so, x.x2 kry wat waarde terug.
>> En nou het die regtig cool ding is, ek kan eintlik iets toe te voeg tot hierdie voorwerp
nadat ek dit gemaak het.
So jy kan dink, laat sê ek het 'n funksie.
>> HUGH Zabriskie: Jy hoef te doen shift-Enter.
>> SAM GREEN: O, dit is irriterend.
Wat het dit nie hou nie?
Oh.
Hier gaan ons.
Koel.
>> So ek het net geskep hierdie funksie, f, wat
gaan om te gaan na die huidige voorwerp en druk this.x1.
So as ek net f noem self, niks gaan
gebeur, reg, want daar is geen x1 gebied in die voorwerp dit verwys.
Maar, as ek sê, x.f = f, en dan het ek noem x.f (), ek gaan terug 1 te kry.
F funksie is nou wat verband hou met die voorwerp x,
wat 'n sleutelrol genoem x1 het wat verband hou met die waarde 1,
sodat wanneer ons this.x1 noem, dit is gaan om te vind wat dit is op soek na
en in staat wees om 'n waarde te druk.
So dit is net een voorbeeld van die soort van die mal dinge
wat jy kan doen met voorwerpe in JavaScript.
>> Sodat weergawe was die generiese weergawe, betekenis
dat ons 'n voorwerp gebruik van hierdie geskep het hakies notation-- stut notasie,
rather-- en dit is handig as ons wil net
een voorbeeld van 'n spesifieke voorwerp, maar wat as ons wil meer as een
van dieselfde soort?
En die antwoord op die vraag is, is daar dinge
genoem klasse in JavaScript sowel.
Ons kan 'n funksie te skep wat doen 'n soort van inisialisering
vir 'n vreemde voorwerp, en ons wil sê, soos,
my class-- sodat die naam van die herbruikbare object--
gelyk funksie wat dit stel.
So, wat sou dit wees ekwivalent om skep 'n voorwerp wat
sou net graag, krullerige brace, str, kolon,
dit is 'n string, kommapunt, krullerige brace.
Dit sou die generiese wees voorwerp wat ons inisialiseer,
met die een verskil dat die volgende lyne skep ons 'n prototipe, wat
beteken dit is 'n standaard sleutel wat ons by ons voorwerp wat
het die hier gelys waarde.
Dit beteken dat, wanneer ek 'n nuwe geval van hierdie MyClass voorwerp,
dit gaan het pre-gebou binnekant van dit nie 'n waarde genoem en 'n ander waarde str
genoem myPrint, wat gaan 'n funksie wees.
Awesome.
>> Groot.
So is die laaste ding om sê oor JavaScript
is dat dit is regtig nuttig vir wat is asynchrone bedrywighede genoem.
Asynchrone beteken is dat ons kan nie wag vir 'n paar werking
om te voltooi voordat ons beweeg op, maar beweeg terwyl ons wag
en dan is daar iets gebeur later.
En wat ek bedoel met dit is, jy kan 'n situasie waar dink
jy 'n versoek om te stuur sommige web server iewers,
en dit gaan om jou terug te stuur 'n paar groot stuk van data, reg?
En jou gebruikers kan wag in die Intussen voor dit gebeur,
en niks kon wees gaan op daardie tydstip.
Maar dit is nie 'n groot ontwerp, reg?
Jy wil nie die webblad te vries.
Wat as die gebruiker wil Klik op 'n drop-down menu?
Dit is nie 'n groot ontwerp patroon.
In plaas daarvan, basies wat JavaScript is sê,
OK, doen hierdie aksie asynchroon.
Dus, net soos, wag in die agtergrond, en dan wanneer die operasie is gedoen,
noem die terugbel function-- noem 'n funksie,
sommige action-- te sein dat die werking ons wag vir tot einde
is verby.
En die rede is dat super kragtige is, kan ons iets doen, slaag 'n argument,
iets te doen, en dan wag vir iets om te gebeur.
Dan, wanneer daar iets rondt, kan ons 'n terugbel noem.
Dit is regtig handig want dit kan ons dinge met Web Audio API te doen,
byvoorbeeld, soos 'n vrag klank-lêer van 'n afgeleë bediener
sonder om te wag vir die hele klank lêer gelaai word,
wat eintlik sou wees sleg vir gebruikers ervaring.
Koel.
>> Laaste paar notas oor ontfouting, aangesien dit
is 'n ding wat jy gaan hê om te doen as deel van die projek, gewaarborg.
Ek het genoem dat die JavaScript console.
Dit is 'n super nuttige funksie van alle moderne blaaiers,
En ons regtig jou aanmoedig om te kry gemaklik met jou console,
as jy wil 'n goeie te kry op JavaScript.
Dit is super handig vir ontfouting, maar dit is ook
regtig nuttig vir uitzoeken hoe om 'n API te gebruik.
Dit maak voorsiening vir baie maklik eksperimentering
sonder om 'n soort kode, en stel dit dan aan.
Jy hoef nie al die stappe te doen.
Jy kan net skryf sommige kode in 'n lyn,
en dan kry onmiddellike terugvoer oor of dat die lyn van die kode
worked-- baie handig.
>> En ook, net 'n tegniese note-- die JavaScript konsole is 'n voorbeeld
van 'n REPL-- so dit is R-E-P-L, repl, wat staan ​​vir lees, evalueer,
Druk lus.
Jy gaan 'n paar dinge te tik in, dit sal lees wat jy getik in,
dit sal evalueer, en dit sal die druk uitvoer, en dan sal dit weer begin.
Wat jou toelaat om vinnig te gaan in sirkels iterating, wat is regtig cool.
>> Ek dink werklike laaste note-- hierdie is die werklike laaste noot, ja.
Hoe gebruik ons ​​eintlik JavaScript?
So die eerste, kan ons invoer dit met behulp van 'n script tag
by die bo-of onderkant van 'n HTML file-- oral binnekant van 'n HTML-lêer,
regtig.
En binne 'n script tag, is daar twee sub-maniere van die invoer JavaScript.
Die eerste is deur 'n aparte JavaScript lêer
wat ons invoer in sy geheel, of deur met 'n oppervlakte van die kode soos script
om te begin, en dan backslash script tot einde.
En dan skryf ons net JavaScript binne-in die HTML-lêer.
Dit is die twee maniere.
Jy kan dit nie binnekant van HTML.
GEHOOR: Is een beter as die ander?
SAM GREEN: Die vraag was, is een beter as die ander.
So, ja, as 'n kodering styl praktyk, en ook dit is soos 'n ontwerp praktyk.
Daar is twee redes waarom dit dalk beter wees.
Die eerste is, dit maak jou kode 'n baie meer leesbare as al jou HTML
is in een plek, al jou CSS is in 'n ander plek, al jou JavaScript
is in 'n derde plek.
Reg?
Ek dink ons ​​het reeds moes gepraat oor dit in sections-- soos CSS-- wat
dat is-- en dit gaan dikwels in 'n ander lêer.
So, soortgelyke soort konsep hier.
Jy kan ook dink dat JavaScript sou hergebruik op meer as een
HTML bladsy, of dalk 'n baie HTML bladsye,
en gesien dat JavaScript refactored in een
lêer wat jy kan invoer in meer as een plek
laat die kode te wees manier om meer te onderhou.
Jy kan dink om een verander na die JavaScript
en om te verander in 100 verskillende lêers.
En in plaas daarvan kan ons net verander dit in een, wat is manier om meer kragtig.
Het ek jou vraag beantwoord?
Koel.
>> Ons kan ook tik in die console, Soos ons reeds genoem het.
En weer, 'n laaste note-- Web Audio is gebou in,
jy hoef nie om iets te laai.
Koel.
Is daar enige vrae, het jy meer vrae oor JavaScript
voordat ons?
>> GEHOOR: [onhoorbaar]
SAM GREEN: Alle reg, cool.
So nou is hy gaan om te praat oor die API.
>> HUGH Zabriskie: Cool.
Dankie, Sam.
>> SAM GREEN: Natuurlik.
HUGH Zabriskie: Awesome, so ons sal op uit JavaScript beweeg.
Dus het ons gepraat oor 'n paar van die noodsaaklikhede van JavaScript,
en dit is die veranderlikes, funksies, voorwerpe, funksies as veranderlikes,
asynchrone laai.
Dit is alles dinge wat jy sal sien as jy die Web Audio gebruik.
So ons is maar net gaan om te praat oor dit die eerste in 'n hoë vlak.
>> Dit is 'n API, so dit is iets dit is gebou, as Sam gesê,
reg in die JavaScript wat jy gebruik in die konsole.
En dit is eintlik net soos C ++ kode wat regtig gebou in Chrome
en Firefox, en al hierdie blaaiers.
Dus is die belangrikste idee Web Audio is dat jy
hierdie soort van pyplyn van die klank, reg?
So jou klank data kom in een of ander vorm.
>> Daar is soort van drie hoof forms-- jy het die ossillator, wat
skep 'n sinusgolf, kosinus golf, ons gaan om te sien hoe dit werk.
Nog 'n baie algemene een, natuurlik, is 'n MP3.
So miskien het jy begin met 'n lied, en dan moet jy
wil 'n paar filtering doen dat die uitset en
that-- wat kan 'n moontlike bron.
En dan 'n baie cool een is die mikrofoon.
Sodat jy kan 'n paar baie gebruik basiese oproepe in JavaScript
om toegang tot die kry mikrofoon, en so as jy
wou 'n app maak soos 'n blad detector,
byvoorbeeld dat neem in jou stem en figure uit
die pitch-- baie maklike manier om dit te.
Jy kan net soort van lees dit in, uit te vind die frekwensie,
en dan uitset 'n nommer.
So ons sal sien hoe dit werk, as well.
>> Die bestemming is basies waar die klank data is uitset.
So algemeen, dit is soos jou laptop sprekers.
Ander opsies is soos 'n ScriptProcessorNode--
ons nodes in 'n kry second-- maar basies,
óf jy om klank uit deur jou rekenaar deur sprekers,
of jy soort van die opname, so jy dit stoor as klank data.
So miskien as iemand skep musiek in jou jeug en dan
jy wil hê dat die teken en miskien soos uitvoer om dit te SoundCloud vir example--
dat een manier om dit te doen sou wees.
Al die pret dinge, wat sal ons praat oor,
gebeur tussen hierdie twee punte, waar ons in die musiekbedryf te laai
en dan uitset dit.
>> So ek gaan om te praat oor die vyf stadiums van klank produksie in 'n tweede.
Ons het hierdie ding genoem 'n AudioContext, wat
is hierdie klein wrapper ons hier sien.
Basies wat AudioContext is-- as ons gaan na die JavaScript konsole nou,
Ons kan 'n mens nou skep.
Net 'n voorbeeld van repl, reg?
Ons lees, evaluering, en dit druk.
>> AudioContext is 'n globale toestand.
Dit is 'n struct, dit is 'n voorwerp hier, en dit hou inligting
oor dinge wat aangaan op die skerm wat verband hou met klank.
Een voorbeeld is die huidige tyd.
Dit vertel jou die aantal sekondes, presies,
sedert die webblad gelaai.
So, dit is 'n baie nuttige bietjie eiendom wat jy kan gebruik.
Dit lees only-- Ek dink eintlik jy kan probeer om dit te stel 'n waarde.
Dit sal jou vertel dit stel, en dan as jy dit druk
again-- dit het nie eintlik baie werk.
So is daar lees-alleen eiendomme in JavaScript.
Dit is regtig nuttig as jy soort sinchroniseer
'n baie verskillende inligting, wanneer jy
soort speel verskillende klanke.
>> Nog 'n baie nuttige een is die konteks bestemming.
Beslis, as jy belangstel, wees probeer dit op jou eie konsole reg
nou.
So dit is 'n AudioDestinationNode.
Basies wat hierdie sê is, Waar is die uitset gaan?
So is daar twee opsies real hier.
Gewoonlik is die verstek is net luidsprekers,
so AudioDestinationNode basies net sê
daar is zero uitgange na die geluid kom in, gestuur word aan die spreker.
So algemeen, jy doen nie het om te speel met dit.
As jy belangstel in die gebruik van is eintlik die ScriptProcessorNode vir die opname,
vir my 'n beslis skiet e-pos later, want dit is
'n bietjie meer ingewikkeld.
Maar oor die algemeen, jy is net soort van uitdruk klank in een of ander vorm.
So cool, sal ons weer hier te spring.
GEHOOR: Ek is jammer.
HUGH Zabriskie: Ja.
GEHOOR: Ek weet jy het om te praat om jou later oor die opname.
Kan jy dit koppelvlak met Pro Tools?
>> HUGH Zabriskie: Met Pro Tools?
Kom ons kyk.
Ek dink nie so nie.
So gaan tussen die kliënt, wat is die JavaScript
console, en jou werklike rekenaar, is oor die algemeen
iets wat soort van buite perke, as jy
sal, soort deur die aard van the-- dit is soort van 'n ontwerp ding,
maar jy probeer om die leser apart te hou van werklike die gebruiker se rekenaar.
Oor die algemeen, die enigste ding wat jy kan is toegang is die mikrofoon of die kamera.
Jy is nie in staat om, ek dink nie, gebruik Pro Tools.
As jy egter geskep 'n spoor in Pro Tools,
uitgevoer dat jy kan laai wat hier, filter, byvoorbeeld,
proses wat, en teken wat in 'n Audio Destination-- of, no-- n Bol
Verwerker Node.
En dan van daar af, jy kan uitvoer wat tot SoundCloud, jy
kan dit in 'n e-pos te stuur, of wat jy wil van daar af.
>> Maar daar is 'n soort van 'n effense versperring tussen die maak van musiek op jou rekenaar
en die maak van musiek online.
>> SAM GREEN: En dit is nie uniek aan hierdie API.
Dit is 'n kenmerk van sekuriteit Chrome, en Ek dink elke ander moderne leser.
Die leser is self-vervat.
So byvoorbeeld, 'n web bladsy kan nie gebruik JavaScript om die klank te draai
op die luidsprekers, byvoorbeeld.
Of dit kan nie jou rekenaar afskakel.
En daar is geen intermediêre punt tussen dié twee dinge, regs,
so óf jy het 'n volledige onttrekking,
of jy die oop sekuriteit fout van die verhuring
'n programmeerder met 'n slegte bedoelings doen wat hulle wil met jou laptop.
En dit is hoekom Chrome is self-vervat.
>> HUGH Zabriskie: Ja.
Maak wat sin maak?
Cool, cool.
Ek is net gaan om te toon 'n voorbeeld van een.
Dit is baie soos ver as wat jy kry, in terme
toegang tot die gebruiker se rekenaar.
As jy 'n USB sleutelbord ingeprop in, jy kan iets gebruik het die Web
MIDI API, wat ons sal nie regtig praat oor hier,
maar dit is 'n ander API wat weer gebou in minstens Chrome--,
dit is hoekom ons is lief vir Chrome-- Ek dink Firefox of Safari,
dit is 'n maklike ding om te google-- verskillende blaaiers het
verskillende ondersteuning waarvoor APIs hulle geïmplementeer word.
Maar as jy wil om aan te sluit in 'n sleutelbord en werk met die inligting,
soort stuur die sleutelbord inligting oor die rekenaar
en gebruik dan dat aanlyn, hierdie API is waar jy wil werk nie.
>> Koel.
OK.
So, vinnig beweeg op hier.
Hoe doen ons op tyd?
>> Spreker 1: Sowat 15.
>> HUGH Zabriskie: 15 minute oor?
OK, cool.
So sal ons voor hier ras.
>> So basies, die belangrikste punt van dink van hierdie as 'n pyplyn
is dat elke stap in die pyplyn is 'n reeks van klank nodes.
Ons bron, kom ons sê, is 'n ossillator.
Ons moet 'n ossillator node skep.
En dit is net 'n soort van die min function--
en hulle is almal gebaseer uit van die klank konteks hier.
>> GEHOOR: Wanneer dit gesê ossillator, beteken dit
dit is eintlik letterlik gaan van twee verskillende pole heen en weer?
>> HUGH Zabriskie: Nee, dit is soos n digitale voorstelling.
Dit is eintlik in C ++ geïmplementeer.
Ek het eintlik nie weet wat die specs van hoe dit eintlik is geïmplementeer,
Maar dit het alles werk as binêre data.
Eintlik, ja.
Dit sou sê, ek kon eintlik, as jy belangstel,
Ek kon 'n bietjie meer aan jou stuur inligting oor hoe golfvorms
gehou met 'n digitale formaat.
OK, cool.
>> So ons genereer 'n toon soos 'n sine waai of iets soos dit, miskien
440 Hertz.
Ons skep 'n ossillator.
As ons wil hê dat die volume te stel, ons koppel niks om 'n GainNode,
wat ons kan doen met .creategain.
Dit stel jou volume.
Jy kan gebeur dat op enige van die ander options-- goed,
so 'n klank buffer bron node is waar jy dalk
stoor 'n MP3 dat jy in het gelaai.
>> Biquad filter is vir die filter as jy wil al die basis uit te neem
van 'n lied, of iets soos dit.
God verbied wat jy wil neem die basis van 'n lied.
En AudioDestination node is, weer, soos waar ons finalisering is.
As jy ooit wil sien al die verskillende moontlike opsies,
gaan net na die blad en laat die motor-volledige kom.
En as jy te skep, sal jy sien al die verskillende dinge wat jy kan skep.
Jy kan dinamiese skep script verwerkers,
Ek weet nie eens wat dit is, vir die meng kanaal samesmeltings
en kanaal ters en alles wat.
Koel.
>> So dit is net 'n voorbeeld van 'n pyplyn.
Het ons so drie bronne kom.
Miskien is hierdie is golfvorms, Miskien is hierdie is MP3s.
Een gaan deur 'n filter, 'n ander mens se
kry verdraai ander 'n mens se panning links en regs.
Jy kan allerhande dinge te doen en hulle almal kry gemeng om saam
en dan kom uit die klank aan die einde, as bestemming.
Dit is 'n voorbeeld van wat meer ingewikkeld Web Audio-kode lyk.
Jy skep al hierdie verskillende voorwerpe reg here--
Ek is nie seker van hierdie.
Nee, is dit nie in zoom.
OK.
>> SAM GREEN: Jy doen Control, Scroll-Up.
HUGH Zabriskie: Control Scroll--
SAM GREEN: Nee, nee.
Control--
>> HUGH Zabriskie: O, beheer, Scroll?
O, Gotcha.
Ja.
Sjoe, nope, nope.
OK.
Ek sal dit nie doen nie.
>> So ja, in hierdie eerste artikel hier, jy sien
ons skep al hierdie verskillende nodes uit die konteks.
Ons net hulle piece saam in die tweede deel
hierdie funksie genoem Connect.
Dit is 'n baie belangrike funksie in Web Audio.
Dit beteken net een keer jy gedoen het iets met die klank in een knoop,
dit aan die volgende knoop.
So het ons die bron, is dit verbind tot die ontleder,
die ontleder doen iets met dit, dit gaan om die vervorming, en so aan,
en na die bestemming aan die onderkant regs hier.
Koel.
OK, so ons sal bly beweeg aan.
>> Die pipeline-- weer hierdie is die mees algemene pyplyne,
so ons praat oor al hierdie dinge soos vervorming, panning, al hierdie dinge.
As jy regtig belangstel in die gebruik van dinge Pro Tools,
diegene wat jy waarskynlik belangstel.
Indien nie, miskien het jy net wil die klank te speel,
of dalk net wil hê jy moet stel die volume op die klank.
Dit is die mees algemene soort twee van pypleidings in klank produksie.
>> Weereens, die maniere waarop jy kan dit vat in as 'n oscillator-- so, laat
doen 'n demo van daardie reg hier.
So ons gaan na 'n te skep eenvoudige klank konteks hier,
en van dat ons gaan ons ossillator te skep.
So dit is, weer, ons is net gaan roep Skep Ossillator.
Ons gaan 'n frekwensie ingestel op dat 440 Hertz, almal se gunsteling.
Dan koppel ons die bestemming point-- wat die spreker, so
die konteks bestemming.
Ten slotte, ons net sê, begin nul sekondes van nou af, en ons het klink?
>> [Lui]
>> HUGH Zabriskie: Hier gaan ons.
Dit is net 'n sinusgolf.
OK, cool.
En dan sal ons stop nie.
>> GEHOOR: Waar het dat terugvoering vandaan?
>> HUGH Zabriskie: Die terugvoer?
Ag, waarskynlik ons ​​mikrofone.
So ja, dit is hoe jy dit doen.
En eintlik, as ek het dit hardloop, jy
kon die frekwensie het waarde as dit loop,
so dit is 'n prettige ding om te speel.
Koel.
Dit is altyd 'n pragtige een aan te bied.
>> SAM GREEN: Ons het nie dink oor wat, het ons?
HUGH Zabriskie: Ja, dit is 'n nare een.
So, buffer loading-- Ek sal 'n bewys voorbeeld van wat aan die einde.
Dit is 'n MP3 laai.
En mikrofoon, net 'n funksie te gebruik wat jy genoem Navigator.getUserMedia ()
om toegang tot die gebruiker se versoek mikrofoon vir daardie inligting.
>> Hier is die filter, sal ek hou net die beweging van hierdie.
Dit is redelik hoë vlak, maar filters net jou toelaat om
>> [Piep]
Filter kan jy ook om dinge soos pienk skep
geraas, bruin geraas, wit geraas.
As jy wil suiwer geraas, te skep wat Sommige mense hou om te speel met,
kan jy Web Audio gebruik filter om dit te doen.
>> Audio Panning-- so dink as jy skryf 'n spel
en jy wil die klank te klink soos dit kom, soos,
skiet oor die skerm, jy kan die panning van die klank gebruik
om hierdie soort van cone skep, wat like-- dit is redelik Mathy,
maar dit is eintlik regtig koel as jy dit werk,
en daar is 'n paar goeie tutoriale op dit kan ek jou stuur nie.
Basies, kan jy soort van die skep van die klank
van iets gaan deur in 'n 3D manier.
En as jy 'n DJ rente, jy kan begin meng en kruis vervaag liedjies.
>> Dit is net 'n paar baie basiese kode, basies wat ek gedoen het voordat.
Dit stel die volume van die ossillator, so skep ons ons ossillator
wat skep die golfvorm.
Ons maak ons ​​GainNode, stel ons frekwensie,
en dan maak die ossillator om die GainNode, wat dan verander basies
hoeveel sein deurgelaat.
Maar regtig, dit is 'n digitale ding, so dit is meer just-- ja.
Dit is nie wat gebeur het, was maar dit is wat gebeur in die werklike lewe
met 'n wins.
>> GEHOOR: --quantization van die parameter volume?
HUGH Zabriskie: Jammer?
GEHOOR: Is dit 'n gekwantiseerde parameter volume?
HUGH Zabriskie: Ja.
En dit is een ding wat ek is regtig gebrekkig in my kennis,
hoe kry werk op 'n digitale vlak.
Ek weet met die werklike seine, dit is basies
beheer hoeveel jy uitbreiding van die sein.
So, ja.
Ek stuur jou meer inligting oor dat omdat ek eintlik nuuskierig wil wees
om meer oor die leer ken.
Maar basies die parameters is, die een is die fold--
harder signal-- en nul is geen sein, of jy sal 'n geluid hoor nie.
Ons sal demo tyd slaan vir dat, omdat dit is basies wat ek gedoen het voordat.
En weer, die Context.Destination is die klank bestemming node.
Awesome, OK.
>> So ek gaan 'n vinnige twee demos te doen.
Hoe doen ons op tyd?
>> Spreker 1: sowat 10 minute.
>> HUGH Zabriskie: 10 minute?
Groot!
Awesome.
>> Dus is die eerste een wat ek gaan nie, is dit genoem My gunsteling liedjie.
So dit is net 'n bietjie HTML JavaScript.
Ons gaan twee knoppies het op die bladsy speel my gunsteling liedjie
en stop my gunsteling liedjie.
Ek sal dit verander.
>> GEHOOR: Bedek jou mikrofoon.
>> HUGH Zabriskie: Ja.
En ek het hier gelaai 'n script wat basically--
en dit is werklik nuttig vir die laai 'n MP3,
so dit maak net laai MP3s manier om vinniger.
Dit is basies net 'n wrapper.
Dit maak net die proses van laai in MP3s baie vinniger,
jy andersins gebruik HTTP-versoek, soort van soos wat ons doen
oor die huidige stukkie stel met Server.
Dit is regtig lelik, jy wil nie om dit te doen.
>> So hierdie man, Boris KMO, het 'n baie nuttige klein instrument genoem BufferLoader.
Al wat jy doen is eenvoudig slaag dit die konteks, jy het dit 'n list-- slaag
of, ja, is dit 'n lys in JavaScript?
SAM GREEN: 'n skikking.
HUGH Zabriskie: O, dit is 'n skikking, dit is reg.
Dit is 'n verskeidenheid van paaie om verskillende lêers.
En dan moet jy dit 'n funksie te slaag.
Dit is die terugbel ons praat oor met asynchrone laai.
Dit sal genoem word Sodra die lêers gelaai.
En dat funksie wat genoem word wanneer die lêer se gelaaide neem as 'n omtrek
'n verskeidenheid van gelaaide buffers.
So wat gebeur hier.
Basies, BufferList is gaan een value-- wees
of dit gaan om 'n verskeidenheid van wees lengte een wat in indeks in dit
nul die hele gelaai lêer van die MP3.
So, wat ek doen wanneer ek klaar laai is, het ek net
skep 'n buffer bron, wat is 'n klank buffer bron node.
Die volgende stap is ek in die laai source.buffer as die volle gelaaide buffer
uit die BufferList-- dit is 'n baie buffers--
en dan kan jy dit klank te verbind buffer na die bestemming.
So wat dit gaan doen is net eenvoudig die MP3
reguit deur na die uitset, en dadelik begin dit
op om hierdie oproep.
>> Cool, so laat ons sien dit gebeur in aksie.
My [onhoorbaar] hier, laat ons sien.
So ek is net gaan om te begin 'n basiese bediener.
Dit is iets wat jy hoef te doen as jy
versoeke vir die laai van lêers.
Ek gaan 'n basiese bediener begin.
Dit is basies jou hele PSET nou in een lyn,
maar dit is net die begin van 'n bediener op poort 80/80.
So ons gaan oor hier, ons gaan om te laai 80/80,
ons gaan om te gaan na my gunsteling liedjie.
So as ek getref "Play my gunsteling liedjie "reg nou,
dit gaan om te laai my gunsteling liedjie en speel it--
[MUSIEK - die aasvoëls, "lewe in die vinnige LANE "]
--which gebeur om te wees "Lewe in die Fast Lane "Teen die Eagles.
Nou, ek kon getref "Stop my gunsteling liedjie "en speel dit.
>> [MUSIEK - die aasvoëls, "lewe in die vinnige LANE "]
>> En as ek gaan oor om te troos, want Ek gebruik 'n globale veranderlike hier
om tred te hou eintlik hou van hierdie waarde, is dit sal nou erken in die konsole.
Sodat dit outomaties skep vir my.
So dit is wat nou speel, en ek kan net noem source.stop ()
op daardie.
Wel, jy weet wat?
Net so julle ouens het gehoor hierdie song-- jy dalk hierdie lied erken.
>> [MUSIEK - Rick Astley, "nooit sal GEE JY OP"]
[MUSIEK - die aasvoëls, "lewe in die vinnige LANE "]
Ons het nou al is rick rolled.
OK, groot, beweeg aan.
Koel.
So dit is basies 'n voorbeeld van net hoe jy kan 'n MP3 laai file--
[MUSIEK - die aasvoëls, "lewe in die vinnige LANE "]
--and speel dit, en stop en begin dit.
Ek kon 'n baie meer gedoen het [onhoorbaar]
>> Die laaste een wat ek sal doen, is, Ek sal jou wys 'n [onhoorbaar].
>> [Speel van musiek]
>> Dit is soos, ogg.wave.mp3.
Ek dink, as ek reg onthou, Ek het loop in 'n paar kwessies met .m4a,
maar ek is nie seker oor dit.
Ek dink mp3.wave--
>> [MUSIEK - Rick Astley, "nooit sal GEE JY OP"]
>> OK, groot.
Ek sou nie sê dat.
In elk geval, hallo.
So ons het hierdie oop.
So nou al wat ek doen is ek basies geskep 'n basiese sintaks vir die skep van musiek.
So as ek iets doen, soos, voeg G4 op 1 2, wat dit beteken, is dat
voeg die klavier note, G4, wat is die vierde G
op die klavier uit die bodem.
So dit is soort van MIDI praat, so vir diegene wat musiek gebaseer is,
dit is net MIDI notas.
>> GEHOOR: Dit is die G van die Midde-C, reg?
>> HUGH Zabriskie: Dit is die G bo Midde C, dit is reg.
>> GEHOOR: Bo Midde C.
>> HUGH Zabriskie: Ja.
Eintlik, ja.
Ek dink ek eintlik gemaak dit een [onhoorbaar],
so dit kan 'n oktaaf ​​hoër as dié nie.
So laat ons sien.
As ek getref Play--
[Herhalende KLAVIER NOTA]
--we're gaan hoor.
Die idee is dat dit werk net soos 'n command line sou
so as ek op en af ​​te gaan op my sleutelbord, jy
kan terug gaan na vorige beveel, wat is baie handig.
En onder is my lys van liedjies, wat al loop is op lus.
>> GEHOOR: Jy is die aanvaarding van die 88-sleutel sleutelbord op daardie, reg?
>> HUGH Zabriskie: Die vraag was, Ek neem aan 'n 88-sleutel sleutelbord,
en ja, ek is nie.
Wat ek gedoen het, is ek basies het 88 monsters
van die klavier, een vir elke noot.
En so elke keer as jy van nou af hoor 'n aantekening,
wat is eintlik 'n lus wat lyk like-- hierdie is om gespeel op loop,
so vir elke noot, dit is hardloop.
Wat gebeur is, het ek skep 'n buffer weer
Ek skep 'n wins node om die volume te stel.
Dit is net 'n baie ingewikkelde manier om te sê ek
stoor die buffer in 'n source.buffer.
Ek gee dit die wins, ek verbind dit aan die wins,
die wins is verbind tot die uitvoer, en dan speel ek dit.
So dit is soort van die proses van die neem van 'n buffer bron.
>> GEHOOR: Kan jy werklik neem dat droë klank en maak dit nat [onhoorbaar]?
>> HUGH Zabriskie: Jy kan, ja.
Daar is re-werkwoord, daar is vertraging, ondergang.
Jy kan basies sit iets in tussen in daardie broodjie of-- goed,
pyplyn is 'n beter metafoor, maar jy kan enigiets in daardie voeg.
Koel.
>> So sal ek die demo voltooi hier om 'n gevoel te gee jy
van net die groot aantal kere wat jy kan daardie funksie alles op een slag te hardloop.
So ek gaan om dit te verwyder.
Ek gaan 'n kragopwekker te skep that-- basies wat does-- dit is regtig
soort van 'n ingewikkelde syntax-- maar dit is gaan notas genereer op die vlieg,
en net begin speel hulle as dit evalueer hulle.
[INTERPOSING KLAVIER]
>> So kan ons maak net hier 'n bietjie musiek.
[INTERPOSING KLAVIER]
>> So, wat hierdie opdrag doen, byvoorbeeld, is
dit neem die drie notas vir die klavier en sit hulle dan op B3.
Dit sintaksis kan maak 'n bietjie meer sin
om diegene wat 'n musiek agtergrond hier.
>> Ek kan 'n kick drum voeg.
Ek kan--
>> [INTERPOSING INSTRUMENTE]
>> --just speel rond met dit.
>> Sodat jy kan make--
[INTERPOSING INSTRUMENTE]
Dat 'n mens 'n bietjie meer irriterende.
[INTERPOSING INSTRUMENTE]
>> So wat lukraak voeg 'n droë simbaal elke 16 noot, met 'n 16%
[Onhoorbaar].
>> [INTERPOSING INSTRUMENTE]
>> Ja, so die manier waarop hierdie works-- dit is altyd in 4: 4.
[INTERPOSING INSTRUMENTE]
>> Ja, so die vier kwartale, en 16/8.
[INTERPOSING INSTRUMENTE]
>> So op die gemiddelde, kry jy 60% hits op die 16de notas.
>> In elk geval, dit was net soort om te wys af
sommige van die dinge wat jy kan bou met die Web Audio API.
Dit is werklik 'n kragtige, dit is regtig 'n vinnige, en jy kan 'n baie van die koel dinge
met dit.
So weer, enige vrae wat jy het, e-pos myself-- Hugh-- of Sam,
en eerlik, Google het 'n ton van goeie hulpbronne.
Enige laaste vrae?
Ja.
>> GEHOOR: So jy kan toegang die ingeboude mikrofoon.
Wat gebeur as jy wou gebruik 'n beter mikrofoon?
HUGH Zabriskie: As jy wil beter mikrofoon te gebruik?
So weer, dit is deel van die abstraksie tussen Chrome
en die res van jou rekenaar.
Tensy dit is beskikbaar deur 'n API, soos Web MIDI API,
jy kan waarskynlik 'n paar hacks te vind, maar oor die algemeen nie as haalbaar.
>> SAM GREEN: Jy kan also-- al die Chrome weet
is wat jou standaard mikrofoon is, en dit wat toegang.
So as jy 'n mikrofoon het jy kon stel as standaard mikrofoon se rekenaar,
jy kan dit op die manier toegang en dit sou waarskynlik werk.
HUGH Zabriskie: Dit is 'n goeie punt.
Ek het nog nooit probeer nie, maar jy dalk in staat wees om die soort
of-- as jy die insette spreker lei, jy dalk in staat wees om dit te doen, ja.
>> Enige laaste vrae?
Koel.
Wel dankie ouens soveel vir jou kyk.
Ek is Hugh.
SAM GREEN: Ek is Sam.
HUGH Zabriskie: En dit is CS50.