>> SAM GREEN: Hej, alle.
Velkommen til vores seminar.
Mit navn er Sam.
HUGH Zabriskie: Jeg er Hugh.
SAM GREEN: Og vi kommer til at tale i dag om JavaScript og Web Audio API.
Blot for at starte, dette er en skitse af vores dagsorden for seminaret.
Vi vil starte med at tale om hvorfor du bør være interesseret i Web
Audio API, hvorfor er JavaScript det sprog, du har brug for det,
og derefter snakke om JavaScript essentials-- så ligesom,
lede dig gennem nogle grundlæggende i sproget,
og derefter tale om audio API på et højt niveau.
Derefter vil Hugh tale om nogle af de stadier af lydproduktion
og derefter demo denne awesome sequencer projekt, han byggede og vise dig koden.
Og så vil vi have tid til spørgsmål i slutningen for mennesker
der er her bor.
>> HUGH Zabriskie: Cool.
>> SAM GRØN: Cool.
>> HUGH Zabriskie: Cool.
Jeg vil sikkerhedskopiere.
>> SAM GREEN: Så første ting først.
Så en af ​​de store ting om Web Audio API
er, at der ikke er nogen opsætning nødvendig.
Det kommer indbygget i de fleste moderne browsere,
herunder Chrome, Edge, en hel bundt af others-- alle dem
at store dele af folk bruger i dag.
Så der er ingen sat op, bortset fra blot at få
en webserver gå, for dig til at komme i gang at arbejde
på dit projekt, som er fantastisk.
>> Vi anbefaler temmelig stærkt, at du overveje
bruger Chrome for JavaScript webudvikling,
bare fordi dens udvikleren værktøjer er virkelig stærk.
Som et eksempel på netop, hvad vi mener ved at sige åbne din JavaScript
console-- hvis du går ind Chrome og du ser på en webside,
og du venstre klik Undersøg Element, og derefter
du går til denne lille drop-down lige her, og du klikker på konsol,
vil du se, hvad der åbner op ser meget gerne en kommandoprompt, som du
måske se på din Mac, eller på ID.
Og ligesom det, vi kan typen kommandoer her, ligesom Klar,
og andre kommandoer som dette.
Vi kan skabe variabler, som vi vil se senere i JavaScript.
Og så noget vi kan gøre i JavaScript, kan vi gøre med konsollen,
og det er en super smart måde at begynde at spille rundt med API'er
og få fortrolig med JavaScript ret off the bat.
Ingen opsætning nødvendig, som er virkelig rart.
Afkøle.
Awesome.
>> Så bare en ting mere at tilføje.
Hvis du har nogen questions-- der er mange af jer, der er her ikke leve,
velkommen til at kontakte os-- disse er vores e-mail-adresser.
Hvis du har spørgsmål du ikke ønsker at spørge os,
lignende, åh jeg har en bug i min kode, eller noget
der er lidt mere specifik, måske Google det først.
Der er en masse gode ressourcer om Web Audio API derude.
Det er virkelig godt dokumenteret og det er at være
anvendes af et ton af mennesker i industri, og folk, der er bare
bygge sjove ting for sig selv.
Så der skulle være en masse af ressourcer derude.
Awesome.
>> Cool, så hvorfor Web Audio API?
Diagrammet er lidt af en videreudvikling af den måde,
lyd på nettet er vokset over tid.
Bgsound var ligesom den oprindelige HTML-tag at Internet Explorer bruges til at støtte.
Det kun tilladt for temmelig grundlæggende lyde, funktionaliteten ikke var meget robust,
og du ikke kunne gøre kompliceret sekventering
eller kontrollere, hvornår lyd startede og stoppet meget robust.
Så det var ikke særlig veludviklet.
Så efter det, Flash kom along-- som
Jeg er sikker på, at du fyre er alle bekendt med Flash-- måske ikke, hvordan det fungerer,
men du har sikkert set det.
Du har fået til at opdatere din Flash Plug-in, alle den slags ting,
og som helt sikkert udvidet sortiment funktionalitet, der var til rådighed.
Men gør brugeren installere en plug-in er afgjort
en ulempe, herunder Flash i din ansøgning, ikke?
Fordi så er du afhængig af bruger går og finde denne plug-in,
og sandsynligvis bliver slået ud af dette ekstra trin
de skal tage for at bruge din app.
Og så er der kunne være en opdatering der vil bryde hele din ansøgning,
og det ender med at blive et mareridt for udvikleren, også.
Så det var en barrikade.
>> Og så efter der kom sammen, HTML audio-tag, som
er en funktion i mere moderne HTML-- som sikkert tilladt for en masse flere ting,
men selv de ting, du kunne gøre der var en lille smule begrænset bare
som følge af de ting at HTML var i stand til.
Så når JavaScript API, Web Audio API,
blev en standard praksis på tværs af browsere,
der virkelig udvidet sæt muligheder for udviklere
til virkelig at komme ind i bygningen cool stuff til internettet.
I lang tid havde der været virkelig robuste værktøjer
for native lydprogrammer, like-- alle kender GarageBand,
og så selvfølgelig er der mere professionelle audio blanding applikationer,
og den slags ting.
Men der var ikke en virkelig god Cloud-- ikke
Cloud, yeah, jeg gætte Cloud-- webbaseret platform
der ville tillade udviklere at bygge applikationer til mennesker
at gøre lydmixing.
Og da han vil vise dig senere, Web Audio API
giver mulighed for virkelig kraftfuld ting til at ske rigtig enkelt,
som er temmelig cool.
Så det er instruktionen til, hvorfor du skal se resten af ​​seminaret,
dybest set.
>> Og nu, jeg har tænkt mig at tale om nogle JavaScript-- bare grundlæggende elementer
af sproget, således at vi kan være på den samme side
når vi taler om den API lidt senere.
Afkøle.
>> Så dette er et resumé.
Jeg har glemt det var her.
Ja.
>> HUGH Zabriskie: Der er to dias her.
>> SAM GRØN: Dette er resuméet nogle af begrænsningerne
De andre bindende, gamle metoder.
Og så nu har vi disse ting.
Afkøle.
Awesome.
>> Så JavaScript væsentlige.
Første ting først, er der en temmelig signifikant forskel
i JavaScript versus i en sprog som C, på den måde,
at variabler er oprettet.
Så i C, er vi vant til at have at skrive vores variabler, ikke?
Og jeg mener ikke typen som skrive dem i, mener jeg typen
ligesom tildele dem et Motortype- betydning lignende, en int, en flyder, en char.
I C, blev vi virkelig brugt til skulle oprette en variabel
og derefter holde sig til denne type til hele tiden, at vi bruger denne variabel.
Og det er ikke nødvendigvis værre, men det er nok sværere at bruge.
En af de smarte funktioner JavaScript er
at variabler er, hvad der kaldes "dynamisk indtastet", som
betyder, at jeg kan lave en variabel med at syntaks,
varX lig 5, f.eks.
Der oprindeligt skaber et heltal variable--
lige under hood somewhere-- men jeg
kan ændre denne variabel at henvise til en streng
uden at gøre noget lignende at oprette en ny variabel.
Jeg behøver ikke at bekymre sig om den type forandring.
JavaScript ved, at den type s ændret, og der sker dynamisk.
>> Så der er fordele og ulemper til at
som enhver, der har arbejdet i JavaScript for et stykke tid måske kender.
Der er tidspunkter, hvor du måske ved et uheld
ændre typen af ​​en variabel og ikke håndtere denne type forandring,
og derefter du har JavaScript kan crash-- eller en undtagelse
kastes, fordi du vil have den forkert type, når du forventer en type.
Afkøle.
>> Så scoping-- som er ligesom, hvis vi huske de første uger i kurset,
refererer til hvor synlig en variabel er, og i hvilket område af koden.
Alt dette ligner meget til den måde, det ser ud i C.
Så variabler er generelt virkefelt inden krøllede parenteser i en funktion,
og så er der også globalt scoped variabler,
are-- hvis du skriver en variabel uden for en funktion,
det vil være synlige i hele teksten.
>> En forskel mellem JavaScript og C navnlig
er, at hvis du erklærer en global variabel overalt i en tekstfil
det er synligt i enhver funktion inden for denne tekstfil.
Det er korrekt, ikke?
>> HUGH Zabriskie: Yep.
>> SAM GRØN: Så det er også lidt lidt funky i forhold til C,
hvor vi altid skulle have vores variable definitioner over de steder
de blev brugt.
Det er ikke en regel, der er håndhævet længere, så en lille smule anderledes.
Og igen bare for at igen understreger, globale versus lokal variables--
meget lig C. Du kunne have to variabler med samme navn,
og har en af ​​deres navne skygget af en lokal variabel, hvis en af ​​dem
var global.
Så lignende form for problemer, som nogle af jer
kan have løbe ind i nogle af dit problem sætter hidtil.
Cool, så det er variable.
>> Kontrol flow, hvilket betyder lignende, hvis-else-- logiske stuff-- og sløjfer.
Så til at starte med, det er det, hvis-ellers udsagn ligne i JavaScript.
Placeringen af ​​de forskellige ting, på linjerne er ikke vigtigt.
Dette er blot et af de konventioner for den måde, vi strukturen kode.
Ligesom i C, har vi en "Hvis", en parentes erklæring.
Det er ikke det, jeg mente at gøre.
Jeg gjorde det igen.
>> HUGH Zabriskie: Forsøger at afslutte?
SAM GRØN: Nej, jeg er prøver bare at zoome ind.
Det betyder ikke noget.
>> Så har vi et "hvis" erklæring og Vi har en tilstand inde i det
der evalueres til sandt eller falsk, og som bestemmer, hvorvidt
vi går ind, at blok af kode.
Og ligeledes har vi et andet-hvis og en anden, ligesom vi er vant til i C.
>> Du bør også være temmelig komfortabel ret off the bat med sløjfer,
fordi de også ser meget gerne C ser ud.
Men du vil opdage igen, at vi har, i stedet for int startværdier,
vi har Var startværdier.
Og jeg tror du har være omhyggelig med at gøre
at du ikke ændre værdien af I fra en int til en streng,
for eksempel, fordi det kommer til at forårsage underlige opførsel du måske ikke
forventer.
Men det skal se temmelig velkendt, så godt.
>> Så dette er, hvor tingene begynder at få en lille smule skør i JavaScript
for en person, der går fra en baggrund af C. Der er funktioner
i JavaScript, og der er en måde at erklære en funktion, der ser
slags ligner C, og så er der en anden, der
ser lidt anderledes ud.
>> Den første version, som vi kan se her,
er lidt C-lignende, hvor vi sige, det er en funktion,
give den et navn, giver antallet af argumenter,
og derefter indholdet af funktionen gå ind disse krøllede parenteser.
Vi vil se et eksempel på argumenter på blot et sekund.
>> Hvorimod på den næste linje, ser vi, åh, her er en variabel kaldet "minFunktion,"
og vi lig det til denne generisk thing-- function-- som
ikke synes at have noget foregår.
Grunden til, at der er anderledes end C er, at JavaScript
er det, der kaldes et funktionelt sprog, eller har funktionelle elementer, hvilket betyder
der fungerer faktisk værdier.
Og det betyder, at vi kan sætte en variabel til en funktion lig
og derefter flytte denne funktion rundt, passerer det som et argument,
gøre alle slags ting ligesom med funktioner.
>> En anden ting at note-- funktioner skrives
med et bestemt antal argumenter.
Vi vil se et eksempel på en funktion med et argument om det næste dias.
Men JavaScript vil ikke råber på dig, hvis du prøver
at bruge en funktion med forkert antal argumenter.
Det vil bare gøre sit bedste for at gøre gør, hvilket betyder, at hvis du passerer,
du kalder en funktion, der forventer et argument med noget argument, alt,
vil ske, er det vil gøre sit bedste at forsøge at udføre denne kode,
og hvis det i sidste ende løber ind en undtagelse eller en fejl,
det vil kaste denne undtagelse og bare holde going-- hvilket er blot en af ​​de måder,
at JavaScript fungerer.
Ja.
>> PUBLIKUM: Hvad sker der, hvis der er for mange argumenter?
SAM GRØN: Så Spørgsmålet var, hvad der sker
hvis der er for mange argumenter?
Og svaret er, at JavaScript vil bare
ignorere dem, der er efter dem, det forventer.
Det vil prøve at udføre den funktion kalder som hvis det var netop de to første.
Højre?
>> HUGH Zabriskie: Det er rigtigt, ja.
Tilsvarende, hvis der er for få argumenter,
det bare sådan giver null til alle argumenter det ikke har nogen værdier
for.
>> SAM GREEN: som kan faktisk være praktisk, hvis du
ønsker at skrive en funktion, tager et variabelt antal argumenter.
Du kan indstille standardværdier i definitionen af ​​funktionen,
og det kan se bort fra, at input er der ikke.
Så jeg ønsker at tale en lille smule mere om dette sidste kugle
punkt, som er funktioner værdier.
Dette er et eksempel, der er en lille smule mildt sagt forbløffende
hvis du bare læse det, og tror ikke om, hvad der foregår for en anden.
Så lad os se lige på den første linje her.
Vi har denne variabel, f1, at vi siger er en funktion, der gør denne ting.
Og indholdet af funktionen er console.log ('hello').
Du kan tænke på console.log som JavaScript ækvivalent printf.
Så hvad der vil ske, er, hvis vi køre denne kode i vores browser,
det vil udskrive en streng.
Jeg kan påvise, at.
PUBLIKUM: Ved log, selv om, gør det mener det er at blive optaget et eller andet sted?
SAM GRØN: Ja.
Så jeg vil vise dig, hvad der vil ske.
Så spørgsmålet var, hvad betyder log betyde?
>> HUGH Zabriskie: Så console.log er ligesom printf for C.
SAM GREEN: Så console.log er som printf,
så hvis jeg har denne console.log ('Hello'), og jeg kalder det, strengen "hej"
bliver udskrevet til konsollen.
Dette er konsollen.
Det er ligesom printf, hvor udskriver til standard ud.
Og vi vil se i et minut, men dette er faktisk
henvisning til konsollen objektet, og at kalde en metode på det pågældende objekt.
Det vil være mere fornuftigt i et minut, når vi
komme til at tale om objekter i JavaScript,
men jeg troede, jeg ville blot nævne det.
HUGH Zabriskie: Vi er anvendes i C, right--
vi normalt skriver en stor program i main til at gøre noget.
Men hvad er cool i JavaScript er dig har denne form for tolk, der
kører i realtid, så det tager kun linje for linje,
det kan lige fortolke denne på stedet.
Og det holder styr på ting, der har kørt før,
så det er en temmelig nyttigt værktøj til at bruge console.log eller konsollen,
generelt, for bare at spille rundt med JavaScript.
>> SAM GREEN: Så gå tilbage til denne example-- den anden linje kode
her er temmelig svimlende i mit hoved.
Første gang jeg læser dette, Det var som, hvad sker der?
Så hvad der sker, er, dette funktion erklæring siger,
Jeg har en funktion kaldet F2 der er forventer et argument, f,
og så er det opkald, som funktion, f, som
blev videregivet til den som et argument med sig selv ingen argumenter.
Så kan der have været forvirrende.
Hvis vi forstår dette som F2 tager f1 som et argument, og derefter inde i F2,
f får called-- hvilket betyder at denne linje kode,
Efter disse to linjer af kode, resulterer i "hej"
blive udskrevet til konsollen.
>> At vi kan passere funktioner som værdier i nærheden
ender med at blive en af ​​de mest kraftfulde funktioner i JavaScript
som programmeringssprog.
Uden for alle de awesome ting det kan gøre,
ligesom en funktion af sprog hensyn til den måde
at det gør tingene let at programmere og tillader
for ting, der ikke er særligt velegnet til internettet,
funktionel programmering og funktionel programmering aspekter af JavaScript
er en af ​​de mest magtfulde begreber,
findes i JavaScript-- hvis du spørger mig.
Afkøle.
>> Så næste ting.
Ud over at være funktionelle, der er også elementer af JavaScript
som er objektorienteret, som er en af ​​de meget
populære buzz ord i datalogi.
Objektorienteret programmering er en virkelig populær ting.
JavaScript har en version af det, hvor jeg tror, ​​hver værdi er også
et objekt, hvilket betyder, at enhver genstand wraps samlet nogle antal værdier.
Så for værdier, der er enkle, ligesom et helt tal, som er lig med varX 5,
pågældende genstand netop wraps at én værdi.
>> Men vi kan også forestille sig en situation where-- vi kan tænke på situationer i C
hvor vi ønskede at gøre noget med structs,
for eksempel, at indhylle flere værdier sammen og gør
det virkelig nemt at passere tingene.
Det er, når et objekt er i JavaScript.
>> Det er vigtigt at huske når jeg siger, at genstande pakket
nogle antal værdier sammen, der fungerer også
værdier, hvilket betyder, at funktioner kan også være inde i et JavaScript objekt.
Og grunden til, at der er vigtigt er, at mens vi ofte
tænke på at kalde en fremgangsmåde på et objekt, der er
af et populært udtryk fra andre populære objekt-orienterede sprog,
en af ​​forskellene er, at alle, at en metode er i JavaScript
er en værdi gemt inde i et objekt som udfører en action-- eventuelt
ved hjælp af de andre værdier, der er inde af den pågældende genstand, men ikke nødvendigvis.
Så du kan forestille sig en situation, jeg gætte i en lille smule af en skør måde,
hvor du kaldes en metode til en objekt på et andet objekt, for eksempel.
Så det er en lille smule funky på den måde.
>> Og du kan også ændre de metoder, der er forbundet med et objekt
ved at tildele denne metode en ny funktion, som også er
temmelig forskellig fra andre objekt-orienterede sprog, hvor
når vi erklærer et objekt og instantiere den,
Vi kan ikke ændre de metoder, der er forbundet med det pågældende objekt længere.
Så det er temmelig anderledes.
Afkøle.
>> Så her er et eksempel, først, af et objekt i aktion.
Dette er, hvad der kaldes en generisk genstand, som
betyder, at det ikke har nogen bestemt navn, har ikke en klasse,
Det er blot nogle indpakning af værdier.
Og den måde, ser ud er, har vi denne ydre par krøllede seler her
der indikerer at JavaScript og sige, det er et objekt.
Værdierne inde i det er hver værdier inde
af objekt, der vikles sammen.
Og inde af den pågældende genstand, vi så har centrale værdipar,
hvor nøglen indeholde navnet af værdien indersiden af ​​objektet,
og den anden side-- modsat colon her--
er den faktiske værdi der bør opbevares.
>> Så du ser her, at vi har en nøgle kaldet fn med værdi Sam,
efterfulgt af et komma, siger videre til næste post.
Så en nøgle kaldes ln, med en værdi af grøn,
efterfulgt af et komma, efterfulgt af "print"
som vil have en funktionsværdi der kommer til at gøre denne linje kode.
Lad os tage et skridt tilbage og pakke, hvad der foregår her.
Så det er lidt kompliceret, og vi ser noget nyt
for første gang.
Den "denne" søgeord er den ny ting vi ser her, og hvad det betyder
er, refererer til den aktuelle objekt i omfang, ikke?
Så når vi siger, det peger helt tilbage
til hele denne object-- når vi gør this.fn,
vi kommer til at gå hele vejen tilbage til dette objekt, gå til fn værdi
og få Sam, træk det hele vejen tilbage, holde det her, og derefter gå videre.
>> PUBLIKUM: Så med hentning, er det gjort på grund af parameteren
definition?
SAM GRØN: Så spørgsmålet var, er det hentning gjort på grund af parameteren
definition?
Ja, absolut.
Hvad kommer til at ske her er, denne prik siger til JavaScript,
OK, jeg får en vis værdi fra dette objekt fra mig selv.
Og så er det vil kigge efter en post kaldet fn, og hvis den finder det,
Det vil vende tilbage, at value-- så, det er Sam.
Men jeg kunne også have indtastet noget, der ikke er defineret her,
og så ville det bare returnere undefined-- som
er en ting, at JavaScript kan gøre, hvilket kan have fordele,
men det er also-- hvis du laver en tastefejl, Det kan resultere i underlige fejl.
Så det vil bare prøve at finde uanset hvad du fortælle det til at finde
og det kommer ikke til at klage, hvis ikke finde den.
Det vil bare sige, jeg ikke finde det, og derefter gå videre.
Så det ville være udefineret, plus tom, plus efternavn.
Ja.
Og så kan vi se, at hvis vi kunne derefter gå ned og access--
og vi kalder tf.print () med parenteser.
Det kommer til at kalde det print funktion uden argumenter, ikke?
Men hvis vi lige sagt tf.print () semikolon, uden parentes,
alt, ville have gjort, er at trække ud funktionen fra værdien,
men faktisk ikke kaldte det.
Afkøle.
HUGH Zabriskie: Bør Vi gør et objekt?
SAM GREEN: Sure, lad os gøre det.
Så jeg kan flytte denne eksempel til konsollen.
Vi kan forestille os, at jeg har et objekt.
Så det er et simpelt objekt.
Dette er et objekt, der indeholder to værdier med to nøgler, to centrale værdi
par.
Så jeg kan derefter få adgang værdien lagres Indersiden af ​​objektet ved at gøre x.x1,
for eksempel, og jeg får 1 tilbage.
Ligeledes x.x2, får denne værdi tilbage.
>> Og nu er den virkelig cool ting er, jeg kan faktisk tilføje noget til dette objekt
efter jeg har oprettet det.
Så du kan forestille dig, lad os siger jeg har en funktion.
>> HUGH Zabriskie: Du nødt til at gøre Shift-Enter.
>> SAM GREEN: Åh, det er irriterende.
Hvad gjorde det ikke lide?
Oh.
Nu sker det.
Afkøle.
>> Så jeg har lige oprettet denne funktion, f, der
kommer til at gå til den aktuelle objekt og udskrive this.x1.
Så hvis jeg bare kalde f af selv, intet sker
ske, højre, fordi der ikke er x1 felt i objektet det henviser til.
Men, hvis jeg siger, x.f = f, og så er jeg kalder x.f (), vil jeg komme tilbage 1.
Denne funktion er f nu forbundet med objektet X,
som har en nøgle kaldet x1 forbundet med værdien 1,
så når vi kalder this.x1, er det kommer til at finde, hvad det er på udkig efter
og være i stand til at udskrive en værdi ud.
Så det er blot ét eksempel af form af de skøre ting
du kan gøre med objekter i JavaScript.
>> Så denne version var generisk version, mening
at vi har oprettet et objekt ved hjælp af denne parenteser notation-- tandbøjle notation,
rather-- og det er praktisk, hvis vi bare vil
en forekomst af et bestemt objekt, men hvad nu hvis vi ønsker at have mere end én
af samme art?
Og svaret på det Spørgsmålet er, er der ting
kaldet klasser i JavaScript så godt.
Vi kan skabe en funktion, gør en slags initialisering
til et fremmedlegeme, og vi vil sige, ligesom,
min class-- så navnet af den genanvendelige object--
lig funktion, der sætter det op.
Så hvad det ville svare at skaber et objekt,
ville være ligesom, krøllet tandbøjle, str, colon,
dette er en streng, semikolon, krøllede klammeparentes.
Det ville være den generiske objekt vi initialisere,
med den ene forskel er på næste linier skaber vi en prototype, som
betyder, at det er en standard nøgle, der vi føje til vores objekt,
har værdien vist her.
Hvilket betyder, at, når jeg opretter en ny eksempel på dette MinKlasse objekt,
det kommer til at have præ-bygget inde i det en værdi, der hedder str og en anden værdi
kaldet myPrint, som er kommer til at være en funktion.
Awesome.
>> Alle tiders.
Så den sidste ting at sige om JavaScript
er, at det er virkelig nyttigt for hvad kaldes asynkrone operationer.
Asynkron betyder, at vi kan vente nogle drift
at fuldføre, før vi flytter på, men gå videre, mens vi venter
og så har noget at ske senere.
Og hvad jeg mener med det er, du kan forestille sig en situation, hvor
du sende en anmodning til nogle webserveren sted,
og det kommer til at sende dig tilbage nogle store luns af data, ikke?
Og dit bruger kunne vente i mellemtiden for at det skal ske,
og intet kunne være foregår på det tidspunkt.
Men det er ikke en stor design, ikke?
Du ønsker ikke websiden til at fryse.
Hvad hvis brugeren ønsker at klik på en drop-down menu?
Det er ikke en stor design mønster.
I stedet er dybest set JavaScript gør er, siger,
OK, så gør denne operation asynkront.
Så ligesom, vent i baggrunden, og derefter, når operationen er færdig,
kalder tilbagekald function-- kalde en funktion,
gøre nogle action-- at signalere, at operation vi ventede på at ende
er ovre.
Og grunden til, at er super stærk er, vi kan gøre noget, passerer et argument,
gøre noget, og derefter vente at noget skal ske.
Så, når at noget færdig, kan vi kalde en tilbagekald.
Det er virkelig praktisk, fordi det lader os gøre ting med Web Audio API,
for eksempel, ligesom belastningen en lydfil fra en ekstern server
uden at skulle vente på Hele lydfil, der skal indlæses,
hvilket ville være virkelig dårligt for brugeroplevelsen.
Afkøle.
>> Sidste par noter om debugging, da dette
er en ting, du er nødt til at gøre som en del af dit projekt, garanteret.
Jeg nævnte JavaScript-konsol.
Det er en super nyttig funktion af alle moderne browsere,
Og vi virkelig opfordre dig til at få trygge ved at bruge din konsol,
Hvis du ønsker at få god til JavaScript.
Det er super praktisk til debugging, men det er også
virkelig nyttige for at regne ud af at bruge en API.
Det giver mulighed for virkelig let eksperimenter
uden at skulle skrive nogle kode, og derefter kompilere den.
Du behøver ikke at gøre alle disse trin.
Du kan bare skrive noget kode ind i en linje,
og få derefter øjeblikkelig feedback på om denne linje kode eller ej
worked-- meget praktisk.
>> Og også, bare en teknisk note-- JavaScript-konsollen er et eksempel
af en REPL-- så det er R-E-P-L, REPL, som står for læse, vurdere,
print loop.
Du kommer til at skrive nogle ting i, vil det læse, hvad du har skrevet i,
det vil evaluere det, og det vil udskrive output, og så det vil starte igen.
Der giver dig mulighed for hurtigt at gå i kredse iteration, som er virkelig cool.
>> Jeg gætter rigtig sidste note-- dette er den egentlige sidste bemærkning, ja.
Hvordan kan vi egentlig bruge JavaScript?
Så først, kan vi importerer det ved hjælp af et script-tag
på toppen eller bunden af ​​en HTML file-- overalt inde i en HTML-fil,
virkelig.
Og inden for en script-tag, der er to sub-måder at importere JavaScript.
Den første er ved at have en separat JavaScript-fil
at vi importerer i sin helhed, eller ved at have et område med kode som script
at starte, og derefter backslash script til slut.
Og så har vi bare skrive JavaScript inde i HTML-fil.
Det er de to måder.
Du kan ikke have det inde i HTML.
PUBLIKUM: Er en bedre end den anden?
SAM GREEN: Spørgsmålet var, er en bedre end den anden.
Så, ja, som en kodning stil praksis, og også det er ligesom et design praksis.
Der er to grunde hvorfor det kunne være bedre.
Den første er, det gør din kode en meget mere læsbar, hvis alle dine HTML
er på ét sted, alle dine CSS er i et andet sted, alle dine JavaScript
er i en tredje plads.
Højre?
Jeg synes vi skal allerede har talt om det i sections-- lignende CSS-- hvad
at is-- og det går ofte i en anden fil.
Så lignende form for koncept her.
Du kan også forestille sig, at JavaScript ville genbruges på mere end én
HTML-side, eller måske en mange HTML-sider,
og som har at JavaScript refactored i en
fil, som du kan importere til mere end ét sted
tillader, at koden måde mere at vedligeholde.
Du kan forestille dig at gøre en skifte til JavaScript
og at skulle ændre det i 100 forskellige filer.
Og i stedet kan vi bare ændre det i en, hvilket er langt mere kraftfuld.
Har jeg besvare dit spørgsmål?
Afkøle.
>> Vi kan også skrive i konsollen, som vi har nævnt før.
Og igen, en sidste note-- Web Audio er bygget i,
du behøver ikke at indlæse noget.
Afkøle.
Er der nogen spørgsmål, har du nogen flere spørgsmål om JavaScript,
før vi går videre?
>> PUBLIKUM: [uhørligt]
SAM GREEN: Okay, cool.
Så nu han kommer til at tale om API.
>> HUGH Zabriskie: Cool.
Tak, Sam.
>> SAM GRØN: Selvfølgelig.
HUGH Zabriskie: Awesome, så vi vil gå fra JavaScript.
Så vi har talt om nogle af de væsentlige punkter i JavaScript,
og dem er de variabler, funktioner, objekter, fungerer som variable,
asynkron læsning.
Disse er alle ting, som du vil se, som du bruger Web Lyd.
Så vi bare vil tale om det først på et højt niveau.
>> Det er en API, så det er noget der er bygget, da Sam sagde,
lige ind i JavaScript at du bruger i konsollen.
Og det er faktisk ligesom C ++ kode der virkelig er indbygget i Chrome
og Firefox, og alle disse browsere.
Så den vigtigste idé med Web Audio er, at du har
denne form for pipeline af lyd, ikke?
Så din lyddata kommer i en eller anden form.
>> Der er slags tre vigtigste forms-- du har oscillator, som
skaber en sinusbølge, cosinus bølge, vi kommer til at se, hvordan det fungerer.
En anden meget udbredt, selvfølgelig er en MP3.
Så måske du starter med en sang, og så skal du
ønsker at gøre nogle filtrering til denne og output
at-- der kunne være en mulig kilde.
Og så en virkelig cool den ene er mikrofonen.
Så du kan bruge nogle meget grundlæggende opkald i JavaScript
at få adgang til mikrofon, og så hvis du
ønskede at gøre en app som en pitch-detektor,
for eksempel, der tager i din stemme og tal ud
den pitch-- meget nem måde at det.
Du kan bare slags læse det i, finde ud af frekvens,
og derefter output et nummer.
Så vi vil se, hvordan det fungerer, så godt.
>> Destinationen er dybest set hvor lyddata udlæses.
Så generelt, det er ligesom din bærbare højttalere.
Andre muligheder er ligesom en ScriptProcessorNode--
vi vil komme til knudepunkter i et second-- men dybest set,
enten du lægger lyd ud gennem din computer via højttalere,
eller du er slags optage det, så du gemme det som lyddata.
Så måske hvis nogen skaber musik i din app, og derefter
du vil optage det, og måske gerne eksportere det til SoundCloud, for example--
det ville være en måde at gøre det.
Alle de sjove ting, som vi taler om,
sker mellem disse to punkter, hvor vi lægger i musikken
og derefter output det.
>> Så jeg har tænkt mig at tale om de fem stadier af lydproduktion i en anden.
Vi har denne ting kaldet en AudioContext, som
er denne lille wrapper vi ser her.
Dybest set, hvad AudioContext is-- hvis vi gå til JavaScript-konsol lige nu,
vi kan skabe en lige nu.
Blot et eksempel på REPL, ikke?
Vi læser, evaluere, og den udskriver.
>> AudioContext er en global stat.
Det er en struct, det er et objekt her, og det holder oplysninger
om ting, der foregår på skærmen relateret til lyd.
Et eksempel er den aktuelle tid.
Dette fortæller dig nummeret sekunder, meget præcist,
da den webside indlæst.
Så dette er en rigtig nyttig lille ejendom, som du kan bruge.
Det er læst only-- jeg tror faktisk du kan prøve at sætte det en værdi.
Det vil fortælle dig indstille det, og derefter, hvis du udskriver det
igen-- det faktisk ikke helt arbejde.
Så der er skrivebeskyttede egenskaber i JavaScript.
Det er virkelig nyttigt, hvis du slags synkronisering
en masse forskellige oplysninger, når du er
slags spille forskellige lyde.
>> En anden virkelig nyttige én er i denne sammenhæng destination.
Bestemt, hvis du er interesseret, skal prøve dette på egen konsol ret
nu.
Så dette er en AudioDestinationNode.
Dybest set, hvad det siger, er, hvor outputtet hen?
Så der er to reelle muligheder her.
Normalt standard er kun dine højttalere,
så AudioDestinationNode dybest set bare siger
der er nul udgange til lyden kommer ind, sendes til højttaleren.
Så generelt, ikke gør du nødt til at spille med det.
Hvis du er interesseret i faktisk bruger den ScriptProcessorNode til optagelse,
absolut skyde mig en e-mail senere, fordi det er
lidt mere kompliceret.
Men generelt, er du bare lidt udsende lyd i en eller anden form.
Så cool, vil vi hoppe tilbage her.
PUBLIKUM: Jeg er ked af.
HUGH Zabriskie: Ja.
PUBLIKUM: Jeg ved, du sagde at tale til dig senere om optagelse.
Kan du interface, der med Pro Tools?
>> HUGH Zabriskie: Med Pro Tools?
Lad os se.
Det tror jeg ikke.
Så går mellem klienten, som er JavaScript
konsol, og din faktiske computer, er generelt
noget, der er lidt af off grænser, hvis du
vil, venlig ved arten af ​​til-- det er sådan et design ting,
men du forsøger at holde browseren adskilt fra brugerens faktiske computer.
Generelt er den eneste, du er i stand til at adgang er mikrofonen eller kameraet.
Du er ikke i stand til, jeg tror ikke, at bruge Pro Tools.
Men hvis du har oprettet et spor i Pro Tools,
eksporteres, at man kunne indlæse det her, filtrere det, for eksempel,
proces, og optage det i en Audio Destination-- eller no-- en Sphere
Processor Node.
Og så derfra, kunne du eksportere det til SoundCloud, du
kunne sende den i en e-mail, eller hvad du vil derfra.
>> Men der er lidt af en svag barriere mellem lave musik på computeren
og lave musik online.
>> SAM GRØN: Og det er ikke enestående for denne API.
Det er en sikkerhedsfunktion i Chrome, og Jeg tror, ​​alle andre moderne browser.
Browseren er selvstændig.
Så for eksempel, kan en webside ikke bruge JavaScript til at slå lyden
på for dine højtalere, for eksempel.
Eller det kan ikke slukke for computeren.
Og der er ingen mellemliggende punkt mellem disse to ting, højre,
så enten du har en komplet abstraktion,
eller du åbner op for sikkerhedshul for at lade
en programmør med dårlige hensigter gøre hvad de vil med din bærbare computer.
Og det er derfor, Chrome er selvstændig.
>> HUGH Zabriskie: Ja.
Giver det mening?
Cool, cool.
Jeg skulle lige til at viser et eksempel på en.
Det er temmelig meget som langt som du får, i form
for adgang til brugerens computer.
Hvis du har et USB-tastatur tilsluttet, kan du bruge noget, der hedder Web
MIDI API, som vi ikke vil virkelig taler om her,
men det er en anden API, der er indbygget i mindst Chrome-- igen,
det er derfor, vi elsker Chrome-- Jeg tror Firefox eller Safari,
dette er en nem ting at google-- forskellige browsere har
anden støtte for hvilke API'er de har gennemført.
Men hvis du ønsker at tilslutte et tastatur og arbejde med disse oplysninger,
slags Send tastaturet oplysninger over til computeren
og derefter bruge det online, denne API er, hvor du ville arbejde der.
>> Afkøle.
OKAY.
Så hurtigt går videre her.
Hvordan gør vi til tiden?
>> SPEAKER 1: Omkring 15.
>> HUGH Zabriskie: 15 minutter tilbage?
OK, cool.
Så vi vil køre videre her.
>> Så dybest set, det vigtigste punkt i tænker på dette som en rørledning
er, at hvert trin i støbeskeen er en serie af audio knudepunkter.
Vores kilde, lad os sige, er en oscillator.
Vi er nødt til at skabe en oscillator node.
Og det er bare lidt af den lille function--
og de er alle baseret ud af audio sammenhæng her.
>> PUBLIKUM: Når det sagt oscillator, betyder det
Det er faktisk bogstaveligt går fra to forskellige poler frem og tilbage?
>> HUGH Zabriskie: Nej, det er ligesom en digital repræsentation.
Det er faktisk implementeret i C ++.
Jeg faktisk ikke kender specs af, hvordan det rent faktisk gennemført,
men alt dette arbejder som binære data.
Faktisk, ja.
Det ville være at sige, jeg kunne faktisk, hvis du er interesseret,
Jeg kunne sende dig lidt mere oplysninger om, hvordan kurver
holdes der et digitalt format.
OK, cool.
>> Så vi genererer en tone som en sinus bølge eller noget lignende, måske
440 Hertz.
Vi skaber en oscillator.
Hvis vi ønsker at indstille lydstyrken, vi forbinde noget til en GainNode,
som vi kunne gøre med .creategain.
Der sætter din volumen.
Du kan videregive denne på enhver på den anden options-- godt,
så en audiobuffer kilde node er, hvor du måske
opbevare en MP3, som du har lagt i.
>> Biquad filter er til filtrering, hvis du ønsker at tage alle basen ud
af en sang, eller noget lignende.
Gud forbyde du ønsker at tage bunden af ​​en sang.
Og AudioDestination node er, igen, ligesom hvor vores endelige udformning er.
Hvis du nogensinde interesseret i at se alle de forskellige muligheder,
bare gå til fanen, og lad auto-komplette komme op.
Og hvis du opretter, vil du se alle de forskellige ting, som du kan oprette.
Du kan oprette dynamiske script processorer,
Jeg ved ikke engang, hvad det er, til blanding kanal fusioner
og kanal splittere og alt det der.
Afkøle.
>> Så dette er blot en eksempel på en rørledning.
Så vi har tre kilder kommer ind.
Måske er disse bølgeformer, måske er disse MP3-filer.
Man kommer gennem en filter, en anden ens
blive forvrænget anden ens panorering venstre og højre.
Du kan gøre alle mulige ting og de alle få blandet rundt sammen,
og derefter kommer ud audio ved udgangen, som destination.
Dette er et eksempel på hvad mere kompliceret Web Audio kode ser ud.
Du skaber alle disse forskellige objekter lige her--
Jeg er ikke sikker på dette.
Nej, det gør ikke zoome ind.
OKAY.
>> SAM GREEN: Du gør Kontrol, Scroll-Up.
HUGH Zabriskie: Kontrol Scroll--
SAM GRØN: Nej, nej.
Kontrollere--
>> HUGH Zabriskie: Åh, Kontrol, Rul?
Åh, Gotcha.
Ja.
Wow, nope, nope.
OKAY.
Jeg vil ikke gøre det.
>> Så ja, i denne første sektion her, se dig
Vi skaber alle disse forskellige knuder ud af kontekst.
Vi er bare at stykke dem sammen i den anden del
af denne funktion kaldet Connect.
Det er en rigtig nøgle funktion i Web Lyd.
Det betyder blot, når du har gjort noget med lyden i en knude,
give det videre til det næste knudepunkt.
Så vi har kilden, det forbindelse til analysatoren,
analysatoren gør noget med det, det går til forvrængning og så videre,
og til destinationen nederst til højre her.
Afkøle.
OK, så vi vil holde bevæger sig på.
>> Den pipeline-- igen, disse er de mest almindelige rørledninger,
så vi taler om alle disse ting som forvrængning, panorering, alle disse ting.
Hvis du er virkelig interesseret i at bruge tingene Pro Tools,
dem sikkert interessere dig.
Hvis ikke, måske du bare ønsker at afspille lyden,
eller måske du bare ønsker at indstille lydstyrken på lyden.
Det er de to mest almindelige form af rørledninger i lydproduktion.
>> Igen, de måder, du kan tage det ind som oscillator-- så, lad os
gøre en demo af denne ret her.
Så vi kommer til at skabe en simpel lyd sammenhæng her,
og fra det vi vil at skabe vores oscillator.
Så det er, igen, vi er bare vil kalde Opret Oscillator.
Vi kommer til at indstille en frekvens på at, 440 Hertz, alles favorit.
Så vi slutte, at til destinationen point-- som er højttaleren, så
forbindelse destination.
Endelig har vi bare sige, start nul sekunder fra nu, og vi har lyd?
>> [RINGING]
>> HUGH Zabriskie: Her går vi.
Det er bare en sinuskurve.
OK, cool.
Og så vil vi stoppe det.
>> PUBLIKUM: Hvor gjorde at tilbagemeldinger fra?
>> HUGH Zabriskie: Tilbagemeldingerne?
Åh, sandsynligvis vore mikrofoner.
Så ja, det er hvordan du gør det.
Og faktisk, hvis jeg havde holdt det kørende, du
kunne have frekvensen værdi som det kører,
så det er en sjov ting at lege.
Afkøle.
Det er altid en dejlig en at præsentere.
>> SAM GREEN: Vi gjorde ikke tænker over det, vi?
HUGH Zabriskie: Ja, det er en grim en.
Så buffer loading-- jeg vil vise en eksempel på, at der på den bitre ende.
Det er at indlæse en MP3.
Og mikrofon, du bruger bare en funktion kaldes Navigator.getUserMedia ()
at anmode om adgang til brugerens mikrofon til disse oplysninger.
>> Her er filtrering, jeg vil bare holde flytte fra dette.
Dette er temmelig højt niveau, men filtre bare tillade dig at
>> [Bip]
Filtrering giver dig også mulighed at skabe ting som pink
støj, brun støj, hvid støj.
Hvis du ønsker at oprette ren støj, som nogle mennesker elsker at rode rundt med,
kan du bruge Web Audio filtrering til at gøre det.
>> Lyd Panning-- så forestille hvis du skriver et spil
og du vil have lyden til lyde som det kommer, ligesom,
skyde hen over skærmen, du kan bruge panorering af lyden
at skabe denne slags kegle, hvilket like-- det temmelig Mathy,
men det er faktisk rigtig cool, hvis du får det til at fungere,
og der er nogle gode tutorials på det jeg kan sende dig.
Dybest set, kan du slags af at skabe lyden
for at noget går med i en 3D måde.
Og hvis du har en DJ interesse, kan du begynde at blande og krydser fading sange.
>> Dette er blot nogle meget grundlæggende kode, dybest set, hvad jeg gjorde før.
Dette indstiller lydstyrken på oscillator, så vi skaber vores oscillator
som skaber bølgeform.
Vi skaber vores GainNode, sætte vores frekvens,
og tilslut derefter oscillator til GainNode, som derefter dybest set ændrer
hvor meget signal tilladt gennem.
Men virkelig, det er et digitalt ting, så det er mere bare-- ja.
Det er ikke, hvad der faktisk sker, men det er hvad der sker i det virkelige liv
med en gevinst.
>> PUBLIKUM: --quantization af parameteren volumen?
HUGH Zabriskie: Beklager?
PUBLIKUM: Er det en kvantiserede enhedsparameterblok?
HUGH Zabriskie: Ja.
Og det er en ting, jeg er virkelig mangelfuld på i min viden,
hvordan forstærkningen arbejder på en digital plan.
Jeg ved med faktiske signaler, er det dybest set
kontrollerende hvor meget du er forstærkning af signalet.
Så, ja.
Jeg sender dig mere information om at, fordi jeg ville være nysgerrig faktisk
at vide mere om det.
Men dybest set parametrene er, den ene er fold--
jo højere signal-- og nul er ikke signal, eller du vil ikke høre nogen lyd.
Vi vil springe demo tid til det, fordi Det er dybest set, hvad jeg gjorde før.
Og igen, Context.Destination er lyden destination node.
Awesome, OK.
>> Så jeg har tænkt mig at gøre en hurtig to demoer.
Hvordan gør vi til tiden?
>> SPEAKER 1: Ca. 10 minutter.
>> HUGH Zabriskie: 10 minutter?
Alle tiders!
Awesome.
>> Så den første, jeg har tænkt mig at gør, kaldes det Min yndlingssang.
Så dette er blot en lille HTML JavaScript.
Vi kommer til at have to knapper på siden spille min yndlingssang
og stoppe min yndlingssang.
Jeg vil ændre dette.
>> PUBLIKUM: Dæk dit mikrofon.
>> HUGH Zabriskie: Ja.
Og jeg har lagt i her et script, der basically--
og det er virkelig nyttigt for ilægning en MP3,
så dette bare gør lastning MP3'er måde hurtigere.
Det er dybest set bare en wrapper.
Det bare gør processen med lastning i MP3 meget hurtigere,
ellers du bruger HTTP-anmodning, lidt ligesom hvad vi foretog
på den aktuelle delt sæt med Server.
Det er virkelig grimt, du ønsker ikke at gøre det.
>> Så denne fyr, Boris små og mellemstore virksomheder, skrev en virkelig nyttigt lille værktøj kaldet BufferLoader.
Alt du skal gøre er simpelthen give det den kontekst, du passerer det en list--
eller, ja, det er en liste i JavaScript?
SAM GREEN: Et array.
HUGH Zabriskie: Åh, det er en matrix, det er rigtigt.
Det er en bred vifte af stier til forskellige filer.
Og så skal du give det en funktion.
Det er den tilbagekald vi talte om med asynkron læsning.
Det vil blive kaldt Når filerne er indlæst.
Og at funktion, kaldes, når filens indlæst tager en perimeter
et array af indlæste buffere.
Så der opstår her.
Dybest set, BufferList er vil være en value--
eller det vil være en bred vifte af længde en, der har i det i indeks
nul hele indlæst fil af MP3.
Så hvad jeg gør, når jeg er færdig læsning er, jeg simpelthen
skabe en buffer kilden, og som er en audiobuffer source node.
Det næste skridt er jeg indlæse i source.buffer som den fulde lastet buffer
fra BufferList-- Det er en masse buffers--
og så du tilslutter den lyd buffer til destinationen.
Så hvad det kommer til at gøre er simpelthen sætte MP3
lige igennem til udgangen, og start med det samme
efter at få denne indkaldelse.
>> Cool, så lad os se dette ske i aktion.
Min [uhørligt] her, lad os se.
Så jeg vil blot starte en grundlæggende server.
Det er noget, du skal gøre, hvis du er
gør anmodninger om indlæsning af filer.
Jeg har tænkt mig at starte en grundlæggende server.
Dette er dybest set hele din Pset lige nu i en linje,
men det er lige begyndt en server på port 80/80.
Så vi går over her, vi kommer til at indlæse 80/80,
vi kommer til at gå til Min yndlingssang.
Så hvis jeg ramte "Play min yndlingssang "lige nu,
det kommer til at indlæse min yndlingssang og spille det--
[MUSIC - Eagles, "Livet i FAST LANE "]
--which sker for at være "Livet i Fast Lane "af The Eagles.
Nu, jeg kunne ramme "Stop min yndlingssang "og afspille den.
>> [MUSIC - Eagles, "Livet i FAST LANE "]
>> Og hvis jeg går over til trøste, fordi Jeg brugte en global variabel herovre
at holde styr på denne værdi, er det faktisk vil nu blive anerkendt i konsollen.
Så det automatisk skaber for mig.
Så det er, hvad der spiller lige nu, og jeg kan bare ringe source.stop ()
på det.
Tja, ved du hvad?
Bare så du fyre har hørt dette song-- du måske genkende denne sang.
>> [MUSIC - Rick Astley, "ALDRIG ville give DU OP "]
[MUSIC - Eagles, "Livet i FAST LANE "]
Vi har nu alle blevet Rickrolled.
OK, store, bevæger sig på.
Afkøle.
Så det er dybest set et eksempel på bare hvordan du kan indlæse en MP3 file--
[MUSIC - Eagles, "Livet i FAST LANE "]
DET-- spille det, og stoppe og starte den.
Jeg kunne have gjort meget mere [uhørligt]
>> Den sidste jeg vil gøre er, Jeg vil vise dig en [uhørligt].
>> [Musik spiller]
>> Det er ligesom, ogg.wave.mp3.
Jeg tror, ​​hvis jeg husker rigtigt, Jeg har kørt ind i nogle problemer med .m4a,
men jeg er ikke sikker på om det.
Jeg tror mp3.wave--
>> [MUSIC - Rick Astley, "ALDRIG ville give DU OP "]
>> OK, stor.
Jeg skulle ikke have sagt det.
Anyway, hej.
Så vi har denne åbne.
Så nu alt jeg gør er, jeg dybest set skabt en grundlæggende syntaks for at skabe musik.
Så hvis jeg gør noget lignende, tilføjer g4 den 1. 2, hvad det betyder, er, at,
tilføje klaver note, G4, som er det fjerde G
op på klaveret fra bunden.
Så dette er en slags MIDI taler, så for dem, der er musik baseret,
dette er blot MIDI noter.
>> PUBLIKUM: Det er G for Middle C, ikke?
>> HUGH Zabriskie: Dette er G over Mellemøsten C, det er rigtigt.
>> PUBLIKUM: Over Mellemøsten C.
>> HUGH Zabriskie: Ja.
Faktisk, ja.
Jeg tror jeg faktisk gjort det ene [uhørligt],
så dette kan være en oktav over det.
Så lad os se.
Hvis jeg ramte Play--
[GENTAGET PIANO BEMÆRK]
--we're kommer til at høre det.
Ideen er, at det fungerer ligesom en kommandolinje ville,
så hvis jeg går op og ned på mit tastatur, du
kan gå tilbage til forrige kommandoer, som er temmelig nyttig.
Og nedenfor er min liste af spor, der alle kører på loop.
>> PUBLIKUM: Du blev under forudsætning af 88-tangenters keyboard på det, ikke?
>> HUGH Zabriskie: Spørgsmålet var, jeg antager en 88-nøgle tastatur,
og ja, jeg er.
Hvad jeg gjorde, er jeg dybest set tog 88 prøver
af klaver, en for hver note.
Og så hver gang du høre en note fra nu af,
der er faktisk en løkke, der ser like-- dette er at få spillet på loop,
så for hver eneste tone, dette kører.
Hvad sker er, jeg skabe en buffer igen,
Jeg opretter en gevinst node for at indstille lydstyrken.
Dette blot en virkelig kompliceret måde at sige jeg
gemme bufferen i en source.buffer.
Jeg giver det gevinst, jeg slutte den til gevinsten,
gevinsten er forbundet til output, og så jeg spiller det.
Så det er slags processen tage i en buffer kilde.
>> PUBLIKUM: Kan du faktisk tage det tør lyd og gøre det vådt [uhørligt]?
>> HUGH Zabriskie: Du kan, ja.
Der er re-verbum, er der forsinkelse, forvrængning.
Du kan stort set sætte noget i mellem i denne sandwich of-- godt,
pipeline er en bedre metafor, men du kan tilføje noget i det.
Afkøle.
>> Så jeg vil slutte demoen her for at give dig en følelse
for blot det store antal gange, du kan køre denne funktion på én gang.
Så jeg har tænkt mig at fjerne denne.
Jeg har tænkt mig at lave en generator at-- dybest set, hvad does-- det er virkelig
form for en kompliceret syntax-- men det er kommer til at generere noter på flue,
og bare begynde at spille dem, som det vurderer dem.
[Indskyde PIANO]
>> Så kan vi bare lave en lille musik her.
[Indskyde PIANO]
>> Hvad denne kommando så gør, for eksempel, er
det tager disse tre noter for klaver og derefter sætter dem på B3.
Denne syntaks kan gøre lidt mere mening
til dem, der har en musik baggrund her.
>> Jeg kan tilføje et kick tromme.
Jeg kan--
>> [Indskyde INSTRUMENTER]
>> --just lege med det.
>> Så du kan make--
[Indskyde INSTRUMENTER]
At man er lidt mere irriterende.
[Indskyde INSTRUMENTER]
>> Så det tilfældigt tilføjer en tør bækken på hver 16. Bemærk, med en 16%
[Uhørligt].
>> [Indskyde INSTRUMENTER]
>> Ja, så den måde, denne works-- det er altid i 4: 4.
[Indskyde INSTRUMENTER]
>> Ja, så de fire kvartaler, og 16/8.
[Indskyde INSTRUMENTER]
>> Så i gennemsnit, får du 60% hits i det 16. noter.
>> Anyways, det var bare form for at vise
nogle af de ting, du kunne bygge med Web Audio API.
Det er virkelig kraftfuld, det er virkelig hurtig, og du kan lave en masse fede ting
med den.
Så igen, spørgsmål du har, mail myself-- Hugh-- eller Sam,
og ærligt, Google har et væld af gode ressourcer.
Eventuelle sidste spørgsmål?
Ja.
>> PUBLIKUM: Så du kan få adgang til den indbyggede mikrofon.
Hvad hvis du ønsker at bruge en bedre mikrofon?
HUGH Zabriskie: Hvis du ville at bruge en bedre mikrofon?
Så igen, det er en del af abstraktion mellem Chrome
og resten af ​​din computer.
Medmindre det er tilgængelige via et API, som Web MIDI API,
du sandsynligvis kunne finde nogle hacks, men generelt ikke som muligt.
>> SAM GREEN: Du kan also-- alle Chrome kender
er, hvad din standard mikrofon er, og det får adgang til det.
Så hvis du havde en mikrofon du kunne indstillet som computerens standard mikrofon,
du kunne få adgang til det på den måde og det ville sandsynligvis arbejde.
HUGH Zabriskie: Det er en god pointe.
Jeg har aldrig prøvet det, men du måske være i stand til at slags
of-- hvis du omdirigere input højttaler, du måske være i stand til at gøre det, ja.
>> Eventuelle sidste spørgsmål?
Afkøle.
Nå tak gutter så meget for at se.
Jeg er Hugh.
SAM GREEN: Jeg er Sam.
HUGH Zabriskie: Og det er CS50.