>> SAM GREEN: Hallo, alle zusammen.
Willkommen in unserem Seminar.
Mein Name ist Sam.
HUGH ZABRISKIE: Ich bin Hugh.
Sam Green: Und wir werden heute zu sprechen über JavaScript und die Web Audio API.
Nur um zu beginnen, ist dies eine übersicht auf unserer Agenda für das Seminar.
Wir werden, indem man über Start warum Sie sich für das Web sein sollte
Audio API, warum ist JavaScript die Sprache, die Sie dafür benötigen,
und dann über JavaScript sprechen essentials-- so wie,
gehen Sie durch einige Grundlagen der Sprache,
und dann über die zu sprechen Audio-API auf einem hohen Niveau.
Dann werden Hugh über einige sprechen der Stufen der Audioproduktion
und dann Demo dieses ehrfürchtige Sequenzer Projekt baute er und zeigt Ihnen den Code.
Und dann, wir haben Zeit für Fragen am Ende für die Menschen
die hier leben.
>> HUGH ZABRISKIE: Kühle.
>> SAM GREEN: Kühle.
>> HUGH ZABRISKIE: Kühle.
Ich werde wieder auf.
>> SAM GREEN: Also, das Wichtigste zuerst.
Damit wird eines der großen Dinge über das Web Audio API
ist, dass es keine Einrichtung erforderlich.
Es kommt zu integrierten den meisten modernen Browsern,
einschließlich Chrom, Rand, insgesamt Haufen Andere-- all diejenigen,
dass große Teile Menschen nutzen heute.
So gibt es keine aufgestellt, abgesehen von gerade erst
ein Web-Server gehen, für Sie begann zu bekommen
an Ihrem Projekt, was ausgezeichnet ist.
>> Wir empfehlen hübsches stark, dass man bedenkt,
Verwendung von Chrome für JavaScript Web-Entwicklung,
nur weil seinem Entwickler Werkzeuge sind wirklich stark.
Als ein Beispiel für genau das, was wir meinen, sagen, öffnen Sie Ihren JavaScript-
console-- wenn Sie Chrome gehen und du siehst in jedem Web-Seite,
und Sie klicken Sie links Inspect Element, und dann
Sie zu diesem kleinen Dropdown-go hier und Sie auf Console klicken,
Sie werden sehen, was öffnet schaut ein viel wie eine Eingabeaufforderung, dass Sie
könnte auf Ihrem Mac zu sehen, oder auf die ID.
Und genau so, können wir Typ-Befehle hier, wie Regen,
und andere Befehle so.
Wir können Variablen zu erstellen, wie wir später in JavaScript zu sehen.
Und so alles, was wir tun, kann in JavaScript wir mit der Konsole zu tun,
und das ist eine Super-handliche Weise, startet das Spiel mit APIs
und, sich mit JavaScript Anhieb.
Keine Einrichtung erforderlich, Das ist wirklich nett.
Cool.
Fantastisch.
>> Also nur noch eine Sache hinzufügen.
Wenn Sie irgendwelche questions-- gibt es viele von Ihnen, die nicht hier leben,
fühlen sich frei, diese E-Mail us-- sind unsere E-Mail-Adressen.
Wenn Sie Fragen haben Sie wollen nicht, uns zu fragen,
wie, oh Ich habe einen Fehler haben in meinem Code, oder etwas
Das ist ein wenig präziser, vielleicht Google es zuerst.
Es gibt eine Menge großartiger Ressourcen über das Web Audio API gibt.
Es ist wirklich gut dokumentiert und es als
durch eine Menge Leute in verwendet Industrie, und Leute, die einfach sind,
Aufbau fun stuff für sich.
So sollte es eine Menge sein von Ressourcen gibt.
Fantastisch.
>> Cool, also warum das Web Audio API?
Dieses Diagramm ist ein bisschen einer Entwicklung des Weges
Sound im Web hat sich im Laufe der Zeit gewachsen.
Bgsound war wie die ursprüngliche HTML-Tag Internet Explorer verwendet, um zu unterstützen.
Es dürfen nur für recht einfach klingt, die Funktionalität war nicht sehr robust,
und man konnte nicht machen komplizierte Sequenzierung,
oder zu steuern, wenn ein Ton begonnen und blieb sehr robust.
So war es nicht besonders gut entwickelt.
Dann, nach, dass Flash- kam along--, die,
Ich bin mir sicher, dass euch alle kennen mit Flash-- vielleicht auch nicht, wie es funktioniert,
aber Sie haben es sicherlich gesehen.
Sie müssen Ihren Flash aktualisieren Plug-in, all solche Sachen,
und dass auf jeden Fall erweitert die Reichweite Funktionalität, die verfügbar war.
Aber was den Benutzer installieren ein Plug-in ist auf jeden Fall
Ein Nachteil einschließlich Flash in Ihrer Anwendung, oder?
Weil Sie dann abhängig von der du Benutzer gehen und finden dieses Plug-in,
und wahrscheinlich eingeschaltet durch diesen zusätzlichen Schritt
sie zu treffen haben, um Ihre Anwendung zu verwenden.
Und dann könnte es ein Update sein das wird Ihre gesamte Anwendung zu brechen,
und es endet als ein Alptraum für den Entwickler, zu.
Das war also eine Barrikade.
>> Und dann danach kam, die HTML-Audio-Tag, der
ist ein Merkmal der modernen HTML-- die sicherlich für viel mehr Sachen erlaubt,
sondern auch die Dinge, die Sie tun könnten, Es gab ein wenig nur begrenzt
als Folge der Dinge dass HTML war in der Lage ist.
Also, wenn die JavaScript- API, die Web Audio API,
wurde zu einem Standard- in allen Browsern zu üben,
das wirklich den Satz erweitert Möglichkeiten für Entwickler
wirklich in Gebäude zu gelangen coole Sachen für das Web.
Für eine lange Zeit dort hatte waren wirklich robuste Werkzeuge
für native Audio-Anwendungen, like-- jeder weiß, Garageband,
und dann natürlich gibt es mehr professionelle Audio-Mischanwendungen,
und solche Sachen.
Aber es war kein wirklich gut Cloud-- nicht
Wolke, ja, ich denke, Cloud-- webbasierte Plattform
das wäre Entwicklern ermöglichen Erstellen von Anwendungen für die Menschen
In den Audio-Mixing zu tun.
Und wie er wird Ihnen zeigen, später wurde die Web Audio API
ermöglicht die wirklich mächtig Zeug, um wirklich einfach passieren,
Das ist ziemlich cool.
Also das ist, die Anweisung, warum Sie sollte den Rest des Seminars zu sehen,
im Grunde.
>> Und jetzt, ich werde zu reden einige JavaScript-- nur Grundelemente
der Sprache, so daß Wir können auf der gleichen Seite
Wenn wir über das reden API ein wenig später.
Cool.
>> Also, das ist eine Zusammenfassung.
Ich habe vergessen, hier war.
Ja.
>> HUGH ZABRISKIE: Es gibt zwei Rutschen Sie hier.
>> SAM GREEN: Dies ist die Zusammenfassung der einige der Beschränkungen
der anderen Bindung, alten Methoden.
Und dann jetzt haben wir diese Dinge.
Cool.
Fantastisch.
>> Also, JavaScript Wesentliche.
First things first, es gibt eine ziemlich signifikanten Unterschied
in JavaScript gegenüber in eine Sprachen wie C, in der Weise,
dass Variablen erstellt.
So in C, sind wir darauf, verwendet unsere Variablen geben, oder?
Und ich meine nicht Typ wie geben Sie sie in, ich meine Art
wie ordnen Sie eine Typ-- Bedeutung wie ein int, ein Schwimmer, ein char.
In C wurden wir wirklich verwendet mit, um eine Variable zu erstellen
und klicken Sie dann auf diese Art für den Stick ganze Zeit, dass wir diese Variable.
Und das ist nicht unbedingt schlechter, aber es ist wahrscheinlich schwieriger zu bedienen.
Eine der coolen Features JavaScript ist
dass Variablen sind, was heißt "dynamisch typisierte", die
bedeutet, dass ich ein zu erstellen Variable mit diesem Syntax,
varX gleich 5 ist, zum Beispiel.
Das ursprünglich erstellt eine ganze Zahl'variable
direkt unter der Haube somewhere-- aber ich
können diese Variable ändern um in einen String beziehen
ohne etwas zu tun, wie Erstellen Sie eine neue Variable.
Ich brauche keine Sorgen zu machen über die Art ändert.
JavaScript, weiß, dass die Art der geändert, und das dynamisch passiert.
>> So gibt es Vorteile und Nachteile auf, dass,
wie jeder, der in der gearbeitet hat JavaScript für eine Weile vielleicht wissen.
Es gibt Zeiten, Sie vielleicht versehentlich
ändern Sie den Typ einer Variablen und nicht damit umgehen, dass Typ-Wechsel,
und dann sie JavaScript kann crash-- oder eine Ausnahme
geworfen werden, weil Sie das haben falsche Art, wenn Sie erwarten, dass ein Typ.
Cool.
>> So ist scoping-- die wie, wenn wir erinnere mich an die ersten Wochen im Verlauf,
bezieht sich auf die sichtbare einer Variablen ist und in welchem ​​Bereich des Codes.
All das sieht sehr ähnlich die Art und Weise sieht es in C.
So Variablen werden in der Regel scoped in geschweiften Klammern innerhalb einer Funktion,
und dann gibt es auch global Bereichs-Variablen,
sind--, wenn Sie eine Variable zu schreiben außerhalb einer Funktion,
es wird im gesamten Text sichtbar.
>> Ein Unterschied zwischen JavaScript und C insbesondere
ist, dass, wenn Sie eine globale erklären variable überall in einer Textdatei
in irgendeiner Funktion sichtbar ist innerhalb dieser Textdatei.
Das ist richtig, nicht wahr?
>> HUGH ZABRISKIE: Yep.
>> SAM GREEN: Also das ist auch ein wenig bit flippige im Vergleich zu C,
wo wir immer, dass unsere Variablendefinitionen über die Orte,
sie verwendet wurden.
Das ist nicht eine Regel, die durchgesetzt hat mehr, also, ein wenig anders.
Und wieder, nur um noch einmal betonen, globalen Vergleich lokale variables--
sehr ähnlich C. Sie hätten zwei Variablen mit dem gleichen Namen,
und haben eine der ihren Namen abgeschattet wird durch eine lokale Variable, wenn einer von ihnen
war global.
Also, ähnliche Art von Probleme, dass einige von euch
kann in in einigen ausgeführt haben Ihres Problems setzt so weit.
Cool, das ist also Variablen.
>> Kontrollfluss, was bedeutet, wie, wenn-else-- logischen stuff-- und Loops.
Also, mit zu beginnen, das ist was if-else Aussagen aus wie in JavaScript.
Die Anordnung der verschiedenen Dingen auf den Leitungen ist nicht wichtig.
Dies ist nur eines der Übereinkommen für die Art, wie wir Struktur-Code.
Genau wie in C, haben wir ein "wenn", eine Klammer Aussage.
Das ist nicht, was ich tun soll.
Ich habe es wieder getan.
>> HUGH ZABRISKIE: Der Versuch, zu verlassen?
SAM GREEN: Nein, ich bin nur versuchen, um es zu vergrößern.
Es spielt keine Rolle.
>> Also, eine "if" -Anweisung müssen wir und wir haben eine Bedingung in der es
dass den Wert true oder false, und bestimmt, ob oder nicht
Wir geben Sie diese Code-Block.
Und ebenso, haben wir eine else-if und ein anderes, genau wie wir, um in C verwendet
>> Sie sollten auch ziemlich bequem sein auf Anhieb mit Schlaufen,
weil sie auch aussehen eine Menge, wie C aussieht.
Aber Sie werden feststellen, dass wir uns wieder zu haben, anstelle von int Initialisierungen
Wir haben var Initialisierungen.
Und ich denke, Sie haben vorsichtig sein, um zu sein,
dass Sie nicht den Wert zu ändern der ich von einem int in einen String,
zum Beispiel, weil das ist zu gehen verursachen seltsame Verhalten Sie vielleicht nicht
damit rechnen.
Aber diese aussehen sollte ziemlich vertraut, wie gut.
>> Also das ist, wo die Dinge beginnen, bekommen ein wenig verrückt in JavaScript
für jemanden, der aus a los ist Hintergrund der C. Es gibt Funktionen
in JavaScript, und es gibt eine Möglichkeit, um eine Funktion, die aussieht erklären
Art ähnlich zu C, und dann gibt es eine andere,
sieht irgendwie anders aus.
>> Die erste Version, die wir hier sehen können,
ist eine Art C-like, in denen wir sagen, dies ist eine Funktion,
geben Sie ihm einen Namen geben die Anzahl der Argumente,
und dann wird der Inhalt des Funktions gehen Sie innerhalb dieser geschweiften Klammern.
Wir werden ein Beispiel zu sehen Argumente in nur einer Sekunde.
>> Der Erwägung, dass in der nächsten Zeile, sehen wir, oh, hier ist eine Variable namens "myFunction"
und wir gleich es dazu Generika thing-- function-- dass
scheint nicht zu etwas los ist.
Der Grund, dass anders ist als C ist, dass JavaScript
ist das, was eine funktionale Sprache genannt wird, oder hat Funktionselemente, was bedeutet,
dass Funktionen sind eigentlich Werte.
Und das bedeutet, dass wir festlegen können eine Variable, eine Funktion gleich
und verschieben Sie dann diese Funktion um, übergeben Sie als Argument,
tun alle möglichen Dinge wie das mit Funktionen.
>> Eine andere Sache zu HINWEIS-- Funktionen geschrieben
mit einer bestimmten Anzahl von Argumenten.
Wir werden ein Beispiel für eine Funktion zu sehen mit einem Argument auf der nächsten Folie.
Aber JavaScript wird nicht schreien Sie, wenn Sie versuchen,
eine Funktion mit der Verwendung Falsche Anzahl von Argumenten.
Es wird nur sein Bestes tun, um zu tun, was bedeutet, dass, wenn Sie übergeben,
Sie eine Funktion, die einen erwartet nennen Argument ohne Argument, alles, was
passiert, wird es wird sein Bestes tun, um zu versuchen, diesen Code auszuführen,
und wenn es irgendwann läuft in eine Ausnahme oder ein Fehler auftritt,
es wird diese Ausnahme zu werfen und einfach weiter going-- welches nur eine der Möglichkeiten,
dass JavaScript funktioniert.
Ja.
>> Publikum: Was passiert, wenn es gibt zu viele Argumente?
SAM GREEN: Also die Frage war, was passiert,
Wenn es zu viele Argumente?
Und die Antwort ist, dass JavaScript wird nur
ignorieren diejenigen, die sind nach denen sie erwartet.
Er werde versuchen, die Funktion auszuführen rufen, als ob es nur die ersten beiden.
Recht?
>> HUGH ZABRISKIE: Das ist richtig, ja.
Gleiches gilt, wenn gibt zu wenige Argumente,
es nur irgendwie gibt null bis alle Argumente sie keine Werte haben
für.
>> SAM GREEN: denen tatsächlich nützlich sein, wenn Sie
möchte eine Funktion schreiben, dass erfolgt eine variable Anzahl Argumente.
Sie können Standardwerte in eingestellt Die Definition der Funktion,
und er kann die Tatsache zu ignorieren , dass der Eingang ist nicht da.
Deshalb möchte ich ein wenig sprechen mehr über diese letzte Kugel
Punkt, der Funktionen sind Werte.
Dies ist ein Beispiel, das ist ein wenig überwältigend
wenn Sie gerade lesen, und glaube nicht, dass über das, was vor sich geht für eine Sekunde.
Also, lassen Sie uns einfach an die erste Linie hier.
Wir haben diese Variablen f1, dass wir sagen, ist eine Funktion, diese Sache tut.
Und der Inhalt der Funktion sind console.log ("Hallo").
Sie können von console.log die denken, JavaScript Äquivalent printf.
So ist, was passieren wird, wenn wir führen Sie diesen Code in unserem Browser,
es wird drucken Sie eine Zeichenfolge.
Ich kann beweisen, dass.
Publikum: Mit log, aber das tut meine, es ist irgendwo gespeichert?
Sam Green: Ja.
Also werde ich Ihnen zeigen, was passieren wird.
So war die Frage, was bedeutet log das?
>> HUGH ZABRISKIE: So console.log ist wie printf für C.
SAM GREEN: So console.log ist wie printf,
so dass, wenn ich diese console.log ("Hallo"), und ich fordere, dass die Zeichenfolge "Hallo"
steigt aus auf der Konsole ausgegeben.
Dies ist die Konsole.
Es ist genau wie printf, wo er druckt die Standardausgabe.
Und wir werden gleich sehen, aber dies ist tatsächlich
die sich auf die Konsolen-Objekt, und Aufrufen einer Methode für das Objekt.
Das wird mehr Sinn machen in einer Minute, wenn wir
bekommen, um darüber zu reden Objekte in JavaScript,
aber ich dachte, ich würde nur erwähnen, dass.
HUGH ZABRISKIE: Wir sind in C verwendet, right--
wir schreiben normalerweise ein großes Programm im Haupt, etwas zu tun.
Aber was ist cool in JavaScript ist Sie haben diese Art von Interpreter,
in Echtzeit läuft, so dass es dauert nur Zeile für Zeile,
es ist nur interpretieren kann, dass auf der Stelle.
Und es verfolgt Dinge, die vor ausgeführt haben,
so ist es ein ziemlich nützliches Werkzeug, um benutzen console.log oder die Konsole,
in der Regel, um nur zu spielen rund mit JavaScript.
>> SAM GREEN: So geht zurück auf diese example-- die zweite Codezeile
hier ist ziemlich irrsinnig in meinem Kopf.
Das erste Mal las ich diese, es war, ist, was geht hier vor?
Also, was passiert ist, diese Funktionsdeklaration, sagt,
Ich habe eine Funktion namens f2 das ist erwartet ein Argument, f,
und dann ruft sie, dass Funktion F, die
wurde als Argument übergebenen ohne Argumente selber.
So, das war vielleicht verwirrend sein.
Wenn wir verstehen dies als f2 nimmt f1 als Argument, und dann innerhalb von f2,
f erhält called-- was bedeutet, dass dieser Codezeile,
Nach diesen zwei Zeilen Code, führt zu "Hallo"
wobei auf der Konsole ausgegeben.
>> Die Tatsache, dass wir weitergeben können Funktionen um, als Werte
endet als einer der am meisten leistungsstarken Funktionen von JavaScript
als Programmiersprache.
Außerhalb aller genial Dinge tun können,
ebenso ein Merkmal der Sprache in Bezug auf die Art und Weise
dass es macht die Dinge einfach Programmierung und ermöglicht
für Dinge, die nicht besonders sind auf die Bahn gut geeignet,
funktionalen Programmierung und Funktions Programmierung Aspekte JavaScript
ist einer der am meisten leistungsfähige Konzepte,
existiert in JavaScript-- wenn Sie mich fragen.
Cool.
>> Also, das nächste Ding.
Zusätzlich dazu, dass praktisch gibt es auch Elemente von JavaScript
die objektorientiert sind, Das ist einer der ganz
beliebte Schlagworte in der Informatik.
Objekt orientierte Programmierung ist eine wirklich populäre Sache.
JavaScript hat eine Version, dass, wo ich glaube, jeder Wert ist auch
ein Objekt, das bedeutet, dass jedes Objekt wickelt eine Anzahl von Werten zusammen.
Also für Werte, die einfach sind, wie eine ganze Zahl, wie varX gleich 5,
dieses Objekt wickelt nur, dass ein Wert.
>> Wir können aber auch eine Situation vorstellen, where-- wir von Situationen, in C denken kann
wo wir wollten, etwas mit Strukturen,
beispielsweise, dass mehrere hüllt Werte zusammen und Marken
es wirklich einfach, die Dinge um weiterzugeben.
Das ist, wenn sich ein Objekt in JavaScript.
>> Es ist wichtig, daran zu erinnern, wenn ich sage, dass Objekte gewickelt
eine Zahl von Werten zusammen, dass Funktionen auch
Werte, die die Funktionen bedeutet, auch innerhalb eines JavaScript-Objekts sein.
Und der Grund, die wichtig ist ist, dass, während wir oft
denken Sie an Aufrufen einer Methode auf ein Objekt, das ist
einer populären Begriff aus anderen populäre objektorientierten Sprachen,
einer der Unterschiede ist hier, dass alles, was ein Verfahren ist in JavaScript
ist ein Wert innerhalb eines Objekts gespeichert dass führt einige Action-- möglicherweise
mit den anderen Werten, die im Inneren sind des Objekts, aber nicht notwendigerweise.
So können Sie sich eine Situation vorstellen, I denke, in ein wenig von einer verrückten Art und Weise,
in dem Sie eine Methode der sogenannte Objekt auf ein anderes Objekt, beispielsweise.
Also, es ist ein bisschen flippig auf diese Weise.
>> Und Sie können auch die Methoden zu ändern die einem Objekt zugeordnet sind,
durch die Zuweisung dieser Methode ein neue Funktion, die auch
ziemlich unterschiedlich zu anderen objektorientierten Sprachen, in denen
wenn wir ein Objekt zu erklären und instanziiert es,
können wir die Methoden, die sich nicht ändern, mit diesem Objekt mehr zugeordnet ist.
Also, das ist ziemlich anders.
Cool.
>> Also hier ist ein Beispiel, zuerst, eines Objekts in Aktion.
Dies ist, was heißt ein generisches Objekt, das
bedeutet, dass es nicht irgendwelche insbesondere Name, verfügt nicht über eine Klasse,
es ist nur einige Umhüllung von Werten.
Und die Art und Weise, die aussieht, ist, wir haben diese äußere Paar von geschweiften Klammern hier
, die JavaScript anzuzeigen und sagen, das ist ein Ziel.
Die Werte in der es sind jeweils Werte in
des Objekts Das sollte zusammen gewickelt werden.
Und im Inneren des Objekts, wir haben dann Schlüssel Wert-Paare,
wobei der Schlüssel sich auf den Namen der Wert innerhalb des Objekts,
und der andere side-- gegenüber dem Doppelpunkt hier--
ist der tatsächliche Wert das sollte gespeichert werden.
>> Sie sehen also hier, dass wir eine Taste aufgerufen mit Wert sam fn,
gefolgt von einem Komma, sagen auf den nächsten Eintrag.
Dann wird ein Schlüssel namens ln, mit einem Wert von Grün,
gefolgt von einem Komma, gefolgt von "print"
die gehen, um einen Funktionswert haben das wird diese Codezeile zu tun.
Werfen wir einen Schritt zurück und auspacken, was hier vor sich geht.
Also das ist ein wenig kompliziert, und wir etwas Neues sehen
das erste Mal.
Das "this" Schlüsselwort ist das neue Ding wir hier sehen, und was dies tut
ist, ist der Strom, Objekt in Umfang, nicht wahr?
Wenn wir also sagen, diese weist den ganzen Weg zurück
dieser gesamte object-- wenn wir das tun this.fn,
wir werden den ganzen Weg zurück zu gehen auf dieses Objekt, um die fn-Wert gehen
und erhalten sam, ziehen Sie es den ganzen Weg zurück, kleben Sie es hier, und dann weiterziehen.
>> Publikum: So mit dem Abruf ist dass aufgrund der Parameter gemacht
Definition?
SAM GREEN: Die Frage war, ist die Abrufen wegen der Parameter getan
Definition?
Ja, absolut.
Was wird passieren, hier ist, dieser Punkt sagt zum JavaScript,
OK, ich bin immer einen gewissen Wert von diesem Objekt von mir selbst.
Und dann werden sie nach einem Eintrag zu suchen genannt fn, und wenn es sie findet,
es wird, dass value-- zurück, so, es ist sam.
Aber ich könnte auch eingegeben haben etwas, was hier nicht definiert wurde,
und es wäre einfach Rück undefined-- die
ist eine Sache, dass Javascript zu tun, die Vorteile haben kann,
aber es ist also-- wenn Sie einen Tippfehler machen, es kann in seltsamen Fehlern führen.
So dass es dann nur versuchen, zu finden was auch immer Sie sagen, es zu finden,
und es ist nicht zu gehen beschweren, wenn es nicht findet.
Es will nur sagen, ich habe nicht zu finden, und dann weiterziehen.
Es wäre also nicht definiert werden, zzgl blank plus Nachname.
Ja.
Und dann werden wir sehen, dass, wenn wir könnte dann nach unten gehen und access--
und wir nennen tf.print () in Klammern.
Es wird, dass die Druck nennen Funktion ohne Argumente, nicht wahr?
Aber wenn wir gerade gesagt tf.print () Semikolon, ohne den Klammern,
all das getan hätte, ist zu ziehen die Funktion aus dem Wert,
aber nicht tatsächlich nannte.
Cool.
HUGH ZABRISKIE: Soll wir ein Objekt zu machen?
SAM GREEN: Sicher, wir tun.
So kann ich diese verschieben Beispiel an die Konsole.
Wir können uns vorstellen, dass ich ein Objekt.
So ist dies eine einfache Aufgabe.
Dies ist eine Aufgabe, die zwei enthält, Werte mit zwei Schlüsseln, zwei Schlüsselwert
Paaren.
So kann ich dann auf den gespeicherten Wert innerhalb dieses Objekts, indem Sie x.x1,
zum Beispiel, und ich 1 zurück.
Ebenso x.x2, erhalten diesen Wert zurück.
>> Und jetzt die wirklich coole Sache ist, ich kann tatsächlich etwas zu diesem Objekt hinzufügen
nachdem ich sie erstellt.
So können Sie sich vorstellen, lassen Sie uns sagen, ich habe eine Funktion.
>> HUGH ZABRISKIE: Sie zu tun haben, Umschalt-Eingabe.
>> SAM GREEN: Oh, das ist ärgerlich.
Was hat es nicht gefallen hat?
Oh.
Auf geht's.
Cool.
>> Also habe ich einfach erstellt haben Diese Funktion, f, dass
wird sich auf die aktuelle gehen Objekt und Druck this.x1.
Also, wenn ich nenne nur f durch selbst, nichts los ist
zu passieren, oder, weil es keine x1 Feld in dem Objekt handelt es sich bezieht.
Aber, wenn ich sage, x.f = f, und dann habe ich rufen x.f (), werde ich wieder 1 zu bekommen.
Das f-Funktion ist jetzt mit dem Objekt x zugeordnet ist,
welche einen Schlüssel namens x1 hat mit dem Wert 1 zugeordnet,
so, wenn wir rufen this.x1, ist es herausfinden, was es für die Suche
und in der Lage sein, um einen Wert zu drucken.
Also das ist nur ein Beispiel der Art der verrückte Dinge
Sie mit Objekten in JavaScript zu tun.
>> So dass Version war die generische Version, was bedeutet,
dass wir ein Objekt mit diesem erstellt Klammern notation-- Klammer-Notation,
rather-- und das ist, praktisch, wenn wir wollen einfach nur
eine Instanz eines bestimmten Objekts, aber was ist, wenn wir wollen, um mehr als eine haben
von derselben Art?
Und die Antwort darauf Frage ist, gibt es Dinge,
genannt Klassen in JavaScript als auch.
Wir können eine Funktion erstellen, die hat eine Art der Initialisierung
für einen Fremdkörper, und wir würden sagen, wie,
meine class-- so dem Namen der wiederverwendbaren object--
gleich-Funktion, die es baut.
Also, was wäre gleich um sich ein Objekt zu schaffen, dass
würde einfach gerne, geschweifte Klammer, str, Dickdarm,
Dies ist eine Zeichenfolge, Semikolon, geschweifte Klammer.
Das wäre die generisch sein Objekt, das wir zu initialisieren,
mit dem einzigen Unterschied, auf die nächsten Zeilen erstellen wir einen Prototyp, der
bedeutet, es ist ein Standard-Schlüssel, wir unser Objekt hinzufügen, dass
hat die hier aufgeführten Wert.
Was bedeutet, dass, wenn ich ein neues Instanz dieser MyClass-Objekt,
es wird innerhalb von vorgefertigten haben es ist ein Wert namens str und einen anderen Wert
genannt MyPrint, das ist wird eine Funktion sein.
Fantastisch.
>> Groß.
Also das letzte, was auf sagen zu JavaScript
ist, dass es wirklich nützlich für das, was sind asynchrone Operationen bezeichnet.
Asynchron bedeutet, dass wir kann für einige Betrieb warten
abgeschlossen ist, bevor wir uns bewegen auf, sondern bewegen sich auf, während wir warten
und dann muss etwas passieren später.
Und was ich damit meine ist, können Sie kann eine Situation vorstellen,
Sie eine Anfrage zu senden einige Web-Server irgendwo,
und es wird an Sie zurückschicken einige großes Stück von Daten, nicht wahr?
Und Ihre Benutzer konnte in der warten Inzwischen damit das geschehen kann,
und nichts könnte geht zu dieser Zeit.
Aber das ist nicht ein großer Entwurf, nicht wahr?
Sie wollen nicht die Web-Seite zu frieren.
Was, wenn der Benutzer möchte klicken Sie auf ein Dropdown-Menü?
Es ist nicht eine große Design-Muster.
Stattdessen im Grunde, was JavaScript muss ist, sagt,
OK, machen diesen Vorgang asynchron.
So wie, warten in den Hintergrund, und dann, wenn die Operation durchgeführt wird,
rufen Sie die Callback-function-- rufen Sie eine Funktion,
Tun Sie etwas Action--, um zu signalisieren, dass die Betrieb suchten wir bis zum Ende warten
ist vorbei.
Und der Grund dafür, dass super leistungsfähiges ist, können wir etwas tun, übergeben ein Argument,
etwas zu tun, und dann warten dass etwas passiert.
Dann, wenn dieser etwas abgeschlossen ist, können wir einen Rückruf anzurufen.
Das ist wirklich praktisch, denn sie ermöglicht es uns Dinge tun, mit Web Audio API,
zum Beispiel, wie ein Last Audio-Datei von einem Remote-Server
ohne auf die warten, gesamte Audiodatei geladen werden soll,
das ist wirklich wäre schlecht für die Benutzerfreundlichkeit.
Cool.
>> Letzten paar Notizen über Debugging, da dies
ist eine Sache, die Sie tun, um haben werden als Teil des Projekts gewährleistet.
Ich erwähnte die JavaScript-Konsole.
Es ist ein super nützliche Funktion von allen modernen Browsern,
Und wir empfehlen Ihnen, zu erhalten komfortabel mit Ihrer Konsole,
wenn Sie wollen, zumin JavaScript gut zu bekommen.
Es ist super praktisch für Debugging, aber es ist auch
wirklich nützlich für Bezifferung herauszufinden, wie man eine API zu verwenden.
Es ermöglicht die wirklich einfache Experimente
ohne irgendeine Art Code, und kompilieren Sie es.
Sie müssen nicht, all diese Schritte zu tun.
Sie können einfach schreiben einige Code in einer Linie,
und dann bekommen unmittelbares Feedback auf ob diese Codezeile oder nicht
worked-- sehr handlich.
>> Und auch, nur eine technische HINWEIS-- die JavaScript-Konsole ist ein Beispiel,
eines REPL-- also ist das R-E-P-L, REPL, was für Lese steht, zu bewerten,
Druckschleife.
Du wirst einige Sachen geben in, es wird gelesen, was Sie eingetippt,
es wird sie zu bewerten, und es wird der Print Ausgang, und dann werde es wieder zu starten.
Das ermöglicht es Ihnen, schnell zu gehen in Kreisen laufen, was wirklich cool ist.
>> Ich denke, Echt letzten HINWEIS-- diese ist die tatsächliche letzte Note, ja.
Wie können wir tatsächlich nutzen JavaScript?
So zuerst, wir importieren können es mit einem Skript-Tag
an der Oberseite oder Unterseite eines HTML file-- überall innerhalb einer HTML-Datei,
wirklich.
Und in einem Skript-Tag, gibt es zwei Unterweisen Importieren JavaScript.
Die erste ist, indem er eine getrennte JavaScript-Datei
dass wir importieren in seiner Gesamtheit oder indem mit einer Fläche von Code wie script
um zu starten, und dann Backslash-Skript, um zu beenden.
Und dann haben wir nur schreiben JavaScript innerhalb der HTML-Datei.
Das sind die zwei Arten.
Sie können es nicht haben innerhalb von HTML.
Publikum: Ist einer besser als der andere?
SAM GREEN: Die Frage war, ist besser als das andere.
Also, ja, als eine Art der Programmierung der Praxis und es ist wie ein Designpraxis.
Es gibt zwei Gründe Deshalb könnte es besser sein.
Die erste ist, es macht Ihren Code ein viel besser lesbar, wenn alle Ihre HTML
ist an einem Ort, alle Ihre CSS ist in ein weiterer Ort, alle Ihre JavaScript
in einem dritten Platz.
Recht?
Ich denke, wir sollten bereits gesprochen haben darüber in sections-- wie CSS-- was
daß ist-- und es versteht oft in einer anderen Datei.
Also, ähnliche Art von Konzept hier.
Sie können sich vorstellen, dass JavaScript würde auf mehr als einer wiederverwendet werden
HTML-Seite, oder vielleicht ein Sehr viele HTML-Seiten,
und mit, dass JavaScript zu einem Refactoring
Datei, die Sie importieren können in mehr als einem Ort
kann der Code sein Weise besser wartbar.
Sie können sich vorstellen, dass man zu ändern, um die JavaScript-
und mit, es zu ändern in 100 verschiedenen Dateien.
Und statt dessen können wir nur ändern in eine, die viel mächtiger ist.
Habe ich Ihre Frage beantwortet?
Cool.
>> Wir können auch in die Konsole eingeben, Wie wir bereits erwähnt.
Und wieder eine letzte HINWEIS-- Web Audio ist eingebaut,
brauchen Sie nicht, etwas zu laden.
Cool.
Gibt es irgendwelche Fragen, haben Sie mehr Fragen über JavaScript,
bevor wir weitermachen?
>> ZIELGRUPPE: [unverständlich]
SAM GREEN: Okay, cool.
So, jetzt, er wird über die API zu sprechen.
>> HUGH ZABRISKIE: Kühle.
Danke, Sam.
>> SAM GREEN: Sicher.
HUGH ZABRISKIE: Awesome, so wir werden auf von JavaScript zu bewegen.
So dass wir über einige gesprochen das Wesentliche JavaScript,
und das sind die Variablen, Funktionen, Objekte, Funktionen als Variablen,
asynchroner Belastung.
Das sind alles Dinge, die Sie zu sehen, wie Sie den Web Audio zu verwenden.
Also sind wir gerade dabei, zu sprechen darüber zunächst auf einem hohen Niveau.
>> Es ist eine API, so dass es etwas ist, das ist gebaut, als Sam sagte:
rechts in die JavaScript- dass Sie in der Konsole.
Und es ist eigentlich genau wie C ++ Code Das ist wirklich in Chrome eingebaut
und Firefox, und alle diese Browser.
So der Hauptidee mit Web Audio ist, dass man
diese Art von Rohrleitung der Audio, nicht wahr?
So Ihre Audiodaten kommt in irgendeiner Form.
>> Es gibt Art drei Haupt forms-- Sie den Oszillator, haben die
erzeugt eine Sinuswelle, Kosinuswelle, wir werden sehen, wie das funktioniert.
Eine weitere sehr häufig eine, Natürlich ist ein MP3.
Also vielleicht haben Sie mit zu beginnen ein Lied, und dann
wollen einige Filterung zu tun zu und Ausgangs
dass-- dass könnte eine mögliche Quelle sein.
Und dann ein wirklich cooles eine ist das Mikrofon.
So dass Sie einige sehr verwenden können Grundgespräche in JavaScript
um den Zugriff auf das zu bekommen Mikrofon, und so, wenn Sie
wollte eine App machen wie eine Tonhöhendetektor,
beispielsweise, dass saugt Ihre Stimme und Figuren aus
die pitch-- sehr einfache Möglichkeit, dass.
Sie können nur irgendwie lesen in, herauszufinden, die Häufigkeit,
erstellen und dann eine Nummer.
So werden wir sehen, wie das funktioniert, wie gut.
>> Das Ziel ist grundsätzlich wobei die Audio-Daten ausgegeben wird.
So im Allgemeinen, das ist, wie Ihren Laptop-Lautsprecher.
Weitere Optionen sind wie a ScriptProcessorNode--
wir werden, um Knoten in einem erhalten second-- aber im Grunde,
entweder Sie setzen Sound aus über Ihren Computer über die Lautsprecher,
oder du bist Art von der Aufnahme, so Sie es Speichern als Audiodaten.
Vielleicht, wenn jemand schafft Musik in Ihrer App und dann
Sie, dass aufzeichnen und vielleicht wie wollen exportieren, um Soundcloud, für example--
das wäre ein Weg, um das zu tun.
Der ganze Spaß stuff, was wir darüber zu sprechen,
passiert zwischen diesen beiden Punkten, wo wir laden in der Musik
und dann auszugeben.
>> Also werde ich über die Fünf sprechen Stadien der Audioproduktion in einem zweiten.
Wir haben diese Sache namens ein AudioContext, die
ist dieses kleine wrapper wir hier sehen.
Im Grunde, was AudioContext ist--, wenn wir finden Sie auf der JavaScript-Konsole gerade jetzt,
können wir einen Augenblick zu erstellen.
Nur ein Beispiel von REPL, nicht wahr?
Wir lesen, Bewertung und er druckt.
>> AudioContext ist ein globaler Staat.
Es ist eine Struktur, eine Aufgabe ist es hier Informationen hält und es
über Dinge, die passiert sind, auf dem Bildschirm audio.
Ein Beispiel dafür ist die aktuelle Uhrzeit.
Dies sagt Ihnen, die Anzahl Sekunden, sehr genau,
Da der Web-Seite geladen.
Also das ist ein wirklich nützliches kleine Eigenschaft, die Sie verwenden können.
Es only-- lesen Ich glaube tatsächlich können Sie versuchen, es zu einen Wert einzustellen.
Es wird Ihnen sagen, es setzen, und dann, wenn Sie es drucken
again-- es eigentlich nicht ganz funktioniert.
Es gibt also nur gelesen werden Immobilien in JavaScript.
Das ist wirklich nützlich, wenn Sie Art von Synchronisierung
eine Menge verschiedener Informationen, wenn Sie
Art spielt verschiedene Töne.
>> Eine andere wirklich nützlich ein ist der Kontext Ziel.
Auf jeden Fall, wenn Sie interessiert sind, werden versuchen dies auf eigene Konsole rechts
jetzt.
Das ist also ein AudioDestinationNode.
Im Grunde, was dieser sagt, ist, wo ist der Ausgang geht?
So gibt es zwei echte Optionen bitte hier.
Normalerweise ist die Standard- ist nur die Lautsprecher,
so AudioDestinationNode im Grunde nur, sagt
Es sind keine Ausgänge an die Sound herein, an den Lautsprecher gesendet wird.
So im Allgemeinen, Sie dies nicht tun müssen damit zu spielen.
Wenn Sie Interesse an tatsächlich nutzen können die ScriptProcessorNode zur Aufzeichnung,
mir eine definitiv schießen E-Mail später, weil das ist,
ein wenig komplizierter.
Aber in der Regel, nur irgendwie bist du zum Ausgeben von Ton in irgendeiner Form.
So cool, wir kommen wieder hier zu springen.
Publikum: Es tut mir leid.
HUGH ZABRISKIE: Ja.
Publikum: Ich weiß, Sie sagten zu sprechen um es später über die Aufnahme.
Können Sie Schnittstelle, die mit Pro Tools?
>> HUGH ZABRISKIE: Mit Pro Tools?
Mal schauen.
Ich glaube nicht.
So geht zwischen dem Kunden, das ist die JavaScript-
Konsole und Ihrem tatsächlichen Computer ist in der Regel
etwas, das Art ist der weg von den Begrenzungen, wenn Sie
will, freundlich durch die Natur der the-- es ist eine Art Design-Sache,
aber Sie versuchen, den Browser getrennt zu halten vom eigentlichen Computer des Benutzers.
Im allgemeinen ist die einzige Sache, die Sie in der Lage, Zugang ist das Mikrofon oder die Kamera.
Sie sind nicht in der Lage, I glaube nicht, verwenden Sie Pro Tools.
Allerdings, wenn Sie erstellt ein Track in Pro Tools,
exportiert, dass, könnten Sie, dass zu laden hier, zu filtern, zum Beispiel,
Prozess, und notieren Sie die in eine Audio Destination-- oder NO- einer Kugel
Prozessorknoten.
Und dann von dort, könnten Sie exportieren, dass auf Soundcloud, die Sie
könnte es in einer E-Mail zu schicken, oder was Sie wollen von dort aus.
>> Aber es ist ein bisschen eine leichte Barriere zwischen Musik auf Ihrem Computer
und Musizieren online.
>> Sam Green: Und das ist, nicht eindeutig zu dieser API.
Es ist ein Sicherheits-Feature von Chrome, und Ich denke, dass jedes andere moderne Browser.
Der Browser ist in sich geschlossen.
So kann beispielsweise eine Web-Seite nicht verwenden JavaScript, um die Klang schalten
Auf der Lautsprecher, zum Beispiel.
Oder es nicht einschalten können Sie Ihren Computer aus.
Und es gibt keine Zwischenpunkt zwischen diesen beiden Dingen, rechts,
also entweder Sie eine komplette Abstraktion,
oder Sie öffnen die Sicherheitslücke der Vermietung
ein Programmierer mit schlechten Absichten zu tun was sie wollen mit Ihrem Laptop.
Und deshalb Chrome ist in sich abgeschlossen.
>> HUGH ZABRISKIE: Ja.
Ist das sinnvoll?
Cool Cool.
Ich war gerade dabei, zeigen ein Beispiel von einem.
Das ist so ziemlich wie Soweit Sie erhalten, in Bezug auf
des Zugreifens auf den Computer des Benutzers.
Wenn Sie eine USB-Tastatur angeschlossen, können Sie etwas verwenden sogenannte Web
MIDI-API, die wir nicht wirklich hier sprechen,
aber dies ist eine andere API, die ist wieder in mindestens Chrome-- gebaut,
das ist, warum wir lieben Chrome-- Ich denke, Firefox oder Safari,
Das ist eine einfache Sache zu google-- verschiedenen Browsern
unterschiedliche Unterstützung für die APIs sie implementiert.
Aber wenn Sie wollte in einem Tastaturstecker und arbeiten mit diesen Informationen,
Art der Nachricht auf der Tastatur Informationen über den Computer
und verwenden Sie dann das online, diese API ist, wo Sie sein möchten arbeiten, dass.
>> Cool.
OK.
Also, schnell bewegten hier.
Wie sollen wir tun auf Zeit?
>> Sprecher 1: Über 15.
>> HUGH ZABRISKIE: 15 Minuten übrig?
OK COOL.
Also werden wir weiter hier zu fahren.
>> Also im Grunde, der wichtigste Punkt der denken dies als eine Pipeline
ist, dass jede Stufe in der Pipeline ist eine Reihe von Audio-Knoten.
Unsere Quelle, sagen wir, ist ein Oszillator.
Wir müssen einen Oszillator Knoten erstellen.
Und das ist nur eine Art des kleinen function--
und sie sind alle aus der Basis der Audio-Rahmen hier.
>> Publikum: Wenn gesagt Oszillator, bedeutet das,
es ist tatsächlich buchstäblich gehen von zwei verschiedene Pole hin und her?
>> HUGH ZABRISKIE: Nein, es ist wie eine digitale Darstellung.
Es ist eigentlich in C ++ implementiert.
Ich eigentlich nicht wissen, die Spezifikationen der, wie es tatsächlich umgesetzt,
aber all dies wird als Binär-Daten arbeiten.
Eigentlich ja.
Das würde sagen, ich konnte tatsächlich, wenn Sie interessiert sind,
Ich könnte Ihnen ein wenig mehr senden Informationen dazu, wie Wellenformen
gehalten werden mit einem digitalen Format.
OK COOL.
>> So dass wir erzeugen einen Ton wie eine Sinus Welle oder so ähnlich, vielleicht
440 Hertz.
Wir schaffen einen Oszillator.
Wenn wir, die Lautstärke einstellen möchten, wir verbinden alles zu einer GainNode,
die wir mit .creategain tun konnte.
Das setzt Ihr Volumen.
Sie können, dass auf jede übergeben des anderen Optionen- gut,
so einen Audiopuffer Quelle Knoten, wo Sie
speichern Sie eine MP3, die Sie in geladen haben.
>> Biquad-Filter für die Filterung, wenn Dank an alle die Basis herausnehmen wollen,
eines Liedes, oder so ähnlich.
Gott bewahre, Sie nehmen wollen die Basis aus einem Lied.
Und AudioDestination Knoten wieder wie, wo unsere Finalisierung ist.
Wenn Sie überhaupt daran interessiert zu sehen sind all die verschiedenen Möglichkeiten,
einfach auf den Reiter gehen und lassen die auto-complete kommen.
Und wenn Sie zu erstellen, werden Sie alle sehen verschiedene Dinge, die Sie erstellen können.
Sie können dynamische erstellen Skript-Prozessoren,
Ich weiß nicht einmal, was das ist, zum Mischen von Kanal-Fusionen
und Kanalteiler und das alles.
Cool.
>> Also das ist nur ein Beispiel einer Pipeline.
So haben wir drei Quellen kommen in.
Vielleicht sind Wellenformen, Vielleicht sind MP3s.
One über ein gehen Filter, ist noch einer
immer verzerrt weiteres jemandes Panning links und rechts.
Sie können alle möglichen Dinge zu tun und sie alle umgehen miteinander vermischt werden,
und dann kommt die Audio- am Ende, als Ziel.
Dies ist ein Beispiel dafür, was mehr komplizierte Web Audio Code aussieht.
Sie erstellen alle diese verschiedene Objekte rechten hier--
Ich bin mir nicht sicher.
Nein, ist es nicht zoomen.
OK.
>> Sam Green: Sie tun, Kontrolle, Scroll-Up.
HUGH ZABRISKIE: Steuer Scroll--
SAM GREEN: Nein, nein.
Steuern--
>> HUGH ZABRISKIE: Oh, Kontrolle, Blättern?
Oh, gotcha.
Ja.
Wow, nee, nee.
OK.
Das werde ich nicht tun.
>> Also ja, in dieser ersten Abschnitt hier, sehen Sie,
schaffen wir all diese verschiedenen Knoten aus dem Kontext.
Wir sind nur Setzen ihnen zusammen in dem zweiten Teil
durch diese Funktion aufgerufen Connect.
Das ist eine wirklich Schlüssel Funktion in Web Audio.
Es bedeutet nur, wenn du getan hast etwas mit dem Sound in einem Knoten,
geben sie nicht an den nächsten Knoten.
So haben wir die Quelle, es mit dem Analysator verbunden,
der Analysator tut etwas mit ihm, es geht um eine Verzerrung, und so weiter,
und an die Ziel unten rechts hier.
Cool.
OK, so dass wir in Bewegung bleiben auf.
>> Die pipeline-- Auch diese sind die häufigsten Pipelines
so dass wir über all diese Dinge wie sprechen Verzerrung, Panning, all dieses Zeug.
Wenn Sie wirklich daran interessiert sind sich mit Dingen Pro Tools,
die wohl interessieren.
Wenn nicht, vielleicht gerade wollen, um den Ton zu spielen,
oder vielleicht wollen Sie nur zu stellen Sie die Lautstärke auf den Klang.
Das sind die beiden häufigsten sort von Rohrleitungen in Audio-Produktion.
>> Auch hier sind die Möglichkeiten, wie Sie es zu nehmen in als oscillator-- so, lassen Sie uns
Führen Sie eine der Demo, dass genau hier.
So werden wir ein zu erstellen einfache Audio-Kontext hier,
und dass wir gehen, unsere Oszillator zu schaffen.
Das ist also, wieder, nur wir sind gehen zu nennen erstellen Oszillator.
Wir werden eine Frequenz am Set daß, 440 Hertz, und locker.
Dann verbinden wir, dass in den Ziel point-- dem der Sprecher, so
der Kontext Ziel.
Schließlich haben wir nur sagen, beginnen Null Sekunden ab jetzt, und wir haben klingen?
>> [KLINGELN]
>> HUGH ZABRISKIE: Hier gehen wir.
Es ist nur eine Sinuswelle.
OK COOL.
Und dann werden wir damit aufhören.
>> ZIELGRUPPE: Wo haben dass das Feedback aus?
>> HUGH ZABRISKIE: Die Rückmeldungen?
Oh, wahrscheinlich unsere Mikrofone.
Also ja, das ist, wie Sie es tun.
Und tatsächlich, wenn ich hielt es läuft, können Sie
könnte die Frequenz haben Wert wie es läuft,
so ist das eine tolle Sache zu spielen, um.
Cool.
Das ist immer ein schönes einem bis zu präsentieren.
>> Sam Green: Wir haben nicht denken Sie, dass haben wir?
HUGH ZABRISKIE: Ja, das ist eine böse eins.
Also, Puffer loading-- Ich werde ein zeigen Beispiel dafür am Ende.
Das ist das Laden eines MP3.
Und Mikrofon, nur eine Funktion nutzen zu können genannt Navigator.getUserMedia ()
um dem Benutzer den Zugriff zu verlangen Mikrofon für diese Informationen.
>> Hier ist das Filtern, werde ich nur in Bewegung bleiben von diesem.
Das ist ziemlich hohem Niveau, aber Filtern können Sie nur
>> [PIEPTON]
Filterung können Sie auch um Dinge wie rosa erstellen
Lärm, braunes Rauschen, weißes Rauschen.
Wenn Sie reines Rauschen, das erstellt werden soll Manche Leute lieben Kampf mit,
können Sie Web Audio verwenden Filterung, das zu tun.
>> Audio Panning-- so vorstellen, wenn Sie schreiben ein Spiel
und Sie den Ton zu wollen klingen wie es kommt, wie,
Schießen über den Bildschirm, die Sie können Sie die Stereoposition des Audio verwenden
diese Art des Konus zu erzeugen, die like-- es ist ziemlich mathy,
aber es ist eigentlich wirklich cool, wenn Sie es funktioniert,
und es gibt einige gute Tutorials darauf kann ich Ihnen schicken.
Grundsätzlich können Sie Art der Sound zu erzeugen
der etwas los, indem in einer 3D-Weg.
Und wenn Sie ein DJ Interesse haben, können Sie Mixen und überqueren Ausbleichen Songs.
>> Dies ist nur einige sehr grundlegende Code, im Grunde, was ich tat, bevor.
Dies stellt das Volumen der Oszillator, so schaffen wir unseren Oszillator
das schafft die Wellenform.
Wir schaffen unsere GainNode, Set unseren Frequenz,
und schließen Sie dann den Oszillator auf die GainNode, die dann im Grunde ändert
wie viel Signal wird durchgelassen.
Aber wirklich, es ist ein Digital- Sache, so ist es mehr just-- ja.
Das ist nicht das, was tatsächlich passiert, aber das ist, was passiert im wirklichen Leben
mit einem Gewinn.
>> ZIELGRUPPE: --quantization der Volumenparameter?
HUGH ZABRISKIE: Es tut uns leid?
Publikum: Ist es ein quantisiert Volumenparameter?
HUGH ZABRISKIE: Ja.
Und das ist eine Sache, ich bin wirklich mangelhaft in meinem Wissen,
wie Gain arbeitet auf digitaler Ebene.
Ich weiß, mit den tatsächlichen Signale, es ist im Grunde
Steuern, wie viel Sie sind Verstärken des Signals.
Also, ja.
Ich werde Sie mehr Informationen zu senden dass, weil ich wirklich gespannt sein,
um mehr über das wissen.
Aber im Grunde die Parameter sind, ist einer der fold--
desto lauter signal-- und Null keine signalisieren, oder Sie werden keinen Ton hören.
Wir Demo Zeit für diese, weil überspringen es ist im Grunde, was ich tat, bevor.
Und wieder, die Context.Destination ist die Audio Zielknoten.
Awesome, OK.
>> Also werde ich, um eine schnelle zwei Demos zu tun.
Wie sollen wir tun auf Zeit?
>> Sprecher 1: ca. 10 Minuten.
>> HUGH ZABRISKIE: 10 Minuten?
Groß!
Fantastisch.
>> So ist die erste, die ich bin zu gehen weiß, es heißt mein Lieblingslied.
So ist dies nur ein wenig HTML JavaScript.
Wir werden zwei Tasten haben auf der Seite spielen mein Lieblingssong
und verhindern, dass mein Lieblingslied.
Ich werde dies zu ändern.
>> ZIELGRUPPE: Bedecken Sie Ihr Mikrofon.
>> HUGH ZABRISKIE: Ja.
Und ich habe hier geladen ein Skript, das basically--
und das ist wirklich nützlich, zum Laden eines MP3,
so ist dies nur macht Laden MP3s viel schneller.
Es ist im Grunde nur ein Wrapper.
Es macht den Prozess der Laden in MP3s viel schneller,
sonst Sie verwenden HTTP-Anfrage, eine Art, wie, was wir taten
Auf die aktuelle Stück mit Server gesetzt.
Es ist wirklich hässlich, Sie wollen nicht, es zu tun.
>> Also dieser Kerl, Boris Smus, schrieb ein wirklich nützliches kleines Tool namens BufferLoader.
Alles, was Sie tun, ist einfach nur übergeben Sie die Dabei ist es ein list-- geben Sie
oder, ja, es ist eine Liste in JavaScript?
Sam Green: Ein Array.
HUGH ZABRISKIE: Oh, ist es ein Array, das ist richtig.
Es ist ein Array von Pfaden auf verschiedene Dateien.
Und dann ist es eine Funktion übergeben.
Dies ist der Rückruf wir sprachen etwa mit asynchroner Belastung.
Das wird genannt werden Sobald die Dateien geladen.
Und die Funktion, die aufgerufen wird, wenn die Datei geladen nimmt als Perimeter
ein Array aus geladenen Puffer.
So dass hier auftritt.
Grundsätzlich ist BufferList Sie auf eine value-- sein
oder es wird ein Array aus sein Länge eins, die in ihm in Index aufweist
Null die gesamte geladene Datei des MP3.
Also, was ich tun, wenn ich fertig Beladung ist, habe ich einfach
erstellen Sie einen Pufferquelle, welche ein Audiopuffer Quellknoten.
Der nächste Schritt ist I Last in der source.buffer wie die Voll geladenen Puffer
vom BufferList-- es gibt eine Menge von buffers--
und dann, dass die Audio verbinden Sie Puffer zum Ziel.
Also, was es tun wird Nur einfach die MP3-
gerade auf den Ausgang, und starten Sie es sofort
auf immer diesen Anruf.
>> Cool, also mal sehen, dies geschieht in Aktion.
Meine [unverständlich] hier, mal sehen.
Also ich werde einfach beginne eine grundlegende Server.
Das ist etwas, Sie tun, wenn Sie brauchen,
machen Anfragen zum Laden von Dateien.
Ich werde eine Grund Server zu starten.
Dies ist im Grunde das gesamte PSET gerade jetzt in einer Zeile,
aber es ist gerade erst anfangen ein Server auf Port 80/80.
So dass wir hier gehen wir gehen zu laden, 80/80,
wir werden, um mein Lieblingssong zu gehen.
Also, wenn ich auf "Play my Lieblingslied "gerade jetzt,
es geht um meine laden Lieblingslied spielen es--
[MUSIC - THE EAGLES "Leben im schnellen FAHRBAHN"]
--which passiert mit "Life in sein die Fast Lane "von den Eagles.
Nun, ich treffen konnte "Hör mein Lieblingslied "und wiederholen es.
>> [MUSIC - THE EAGLES "Leben im schnellen FAHRBAHN"]
>> Und wenn ich gehe zu trösten, denn Früher habe ich eine globale Variable hier
den Überblick über diesen Wert tatsächlich zu halten, ist es Es wird nun in der Konsole erkennen.
So dass es automatisch erstellt für mich.
Also das ist, was gespielt wird gerade jetzt, und ich kann einfach anrufen source.stop ()
auf das.
Nun, wissen Sie was?
Nur damit Sie Jungs haben das hörte song-- Dir vielleicht dieses Lied zu erkennen.
>> [MUSIC - Rick Astley "Never Gonna GEBEN SIE"]
[MUSIC - THE EAGLES "Leben im schnellen FAHRBAHN"]
Wir haben jetzt alle wurden Rickrolled.
OK, groß, bewegen auf.
Cool.
Das ist also im Grunde ein Beispiel wie man einen MP3 laden file--
[MUSIC - THE EAGLES "Leben im schnellen FAHRBAHN"]
--und abspielen und stoppen und starten Sie es.
Ich könnte noch viel mehr getan haben [unverständlich]
>> Der letzte, den ich tue, ist, Ich zeige Ihnen ein [unverständlich].
>> [Musikwiedergabe]
>> Es ist wie, ogg.wave.mp3.
Ich denke, wenn ich mich richtig erinnere, Ich habe in einige Probleme mit .m4a laufen,
aber ich bin nicht sicher.
Ich denke, mp3.wave--
>> [MUSIC - Rick Astley "Never Gonna GEBEN SIE"]
>> OK, groß.
Ich hätte das nicht sagen sollen.
Wie auch immer, hallo.
So haben wir dieses geöffnet.
So, jetzt alles, was ich zu tun ist, ich im Grunde erstellt eine grundlegende Syntax für die Erstellung von Musik.
Also, wenn ich etwas zu tun, fügen Sie g4 auf 1 bis 2, was heißt, dass,
fügen Sie die Klaviernote, G4, die den vierten G
up auf dem Klavier von unten.
Also das ist Art von MIDI zu sprechen, so dass für diejenigen, die Musik auf der Basis sind,
dies ist nur MIDI-Noten.
>> Publikum: Das ist die G des Mittleren C, nicht wahr?
>> Hugh ZABRISKIE: Dies ist der G über dem mittleren C, das ist richtig.
>> ZIELGRUPPE: Über Middle C
>> HUGH ZABRISKIE: Ja.
Eigentlich ja.
Ich glaube, ich tatsächlich in der [unverständlich],
so könnte dies eine Oktave über das sein.
Also mal sehen.
Wenn ich getroffen Play--
[REPETITIVE PIANO HINWEIS]
--we're gehen, um das zu hören.
Die Idee ist, dass es arbeitet, wie eine Befehlszeile würde,
so, wenn ich nach oben und unten auf meiner Tastatur, die Sie
können zur vorherigen zurück Befehle, die ziemlich nützlich ist.
Und unten ist meine Liste der Tracks, die alle auf Schleife ausgeführt werden.
>> ZIELGRUPPE: Sie wurden unter der Annahme der 88-Tasten-Tastatur auf, oder?
>> HUGH ZABRISKIE: Die Frage war, gehe ich davon ein 88-Tasten-Tastatur,
und ja, ich bin.
Was ich getan habe ist, dass ich im Grunde nahm 88 Proben
des Klaviers, eines für jede Note.
Und so jedes Mal wenn Sie hören eine Notiz von nun an,
das ist eigentlich eine Schleife, die aussieht like-- Dies ist immer auf Loop gespielt,
so für jede Note, diese läuft.
Was geschieht, ist, I erstellen Sie einen Puffer wieder,
Erstelle ich einen Gewinn Knoten, um die Lautstärke einzustellen.
Dies nur ein wirklich komplizierte Art zu sagen, ich
speichern die Puffer in einem source.buffer.
Ich gebe es die Verstärkung, I verbinden Sie es mit der Verstärkung,
der Verstärkungsfaktor ist mit dem Ausgang, und dann spiele ich es.
So, dass ist eine Art des Verfahrens der Einnahme in einem Puffer Quelle.
>> ZIELGRUPPE: Können Sie tatsächlich, dass trockenen Klang und machen es nass [unverständlich]?
>> HUGH ZABRISKIE: Sie können, ja.
Es gibt Wieder Verb, es gibt Delay, Distortion.
Grundsätzlich können Sie legte alles in zwischen in diesem Sandwich von-- gut,
Pipeline ist eine bessere Metapher, aber Sie können etwas, dass hinzuzufügen.
Cool.
>> Also werde ich die Demo zu beenden hier, um Ihnen ein Gefühl geben,
nur die schiere Anzahl der Zeiten, die Sie kann diese Funktion auf einmal laufen.
Also werde ich diese entfernen.
Ich gehe, um einen Generator zu erstellen dass-- im Grunde, was does-- dies wirklich
Art einer komplizierten syntax-- aber es ist gehen, um Notizen on the fly zu generieren,
und gerade anfangen zu spielen sie, wie sie wertet sie aus.
[Zwischen PIANO]
>> So können wir nur machen ein wenig Musik hier.
[Zwischen PIANO]
>> Also, was dieser Befehl der Fall, zum Beispiel, ist
es nimmt diese drei wichtigen Hinweise zu den Klavier und setzt sie dann auf B3.
Diese Syntax machen könnte ein wenig mehr Sinn
für diejenigen, die einen haben Musik Hintergrund hier.
>> Ich kann einen Kick Drum hinzuzufügen.
Ich kann--
>> [Zwischen INSTRUMENTS]
>> --just spielen, um mit, dass.
>> So dass Sie make-- können
[Zwischen INSTRUMENTS]
Dass man ist ein wenig ärgerlich.
[Zwischen INSTRUMENTS]
>> So dass nach dem Zufallsprinzip fügt eine trockene Becken auf jedem 16tel Note, mit einem 16%
[UNVERSTÄNDLICH].
>> [Zwischen INSTRUMENTS]
>> Ja, also die Art, wie diese works-- es ist immer in 4: 4.
[Zwischen INSTRUMENTS]
>> Ja, also die vier Quartale und 16/8.
[Zwischen INSTRUMENTS]
>> So im Durchschnitt, erhalten Sie 60% Zugriffe auf den 16tel-Noten.
>> Wie auch immer, nur war dieser Art zu zeigen,
einige der Dinge, die man bauen mit der Web Audio API.
Es ist wirklich stark, es ist wirklich schnell, und Sie können eine Menge coole Sachen machen
damit.
Also noch einmal, alle Fragen können Sie, E-Mail-myself-- Hugh-- oder Sam,
und ehrlich, hat Google eine Tonne von guten Ressourcen.
Irgendwelche letzten Fragen?
Ja.
>> Publikum: So können Sie auf das eingebaute Mikrofon.
Was, wenn man wollte, verwenden Sie ein besseres Mikrofon?
HUGH ZABRISKIE: Wenn Sie wollten um bessere Mikrofon verwenden?
Also noch einmal, ist dieser Teil der Abstraktion zwischen Chrome
und der Rest des Computers.
Es sei denn, es ist durch die verfügbaren eine API, wie Web-MIDI-API,
Sie könnten wahrscheinlich finden Sie einige Hacks, aber im Allgemeinen nicht machbar.
>> Sam Green: Sie können also-- alle Chrome weiß
ist das, was Ihr Standard-Mikrofon ist, und es greift auf, dass.
Also, wenn Sie ein Mikrofon hatte man konnte Als Standard-Mikrofon-Computers eingestellt,
Sie darauf zugreifen könnten auf diese Weise und es würde wahrscheinlich funktionieren.
HUGH ZABRISKIE: Das ist ein guter Punkt.
Ich habe nie versucht, aber Sie könnten zu freundlich sein
von--, wenn Sie die Eingangslautsprecher umgeleitet werden, Sie könnten in der Lage, das zu tun, ja.
>> Irgendwelche letzten Fragen?
Cool.
Na danke euch so viel für das Ansehen.
Ich bin Hugh.
Sam Green: Ich bin Sam.
HUGH ZABRISKIE: Und das ist CS50.