>> SAM GREEN: Hei, alle sammen.
Velkommen til vårt seminar.
Mitt navn er Sam.
HUGH Zabriskie: Jeg er Hugh.
SAM GREEN: Og vi kommer til å snakke i dag om Javascript og Web Audio API.
Bare for å starte, er dette en disposisjon av vår agenda for seminaret.
Vi kommer til å starte med å snakke om hvorfor du bør være interessert i Web
Audio API, hvorfor er Javascript det språket du trenger for det,
og deretter snakke om Javascript essentials-- så like,
lede deg gjennom noen grunnleggende i språket,
og deretter snakke om API lyd på et høyt nivå.
Deretter vil Hugh snakke om noen av de stadier av lydproduksjon
og deretter demo denne awesome sequencer Prosjektet han bygget og vise deg koden.
Og så vil vi ha tid til spørsmål på slutten for folk
som er her bor.
>> HUGH Zabriskie: Cool.
>> SAM GREEN: Cool.
>> HUGH Zabriskie: Cool.
Jeg vil sikkerhetskopiere.
>> SAM GREEN: Så, første ting først.
Så en av de store tingene om Web Audio API
er at det er ingen satt opp nødvendig.
Det kommer innebygd i de fleste moderne nettlesere,
inkludert Chrome, Edge, en hel gjeng others-- alle de
at store deler av mennesker bruker i dag.
Så det er ikke satt opp, bortsett fra bare å få
en web-server går, for du å komme i gang å jobbe
på prosjektet, og det er flott.
>> Vi anbefaler pen tungt at du vurderer
bruker Chrome for Javascript webutvikling,
bare fordi utvikleren verktøy er veldig sterk.
Som et eksempel på hva vi mener ved å si åpne opp Javascript
console-- hvis du går inn Chrome og du ser på en nettside,
og du venstre klikk Inspiser Element, og deretter
du gå til denne lille rullegardin akkurat her og du klikker på konsoll,
du vil se hva åpner opp ser en mye som en ledetekst som du
kan se på din Mac, eller på ID.
Og akkurat sånn, kan vi typen kommandoer her, som Clear,
og andre kommandoer sånn.
Vi kan lage variabler, som vi skal se senere i Javascript.
Og så noe vi kan gjøre i Javascript, kan vi gjøre med konsollen,
og det er en super praktisk måte å begynne å spille rundt med APIer
og får komfortabel med Javascript rett utenfor balltre.
No set up nødvendig, som er virkelig fint.
Kjølig.
Awesome.
>> Så bare en ting å legge til.
Hvis du har noen questions-- det er mange av dere som ikke er her lever,
gjerne send us-- disse er våre e-postadresser.
Hvis du har spørsmål du ønsker ikke å spørre oss,
som, oh jeg har en bug i min kode, eller noe
som er litt mer spesifikk, kanskje Google det først.
Det finnes mange flotte ressurser om Web Audio API ute.
Det er virkelig godt dokumentert og det er å være
brukes av massevis av folk i industri, og folk som er bare
bygge morsomme ting for seg selv.
Så det bør være mye av ressurser der ute.
Awesome.
>> Kult, så hvorfor Web Audio API?
Dette diagrammet er litt av en videreutvikling av veien
lyd på nettet har vokst over tid.
Bgsound var som den opprinnelige HTML-koden at Internet Explorer brukes til å støtte.
Det kun tillatt for ganske grunnleggende lyder, funksjonaliteten var ikke veldig robust,
og du kunne ikke gjøre komplisert sekvensering,
eller styre når lyden startet og stoppet veldig robust.
Derfor var det ikke særlig godt utviklet.
Så etter det, Flash kom along-- som
Jeg er sikker på at dere alle er kjent med Flash-- kanskje ikke hvordan det fungerer,
men du har sikkert sett det.
Du er nødt til å oppdatere Flash Plug-in, all den slags ting,
og som sikkert utvidet utvalget av funksjonalitet som var tilgjengelig.
Men å gjøre brukeren installere en plug-in er definitivt
en ulempe å inkludere Flash i søknaden din, ikke sant?
Fordi da er du avhengig av brukeren går og finne denne plug-in,
og sannsynligvis blir slått skremme av dette ekstra trinnet
de må ta for å bruke appen.
Og så kan det være en oppdatering som vil bryte hele søknaden,
og det ender opp med å bli et mareritt for utbygger, også.
Så det var en barrikade.
>> Og så etter det kom, HTML audio tag, som
er en funksjon av mer moderne HTML-- som absolutt tillatt for mye mer ting,
men selv de tingene du kan gjøre det ble litt begrenset bare
som et resultat av de tingene at HTML var i stand til.
Så når Javascript API, Web Audio API,
ble en standard øve på tvers av nettlesere,
som virkelig utvidet sett muligheter for utviklere
å virkelig komme inn bygning kule ting for web.
I lang tid det hadde vært veldig robuste verktøy
for native lydprogrammer, like-- alle vet Garageband,
og så åpenbart er det mer profesjonell lyd miksing programmer,
og den slags ting.
Men det var ikke en virkelig god Cloud-- ikke
Cloud, ja, jeg antar Cloud-- web-basert plattform
som ville tillate utviklere til bygge applikasjoner for folk
å gjøre lydmiksing.
Og som han vil vise deg senere, Web Audio API
åpner for virkelig kraftig ting til å skje veldig enkelt,
som er ganske kult.
Så det er instruksjonen til hvorfor du bør se resten av seminaret,
i utgangspunktet.
>> Og nå, jeg kommer til å snakke om noen JavaScript-- bare grunnleggende elementer
av språket, så vi kan være på samme side
når vi snakker om API litt senere.
Kjølig.
>> Så dette er et sammendrag.
Jeg glemte dette var her.
Yeah.
>> HUGH Zabriskie: Det finnes to lysbilder her.
>> SAM GREEN: Dette er et sammendrag av noen av begrensningene
av de andre bindende, gamle metoder.
Og så nå har vi disse tingene.
Kjølig.
Awesome.
>> Så, Javascript essensielle.
Første ting først, det er en ganske betydelig forskjell
i Javascript versus i en språk som C, på den måten
at variablene er opprettet.
Så i C, vi er vant til å ha å skrive våre variabler, ikke sant?
Og jeg mener ikke typen som skriv dem inn, mener jeg typen
som tildeler dem en type-- mening som en int, en dupp, en røye.
I C, ble vi virkelig brukes til å opprette en variabel
og så holde seg til den typen for hele tiden at vi bruker den variabelen.
Og det er ikke nødvendigvis verre, men det er nok vanskeligere å bruke.
En av de kule funksjonene Javascript er
at variabler er det som kalles "dynamisk skrevet," som
betyr at jeg kan lage en variabel med at syntaks,
varX lik 5, for eksempel.
Som opprinnelig skaper et heltall variable--
rett under hette somewhere-- men jeg
kan endre den variabelen for å referere til en streng
uten å gjøre noe lignende lage en ny variabel.
Jeg trenger ikke å bekymre deg om typen endring.
Javascript vet at den type s forandret, og det skjer dynamisk.
>> Så, det er fordeler og ulemper til det,
som alle som har jobbet i Javascript for en stund kanskje vet.
Det er tider når Det kan føre
endre type en variabel og ikke håndtere denne typen endring,
og deretter Javascript kan crash-- eller et unntak
bli kastet, fordi du vil ha den feil type når du forventer en type.
Kjølig.
>> Så, er scoping-- som like, hvis vi husker de første ukene i kurset,
refererer til hvor synlig en variabel er, og i hvilket område av koden.
Alle som ser veldig lik til slik det ser ut i C.
Så variablene er omfangs generelt innen klammeparentes innenfor en funksjon,
og så er det også globalt Scoped variabler som
are-- hvis du skriver en variabel utsiden av en funksjon,
det vil være synlig i hele teksten.
>> En forskjell mellom Javascript og C i særdeleshet,
er at hvis du deklarerer en global variabel hvor som helst i en tekstfil
det er synlig i noen funksjon innenfor denne tekstfilen.
Det er riktig, ikke sant?
>> HUGH Zabriskie: Jepp.
>> SAM GREEN: Så det er også en liten litt funky i forhold til C,
der vi alltid måtte ha vår variable definisjoner over de stedene
de ble brukt.
Det er ikke en regel som er håndheves lenger, så, litt annerledes.
Og igjen bare for å reemphasize, global versus lokal variables--
meget lik C. Du kunne ha to variabler med samme navn,
og har en av deres navn bli skygget av en lokal variabel hvis en av dem
var global.
Så lignende type problemer som noen av dere
kan ha kjørt inn i noen av problemet sett så langt.
Kult, så det er variabler.
>> Kontrollflyt, noe som betyr like, if-else-- logisk stuff-- og sløyfer.
Så til å begynne med, dette er hva if-else uttalelser se ut i Javascript.
Plassering av de forskjellige tingene på linjene er ikke viktig.
Dette er bare ett av de konvensjoner for måten vi strukturen kode.
Akkurat som i C, har vi en "hvis", en parentes uttalelse.
Det var ikke det jeg mente å gjøre.
Jeg gjorde det igjen.
>> HUGH Zabriskie: Prøver å avslutte?
SAM GREEN: Nei, jeg er bare prøver å zoome inn.
Det spiller ingen rolle.
>> Så har vi en "hvis" statement og vi har en tilstand på innsiden av det
som evalueres til sant eller usant, og som avgjør hvorvidt
vi går inn i denne blokken av kode.
Og på samme måte, har vi en else-if, og et annet, akkurat som vi er vant til i C.
>> Du bør også være ganske behagelig rett utenfor balltre med løkker,
fordi de ser også mye som C ser ut.
Men du vil merke igjen at vi har, istedenfor int initializations,
vi har Var initializations.
Og jeg antar du har være forsiktig med å gjøre
at du ikke endre verdien av I fra en int til en streng,
for eksempel, fordi det kommer til å føre til rare oppførsel du kanskje ikke
forvente.
Men dette bør se ganske kjent, også.
>> Så det er her ting begynner å får litt gal i Javascript
for noen som kommer fra en bakgrunn av C. Det er funksjoner
i Javascript, og det er en måte å erklære en funksjon som ser
slags lik C, og så er det en annen som
ser slags annerledes.
>> Den første versjonen, som vi kan se her,
er slags C-aktig, der vi si, dette er en funksjon,
gi den et navn, gi antall argumenter,
og deretter innholdet i funksjon gå inn disse klammeparentes.
Vi får se et eksempel på argumenter i bare et sekund.
>> Mens på neste linje, ser vi, oh, her er en variabel som heter "myFunction,"
og vi lik den til dette generisk thing-- function-- at
ser ikke ut til å ha noe å gå på.
Grunnen til det er annerledes enn C er at Javascript
er det som kalles en funksjonell språk, eller har funksjonelle elementer, noe som innebærer
at funksjoner er faktisk verdier.
Og det betyr at vi kan sette en variabel til lik en funksjon
og deretter flytte den funksjonen rundt, passerer det som et argument,
gjøre alle slags ting sånn med funksjoner.
>> En annen ting å note-- funksjonene er skrevet
med et visst antall argumenter.
Vi får se et eksempel på en funksjon med et argument på neste lysbilde.
Men Javascript vil ikke kjefte på deg hvis du prøver
å bruke en funksjon med feil antall argumenter.
Det vil bare gjøre sitt beste for å gjøre gjøre, noe som betyr at hvis du passerer,
du kaller en funksjon som forventer en argument uten argument, alt som
vil skje er det vil gjøre sitt beste å prøve og kjøre denne koden,
og hvis det til slutt går inn et unntak eller en feil,
det vil kaste det unntak, og bare holde going-- som bare er én av måtene
at Javascript fungerer.
Yeah.
>> PUBLIKUM: Hva skjer hvis det er altfor mange argumenter?
SAM GRØNN: Så Spørsmålet var, hva skjer
hvis det er for mange argumenter?
Og svaret er at Javascript vil bare
ignorere de som er etter de som den forventer.
Det vil prøve å utføre funksjonen kalle som om det var bare de to første.
Høyre?
>> HUGH Zabriskie: Det er riktig, ja.
Tilsvarende, hvis der er for få argumenter,
det bare slags gir null til alle argumenter det ikke har noen verdier
til.
>> SAM GREEN: som kan faktisk være nyttig, hvis du
ønsker å skrive en funksjon som tar et variabelt antall argumenter.
Du kan stille inn standardverdier i definisjonen av funksjonen,
og det kan ignorere det faktum at inngangs er ikke der.
Så jeg ønsker å snakke litt mer om denne siste bullet
punkt, som er funksjoner verdier.
Dette er et eksempel som er litt halsbrekk
hvis du bare leser det, og tror ikke om hva som skjer på et øyeblikk.
Så, la oss se bare på den første linjen her.
Vi har denne variabelen, f1, som vi sier er en funksjon som gjør denne tingen.
Og innholdet i funksjon er console.log ("hei").
Du kan tenke på console.log som Javascript tilsvarer printf.
Så hva vil skje er, hvis vi kjøre denne koden i nettleseren vår,
det vil skrive ut en streng.
Jeg kan vise det.
PUBLIKUM: Av loggen, skjønt, gjør at mener det blir tatt opp et sted?
SAM GREEN: Yeah.
Så jeg skal vise deg hva som skal skje.
Så spørsmålet var, hva betyr log mener?
>> HUGH Zabriskie: Så console.log er som printf for C.
SAM GREEN: Så console.log er som printf,
så hvis jeg har denne console.log ('Hei'), og jeg kaller det, strengen "hei"
blir skrevet ut til konsollen.
Dette er den konsollen.
Det er akkurat som printf, der det skrives til standard ut.
Og vi vil se i et minutt, men dette er faktisk
henviser til konsollen objekt, og kalle en metode på dette objektet.
Det vil være mer fornuftig i et øyeblikk når vi
komme til å snakke om objekter i Javascript,
men jeg trodde jeg ville bare nevne det.
HUGH Zabriskie: Vi er vant til i C, right--
vi vanligvis skrive et stort program i hoved å gjøre noe.
Men hva som er kult i Javascript er du har denne typen tolk som
kjører i sanntid, slik at det tar bare linje for linje,
det kan bare tolke det på stedet.
Og det holder orden på ting som har kjørt før,
så det er en ganske nyttig verktøy for å bruke console.log, eller konsollen,
generelt, for bare å spille rundt med Javascript.
>> SAM GREEN: Så kommer tilbake til dette example-- den andre linjen med kode
her er ganske ufattelige i hodet mitt.
Første gang jeg leste dette, Det var som, hva er det som skjer?
Så det som skjer er at dette funksjon erklæringen sier,
Jeg har en funksjon kalt f2 som har ventet ett argument, f,
og da er det telefoner funksjon, f, hvilke
ble sendt til det som et argument uten argumenter selv.
Så, som kan ha vært forvirrende.
Hvis vi forstår dette som f2 tar f1 som et argument, og deretter innsiden av f2,
f får called-- som betyr at denne linjen med kode,
etter disse to linjene kode, resulterer i "hallo"
som skrives ut til konsollen.
>> Det faktum at vi kan passere funksjoner rundt som verdier
ender opp med å bli en av de mest kraftige funksjoner i Javascript
som et programmeringsspråk.
Utenfor alle forferdelige ting det kan gjøre,
akkurat som en funksjon av språk i forhold til måten
at det gjør ting enkelt programmere og lar
for ting som ikke er spesielt velegnet til nettet,
funksjonell programmering og funksjonell programmering aspekter av Javascript
er en av de mest kraftige konsepter som
eksisterer i JavaScript-- hvis du spør meg.
Kjølig.
>> Så, neste ting.
I tillegg til å være funksjonelle, det er også innslag av Javascript
som er objekt-orientert, som er en av de meget
populære buzz ord i informatikk.
Objektorientert programmering er en veldig populær ting.
Javascript har en versjon av det, hvor jeg tror hver verdi er også
et objekt, noe som betyr at hvert objekt wraps sammen noen antall verdier.
Så for verdier som er enkle, som et helt tall, som er lik varX 5,
at gjenstanden bare brytes at én verdi.
>> Men vi kan også tenke seg en situasjon where-- vi kan tenke på situasjoner i C
der vi ønsket å gjøre noe med structs,
for eksempel, som brytes flere verdier sammen og lager
det virkelig lett å passere ting rundt.
Det er når et objekt er i Javascript.
>> Det er viktig å huske når jeg sier at objekter innpakket
et antall verdier sammen, at funksjoner er også
verdier, noe som betyr at funksjoner også være inne i en Javascript-objekt.
Og grunnen til det er viktig er at mens vi ofte
tenker på å kalle en metode på et objekt som er
av et populært begrep fra andre populære objektorienterte språk,
En av forskjellene er at her alt som en metode er i Javascript
er en verdi som er lagret på innsiden av et objekt som utfører noen action-- muligens
ved hjelp av de andre verdiene som er inne av det objekt, men ikke nødvendigvis.
Så du kan forestille seg en situasjon, jeg antar i en liten bit av en gal måte,
hvor man kalt en fremgangsmåte for ett objekt på en annen gjenstand, f.eks.
Så det er litt funky på den måten.
>> Og du kan også endre metodene som er forbundet med et objekt
ved å tildele denne metoden en ny funksjon, som også er
ganske forskjellig fra andre objektorienterte språk, der
når vi erklære et objekt og instantiate det,
vi kan ikke endre metoder som er assosiert med det formål lenger.
Så det er ganske annerledes.
Kjølig.
>> Så her er et eksempel, først, av et objekt i aksjon.
Dette er det som kalles en generisk objekt, som
betyr at det ikke har noen Spesielt navn, ikke har en klasse,
det er bare noen innpakning av verdier.
Og måten det ser ut er, har vi denne ytre par av klammeparentes her
som indikerer til Javascript og si, dette er et objekt.
Verdiene innsiden av det er hver verdier inne
av objektet som skal pakkes sammen.
Og innsiden av dette objektet, vi da har viktige verdi par,
hvor nøkkelen viser til navnet av verdien på innsiden av objektet,
og den andre side-- på motsatt side av tykktarmen her--
er den faktiske verdien som skal lagres.
>> Så du ser her at vi har en Nøkkelen heter fn med verdi sam,
etterfulgt av et komma, sier til neste oppføring.
Så en nøkkel kalt ln, med en verdi på grønt,
etterfulgt av et komma, etterfulgt av "print"
som kommer til å ha en funksjon verdi som kommer til å gjøre denne linjen med kode.
La oss ta et skritt tilbake og pakke ut hva som skjer her.
Så dette er litt komplisert, og vi ser noe nytt
for første gang.
Den "dette" søkeord er det nye ting vi ser her, og hva dette betyr
er, refererer til den aktuelle objekt i omfang, ikke sant?
Så når vi sier, dette peker helt tilbake
til hele denne object-- når vi gjør this.fn,
vi kommer til å gå hele veien tilbake til dette objektet, kan du gå til fn verdi
og får sam, dra den hele veien tilbake, stikke den her, og deretter gå videre.
>> PUBLIKUM: Så med henting, er som gjøres på grunn av den parameter
definisjon?
SAM GRØNN: Så spørsmålet var, er den gjenfinning gjort på grunn av parameteren
definisjon?
Ja, absolutt.
Hva kommer til å skje her er, dette dot sier til Javascript,
OK, jeg får noen verdi fra dette objektet fra meg selv.
Og da vil det se etter en oppføring heter fn, og hvis den finner det,
det vil returnere som value-- så, det er sam.
Men jeg kunne også ha skrevet noe som ikke var definert her,
og da ville det bare returnere undefined-- som
er en ting som Javascript kan gjør, noe som kan ha fordeler,
men det er also-- hvis du gjør en skrivefeil, det kan føre til rare feil.
Så det får bare prøve å finne uansett hva du forteller det til å finne
og det er ikke til å klage hvis ikke finne det.
Det vil bare si, jeg gjorde ikke finne den, og deretter gå videre.
Så det ville være udefinert, pluss tomt, pluss etternavn.
Yeah.
Og så kan vi se at hvis vi kunne da gå ned og access--
og vi kaller tf.print () med parenteser.
Det kommer til å kalle det print funksjon uten argumenter, ikke sant?
Men hvis vi bare sa tf.print () semikolon, uten parentes,
alle som ville ha gjort er å trekke ut av funksjon fra verdien
men ikke egentlig heter det.
Kjølig.
HUGH Zabriskie: Bør vi gjør et objekt?
SAM GREEN: Jada, la oss gjøre det.
Så jeg kan flytte denne eksempel til konsollen.
Vi kan tenke oss at jeg har et objekt.
Så dette er et enkelt objekt.
Dette er et objekt som inneholder to verdier med to nøkler, to viktige verdi
par.
Så jeg kan da få tilgang til verdien som er lagret innsiden av dette objektet ved å gjøre x.x1,
for eksempel, og jeg får en tilbake.
Likeledes x.x2, får den verdien tilbake.
>> Og nå virkelig kule ting er, jeg kan faktisk legger noe til dette objektet
etter at jeg har laget det.
Så du kan forestille deg, la oss si at jeg har en funksjon.
>> HUGH Zabriskie: Du må gjøre Skift-Enter.
>> SAM GREEN: Å, det er irriterende.
Hva gjorde det ikke?
Oh.
Here we go.
Kjølig.
>> Så jeg har nettopp opprettet denne funksjonen f, som
kommer til å gå til den aktuelle objekt og print this.x1.
Så hvis jeg bare ringe f av seg selv, er ingenting skjer
til å skje, ikke sant, fordi det er ingen x1 felt i objektet er det å henvise til.
Men, hvis jeg sier, x.f = f, og da jeg kalle x.f (), kommer jeg til å få tilbake en.
At f-funksjonen er nå assosiert med objektet x,
som har en nøkkel som heter x1 forbundet med verdien 1,
så når vi kaller this.x1, er det kommer til å finne det de er ute etter
og være i stand til å skrive en verdi ut.
Så det er bare ett eksempel av typen de sprø tingene
du kan gjøre med objekter i Javascript.
>> Slik at versjonen var generisk versjon, mening
at vi har laget et objekt ved hjelp av denne parentes notation-- brace notasjon,
rather-- og det er hendig hvis vi bare vil
en forekomst av et bestemt objekt, men hva om vi ønsker å ha mer enn én
av samme art?
Og svaret på det Spørsmålet er, er det ting
kalt klasser i Javascript også.
Vi kan lage en funksjon som gjør noen form for initialisering
for et fremmedlegeme, og vi vil si, som,
min class-- så navnet av gjenbruk object--
lik funksjon som setter det opp.
Så hva dette ville være tilsvar å er å skape et objekt som
ville være akkurat som, klammeparentes, str, tykktarm,
Dette er en streng, semikolon, krøllete brace.
Det ville være den generiske objekt vi starte,
med den ene forskjellen være på neste linjene skaper vi en prototype, som
betyr at det er en standardnøkkel som vi legge til vår objekt som
har verdien oppført her.
Noe som betyr at når jeg oppretter en ny forekomst av dette MyClass objekt,
det kommer til å ha pre-bygget inne av det er en verdi som kalles str og en annen verdi
kalt myPrint, som er kommer til å være en funksjon.
Awesome.
>> Flott.
Så det siste å si om Javascript
er at det er veldig nyttig for hva kalles asynkrone operasjoner.
Asynkron betyr er at vi kan vente på noen operasjon
å fullføre før vi flytter på, men går videre mens vi venter
og da har noe skje senere.
Og hva jeg mener med det er at du kan forestille seg en situasjon der
du sende en forespørsel til noen web server et sted,
og det kommer til å sende deg tilbake noen stor del av data, ikke sant?
Og bruker kunne vente i tiden for at det skal skje,
og ingenting kunne være skjer på den tiden.
Men det er ikke et flott design, ikke sant?
Du ønsker ikke at websiden skal fryse.
Hva hvis brukeren ønsker å klikk på en rullegardinmeny?
Det er ikke et flott design mønster.
I stedet, innerst inne hva Java ikke er sier,
OK, gjør denne operasjonen asynkront.
Så liker, vente i bakgrunnen, og når operasjonen er ferdig,
kaller tilbakeringing function-- kalle noen funksjon,
trenger noen action-- å signalisere at den operasjonen vi ventet på å ende
er over.
Og grunnen til det er super kraftig er, vi kan gjøre noe, passerer et argument,
gjøre noe, og deretter vente for at noe skal skje.
Deretter, når som noe fullfører, kan vi kalle en tilbakeringing.
Det er veldig praktisk, fordi det lar oss gjøre ting med Web Audio API,
for eksempel, som en belastning lydfil fra en ekstern server
uten å måtte vente på hele lydfilen som skal lastes,
som ville være veldig dårlig for brukeropplevelsen.
Kjølig.
>> Siste par notater om feilsøking, siden dette
er en ting du er nødt til å gjøre som en del av prosjektet, garantert.
Jeg nevnte Javascript-konsollen.
Det er en super nyttig funksjon av alle moderne nettlesere,
Og vi virkelig oppfordre deg til å få komfortabel med å bruke konsollen,
Hvis du ønsker å bli gode på Javascript.
Det er super praktisk for feilsøking, men det er også
veldig nyttig for å finne ut hvordan du bruker en API.
Det gir mulighet for virkelig lett eksperimentering
uten å måtte skrive noen kode, og deretter kompilere den.
Du trenger ikke å gjøre alle disse trinnene.
Du kan bare skrive noen kode i en linje,
og deretter få umiddelbar tilbakemelding på enten det kodelinje eller ikke
worked-- veldig hendig.
>> Og også, bare en teknisk note-- Javascript-konsollen er et eksempel
av en REPL-- så det er R-E-P-L, ERSTATTER, som står for lese, vurdere,
print loop.
Du kommer til å skrive noen ting i, vil det lese hva du skrev inn,
det vil vurdere det, og det vil skrive ut utgang, og deretter det vil starte på nytt.
Som lar deg raskt gå i sirkler itera, som er virkelig kult.
>> Jeg antar ekte siste note-- dette er den faktiske siste notat, ja.
Hvordan kan vi faktisk bruke Javascript?
Så først, kan vi importere det ved hjelp av et script tag
på toppen eller bunnen av en HTML file-- hvor som helst inne i en HTML-fil,
egentlig.
Og innen et script tag, er det to under måter å importere Javascript.
Den første er ved å ha en separat Javascript-fil
at vi importerer i sin helhet, eller ved å ha et område med kode som script
å starte, og deretter backslash script til slutt.
Og da har vi bare skrive Javascript inne i HTML-fil.
De er de to måter.
Du kan ikke ha det inne i HTML.
PUBLIKUM: Er en bedre enn den andre?
SAM GREEN: Spørsmålet var, er en bedre enn den andre.
Så, ja, som en koding stil praksis og også det er som en design praksis.
Det er to grunner hvorfor det kan bli bedre.
Den første er, det gjør koden en mye mer lesbar hvis alle HTML
er på ett sted, er i all din CSS et annet sted, alle av Javascript
ligger i et tredje sted.
Høyre?
Jeg tror vi har skal allerede snakket om det i sections-- som CSS-- hva
som er-- og det går ofte i en annen fil.
Så, lignende type konsept her.
Du kan også tenke seg at Javascript ville bli gjenbrukt på mer enn én
HTML-side, eller kanskje en Svært mange HTML-sider,
og har som Javascript refactored i ett
fil som du kan importere til mer enn ett sted
lar koden til å bli måten mer vedlikeholdsvennlig.
Du kan forestille deg å gjøre en endre til Javascript
og måtte endre det i 100 forskjellige filer.
Og i stedet vi kan bare endre det i ett, noe som er langt mer kraftfull.
Sa jeg svare på spørsmålet ditt?
Kjølig.
>> Vi kan også skrive inn i konsollen, som vi har nevnt før.
Og igjen, en siste note-- Web Audio er innebygd,
du trenger ikke å laste inn noe.
Kjølig.
Er det noen spørsmål, har du noen flere spørsmål om Javascript,
før vi går videre?
>> PUBLIKUM: [uhørbart]
SAM GREEN: Greit, kult.
Så nå kommer han til å snakke om API.
>> HUGH Zabriskie: Cool.
Takk, Sam.
>> SAM GREEN: Sure.
HUGH Zabriskie: Awesome, så vi vil gå videre fra Javascript.
Så vi har snakket om noen av det vesentlige av Javascript,
og de er variable, funksjoner gjenstander, fungerer som variabler
asynkron lasting.
Dette er alle ting som du vil ser som du bruker Web Audio.
Så vi bare kommer til å snakke om det først på et høyt nivå.
>> Det er en API, så det er noe som er bygget, som Sam sa,
rett inn i Javascript som du bruker i konsollen.
Og det er faktisk akkurat som C ++ kode som er virkelig bygget inn Chrome
og Firefox, og alle disse nettleserne.
Så hovedideen med Web Audio er at du har
denne type rørledning av lyd, ikke sant?
Så din lyddata kommer inn i en eller annen form.
>> Det er slag av tre hoved forms-- du har den oscillator, hvilken
danner en sinusbølge, cosinusbølge, vi kommer til å se hvordan det fungerer.
En annen veldig vanlig en, selvfølgelig, er en MP3.
Så kanskje du begynner med en sang, og deretter
ønsker å gjøre noen filtrering til det og utgang
at-- som kan være en mulig kilde.
Og så en kul en er mikrofonen.
Så du kan bruke noen veldig grunnleggende samtaler i Javascript
for å få tilgang til mikrofon, og så hvis du
ønsket å lage en app som en pitch detektor,
For eksempel tar det igjen din stemme og tall ut
den pitch-- veldig enkel måte til det.
Du kan bare slags lese den i, finne ut frekvensen,
og deretter ut et tall.
Så vi får se hvordan det fungerer, så vel.
>> Destinasjonen er i utgangspunktet hvor audiodata sendes ut.
Så generelt, er sånn din bærbare høyttalere.
Andre alternativer er som en ScriptProcessorNode--
vi vil komme til noder i en second-- men i utgangspunktet,
enten du setter lyd ut gjennom datamaskinen via høyttalere,
eller du slags opptak det, så du lagre det som lyddata.
Så kanskje hvis noen oppretter musikk i appen og deretter
du ønsker å ta opp det og kanskje som eksportere den til Soundcloud, for example--
som ville være en måte å gjøre det.
Alle de morsomme tingene, som vi skal snakke om,
skjer mellom disse to punktene, hvor vi legger i musikken
og deretter sende den.
>> Så jeg kommer til å snakke om de fem stadier av lydproduksjon i et sekund.
Vi har dette som kalles en AudioContext, som
er denne lille wrapper vi ser her.
I utgangspunktet hva AudioContext er-- om vi gå til Javascript-konsollen akkurat nå,
vi kan lage en akkurat nå.
Bare et eksempel på ERSTATTER, ikke sant?
Vi leser, evaluere, og det skrives.
>> AudioContext er en global stat.
Det er en struct, er det et objekt her, holder og det informasjon
om ting som skjer på skjermen for knyttet til lyd.
Et eksempel er den nåværende tid.
Dette forteller deg hvor mange sekunder, meget presist,
siden nettsiden lastes.
Så dette er en veldig nyttig liten eiendom som du kan bruke.
Det har lest only-- tror jeg faktisk du kan prøve å sette den en verdi.
Det vil si du setter den, og hvis du skriver det
igjen-- det gjorde faktisk ikke helt fungerer.
Så det er skrivebeskyttet eiendommer i Javascript.
Dette er veldig nyttig hvis du slags synkronisering
en rekke forskjellige informasjon, når du er
form av å spille forskjellige lyder.
>> En annen veldig nyttig én er konteksten destinasjon.
Definitivt, hvis du er interessert, være prøver dette på egen konsoll høyre
nå.
Så dette er en AudioDestinationNode.
I utgangspunktet hva dette sier er, hvor ligger produksjonen går?
Så det er to reelle alternativer her.
Vanligvis standard er bare høyttalerne,
så AudioDestinationNode utgangspunktet bare sier
det er null utganger til lyden kommer inn, sendes til høyttaleren.
Så generelt, gjør du ikke må spille med det.
Hvis du er interessert i faktisk bruker den ScriptProcessorNode for opptak,
definitivt skyte meg en e-post senere fordi det er
litt mer komplisert.
Men generelt, du er bare snill til å gi ut lyd i en eller annen form.
Så kult, vil vi hopper tilbake hit.
PUBLIKUM: Jeg beklager.
HUGH Zabriskie: Yeah.
PUBLIKUM: Jeg vet du sa å snakke til deg senere om opptak.
Kan du grensesnitt som med Pro Tools?
>> HUGH Zabriskie: Med Pro Tools?
La oss se.
Jeg tror ikke det.
Så går mellom klienten, som er Javascript
konsoll, og det faktiske datamaskin, er generelt
noe som er litt av utenfor grensene, hvis du
vil, snill av natur the-- det er litt av en design ting,
men du prøver å holde leseren separat fra brukerens selve datamaskinen.
Vanligvis er det eneste du er i stand til å tilgang er mikrofonen eller kameraet.
Du er ikke i stand til, jeg tror ikke, bruker Pro Tools.
Men hvis du har opprettet et spor i Pro Tools,
eksporteres det, kan du laste det her inne, filtrere det, for eksempel,
prosess som, og ta det inn i en Audio Destination-- eller no-- en Sphere
Prosessor Node.
Og så derfra, kunne du eksportere det til Soundcloud, du
kan sende den i en e-post, eller uansett hva du liker derfra.
>> Men det er slag av en liten barriere mellom å lage musikk på datamaskinen din
og lage musikk på nettet.
>> SAM GREEN: Og det er ikke unikt for denne API.
Det er en sikkerhetsfunksjon i Chrome, og Jeg tror alle andre moderne nettleser.
Nettleseren er selvforsynt.
Så for eksempel en nettside kan ikke bruke Javascript for å slå av lyden
på på høyttalerne, for eksempel.
Eller det kan ikke slå av datamaskinen.
Og det er ingen mellomliggende punkt mellom de to tingene, ikke sant,
så enten du har en komplett abstraksjon,
eller du åpner opp sikkerhetsfeil for å la
en programmerer med dårlige hensikter gjøre hva de vil med den bærbare datamaskinen.
Og det er derfor Chrome er selvforsynt.
>> HUGH Zabriskie: Yeah.
Gir det mening?
Cool, kult.
Jeg skulle bare viser et eksempel på en.
Dette er ganske mye som langt du kommer, i form
å få tilgang til brukerens datamaskin.
Hvis du har et USB-tastatur tilkoblet, du kan bruke noe som kalles Web
MIDI API, som vi ikke vil virkelig snakke om her,
men dette er en annen API som er bygget inn i minst Chrome-- igjen,
Dette er grunnen til at vi elsker Chrome-- Jeg tror Firefox eller Safari,
Dette er en enkel ting å google-- forskjellige nettlesere har
annen støtte som APIer de har implementert.
Men hvis du ønsket å koble til et tastatur og arbeide med denne informasjonen,
slags sende tastaturet informasjon over til datamaskinen
og deretter bruke den på nettet, dette API er der du vil jobbe som.
>> Kjølig.
OK.
Så raskt går videre her.
Hvordan gjør vi på gang?
>> SPEAKER 1: Om 15.
>> HUGH Zabriskie: 15 minutter igjen?
Ok kult.
Så vi vil rase videre her.
>> Så i utgangspunktet, det viktigste poenget med tenker på dette som en rørledning
er at hvert trinn i rørledningen er en serie av lyd-noder.
Vår kilde, la oss si, er en oscillator.
Vi må skape en oscillator node.
Og det er bare snill av den lille function--
og de er alle basert ut av audio sammenheng her.
>> PUBLIKUM: Når det sagt oscillator, betyr det
det er faktisk bokstavelig talt kommer fra to forskjellige poler frem og tilbake?
>> HUGH Zabriskie: Nei, det er som en digital representasjon.
Det er faktisk implementert i C ++.
Jeg faktisk ikke vet specs av hvordan det faktisk blir gjennomført,
men alt dette virker som binære data.
Egentlig, ja.
Det ville være å si, jeg kunne faktisk, hvis du er interessert,
Jeg kunne sende deg litt mer informasjon om hvordan kurvene
blir holdt har et digitalt format.
Ok kult.
>> Så vi genererer en tone som en sinus bølge eller noe sånt, kanskje
440 Hertz.
Vi skaper en oscillator.
Hvis vi ønsker å stille volumet, vi koble noe til en GainNode,
som vi kunne gjøre med .creategain.
Som setter ditt volum.
Du kan passere som på en hvilken som helst av de andre options-- brønnen,
så en lyd buffer kilde node er der du kanskje
lagre en MP3 som du har lagt i.
>> Biquad filter er for filtrering hvis du ønsker å ta hele basen ut
av en sang, eller noe sånt.
Gud forby du ønsker å ta basen ut av en sang.
Og AudioDestination node er, igjen, som hvor vår sluttbehandling er.
Hvis du noen gang interessert i å se alle de forskjellige mulige alternativer,
bare gå til kategorien og la autofullfør komme opp.
Og hvis du oppretter, vil du se alle forskjellige ting som du kan lage.
Du kan lage dynamiske script prosessorer,
Jeg vet ikke engang hva som er, for å blande kanal fusjoner
og kanalmaskiner og alt det der.
Kjølig.
>> Så dette er bare en eksempel på en rørledning.
Så vi har tre kilder som kommer inn.
Kanskje disse er bølgeformer, kanskje disse er MP3.
En går gjennom en filter, en annen ens
bli forvrengt annen ens panorering til venstre og høyre.
Du kan gjøre alle slags ting og de alle bli blandet rundt sammen,
og deretter ut kommer lyden ved enden, som bestemmelsessted.
Dette er et eksempel på hva mer komplisert Web Audio koden ser slik ut.
Dere skaper alle disse forskjellige objekter rett her--
Jeg er ikke sikker på dette.
Nei, det gjør ikke zoome inn.
OK.
>> SAM GREEN: Du gjør Control, Rull-Up.
HUGH Zabriskie: Kontroll Scroll--
SAM GREEN: Nei, nei.
Kontroll--
>> HUGH Zabriskie: Oh, Control, Rull?
Oh, fikser.
Yeah.
Wow, nope, nope.
OK.
Jeg vil ikke gjøre det.
>> Så ja, i denne første seksjonen her, ser du
vi skaper alle disse forskjellige noder ut av kontekst.
Vi er bare sammensying dem sammen i den andre delen
av denne funksjonen kalles Connect.
Det er en virkelig nøkkel funksjon i Web Audio.
Det betyr bare at når du har gjort noe med lyden i en node,
gi det videre til neste node.
Så vi har kilden, det kobles til analysatoren,
analysatoren gjør noe med det, den går til forvrengning, og så videre,
og til målet nederst til høyre her.
Kjølig.
OK, så vi vil fortsette å bevege seg på.
>> Den pipeline-- igjen, disse er de mest vanlige rørledninger
så vi snakker om alle disse tingene som forvrengning, panorering, alt dette.
Hvis du virkelig er interessert i å bruke ting Pro Tools,
de sannsynligvis interessere deg.
Hvis ikke, kanskje du bare ønsker å spille av lyden,
eller kanskje du bare ønsker å stille volumet på lyden.
De er de to mest vanlige form av rørledninger i lydproduksjon.
>> Igjen, hvordan du kan ta det inn som en oscillator-- så, la oss
gjøre en demo av det her.
Så vi kommer til å skape en enkel audio sammenheng her,
og fra det skal vi å skape vår oscillator.
Så det er, igjen, vi er bare kommer til å kalle Opprett Oscillator.
Vi kommer til å sette en frekvens på at 440 Hertz, alles favoritt.
Så vi kobler det til målet point-- som er høyttaleren, så
sammenheng destinasjon.
Til slutt, vi bare si, starte null sekunder fra nå, og vi har lyd?
>> [RINGE]
>> HUGH Zabriskie: Here we go.
Det er bare en sinuskurve.
Ok kult.
Og så skal vi stoppe det.
>> PUBLIKUM: Hvor gjorde at tilbakemeldingene kommer fra?
>> HUGH Zabriskie: Tilbakemeldingene?
Oh, sannsynligvis våre mikrofoner.
Så ja, det er hvordan du gjør det.
Og faktisk, hvis jeg hadde holdt den i gang, du
kan ha frekvens verdi som det kjører,
så det er en morsom ting å leke seg.
Kjølig.
Det er alltid en herlig en å presentere.
>> SAM GREEN: Vi gjorde ikke tenke på det, gjorde vi?
HUGH Zabriskie: Ja, det er en stygg en.
Så, buffer loading-- Jeg skal vise en eksempel på det helt på slutten.
Det er å legge på en MP3.
Og mikrofon, bruker du bare en funksjon kalt Navigator.getUserMedia ()
å be om tilgang til brukerens mikrofon for denne informasjonen.
>> Her er filtrering, vil jeg bare holde flytte fra dette.
Dette er ganske høyt nivå, men filtre bare tillate deg å
>> [Piper]
Filtrering lar deg også å skape ting som rosa
støy, støy brun, hvit støy.
Hvis du ønsker å lage ren støy, som noen mennesker elsker å rote rundt med,
du kan bruke Web Audio filtrering for å gjøre det.
>> Audio Panning-- så tenk hvis du skriver et spill
og du vil at lyden skal høres ut som det kommer, som,
skyte over skjermen, du kan bruke panorering av audio
for å skape en slik konus, som like-- det er ganske Mathy,
men det er faktisk veldig kult hvis du får det til å fungere,
og det er noen god tutorials på det jeg kan sende deg.
I utgangspunktet kan du snill av å skape lyden
for at noe går forbi i en 3D måte.
Og hvis du har en DJ interesse, kan du begynner å blande og krysse Tone sanger.
>> Dette er bare noen helt grunnleggende kode, i utgangspunktet det jeg gjorde før.
Dette angir volumet av oscillator, så vi skaper vår oscillator
som skaper bølgeformen.
Vi skaper vår GainNode, sette vår frekvens,
og koble deretter oscillator til GainNode, som deretter forandrer utgangspunktet
hvor mye signal slippes gjennom.
Men egentlig er det en digital ting, så det er mer just-- ja.
Det er ikke det som faktisk skjer, men det er hva som skjer i det virkelige liv
med en gevinst.
>> PUBLIKUM: --quantization av volumet parameter?
HUGH Zabriskie: Sorry?
PUBLIKUM: Er det en kvantisert volum parameter?
HUGH Zabriskie: Yeah.
Og dette er en ting jeg er virkelig mangelfull i min kunnskap,
hvordan gevinst fungerer på et digitalt nivå.
Jeg vet med faktiske signaler, er det i utgangspunktet
hvor mye kontrollerer du er å forsterke signalet.
Så, ja.
Jeg skal sende deg mer informasjon om det, fordi jeg ville være nysgjerrig faktisk
å vite mer om det.
Men i utgangspunktet parametrene er, en er fold--
jo høyere signal-- og null er ingen signal, eller vil du ikke høre noen lyd.
Vi hopper demo tid til det fordi det er i utgangspunktet det jeg gjorde før.
Og igjen, det Context.Destination er lyden reisemålet node.
Awesome, OK.
>> Så jeg kommer til å gjøre en rask to demoer.
Hvordan gjør vi på gang?
>> SPEAKER 1: Ca 10 minutter.
>> HUGH Zabriskie: 10 minutter?
Flott!
Awesome.
>> Så det første jeg kommer til å gjør, det heter My Favorite Song.
Så dette er bare en litt HTML Javascript.
Vi kommer til å ha to knapper på side spille min favorittsang
og stoppe min favoritt sang.
Jeg kommer til å endre dette.
>> PUBLIKUM: Dekk mikrofonen.
>> HUGH Zabriskie: Yeah.
Og jeg har lastet inn her et skript som basically--
og dette er virkelig nyttig for lasting av en MP3,
så dette bare gjør lasting MP3 måte raskere.
Det er i utgangspunktet bare en wrapper.
Det gjør bare fremgangs lasting i MP3-filer mye raskere,
ellers bruker du HTTP-forespørsel, type som det vi gjorde
på gjeldende delers sett med Server.
Det er virkelig stygg, du ønsker ikke å gjøre det.
>> Så denne fyren, Boris Smus, skrev en virkelig nyttig lite verktøy kalt BufferLoader.
Alt du gjør er rett og slett gi det den kontekst, du passerer det en list--
eller, ja, er det en liste i Javascript?
SAM GREEN: En rekke.
HUGH Zabriskie: Å, er det en matrise, det stemmer.
Det er en rekke stier til forskjellige filer.
Og så kan du gi det en funksjon.
Dette er tilbakeringing vi snakket om med asynkron lasting.
Det vil bli kalt Når filene er lastet.
Og at funksjonen som kalles når filen er lastet tar som en perimeter
en rekke lastet buffere.
Så det skjer her.
I utgangspunktet er BufferList kommer til å være en value--
eller det kommer til å være en rekke lengde én, som har i det i indeksen
null hele ladd fil av MP3.
Så hva jeg gjør når jeg er ferdig lasting er jeg rett og slett
skape en buffer kilde, som er en lyd buffer kilde node.
Det neste trinnet er jeg legger i source.buffer som full lastet buffer
fra BufferList-- det er mye buffers--
og deretter koble den lyd buffer til bestemmelsesstedet.
Så hva det kommer til å gjøre er bare rett og slett sette MP3
rett gjennom til utgangen, og starte den umiddelbart
ved å få denne samtalen.
>> Kult, så la oss se dette skje i aksjon.
Min [uhørbart] her, la oss se.
Så jeg skal bare starte en grunnleggende server.
Det er noe som du må gjøre hvis du er
gjør forespørsler om å laste ned filer.
Jeg kommer til å starte en enkel server.
Dette er i utgangspunktet hele PSet akkurat nå i en linje,
men det er bare å starte en server på port 80/80.
Så vi går over her, vi kommer til å laste 80/80,
vi kommer til å gå til My Favorite Song.
Så hvis jeg treffer "Play min favorittsang "akkurat nå,
det kommer til å laste min favoritt sang og spille it--
[MUSIC - THE EAGLES, "Livet i FAST LANE "]
--which skjer for å være "Life in Fast Lane "av The Eagles.
Nå kunne jeg traff "Stopp min favorittsang "og spille det.
>> [MUSIC - THE EAGLES, "Livet i FAST LANE "]
>> Og hvis jeg går over til konsoll, fordi Jeg brukte en global variabel over her
å holde styr på denne verdien, er det faktisk vil nå bli gjenkjent i konsollen.
Så det automatisk skaper for meg.
Så det er hva som spilles akkurat nå, og jeg kan bare ringe source.stop ()
på det.
Vel, vet du hva?
Bare så dere har hørt dette song-- du kanskje kjenne igjen denne sangen.
>> [MUSIC - til Rick Astley, "ALDRI skal gi DIN TUR"]
[MUSIC - THE EAGLES, "Livet i FAST LANE "]
Vi har nå alle blitt Rickrolled.
OK, flott, flytte på.
Kjølig.
Så dette er i utgangspunktet et eksempel på hvor du kan laste en MP3 file--
[MUSIC - THE EAGLES, "Livet i FAST LANE "]
--og spille det, og stoppe og starte den.
Jeg kunne ha gjort mye mer [uhørbart]
>> Det siste jeg vil gjøre er, Jeg skal vise deg en [uhørbart].
>> [MUSIC SPILLE]
>> Det er som, ogg.wave.mp3.
Jeg tror, ​​hvis jeg husker riktig, Jeg har kjørt inn i noen problemer med .m4a,
men jeg er ikke sikker på det.
Jeg tror mp3.wave--
>> [MUSIC - til Rick Astley, "ALDRI skal gi DIN TUR"]
>> Ok flott.
Jeg burde ikke ha sagt det.
Uansett, hei.
Så vi har denne åpen.
Så nå er alt jeg gjør er at jeg i utgangspunktet opprettet en grunnleggende syntaks for å lage musikk.
Så hvis jeg gjør noe sånt, legger g4 på en to, hva det betyr er at,
legge piano notat, G4, som er den fjerde G
opp på piano fra bunnen.
Så dette er slags MIDI snakker, så for de som er musikk basert,
dette er bare MIDI noter.
>> PUBLIKUM: Det er G av Midt-C, ikke sant?
>> HUGH Zabriskie: Dette er G ovenfor Middle C, det er riktig.
>> PUBLIKUM: Above Middle C.
>> HUGH Zabriskie: Yeah.
Egentlig, ja.
Jeg tror jeg faktisk gjort det ene [uhørbart],
slik at dette kan være en oktav over den.
Så la oss se.
Hvis jeg treffer Play--
[Repetitive PIANO NOTE]
--we're kommer til å høre det.
Tanken er at den opererer akkurat som en kommandolinje ville,
så hvis jeg går opp og ned på tastaturet mitt, du
kan gå tilbake til forrige kommandoer, noe som er ganske nyttig.
Og under er min liste over spor, som alle kjører på sløyfen.
>> PUBLIKUM: Du ble forutsatt at 88-tasters tastatur på det, ikke sant?
>> HUGH Zabriskie: Spørsmålet var, jeg antar en 88-tasters tastatur,
og ja, jeg er.
Hva jeg gjorde er jeg utgangspunktet tok 88 prøver
av piano, en for hver note.
Og så hver gang du høre et notat fra nå av,
det er faktisk en løkke som ser like-- dette er å få spilt på loop,
så for hver note, dette er i gang.
Det som skjer er, jeg skape en buffer på nytt,
Jeg oppretter en gevinst node for å stille volumet.
Dette bare en virkelig komplisert måte å si jeg
lagre buffer i en source.buffer.
Jeg gir det gevinst, jeg koble den til gevinst,
forsterkningen er forbundet med utgang, og da jeg spiller det.
Så det er litt av prosessen for å ta i et buffer kilde.
>> PUBLIKUM: Kan du faktisk ta det tørr lyd og gjøre det vått [uhørbart]?
>> HUGH Zabriskie: Du kan, ja.
Det er re-verb, det er forsinkelse, forvrengning.
Du kan i utgangspunktet sette noe i mellom i denne sandwich of-- godt,
rørledningen er en bedre metafor, men du kan legge noe i det.
Kjølig.
>> Så jeg skal fullføre demoen her for å gi deg en følelse
av nettopp det store antallet ganger du kan kjøre denne funksjonen på en gang.
Så jeg kommer til å fjerne dette.
Jeg kommer til å lage en generator at-- innerst inne hva does-- dette er virkelig
slag av en komplisert syntax-- men det er kommer til å generere notater på fly,
og bare begynne å spille dem som det evaluerer dem.
[Interposing PIANO]
>> Så vi kan bare gjøre litt musikk her.
[Interposing PIANO]
>> Så hva denne kommandoen gjør, for eksempel, er
det tar disse tre notater for piano og deretter setter dem på B3.
Denne syntaksen kan gjøre litt mer fornuftig
til de som har en musikk bakgrunn her.
>> Jeg kan legge til en basstromme.
Jeg kan--
>> [Interposing INSTRUMENTER]
>> --just leke seg med det.
>> Så du kan make--
[Interposing INSTRUMENTER]
At man er litt mer irriterende.
[Interposing INSTRUMENTER]
>> Slik at tilfeldig legger en tørr cymbal på hver 16. notat, med en 16%
[Uhørbart].
>> [Interposing INSTRUMENTER]
>> Ja, så hvordan dette works-- det er alltid i 4: 4.
[Interposing INSTRUMENTER]
>> Ja, så de fire kvartalene, og 16/8.
[Interposing INSTRUMENTER]
>> Så i gjennomsnitt, får du 60% av treff på det 16. notater.
>> Anyways, dette var bare slags å briljere
noen av de tingene du kan bygge med Web Audio API.
Det er veldig kraftig, det er veldig fort, og du kan gjøre mange kule ting
med det.
Så igjen, eventuelle spørsmål du har, epost myself-- Hugh-- eller Sam,
og ærlig, har Google massevis av gode ressurser.
Noen siste spørsmål?
Yeah.
>> PUBLIKUM: Så du kan få tilgang til den innebygde mikrofonen.
Hva om du ønsket å bruke en bedre mikrofon?
HUGH Zabriskie: Hvis du ønsket å bruke bedre mikrofon?
Så igjen, er denne delen av abstraksjon mellom Chrome
og resten av datamaskinen.
Med mindre det er tilgjengelig gjennom en API, som Web MIDI API,
du kan sikkert finne noen hacks, men vanligvis ikke som mulig.
>> SAM GREEN: Du kan also-- alle Chrome vet
er det standard mikrofon er, og det åpner den.
Så hvis du hadde en mikrofon du kunne satt som datamaskinens standard mikrofon,
du kan få tilgang til det på den måten og det ville sannsynligvis fungere.
HUGH Zabriskie: Det er et godt poeng.
Jeg har aldri prøvd det, men du kan være i stand til å snill
of-- hvis du omdirigere input høyttaler, du kan være i stand til å gjøre det, ja.
>> Noen siste spørsmål?
Kjølig.
Vel takk folkens så mye for å se på.
Jeg er Hugh.
SAM GREEN: Jeg er Sam.
HUGH Zabriskie: Og dette er CS50.