SAM GREEN: Hej, alla. Välkommen till vårt seminarium. Mitt namn är Sam. HUGH Zabriskie: Jag är Hugh. SAM GREEN: Och vi kommer att prata idag om JavaScript och webben Audio API. Bara för att börja, är detta ett utkast av vår dagordning för seminariet. Vi ska börja med att tala om varför du bör vara intresserad av webben Audio API, varför är JavaScript det språk du behöver för det, och sedan prata om JavaScript essentials-- så som, gå igenom några grunderna i språket, och sedan prata om audio API på en hög nivå. Då kommer Hugh tala om några led i ljudproduktion och sedan demo denna enorma sequencer Projektet byggde han och visar dig koden. Och då kommer vi att ha tid för frågor i slutet för människor som är här lever. HUGH Zabriskie: Cool. SAM GREEN: Cool. HUGH Zabriskie: Cool. Jag kommer tillbaka upp. SAM GREEN: Så, det viktigaste först. Så en av de stora sakerna om Web Audio API är att det finns ingen uppsättning upp krävs. Den levereras inbyggt i de flesta moderna webbläsare, inklusive Chrome, Edge, en hel gäng mot andra, alla de som att stora delar av människor använder idag. Så det finns ingen inrättas, bortsett från att bara få en webbserver går för dig att komma igång att arbeta på ditt projekt, vilket är bra. Vi rekommenderar ganska tungt som du anser med hjälp av Chrome för JavaScript webbutveckling, bara för att dess utvecklare verktyg är riktigt stark. Som ett exempel på just vad vi menar genom att säga öppnar JavaScript console-- om du går in Chrome och du tittar på en webbsida, och du vänsterklicka Inspektera Element, och sedan du går till denna lilla rullgardins här och du klickar på Console ser du vad öppnar ser mycket som en kommandotolk som du kan se på din Mac, eller på ID. Och precis som vi kan typ kommandon här, liksom Klar, och andra kommandon som. Vi kan skapa variabler, som vi får se senare i JavaScript. Och så allt vi kan göra i JavaScript, kan vi göra med konsolen, och det är en super praktiskt sätt att börja spela runt med API: er och att få bekväm med JavaScript höger utanför bat. Ingen inrättats krävs, vilket är riktigt nice. Häftigt. Grymt bra. Så bara en sak att tillägga. Om du har några questions-- finns många av er som inte är här bor, gärna kontakta oss-- dessa är våra e-postadresser. Om du har frågor du inte vill att fråga oss, som, åh jag har en bugg i min kod, eller något som är lite mer specifikt, kanske Google det först. Det finns en hel del stora resurser om Web Audio API ute. Det är riktigt bra dokumenterat och det är att vara används av massor av människor i industri, och människor som är precis bygga roliga saker för sig själva. Så det borde finnas en hel del resurser ute. Grymt bra. Cool, så varför Web Audio API? Detta diagram är lite av en utveckling av det sätt ljud på nätet har ökat över tid. Bgsound var som den ursprungliga HTML-tagg att Internet Explorer används för att stödja. Det tillät bara ganska grundläggande ljud, funktionaliteten var inte mycket robust, och du kan inte göra komplicerad sekvensering, eller kontrollera när ljudet började och slutade mycket robust. Så var det inte särskilt väl utvecklad. Sedan efter det, Flash kom along-- som, Jag är säker på att ni alla känner med Flash-- kanske inte hur det fungerar, men du har säkert sett det. Du har fått för att uppdatera din Flash Plug-in, alla såna saker, och som verkligen förlängde intervallet funktionalitet som fanns. Men att användaren installera en plug-in är definitivt en nackdel att inkludera Flash i programmet, eller hur? För då är du beroende av användaren går och hitta denna plug-in, och förmodligen vrids upp genom detta extra steg de måste vidta för att använda din app. Och då det kan finnas en uppdatering som kommer att bryta hela din ansökan, och det slutar upp att vara en mardröm för utvecklare, också. Så det var en barrikad. Och sedan efter det kom, HTML ljud taggen, som är en funktion av mer moderna HTML-- som säkert tillåtet för en mycket mer grejer, men även de saker du kan göra Det var lite begränsad just som ett resultat av de saker att HTML var kapabel till. Så när JavaScript API, Web Audio API, blev en standard öva i olika webbläsare, som verkligen breddat uppsättningen möjligheter för utvecklare att verkligen komma in byggnaden coola grejer för webben. Under en lång tid hade varit riktigt robusta verktyg för infödda ljudprogram, like-- alla vet Garageband och då är det uppenbart finns det mer professionella ljudmixning applikationer, och sånt. Men det var inte en riktigt bra Cloud-- inte Moln, ja, antar jag Cloud-- webbaserad plattform som skulle tillåta utvecklare att bygga applikationer för människor att göra ljudmixning. Och som han kommer att visa dig senare, Web Audio API möjliggör riktigt kraftfull saker att hända riktigt enkelt, vilket är ganska coolt. Så det är instruktionen att varför du bör se resten av seminariet i grund och botten. Och nu kommer jag att tala om vissa JavaScript-- bara grundläggande element av språket, så att vi kan vara på samma sida när vi talar om API lite senare. Häftigt. Så detta är ett sammandrag. Jag glömde det var här. Ja. HUGH Zabriskie: Det finns två bilder här. SAM GRÖN: Detta är sammanfattningen av vissa av de begränsningar av de andra bindande, gamla metoder. Och så nu har vi dessa saker. Häftigt. Grymt bra. Så JavaScript väsentligheter. Första saker först, det finns en ganska signifikant skillnad i JavaScript kontra in ett språk som C, på det sätt att variabler skapas. Så i C, vi vana vid att ha att skriva våra variabler, eller hur? Och jag menar inte typen som skriver dem, menar jag typ som tilldela dem en Motortyp- betydelse liknande, en int, en flottör, en röding. I C, var vi verkligen används för att att behöva skapa en variabel och sedan hålla sig till denna typ för hela tiden att vi använder den variabeln. Och det är inte nödvändigtvis sämre, men det är nog svårare att använda. En av de häftiga funktioner JavaScript är att variabler är vad som kallas "dynamiskt skrivit", som betyder att jag kan skapa en variabel med den syntax, varX lika 5, till exempel. Som ursprungligen skapar ett heltal variable-- rätt under huva somewhere-- men jag kan ändra denna variabel att hänvisa till en sträng utan att göra något liknande skapa en ny variabel. Jag behöver inte oroa dig om typen förändras. JavaScript vet att den typ s förändrats, och det händer dynamiskt. Så, det finns fördelar och nackdelar med det, som alla som arbetat i JavaScript för ett tag kanske vet. Det finns tillfällen när du kanske av misstag ändra typ av en variabel och inte hantera den typen förändras, och sedan ditt JavaScript kan crash-- eller ett undantag kastas, eftersom du har fel typ när du förväntar dig en typ. Häftigt. Så är scoping-- vilka samma, om vi minns de första veckorna i kursen, hänvisar till hur synlig en variabel är och i vilken del av koden. Allt detta är mycket lik till hur det ser ut i C. Så variabler är i allmänhet scoped inom klamrar inom en funktion, och sedan finns det också globalt Scoped variabler som är-- om du skriver en variabel utsidan av en funktion, det kommer att vara synlig i hela texten. En skillnad mellan JavaScript och C i synnerhet, är att om du deklarerar en global variabel som helst i en textfil det är synlig i någon funktion inom denna textfil. Det stämmer, eller hur? HUGH Zabriskie: Japp. SAM GREEN: Så det är också lite bit funky i jämförelse med C, där vi alltid måste ha vår variabla definitionerna ovan platserna de användes. Det är inte en regel som är verk längre, så lite annorlunda. Och återigen bara reemphasize, globala kontra lokal variables-- mycket lik C. Du kunde ha två variabler med samma namn, och har en av sina namn skuggas av en lokal variabel om en av dem var global. Så, liknande typ av problem som vissa av er kan ha stött på i vissa av problemet sätter hittills. Cool, så det är variabler. Flödeskontroll, vilket innebär liknande, if-else-- logisk stuff-- och loopar. Så till att börja med, är detta vad if-else uttalanden ser ut i JavaScript. Placeringen av de olika aktiviteterna på linjerna är inte viktigt. Detta är bara ett av de konventioner för hur vi strukturen kod. Precis som i C, har vi en "om" en parentes uttalande. Det är inte vad jag menade att göra. Jag gjorde det igen. HUGH Zabriskie: Försöker att avsluta? SAM GREEN: Nej, jag är försöker bara zooma in. Det spelar ingen roll. Så har vi en "om" uttalande och Vi har ett tillstånd inne i det som utvärderas till sant eller falskt, och som avgör om eller inte Vi anger att kodblocket. Och på samma sätt, vi har en annan-om, och en annan, precis som vi är vana vid i C. Du bör också vara ganska bekväm just off the bat med öglor, eftersom de också ser en hel del som C ser ut. Men du kommer att märka en gång att vi har, i stället för int initieringar, vi har Var initieringar. Och jag antar att du har vara noga med att göra att du inte ändra värdet av I från en int till en sträng, till exempel, eftersom det kommer att orsaka konstigt beteende som du kanske inte förvänta. Men detta bör se ganska bekant, liksom. Så det här är där saker börjar få lite galen i JavaScript för någon som kommer från en bakgrund av C. Det finns funktioner i JavaScript, och det finns ett sätt att deklarera en funktion som ser slags liknar C och så finns det en annan som ser typ av annorlunda. Den första versionen, som vi kan se här, är typ av C-liknande, där vi säga att detta är en funktion, ge den ett namn, ge antalet argument, och sedan innehållet i funktion gå in dessa klammerparentes. Vi får se ett exempel på argument på bara en sekund. Medan på nästa rad ser vi, oh, Här är en variabel som heter "myFunction" och vi lika till detta generisk thing-- function-- som verkar inte ha något på gång. Anledningen till att är annorlunda än C är att JavaScript är vad som kallas en funktionellt språk, eller har funktionella element, vilket innebär som fungerar faktiskt värden. Och det innebär att vi kan ställa in en variabel till lika en funktion och sedan flytta den funktionen runt, skicka den som ett argument, göra alla typer av saker sånt med funktioner. En annan sak att note-- funktioner skrivs med ett visst antal argument. Vi får se ett exempel på en funktion med ett argument på nästa bild. Men JavaScript kommer inte skrika på dig om du försöker att använda en funktion med fel antal argument. Det kommer bara att göra sitt bästa för att göra gör, vilket innebär att om du passerar, du kallar en funktion som förväntar sig en argument utan argument, allt kommer att hända är att det kommer att göra sitt bästa att försöka köra denna kod, och om det så småningom går till ett undantag eller ett fel, det ska kasta detta undantag och bara hålla going-- som är bara ett av de sätt att JavaScript fungerar. Ja. PUBLIK: Vad händer om det finns för många argument? SAM GRÖN: Så Frågan var, vad händer om det finns för många argument? Och svaret är att JavaScript kommer bara ignorera de som är efter de den förväntar sig. Det ska försöka utföra funktionen kalla som om det var bara de två första. Höger? HUGH Zabriskie: Det stämmer, ja. Likaså om det är för få argument, det bara typ av ger null till alla argument som inte har några värden för. SAM GREEN: Vilket kan faktiskt vara praktiskt om du vill skriva en funktion som tar ett variabelt antal argument. Du kan ställa in standardvärden i definitionen av funktionen, och det kan bortse från det faktum att ingången inte är där. Så jag vill prata lite mer om detta sista kulan punkten, som är funktioner är värden. Detta är ett exempel som är lite mind-blowing Om du bara läsa det, och tror inte om vad som händer på en sekund. Så, låt oss titta bara på den första raden här. Vi har denna variabel, f1, att vi säger är en funktion som gör det här. Och innehållet i funktionen är console.log ("hej"). Du kan tänka på console.log som JavaScript ekvivalent printf. Så vad kommer att hända är, om vi kör den här koden i våra webbläsare, det ska skriva ut en sträng. Jag kan visa det. PUBLIK: Genom log, men gör det menar det spelas in någonstans? SAM GREEN: Ja. Så jag ska visa dig vad som kommer att hända. Så frågan var, vad logga detta? HUGH Zabriskie: Så console.log är som printf för C. SAM GREEN: Så console.log är som printf, så om jag har denna console.log ("hej"), och jag kallar det, strängen "hello" får skrivas ut till konsolen. Detta är konsolen. Det är precis som printf, där Det skriver till standard ut. Och vi får se i en minut, men detta är faktiskt hänvisning till konsolen objektet, och anropa en metod på det objektet. Det kommer att göra mer meningsfullt i en minut när vi få tala om objekt i JavaScript, men jag tänkte att jag skulle nämna det. HUGH Zabriskie: Vi är brukade i C, right-- vi brukar skriva ett stort program i huvud att göra någonting. Men vad är hett i JavaScript är du har denna typ av tolk som körs i realtid, så det tar bara rad för rad, Det kan bara tolka det på plats. Och det håller reda på saker som har kört tidigare, så det är ett ganska användbart verktyg för att använda console.log eller konsolen, i allmänhet, för att bara spela runt med JavaScript. SAM GREEN: Så gå tillbaka till denna example-- den andra kodraden här är ganska häpnadsväckande i mitt huvud. Första gången jag läste detta, det var som, vad som händer? Så vad som händer är detta funktionsdeklarationen säger, Jag har en funktion som kallas f2 som är förväntar sig ett argument, f, och sedan kallar det att funktion, f, som leddes till det som ett argument utan argument själv. Så, det kan ha varit förvirrande. Om vi ​​förstår detta som f2 tar f1 som ett argument, och sedan inne i f2, f får called-- som medel att den här kodraden, efter dessa två rader av kod, resulterar i "Hej" skrivs ut till konsolen. Det faktum att vi kan passera funktioner runt som värden slutar upp att vara ett av de mest kraftfulla funktioner för JavaScript som ett programmeringsspråk. Utanför alla av grymma saker man kan göra, precis som ett särdrag hos språket i fråga om det sätt att det gör det enkelt att programmera och medger för saker som inte är särskilt väl lämpad för webben, funktionell programmering och funktionell programmering aspekter av JavaScript är en av de mest kraftfulla begrepp som existerar i JavaScript-- om du frågar mig. Häftigt. Så, nästa sak. Förutom att vara funktionella, Det finns också inslag av JavaScript som är objektorienterat, vilket är ett av de mycket populära modeord i datavetenskap. Objektorienterad programmering är en riktigt populär sak. JavaScript har en version av det, där jag tror att varje värde är också ett objekt, vilket innebär att varje objekt sveper ihop ett visst antal värden. Så för värden som är enkla, som ett heltal, som varX lika 5, objektet sveper just det ett värde. Men vi kan också tänka sig en situation where-- vi kan tänka på situationer i C där vi ville göra något med structs, till exempel, wraps flera som värden ihop och skapar det verkligen lätt att passera på kuttingen. Det är när ett föremål är i JavaScript. Det är viktigt att komma ihåg när jag säger att föremål insvept några antal värden tillsammans, att funktioner är också värden, som betyder att funktioner kan också vara inne i ett JavaScript-objekt. Och anledningen till att är viktigt är att, medan vi ofta tror att kalla en metod på ett objekt som är en populär term från andra populära objektorienterade språk, en av skillnaderna här är att allt som en metod i JavaScript är ett värde som lagras inne i ett objekt som utför vissa action-- möjligen med hjälp av de andra värdena som är inne av det objektet, men inte nödvändigtvis. Så du kan föreställa sig en situation, jag gissa i en liten bit av en galen sätt, där du kallas en metod för en invändningar på ett annat objekt, till exempel. Så det är lite funky på det sättet. Och du kan också ändra metoderna som är associerade med ett objekt genom att tilldela denna metod en ny funktion, som också är ganska annorlunda från andra objektorienterade språk, där när vi deklarerar ett objekt och initiera det, Vi kan inte ändra de metoder som är associerad med det objektet längre. Så det är ganska annorlunda. Häftigt. Så här är ett exempel, först, av ett objekt i aktion. Detta är vad som kallas ett generiskt objekt, som innebär att den inte har någon visst namn, inte har en klass, Det är bara några omslag av värden. Och sättet som ser är att vi har denna yttre par lockigt hängslen här som indikerar att JavaScript och säga att detta är ett objekt. Värdena inuti det är varje värden inne på det objekt som ska lindas tillsammans. Och inne i objektet, Vi har sedan nyckelpar värde, där nyckeln refererar till namnet av värdet på insidan av föremålet, och den andra side-- mittemot kolon här-- är det faktiska värdet som ska lagras. Så du ser här att vi har en nyckel kallas fn med värde sam, följt av ett kommatecken, säger till nästa post. Då en nyckel kallas ln, med ett värde av grönt, följt av ett kommatecken, följt av "tryck" som kommer att ha en funktion värde som kommer att göra den här kodraden. Låt oss ta ett steg tillbaka och packa vad som händer här. Så det här är lite komplicerat, och vi ser något nytt för första gången. Den "detta" nyckelordet är den nya sak vi ser här, och vad detta innebär är, hänvisar till det nuvarande invändningar i omfattning, eller hur? Så när vi säger, det här Parlamentet hela vägen tillbaka till hela denna object-- när vi gör this.fn, vi kommer att gå hela vägen tillbaka till detta objekt, går till fn värdet och få sam, dra den hela vägen tillbaka, hålla den här, och sedan gå vidare. PUBLIK: Så med hämtning, är det gjort på grund av parametern definition? SAM GRÖN: Så frågan var, är det hämtning gjort på grund av parametern definition? Ja, absolut. Vad kommer att hända här är, denna punkt säger till JavaScript OK, jag får något värde från objektet från mig själv. Och då kommer det att leta efter en post kallas fn, och om den finner det, det kommer tillbaka som value-- så, det är sam. Men jag kunde också ha skrivit något som inte definieras här, och sedan skulle det bara returnera undefined-- som är en sak som JavaScript kan gör, vilket kan ha fördelar, men det är also-- om du gör ett stavfel, kan det resultera i konstiga fel. Så det ska bara försöka hitta vad du berättar det för att hitta och det kommer inte att klaga om inte hitta den. Det ska bara säga, jag gjorde inte tycker att det är, och sedan gå vidare. Så det skulle vara odefinierad, plus tom, plus efternamn. Ja. Och då kan vi se att om vi kunde sedan gå ner och access-- och vi kallar tf.print () med parenteser. Det kommer att kalla det tryck funktion utan argument, eller hur? Men om vi just sagt tf.print () semikolon, utan parenteser, allt som skulle ha gjort är att dra ut funktionen från värdet, men egentligen inte kallade det. Häftigt. HUGH Zabriskie: Bör Vi gör ett objekt? SAM GREEN: Visst, låt oss göra det. Så jag kan flytta exempel till konsolen. Vi kan föreställa oss att jag har ett objekt. Så det här är ett enkelt objekt. Detta är ett objekt som innehåller två värden med två nycklar, två nyckelvärde par. Så jag kan sedan komma åt lagrade värdet insidan av detta objekt genom att göra x.x1, till exempel, och jag får en tillbaka. På samma sätt, x.x2, får detta värde tillbaka. Och nu riktigt cool sak är, jag kan faktiskt lägga till något till det här objektet efter att jag har skapat den. Så ni kan föreställa er, låt oss säga att jag har en funktion. HUGH Zabriskie: Du måste göra Shift-Enter. SAM GREEN: Åh, det är irriterande. Vad gjorde det inte som? Åh. Nu kör vi. Häftigt. Så jag har just skapat denna funktion, f, som kommer att gå till den aktuella objekt och skriva ut this.x1. Så om jag bara ringa f av själv, är ingenting händer hända, rätt, eftersom det inte finns någon x1 fält i objektet det hänvisar till. Men, om jag säger, x.f = f, och då jag ring x.f (), jag kommer att få tillbaka en. Att f funktion är nu associerad med objektet x, som har en nyckel kallas x1 associerad med värdet 1, så när vi kallar this.x1, är det kommer att hitta vad det är du letar efter och kunna skriva ut ett värde ur. Så det är bara ett exempel av typ av galna saker du kan göra med objekt i JavaScript. Så att versionen var den generisk version, menande att vi har skapat ett objekt med detta parenteser notation-- stag notation, rather-- och det är praktiskt om vi bara vill en instans av ett visst objekt, men tänk om vi vill ha mer än en av samma slag? Och svaret på den Frågan är, det finns saker kallas klasser i JavaScript liksom. Vi kan skapa en funktion som gör någon form av initiering för ett främmande föremål, och vi skulle säga, liksom, min class-- så namnet av den återanvändbara object-- lika funktion som ställer upp. Så vad detta skulle motsvara till skapar ett objekt som skulle vara precis som, klammerparentes, str, kolon, detta är en sträng, semikolon, klammerparentes. Det skulle vara den generiska objektet vi initiera, med en skillnad att vara på nästa linjer skapar vi en prototyp, som betyder att det är en standardnyckel som vi till vår objekt som har värdet visas här. Vilket innebär att, när jag skapar en ny exempel på detta Minklass objekt, det kommer att ha färdiga insida det ett värde som kallas str och ett annat värde kallas myPrint, som är kommer att vara en funktion. Grymt bra. Bra. Så det sista till säga om JavaScript är att det är riktigt bra för vad kallas asynkrona åtgärder. Asynkron sätt är att vi kan vänta en operation att slutföra innan vi flyttar på, men gå vidare medan vi väntar och sedan har något hända senare. Och vad jag menar med det är du kan föreställa sig en situation där du skicka en begäran till vissa web server någonstans, och det kommer att skicka dig tillbaka några stora bit av data, eller hur? Och ditt användarnamn kunde vänta i Under tiden för att det ska hända, och ingenting kunde vara pågår vid den tidpunkten. Men det är inte en stor design, eller hur? Du vill inte webbsidan att frysa. Vad händer om användaren vill klicka på en rullgardinsmeny? Det är inte en stor designmönster. Istället, i princip vad JavaScript gör är att säga, OK, gör denna operation asynkront. Så som väntar i bakgrunden, och sedan när operationen är klar, ring återuppringning function-- ringa någon funktion, gör några action-- att signalera att operation vi väntade på att avsluta är över. Och anledningen till det är super kraftfull är, vi kan göra något, passera ett argument, göra något, och sedan vänta för att något ska hända. Sedan, en gång att något slutför, kan vi kalla en återuppringning. Det är verkligen praktiskt eftersom det låter oss att göra saker med Web Audio API, till exempel, som last en ljudfil från en fjärrserver utan att behöva vänta på hela ljudfilen som ska läsas, vilket skulle vara riktigt dåligt för användarupplevelse. Häftigt. Sista paret anteckningar om felsökning, eftersom detta är en sak som du kommer att behöva göra som en del av projektet, garanterat. Jag nämnde JavaScript-konsolen. Det är en super användbar funktion av alla moderna webbläsare, Och vi verkligen uppmuntra dig att få bekväm med din konsol, Om du vill bli bra på JavaScript. Det är super praktiskt för felsökning, men det är också verkligen användbart för att räkna ut hur man använder en API. Det möjliggör för riktigt enkel experimentering utan att behöva skriva någon kod, och sedan sammanställa det. Du behöver inte göra alla dessa steg. Du kan bara skriva lite kod till en linje, och sedan få omedelbar feedback på huruvida denna kodrad eller inte worked-- mycket praktiskt. Och bara en teknisk note-- JavaScript-konsolen är ett exempel av en REPL-- så det är R-E-P-L, REPL, som står för läsning, utvärdera, trycket slinga. Du kommer att skriva några saker i, det ska läsa vad du skrev in, det ska utvärdera det, och det kommer att skriva ut utgång, och då börjar igen. Som tillåter dig att snabbt gå in cirklar iteration, vilket är riktigt coolt. Jag antar att verkliga sista note-- detta är den faktiska sista anmärkning, ja. Hur kan vi faktiskt använder JavaScript? Så först, kan vi importera den med en script-tagg på toppen eller botten av en HTML file-- någonstans inne i en HTML-fil, verkligen. Och inom en script-tagg, finns två under sätt att importera JavaScript. Den första är genom att ha en separat JavaScript-fil att vi importerar i sin helhet, eller genom att ha ett område med kod liknande script att starta, och sedan backslash skript för att avsluta. Och sedan skriver vi bara JavaScript inne i HTML-filen. De är de två sätt. Du kan inte ha det inne i HTML. PUBLIK: Är en bättre än den andra? SAM GRÖN: Frågan var, är en bättre än den andra. Så, ja, som en kodning stil praxis, och även det är som en designpraktik. Det finns två skäl varför det kan vara bättre. Den första är, det gör din kod en mycket mer lättläst om alla dina HTML är på ett ställe, är alla dina CSS i en annan plats, alla dina JavaScript är på en tredjeplats. Höger? Jag tycker att vi borde har redan talat om det i sections-- liknande CSS-- vad som är-- och det går ofta i en annan fil. Så, liknande typ av koncept här. Du kan också tänka sig att JavaScript skulle återanvändas på mer än en HTML-sida, eller kanske en många HTML-sidor, och med att JavaScript refactored till en fil som du kan importera till mer än ett ställe gör koden för att vara sätt mer utrymme för detta. Du kan tänka sig en byta till JavaScript och att behöva ändra det i 100 olika filer. Och i stället vi kan bara ändra det i en, som är mycket mer kraftfull. Har jag besvara din fråga? Häftigt. Vi kan också skriva in i konsolen, som vi har nämnt tidigare. Och återigen, en sista note-- Web Audio är inbyggd, du behöver inte läsa in något. Häftigt. Finns det några frågor, har du något fler frågor om JavaScript, innan vi går vidare? PUBLIK: [OHÖRBAR] SAM GREEN: Okej, cool. Så nu kommer han att tala om API. HUGH Zabriskie: Cool. Tack, Sam. SAM GREEN: Visst. HUGH Zabriskie: Awesome, så vi ska gå vidare från JavaScript. Så vi har pratat om några av det viktigaste i JavaScript, och de är de variabler, funktioner, objekt, fungerar som variabler, asynkron lastning. Dessa är alla saker som du kommer se när du använder webben Audio. Så vi ska bara prata om det först på en hög nivå. Det är ett API, så det är något som är byggd, som Sam sa, rakt in JavaScript som du använder i konsolen. Och det är faktiskt precis som C ++ kod som verkligen inbyggt i Chrome och Firefox, och alla dessa webbläsare. Så den huvudsakliga idén med webb Audio är att du har denna typ av pipeline av ljud, eller hur? Så din ljuddata kommer in i någon form. Det är typ av tre huvud forms-- du har oscillator, som skapar en sinusvåg, cosinusvåg, Vi kommer att se hur det fungerar. En annan mycket vanlig en, är naturligtvis en MP3. Så kanske du börjar med en sång, och sedan vill göra några filtrering till detta och utmatning that-- som skulle kunna vara en möjlig källa. Och sedan en riktigt cool en är mikrofonen. Så du kan använda vissa mycket grundläggande samtal i JavaScript att få tillgång till mikrofon, och så om du ville göra en app som en detektor tonhöjd, till exempel, tar det i din röst och räknar ut den pitch-- mycket enkelt sätt att det. Du kan bara typ av läsa den in, räkna ut frekvens, och matas sedan ut en siffra. Så vi får se hur det fungerar, liksom. Destinationen är i grunden där ljuddata matas ut. Så i allmänhet, det är som din bärbara dator högtalare. Andra alternativ är som en ScriptProcessorNode-- vi kommer till noder i ett second-- men i grunden, antingen du lägger ljud ut via datorn genom högtalarna, eller om du typ av inspelning det, så du lagra det som ljuddata. Så kanske om någon skapar musik i din app och sedan du vill spela in det och kanske gillar exportera den till Soundcloud, för example-- det skulle vara ett sätt att göra det. Allt det roliga grejer, som vi pratar om, händer mellan dessa två punkter, där vi lastar i musiken och sedan ut det. Så jag kommer att tala om de fem stadier av ljudproduktion i en sekund. Vi har denna sak kallad en AudioContext, vilket är denna lilla wrapper vi ser här. I grund och botten vad AudioContext är-- om vi gå till JavaScript-konsolen just nu, Vi kan skapa en just nu. Bara ett exempel på REPL, eller hur? Vi läser, utvärdering, och skriver ut. AudioContext är ett globalt tillstånd. Det är en struct, det är ett objekt Här håller och uppgifter om saker som händer på skärmen i samband med ljud. Ett exempel är den aktuella tiden. Detta talar om hur många sekunder, mycket exakt, eftersom webbsidan laddas. Så det här är en riktigt bra liten egenskap som du kan använda. Det har läst only-- Jag tror faktiskt du kan försöka att ställa in dess värde. Det ska berätta ställa in den, och sedan om du skriver ut det igen-- det inte faktiskt ganska arbete. Så det är skrivskyddade fastigheter i JavaScript. Detta är verkligen användbart om du typ av synkronisering en massa olika information när du är typ för att spela olika ljud. En annan riktigt bra en är sammanhanget destinationen. Definitivt, om du är intresserad, vara försöker detta på egen konsol höger nu. Så det här är ett AudioDestinationNode. I grund och botten vad detta säger är, där produktionen går? Så det finns två verkliga alternativ här. Vanligen standard bara högtalarna, så AudioDestinationNode i princip bara säger Det finns noll utgångar till ljudet kommer in, skickas till högtalaren. Så generellt, gör du inte måste spela med det. Om du är intresserad av att faktiskt använda den ScriptProcessorNode för inspelning, definitivt skjuta mig en e-post senare eftersom det är lite mer komplicerat. Men generellt, du är bara typ för att mata ut ljud i någon form. Så cool, vi hoppar tillbaka hit. PUBLIK: Jag är ledsen. HUGH Zabriskie: Ja. PUBLIK: Jag vet att du sa att prata med dig senare om inspelningen. Kan du gränssnitt som med Pro Tools? HUGH Zabriskie: Med Pro Tools? Låt oss se. Jag tror inte det. Så går mellan klienten, vilket är JavaScript konsol, och din faktiska dator, är i allmänhet något som är snäll av tabu, om du kommer typ av arten av the-- Det är lite av en konstruktion sak, men du försöker att hålla webbläsaren separata från användarens faktiska dator. I allmänhet, det enda du kan tillgång mikrofonen eller kameran. Du är inte kunna, jag tror inte, att använda Pro Tools. Men om du har skapat ett spår i Pro Tools, exporteras att du kan läsa det här, filtrera, till exempel, process som, och spela in det till en Ljud Destination-- eller, no-- en sfär Processor Node. Och sedan därifrån, du kan exportera det till Soundcloud, du kunde skicka det i ett e-postmeddelande, eller vad du vill därifrån. Men det är lite av en liten barriär mellan att göra musik på din dator och göra musik på nätet. SAM GREEN: Och det är inte unikt för denna API. Det är en säkerhetsfunktion av Chrome, och Jag tror att alla andra moderna webbläsare. Webbläsaren är fristående. Så till exempel, en webbsida kan inte använda JavaScript för att stänga av ljudet på på dina högtalare, till exempel. Eller det kan inte stänga av datorn. Och det finns ingen mellanliggande punkt mellan dessa två saker, höger, så antingen du har en fullständig abstraktion, eller du öppnar upp säkerhet fel att låta en programmerare med onda avsikter göra vad de vill med din bärbara dator. Och det är därför Chrome är fristående. HUGH Zabriskie: Ja. Betyder det vettigt? Cool, cool. Jag tänkte bara att visar ett exempel på ett. Detta är ganska mycket som långt som du får, när det gäller att få tillgång till användarens dator. Om du har ett USB-tangentbord inkopplad, Du kan använda något som kallas webben MIDI API, som vi inte kommer att verkligen tala om här, men det är en annan API som är inbyggda i åtminstone Chrome-- igen, det är därför vi älskar Chrome-- Jag tror att Firefox eller Safari, Detta är en lätt sak att google-- olika webbläsare har olika stöd som API de har genomfört. Men om du vill koppla in ett tangentbord och arbeta med den informationen, slags skicka tangentbordet information över till datorn och sedan använda den på nätet, detta API är där du vill arbeta det. Häftigt. OK. Så snabbt går vidare här. Hur gör vi i tid? TALARE 1: Om 15. HUGH Zabriskie: 15 minuter kvar? OK bra. Så vi ska tävla vidare här. Så i princip den viktigaste punkten i tänker på detta som en rörledning är att varje steg i rörledningen är en serie av ljud noder. Vår källa, låt oss säga, är en oscillator. Vi måste skapa en oscillator nod. Och det är bara typ av den lilla function-- och de är alla baserade ut av ljud sammanhang här. PUBLIK: När det sägs oscillator, betyder det det är faktiskt bokstavligen gå från två olika poler och tillbaka? HUGH Zabriskie: Nej, det är som en digital representation. Det är faktiskt genomförs i C ++. Jag vet faktiskt inte specs av hur det faktiskt är genomfört, men allt detta fungerar som binära data. Faktiskt, ja. Det skulle vara att säga, jag kunde faktiskt, om du är intresserad, Jag kan skicka dig en lite mer information om hur vågformer hålls med ett digitalt format. OK bra. Så vi generera en ton som en sinus våg eller nåt sånt, kanske 440 Hertz. Vi skapar en oscillator. Om vi ​​vill ställa in volymen, vi Anslut ingenting till en GainNode, som vi skulle kunna göra med .creategain. Som sätter din volym. Du kan skicka det till någon å andra options-- väl, så en ljudbuffert källa nod är där du kanske lagra en MP3 som du har laddat in. BIQUAD filter för filtrering om du vill ta alla basen ut av en låt, eller nåt sånt. Gud förbjude du vill ta basen av en låt. Och AudioDestination nod är, återigen, liknande där vår slutförande är. Om du någonsin intresserad av att se alla de olika möjliga alternativ, bara gå till fliken och låt auto-komplett komma upp. Och om du skapar, kommer du att se alla olika saker som du kan skapa. Du kan skapa dynamiska script processorer, Jag vet inte ens vad det är, för blandning kanal fusioner och kanal vedklyvar och allt det där. Häftigt. Så det här är bara en exempel på en rörledning. Så vi har tre källor kommer in. Kanske är dessa vågformer, kanske dessa är MP3-filer. Man kommer genom en filter, ytterligare ett s få förvrängt annan ens panorering vänster och höger. Du kan göra alla möjliga saker och de alla får blandas runt tillsammans, och sedan ut kommer ljudet i slutet, som destination. Detta är ett exempel på vad mer komplicerade Web Audio kod ser ut. Du skapar alla dessa olika objekt just här-- Jag är inte säker på detta. Nej, inte zooma in. OK. SAM GRÖN: Du gör Kontroll, Scroll-Up. HUGH Zabriskie: Kontroll Scroll-- SAM GREEN: Nej, nej. Kontrollera-- HUGH Zabriskie: Åh, kontroll, Rulla? Åh, gotcha. Ja. Wow, nope, nope. OK. Jag kommer inte att göra det. Så ja, i detta första avsnitt här, ser du vi skapar alla dessa olika noder ur sammanhanget. Vi har precis lappteknik dem tillsammans i den andra delen av denna funktion kallas Connect. Det är en riktigt nyckel funktion i Web Audio. Det betyder bara när du har gjort något med ljudet i en nod, vidarebefordra den till nästa nod. Så vi har källan, det ansluter till analysatorn, analysatorn gör något med det, det går till distorsion, och så vidare, och till destinationen längst ned till höger här. Häftigt. OK, så vi kommer att hålla sig i rörelse på. Den pipeline-- igen, dessa är de vanligaste rörledningar, så vi talar om alla dessa saker som distorsion, panorering, allt det här. Om du verkligen är intresserad att använda saker Pro Tools, de förmodligen intresserar dig. Om inte, kanske du bara vill spela upp ljudet, eller kanske du bara vill ställa in volymen på ljudet. De är de två vanligaste sort av rörledningar i ljudproduktion. Återigen, de sätt du kan ta det in som oscillator-- så, låt oss göra en demo av det här. Så vi kommer att skapa en enkel ljudsammanhang här, och från att vi kommer att skapa vår oscillator. Så det är, återigen, vi är bara kommer att ringa Skapa Oscillator. Vi kommer att ställa in en frekvens på att 440 Hertz, allas favorit. Då kan vi koppla det till destinationen point-- som är tal, så sammanhanget destinationen. Slutligen, vi bara säga, börja noll sekunder från och med nu, och vi har ljud? [RINGANDE] HUGH Zabriskie: Nu kör vi. Det är bara en sinusvåg. OK bra. Och sedan ska vi sluta med det. PUBLIK: Vart tog att återkoppling ifrån? HUGH Zabriskie: The feedback? Åh, förmodligen våra mikrofoner. Så ja, det är hur du gör det. Och faktiskt, om jag hade höll det igång, du skulle kunna ha frekvensen värde som det körs, så det är en rolig sak att leka. Häftigt. Det är alltid en härlig en att presentera. SAM GREEN: Vi gjorde inte tänka på det, gjorde vi? HUGH Zabriskie: Ja, det är en otäck en. Så buffert loading-- jag ska visa ett exempel på det i slutet. Det är laddar en MP3. Och mikrofon, använder du bara en funktion kallas Navigator.getUserMedia () att begära tillgång till användarens mikrofon för denna information. Här är filtrering, jag bara hålla sig i rörelse från detta. Detta är ganska hög nivå, men filter tillåter bara att du [Pipande] Filtrering kan du också att skapa saker som rosa buller, brun buller, vitt brus. Om du vill skapa ren buller, som vissa människor älskar att röra runt med, Du kan använda Web Audio filtrering för att göra det. Ljud Panning-- så föreställa Om du skriver ett spel och du vill att ljudet ska låter som det kommer, liksom, skjuta över skärmen, du kan använda panorering av ljud för att skapa denna typ av kon, vilket like-- det är ganska Mathy, men det är faktiskt riktigt coolt om du får det att fungera, och det finns några bra tutorials på det jag kan skicka dig. I grund och botten kan du snäll mot att skapa ljudet om något går förbi i en 3D sätt. Och om du har en DJ intresse, kan du börja blanda och korsa bleknar låtar. Detta är bara några mycket grundläggande kod, i princip vad jag gjorde innan. Detta ställer in volymen för oscillator, så vi skapar vår oscillator som skapar vågformen. Vi skapar vår GainNode, sätta vår frekvens, och anslut sedan oscillatorn till GainNode, som sedan i princip ändrar hur mycket signalen tillåts igenom. Men egentligen är det en digital sak, så det är mer bara-- ja. Det är inte vad som faktiskt händer, men det är vad som händer i verkliga livet med en vinst. PUBLIK: --quantization av volymen parameter? HUGH Zabriskie: Förlåt? PUBLIK: Är det en kvantiserade volymparameter? HUGH Zabriskie: Ja. Och det är en sak jag verkligen bristfälliga på i min kunskap, hur förstärkningen fungerar på en digital nivå. Jag vet med faktiska signaler, det är i princip hur mycket kontrollerar dig är förstärka signalen. Så, ja. Jag skickar dig mer information om att eftersom jag skulle vara nyfiken faktiskt att veta mer om det. Men i stort sett parametrar är, en är fold-- den starkare signal-- och noll finns ingen signal, annars kommer du inte att höra något ljud. Vi ska hoppa demo tid för det eftersom det är i princip vad jag gjorde innan. Och återigen, Context.Destination är ljud destinationsnoden. Awesome, OK. Så jag kommer att göra en snabb två demos. Hur gör vi i tid? TALARE 1: Cirka 10 minuter. HUGH Zabriskie: 10 minuter? Bra! Grymt bra. Så det första jag tänker gör, det kallas My Favorite Song. Så det här är bara en lite HTML JavaScript. Vi kommer att ha två knappar på sidan spela min favoritlåt och stoppa min favoritlåt. Jag kommer att ändra detta. PUBLIK: Täck ditt mikrofonen. HUGH Zabriskie: Ja. Och jag har laddat in här ett skript som basically-- och detta är verkligen användbart för att ladda en MP3, så det bara gör lastning MP3 mycket snabbare. Det är i princip bara ett omslag. Det gör bara processen för lastning i MP3-filer mycket snabbare, annars du använder HTTP-förfrågan, ungefär som vad vi gjorde på den aktuella delat set med Server. Det är verkligen fula, du vill inte göra det. Så den här killen, Boris SMF, skrev en riktigt användbart litet verktyg som heter BufferLoader. Allt du behöver göra är helt enkelt passera det sammanhang, passerar du en list-- eller, ja, är det en lista i JavaScript? SAM GREEN: En array. HUGH Zabriskie: Åh, är det en array, det stämmer. Det är en rad vägar till olika filer. Och då du passerar den en funktion. Detta är callback vi pratade om med asynkron lastning. Som kommer att kallas när filer som lästs. Och denna funktion som anropas när filens laddade tar som en omkrets en array av laddade buffertar. Så som sker här. I grund och botten är BufferList kommer att bli en value-- eller det kommer att bli en rad längd en, som har i det index noll hela inlästa filen i MP3. Så vad jag gör när jag är klar lastning, jag helt enkelt skapa en buffertkälla, som är en ljudbuffert som källnod. Nästa steg är att jag laddar i source.buffer som den fulla laddade buffert från BufferList-- Det är en hel del buffers-- och sedan ansluta denna ljud buffert till destinationen. Så vad det kommer att göra är bara helt enkelt sätta MP3 rakt igenom till utgången, och börja omedelbart på att få detta samtal. Cool, så låt oss se detta hända i aktion. Min [OHÖRBAR] här, låt oss se. Så jag ska bara starta en grundläggande server. Det är något som du behöver göra om du är gör förfrågningar om last filer. Jag ska starta en grundläggande server. Detta är i grunden hela din PSET just nu i en rad, men det är just har börjat en server på port 80/80. Så vi går hit, vi kommer att ladda 80/80, vi kommer att gå till min favoritlåt. Så om jag slog "Play my favoritlåt "just nu, det kommer att ladda min favoritlåt och spela det-- [MUSIK - Örnarna, "livet i omkörnings  KÖRFÄLT"] --which råkar vara "Life in Fast Lane "av The Eagles. Nu, jag kunde slå "Stoppa min favoritlåt "och spela det. [MUSIK - Örnarna, "livet i omkörnings  KÖRFÄLT"] Och om jag går över att trösta, eftersom Jag använde en global variabel hit att hålla reda på detta värde, det faktiskt kommer nu att redovisas i konsolen. Så det automatiskt skapar för mig. Så det är vad som spelas just nu, och jag kan helt enkelt kalla source.stop () på det. Tja, vet du vad? Bara så ni har hört detta song-- du kanske känner igen den här låten. [MUSIK - Rick Astley, "ALDRIG ATT GE  DU UPP"] [MUSIK - Örnarna, "livet i omkörnings  KÖRFÄLT"] Vi har nu alla Rickrolled. OK, bra, går vidare. Häftigt. Så det här är i grund och botten ett exempel på precis hur du kan läsa in en MP3 file-- [MUSIK - Örnarna, "livet i omkörnings  KÖRFÄLT"] --and spela det, och stoppa och starta den. Jag kunde ha gjort mycket mer [OHÖRBAR] Den sista jag gör är, Jag ska visa dig en [OHÖRBAR]. [MUSIK SPELA] Det är som, ogg.wave.mp3. Jag tror, ​​om jag minns rätt, Jag har stött på vissa problem med .m4a, men jag är inte säker på det. Jag tror mp3.wave-- [MUSIK - Rick Astley, "ALDRIG ATT GE  DU UPP"] OK bra. Jag borde inte ha sagt det. Hur som helst, hej. Så vi har detta öppna. Så nu allt jag gör är att jag i princip skapade en grundläggande syntax för att skapa musik. Så om jag gör något liknande, lägg g4 Den 1 2, vad det innebär att, lägg piano anmärkning, G4, vilket är den fjärde G upp på pianot från botten. Så det här är typ av MIDI tala, så för dem som är musik baserad, detta är bara MIDI-noter. PUBLIK: Det är G av medel C, eller hur? HUGH Zabriskie: Detta är G över USA C, det stämmer. PUBLIK: Ovanför Mellanöstern C. HUGH Zabriskie: Ja. Faktiskt, ja. Jag tror att jag faktiskt gjort det en [OHÖRBAR], så detta kan vara en oktav över det. Så låt oss se. Om jag slog Play-- [REPETERANDE PIANO OBS] --we're kommer att höra det. Tanken är att det fungerar precis som en kommandorad skulle, så om jag går upp och ner på mitt tangentbord, du kan gå tillbaka till föregående kommandon, vilket är ganska bra. Och nedan är min lista över spår, vilka alla drivs med ögla. PUBLIK: Du antar att 88-tangenters tangentbord på det, eller hur? HUGH Zabriskie: Frågan var, antar jag en 88-tangenters tangentbord, och ja, jag är. Vad jag gjorde är jag i grund och botten tog 88 sampel av piano, en för varje ton. Och så varje gång du höra en anteckning från och med nu, som faktiskt är en slinga som ser like-- detta få spelas på slingan, så för varje ton, detta körs. Vad som händer är jag skapa en buffert igen, Jag skapar en vinst nod att ställa in volymen. Detta bara en riktigt komplicerat sätt att säga I lagra buffert i en source.buffer. Jag ger det vinsten, jag ansluta den till vinsten, förstärkningen är ansluten till utgång, och då jag spelar det. Så det är typ av process att ta i en buffert källa. PUBLIK: Kan du faktiskt ta det torr ljud och göra det våta [OHÖRBAR]? HUGH Zabriskie: Du kan, ja. Det finns åter verb, det finns fördröjning, distorsion. Du kan i princip sätta något i mellan att sandwich of-- bra, pipeline är en bättre metafor, men du kan lägga något i det. Häftigt. Så jag ska avsluta demo här för att ge dig en känsla för att bara det stora antalet gånger du kan köra denna funktion på en gång. Så jag kommer att ta bort detta. Jag kommer att skapa en generator that-- i princip vad does-- detta är verkligen typ av en komplicerad syntax-- men det är kommer att generera anteckningar i farten, och bara börja spela dem som utvärderar dem. [Inplacering PIANO] Så vi kan bara göra lite musik här. [Inplacering PIANO] Så vad detta kommando gör, till exempel, är det tar dessa tre toner för piano och sedan sätter dem på B3. Denna syntax kan göra lite mer meningsfullt till dem som har en musik bakgrund här. Jag kan lägga till en bastrumma. Jag kan-- [Inplacering INSTRUMENT] --just leka med det. Så du kan make-- [Inplacering INSTRUMENT] Att man är lite mer irriterande. [Inplacering INSTRUMENT] Så som slumpmässigt läggs en torr cymbal på varje 16:e notera, med en 16% [OHÖRBAR]. [Inplacering INSTRUMENT] Ja, så hur denna works-- det är alltid i 4: 4. [Inplacering INSTRUMENT] Ja, så de fyra kvartalen, och 16/8. [Inplacering INSTRUMENT] Så i genomsnitt får du 60% av träffar på 16-delsnoter. Ändå, det var bara typ av att visa upp några av de saker du kan bygga med Web Audio API. Det är verkligen kraftfulla, det är verkligen snabb, och du kan göra en hel del coola saker med det. Så återigen, alla frågor du har, e myself-- Hugh-- eller Sam, och ärligt, har Google massor av goda resurser. Alla sista frågor? Ja. PUBLIK: Så du kan komma åt den inbyggda mikrofonen. Vad händer om du ville Använd en bättre mikrofon? HUGH Zabriskie: Om du ville att använda bättre mikrofon? Så återigen, är denna del av abstraktion mellan Krom och resten av datorn. Om det inte är tillgängliga via ett API, som Web MIDI API, du kan nog hitta några hack, men i allmänhet inte lika genomförbart. SAM GRÖN: Du kan also-- alla Chrome vet är vad din standardmikrofon är, och det kommer åt det. Så om du hade en mikrofon du kunde in som datorns standardmikrofon, du kan komma åt det på det sättet och det skulle nog fungera. HUGH Zabriskie: Det är en bra poäng. Jag har aldrig provat det, men du kanske kunna slag of-- om du omdirigera input högtalare, du skulle kunna göra det, ja. Alla sista frågor? Häftigt. Jo tack killar så mycket för att titta på. Jag är Hugh. SAM GREEN: Jag är Sam. HUGH Zabriskie: Och detta är CS50.