1 00:00:00,000 --> 00:00:05,900 2 00:00:05,900 --> 00:00:07,170 >> SAM GREEN: Hallo, alle zusammen. 3 00:00:07,170 --> 00:00:08,640 Willkommen in unserem Seminar. 4 00:00:08,640 --> 00:00:10,009 Mein Name ist Sam. 5 00:00:10,009 --> 00:00:11,050 HUGH ZABRISKIE: Ich bin Hugh. 6 00:00:11,050 --> 00:00:17,420 Sam Green: Und wir werden heute zu sprechen über JavaScript und die Web Audio API. 7 00:00:17,420 --> 00:00:21,180 Nur um zu beginnen, ist dies eine übersicht auf unserer Agenda für das Seminar. 8 00:00:21,180 --> 00:00:25,350 Wir werden, indem man über Start warum Sie sich für das Web sein sollte 9 00:00:25,350 --> 00:00:30,130 Audio API, warum ist JavaScript die Sprache, die Sie dafür benötigen, 10 00:00:30,130 --> 00:00:32,619 und dann über JavaScript sprechen essentials-- so wie, 11 00:00:32,619 --> 00:00:34,800 gehen Sie durch einige Grundlagen der Sprache, 12 00:00:34,800 --> 00:00:37,290 und dann über die zu sprechen Audio-API auf einem hohen Niveau. 13 00:00:37,290 --> 00:00:41,140 Dann werden Hugh über einige sprechen der Stufen der Audioproduktion 14 00:00:41,140 --> 00:00:45,509 und dann Demo dieses ehrfürchtige Sequenzer Projekt baute er und zeigt Ihnen den Code. 15 00:00:45,509 --> 00:00:48,050 Und dann, wir haben Zeit für Fragen am Ende für die Menschen 16 00:00:48,050 --> 00:00:49,593 die hier leben. 17 00:00:49,593 --> 00:00:50,540 >> HUGH ZABRISKIE: Kühle. 18 00:00:50,540 --> 00:00:50,990 >> SAM GREEN: Kühle. 19 00:00:50,990 --> 00:00:51,383 >> HUGH ZABRISKIE: Kühle. 20 00:00:51,383 --> 00:00:52,170 Ich werde wieder auf. 21 00:00:52,170 --> 00:00:54,960 >> SAM GREEN: Also, das Wichtigste zuerst. 22 00:00:54,960 --> 00:00:57,840 Damit wird eines der großen Dinge über das Web Audio API 23 00:00:57,840 --> 00:01:00,480 ist, dass es keine Einrichtung erforderlich. 24 00:01:00,480 --> 00:01:04,230 Es kommt zu integrierten den meisten modernen Browsern, 25 00:01:04,230 --> 00:01:08,630 einschließlich Chrom, Rand, insgesamt Haufen Andere-- all diejenigen, 26 00:01:08,630 --> 00:01:12,650 dass große Teile Menschen nutzen heute. 27 00:01:12,650 --> 00:01:14,807 So gibt es keine aufgestellt, abgesehen von gerade erst 28 00:01:14,807 --> 00:01:16,890 ein Web-Server gehen, für Sie begann zu bekommen 29 00:01:16,890 --> 00:01:18,420 an Ihrem Projekt, was ausgezeichnet ist. 30 00:01:18,420 --> 00:01:21,500 31 00:01:21,500 --> 00:01:24,190 >> Wir empfehlen hübsches stark, dass man bedenkt, 32 00:01:24,190 --> 00:01:26,530 Verwendung von Chrome für JavaScript Web-Entwicklung, 33 00:01:26,530 --> 00:01:30,260 nur weil seinem Entwickler Werkzeuge sind wirklich stark. 34 00:01:30,260 --> 00:01:33,220 Als ein Beispiel für genau das, was wir meinen, sagen, öffnen Sie Ihren JavaScript- 35 00:01:33,220 --> 00:01:38,600 console-- wenn Sie Chrome gehen und du siehst in jedem Web-Seite, 36 00:01:38,600 --> 00:01:43,897 und Sie klicken Sie links Inspect Element, und dann 37 00:01:43,897 --> 00:01:46,730 Sie zu diesem kleinen Dropdown-go hier und Sie auf Console klicken, 38 00:01:46,730 --> 00:01:50,660 Sie werden sehen, was öffnet schaut ein viel wie eine Eingabeaufforderung, dass Sie 39 00:01:50,660 --> 00:01:53,720 könnte auf Ihrem Mac zu sehen, oder auf die ID. 40 00:01:53,720 --> 00:01:59,260 Und genau so, können wir Typ-Befehle hier, wie Regen, 41 00:01:59,260 --> 00:02:01,350 und andere Befehle so. 42 00:02:01,350 --> 00:02:04,267 Wir können Variablen zu erstellen, wie wir später in JavaScript zu sehen. 43 00:02:04,267 --> 00:02:07,100 Und so alles, was wir tun, kann in JavaScript wir mit der Konsole zu tun, 44 00:02:07,100 --> 00:02:11,430 und das ist eine Super-handliche Weise, startet das Spiel mit APIs 45 00:02:11,430 --> 00:02:15,760 und, sich mit JavaScript Anhieb. 46 00:02:15,760 --> 00:02:18,290 Keine Einrichtung erforderlich, Das ist wirklich nett. 47 00:02:18,290 --> 00:02:18,790 Cool. 48 00:02:18,790 --> 00:02:22,064 49 00:02:22,064 --> 00:02:22,880 Fantastisch. 50 00:02:22,880 --> 00:02:24,780 >> Also nur noch eine Sache hinzufügen. 51 00:02:24,780 --> 00:02:27,780 Wenn Sie irgendwelche questions-- gibt es viele von Ihnen, die nicht hier leben, 52 00:02:27,780 --> 00:02:31,232 fühlen sich frei, diese E-Mail us-- sind unsere E-Mail-Adressen. 53 00:02:31,232 --> 00:02:33,190 Wenn Sie Fragen haben Sie wollen nicht, uns zu fragen, 54 00:02:33,190 --> 00:02:36,160 wie, oh Ich habe einen Fehler haben in meinem Code, oder etwas 55 00:02:36,160 --> 00:02:39,270 Das ist ein wenig präziser, vielleicht Google es zuerst. 56 00:02:39,270 --> 00:02:42,340 Es gibt eine Menge großartiger Ressourcen über das Web Audio API gibt. 57 00:02:42,340 --> 00:02:44,089 Es ist wirklich gut dokumentiert und es als 58 00:02:44,089 --> 00:02:47,194 durch eine Menge Leute in verwendet Industrie, und Leute, die einfach sind, 59 00:02:47,194 --> 00:02:48,610 Aufbau fun stuff für sich. 60 00:02:48,610 --> 00:02:51,306 So sollte es eine Menge sein von Ressourcen gibt. 61 00:02:51,306 --> 00:02:53,040 Fantastisch. 62 00:02:53,040 --> 00:02:56,100 >> Cool, also warum das Web Audio API? 63 00:02:56,100 --> 00:02:59,840 Dieses Diagramm ist ein bisschen einer Entwicklung des Weges 64 00:02:59,840 --> 00:03:04,100 Sound im Web hat sich im Laufe der Zeit gewachsen. 65 00:03:04,100 --> 00:03:13,080 Bgsound war wie die ursprüngliche HTML-Tag Internet Explorer verwendet, um zu unterstützen. 66 00:03:13,080 --> 00:03:16,790 Es dürfen nur für recht einfach klingt, die Funktionalität war nicht sehr robust, 67 00:03:16,790 --> 00:03:19,380 und man konnte nicht machen komplizierte Sequenzierung, 68 00:03:19,380 --> 00:03:21,890 oder zu steuern, wenn ein Ton begonnen und blieb sehr robust. 69 00:03:21,890 --> 00:03:23,930 So war es nicht besonders gut entwickelt. 70 00:03:23,930 --> 00:03:27,470 Dann, nach, dass Flash- kam along--, die, 71 00:03:27,470 --> 00:03:31,712 Ich bin mir sicher, dass euch alle kennen mit Flash-- vielleicht auch nicht, wie es funktioniert, 72 00:03:31,712 --> 00:03:32,920 aber Sie haben es sicherlich gesehen. 73 00:03:32,920 --> 00:03:35,586 Sie müssen Ihren Flash aktualisieren Plug-in, all solche Sachen, 74 00:03:35,586 --> 00:03:40,110 und dass auf jeden Fall erweitert die Reichweite Funktionalität, die verfügbar war. 75 00:03:40,110 --> 00:03:45,370 Aber was den Benutzer installieren ein Plug-in ist auf jeden Fall 76 00:03:45,370 --> 00:03:48,480 Ein Nachteil einschließlich Flash in Ihrer Anwendung, oder? 77 00:03:48,480 --> 00:03:52,410 Weil Sie dann abhängig von der du Benutzer gehen und finden dieses Plug-in, 78 00:03:52,410 --> 00:03:54,660 und wahrscheinlich eingeschaltet durch diesen zusätzlichen Schritt 79 00:03:54,660 --> 00:03:56,640 sie zu treffen haben, um Ihre Anwendung zu verwenden. 80 00:03:56,640 --> 00:04:01,270 Und dann könnte es ein Update sein das wird Ihre gesamte Anwendung zu brechen, 81 00:04:01,270 --> 00:04:03,880 und es endet als ein Alptraum für den Entwickler, zu. 82 00:04:03,880 --> 00:04:06,230 Das war also eine Barrikade. 83 00:04:06,230 --> 00:04:10,480 >> Und dann danach kam, die HTML-Audio-Tag, der 84 00:04:10,480 --> 00:04:16,579 ist ein Merkmal der modernen HTML-- die sicherlich für viel mehr Sachen erlaubt, 85 00:04:16,579 --> 00:04:20,050 sondern auch die Dinge, die Sie tun könnten, Es gab ein wenig nur begrenzt 86 00:04:20,050 --> 00:04:22,730 als Folge der Dinge dass HTML war in der Lage ist. 87 00:04:22,730 --> 00:04:26,060 Also, wenn die JavaScript- API, die Web Audio API, 88 00:04:26,060 --> 00:04:29,290 wurde zu einem Standard- in allen Browsern zu üben, 89 00:04:29,290 --> 00:04:32,490 das wirklich den Satz erweitert Möglichkeiten für Entwickler 90 00:04:32,490 --> 00:04:36,590 wirklich in Gebäude zu gelangen coole Sachen für das Web. 91 00:04:36,590 --> 00:04:39,220 Für eine lange Zeit dort hatte waren wirklich robuste Werkzeuge 92 00:04:39,220 --> 00:04:44,360 für native Audio-Anwendungen, like-- jeder weiß, Garageband, 93 00:04:44,360 --> 00:04:48,360 und dann natürlich gibt es mehr professionelle Audio-Mischanwendungen, 94 00:04:48,360 --> 00:04:49,640 und solche Sachen. 95 00:04:49,640 --> 00:04:52,690 Aber es war kein wirklich gut Cloud-- nicht 96 00:04:52,690 --> 00:04:55,811 Wolke, ja, ich denke, Cloud-- webbasierte Plattform 97 00:04:55,811 --> 00:04:58,310 das wäre Entwicklern ermöglichen Erstellen von Anwendungen für die Menschen 98 00:04:58,310 --> 00:05:00,570 In den Audio-Mixing zu tun. 99 00:05:00,570 --> 00:05:03,960 Und wie er wird Ihnen zeigen, später wurde die Web Audio API 100 00:05:03,960 --> 00:05:07,470 ermöglicht die wirklich mächtig Zeug, um wirklich einfach passieren, 101 00:05:07,470 --> 00:05:09,597 Das ist ziemlich cool. 102 00:05:09,597 --> 00:05:12,680 Also das ist, die Anweisung, warum Sie sollte den Rest des Seminars zu sehen, 103 00:05:12,680 --> 00:05:14,350 im Grunde. 104 00:05:14,350 --> 00:05:17,880 >> Und jetzt, ich werde zu reden einige JavaScript-- nur Grundelemente 105 00:05:17,880 --> 00:05:20,240 der Sprache, so daß Wir können auf der gleichen Seite 106 00:05:20,240 --> 00:05:22,470 Wenn wir über das reden API ein wenig später. 107 00:05:22,470 --> 00:05:23,260 Cool. 108 00:05:23,260 --> 00:05:26,192 >> Also, das ist eine Zusammenfassung. 109 00:05:26,192 --> 00:05:27,150 Ich habe vergessen, hier war. 110 00:05:27,150 --> 00:05:27,510 Ja. 111 00:05:27,510 --> 00:05:27,870 >> HUGH ZABRISKIE: Es gibt zwei Rutschen Sie hier. 112 00:05:27,870 --> 00:05:30,245 >> SAM GREEN: Dies ist die Zusammenfassung der einige der Beschränkungen 113 00:05:30,245 --> 00:05:35,220 der anderen Bindung, alten Methoden. 114 00:05:35,220 --> 00:05:37,828 Und dann jetzt haben wir diese Dinge. 115 00:05:37,828 --> 00:05:40,011 Cool. 116 00:05:40,011 --> 00:05:40,510 Fantastisch. 117 00:05:40,510 --> 00:05:43,200 >> Also, JavaScript Wesentliche. 118 00:05:43,200 --> 00:05:47,230 First things first, es gibt eine ziemlich signifikanten Unterschied 119 00:05:47,230 --> 00:05:49,940 in JavaScript gegenüber in eine Sprachen wie C, in der Weise, 120 00:05:49,940 --> 00:05:52,050 dass Variablen erstellt. 121 00:05:52,050 --> 00:05:55,634 So in C, sind wir darauf, verwendet unsere Variablen geben, oder? 122 00:05:55,634 --> 00:05:57,800 Und ich meine nicht Typ wie geben Sie sie in, ich meine Art 123 00:05:57,800 --> 00:06:01,900 wie ordnen Sie eine Typ-- Bedeutung wie ein int, ein Schwimmer, ein char. 124 00:06:01,900 --> 00:06:05,210 In C wurden wir wirklich verwendet mit, um eine Variable zu erstellen 125 00:06:05,210 --> 00:06:09,690 und klicken Sie dann auf diese Art für den Stick ganze Zeit, dass wir diese Variable. 126 00:06:09,690 --> 00:06:13,990 Und das ist nicht unbedingt schlechter, aber es ist wahrscheinlich schwieriger zu bedienen. 127 00:06:13,990 --> 00:06:16,190 Eine der coolen Features JavaScript ist 128 00:06:16,190 --> 00:06:19,740 dass Variablen sind, was heißt "dynamisch typisierte", die 129 00:06:19,740 --> 00:06:22,500 bedeutet, dass ich ein zu erstellen Variable mit diesem Syntax, 130 00:06:22,500 --> 00:06:25,800 varX gleich 5 ist, zum Beispiel. 131 00:06:25,800 --> 00:06:27,790 Das ursprünglich erstellt eine ganze Zahl'variable 132 00:06:27,790 --> 00:06:29,870 direkt unter der Haube somewhere-- aber ich 133 00:06:29,870 --> 00:06:33,040 können diese Variable ändern um in einen String beziehen 134 00:06:33,040 --> 00:06:35,820 ohne etwas zu tun, wie Erstellen Sie eine neue Variable. 135 00:06:35,820 --> 00:06:37,880 Ich brauche keine Sorgen zu machen über die Art ändert. 136 00:06:37,880 --> 00:06:45,440 JavaScript, weiß, dass die Art der geändert, und das dynamisch passiert. 137 00:06:45,440 --> 00:06:48,510 >> So gibt es Vorteile und Nachteile auf, dass, 138 00:06:48,510 --> 00:06:51,250 wie jeder, der in der gearbeitet hat JavaScript für eine Weile vielleicht wissen. 139 00:06:51,250 --> 00:06:53,600 Es gibt Zeiten, Sie vielleicht versehentlich 140 00:06:53,600 --> 00:06:57,720 ändern Sie den Typ einer Variablen und nicht damit umgehen, dass Typ-Wechsel, 141 00:06:57,720 --> 00:07:01,120 und dann sie JavaScript kann crash-- oder eine Ausnahme 142 00:07:01,120 --> 00:07:06,070 geworfen werden, weil Sie das haben falsche Art, wenn Sie erwarten, dass ein Typ. 143 00:07:06,070 --> 00:07:07,040 Cool. 144 00:07:07,040 --> 00:07:11,470 >> So ist scoping-- die wie, wenn wir erinnere mich an die ersten Wochen im Verlauf, 145 00:07:11,470 --> 00:07:15,420 bezieht sich auf die sichtbare einer Variablen ist und in welchem ​​Bereich des Codes. 146 00:07:15,420 --> 00:07:18,400 All das sieht sehr ähnlich die Art und Weise sieht es in C. 147 00:07:18,400 --> 00:07:24,755 So Variablen werden in der Regel scoped in geschweiften Klammern innerhalb einer Funktion, 148 00:07:24,755 --> 00:07:27,005 und dann gibt es auch global Bereichs-Variablen, 149 00:07:27,005 --> 00:07:29,171 sind--, wenn Sie eine Variable zu schreiben außerhalb einer Funktion, 150 00:07:29,171 --> 00:07:31,790 es wird im gesamten Text sichtbar. 151 00:07:31,790 --> 00:07:35,840 >> Ein Unterschied zwischen JavaScript und C insbesondere 152 00:07:35,840 --> 00:07:40,280 ist, dass, wenn Sie eine globale erklären variable überall in einer Textdatei 153 00:07:40,280 --> 00:07:43,324 in irgendeiner Funktion sichtbar ist innerhalb dieser Textdatei. 154 00:07:43,324 --> 00:07:44,240 Das ist richtig, nicht wahr? 155 00:07:44,240 --> 00:07:46,330 >> HUGH ZABRISKIE: Yep. 156 00:07:46,330 --> 00:07:49,120 >> SAM GREEN: Also das ist auch ein wenig bit flippige im Vergleich zu C, 157 00:07:49,120 --> 00:07:52,660 wo wir immer, dass unsere Variablendefinitionen über die Orte, 158 00:07:52,660 --> 00:07:53,770 sie verwendet wurden. 159 00:07:53,770 --> 00:07:57,957 Das ist nicht eine Regel, die durchgesetzt hat mehr, also, ein wenig anders. 160 00:07:57,957 --> 00:08:00,540 Und wieder, nur um noch einmal betonen, globalen Vergleich lokale variables-- 161 00:08:00,540 --> 00:08:03,457 sehr ähnlich C. Sie hätten zwei Variablen mit dem gleichen Namen, 162 00:08:03,457 --> 00:08:06,540 und haben eine der ihren Namen abgeschattet wird durch eine lokale Variable, wenn einer von ihnen 163 00:08:06,540 --> 00:08:07,546 war global. 164 00:08:07,546 --> 00:08:09,420 Also, ähnliche Art von Probleme, dass einige von euch 165 00:08:09,420 --> 00:08:11,920 kann in in einigen ausgeführt haben Ihres Problems setzt so weit. 166 00:08:11,920 --> 00:08:14,450 Cool, das ist also Variablen. 167 00:08:14,450 --> 00:08:20,310 >> Kontrollfluss, was bedeutet, wie, wenn-else-- logischen stuff-- und Loops. 168 00:08:20,310 --> 00:08:24,510 Also, mit zu beginnen, das ist was if-else Aussagen aus wie in JavaScript. 169 00:08:24,510 --> 00:08:29,750 Die Anordnung der verschiedenen Dingen auf den Leitungen ist nicht wichtig. 170 00:08:29,750 --> 00:08:34,409 Dies ist nur eines der Übereinkommen für die Art, wie wir Struktur-Code. 171 00:08:34,409 --> 00:08:38,634 Genau wie in C, haben wir ein "wenn", eine Klammer Aussage. 172 00:08:38,634 --> 00:08:40,840 173 00:08:40,840 --> 00:08:42,090 Das ist nicht, was ich tun soll. 174 00:08:42,090 --> 00:08:44,860 175 00:08:44,860 --> 00:08:45,550 Ich habe es wieder getan. 176 00:08:45,550 --> 00:08:46,841 >> HUGH ZABRISKIE: Der Versuch, zu verlassen? 177 00:08:46,841 --> 00:08:49,770 SAM GREEN: Nein, ich bin nur versuchen, um es zu vergrößern. 178 00:08:49,770 --> 00:08:50,660 Es spielt keine Rolle. 179 00:08:50,660 --> 00:08:54,730 180 00:08:54,730 --> 00:08:59,370 >> Also, eine "if" -Anweisung müssen wir und wir haben eine Bedingung in der es 181 00:08:59,370 --> 00:09:03,130 dass den Wert true oder false, und bestimmt, ob oder nicht 182 00:09:03,130 --> 00:09:04,510 Wir geben Sie diese Code-Block. 183 00:09:04,510 --> 00:09:09,860 Und ebenso, haben wir eine else-if und ein anderes, genau wie wir, um in C verwendet 184 00:09:09,860 --> 00:09:14,010 >> Sie sollten auch ziemlich bequem sein auf Anhieb mit Schlaufen, 185 00:09:14,010 --> 00:09:16,440 weil sie auch aussehen eine Menge, wie C aussieht. 186 00:09:16,440 --> 00:09:19,600 Aber Sie werden feststellen, dass wir uns wieder zu haben, anstelle von int Initialisierungen 187 00:09:19,600 --> 00:09:22,570 Wir haben var Initialisierungen. 188 00:09:22,570 --> 00:09:24,650 Und ich denke, Sie haben vorsichtig sein, um zu sein, 189 00:09:24,650 --> 00:09:28,460 dass Sie nicht den Wert zu ändern der ich von einem int in einen String, 190 00:09:28,460 --> 00:09:31,780 zum Beispiel, weil das ist zu gehen verursachen seltsame Verhalten Sie vielleicht nicht 191 00:09:31,780 --> 00:09:32,280 damit rechnen. 192 00:09:32,280 --> 00:09:35,750 Aber diese aussehen sollte ziemlich vertraut, wie gut. 193 00:09:35,750 --> 00:09:39,460 >> Also das ist, wo die Dinge beginnen, bekommen ein wenig verrückt in JavaScript 194 00:09:39,460 --> 00:09:44,920 für jemanden, der aus a los ist Hintergrund der C. Es gibt Funktionen 195 00:09:44,920 --> 00:09:48,070 in JavaScript, und es gibt eine Möglichkeit, um eine Funktion, die aussieht erklären 196 00:09:48,070 --> 00:09:50,361 Art ähnlich zu C, und dann gibt es eine andere, 197 00:09:50,361 --> 00:09:52,450 sieht irgendwie anders aus. 198 00:09:52,450 --> 00:09:54,930 >> Die erste Version, die wir hier sehen können, 199 00:09:54,930 --> 00:09:59,260 ist eine Art C-like, in denen wir sagen, dies ist eine Funktion, 200 00:09:59,260 --> 00:10:01,490 geben Sie ihm einen Namen geben die Anzahl der Argumente, 201 00:10:01,490 --> 00:10:05,150 und dann wird der Inhalt des Funktions gehen Sie innerhalb dieser geschweiften Klammern. 202 00:10:05,150 --> 00:10:08,850 Wir werden ein Beispiel zu sehen Argumente in nur einer Sekunde. 203 00:10:08,850 --> 00:10:13,420 >> Der Erwägung, dass in der nächsten Zeile, sehen wir, oh, hier ist eine Variable namens "myFunction" 204 00:10:13,420 --> 00:10:17,546 und wir gleich es dazu Generika thing-- function-- dass 205 00:10:17,546 --> 00:10:19,170 scheint nicht zu etwas los ist. 206 00:10:19,170 --> 00:10:22,780 207 00:10:22,780 --> 00:10:26,080 Der Grund, dass anders ist als C ist, dass JavaScript 208 00:10:26,080 --> 00:10:30,040 ist das, was eine funktionale Sprache genannt wird, oder hat Funktionselemente, was bedeutet, 209 00:10:30,040 --> 00:10:33,510 dass Funktionen sind eigentlich Werte. 210 00:10:33,510 --> 00:10:39,520 Und das bedeutet, dass wir festlegen können eine Variable, eine Funktion gleich 211 00:10:39,520 --> 00:10:43,210 und verschieben Sie dann diese Funktion um, übergeben Sie als Argument, 212 00:10:43,210 --> 00:10:46,550 tun alle möglichen Dinge wie das mit Funktionen. 213 00:10:46,550 --> 00:10:49,682 >> Eine andere Sache zu HINWEIS-- Funktionen geschrieben 214 00:10:49,682 --> 00:10:51,140 mit einer bestimmten Anzahl von Argumenten. 215 00:10:51,140 --> 00:10:54,056 Wir werden ein Beispiel für eine Funktion zu sehen mit einem Argument auf der nächsten Folie. 216 00:10:54,056 --> 00:10:56,720 Aber JavaScript wird nicht schreien Sie, wenn Sie versuchen, 217 00:10:56,720 --> 00:10:59,330 eine Funktion mit der Verwendung Falsche Anzahl von Argumenten. 218 00:10:59,330 --> 00:11:05,310 Es wird nur sein Bestes tun, um zu tun, was bedeutet, dass, wenn Sie übergeben, 219 00:11:05,310 --> 00:11:09,410 Sie eine Funktion, die einen erwartet nennen Argument ohne Argument, alles, was 220 00:11:09,410 --> 00:11:13,990 passiert, wird es wird sein Bestes tun, um zu versuchen, diesen Code auszuführen, 221 00:11:13,990 --> 00:11:16,541 und wenn es irgendwann läuft in eine Ausnahme oder ein Fehler auftritt, 222 00:11:16,541 --> 00:11:19,790 es wird diese Ausnahme zu werfen und einfach weiter going-- welches nur eine der Möglichkeiten, 223 00:11:19,790 --> 00:11:21,070 dass JavaScript funktioniert. 224 00:11:21,070 --> 00:11:21,781 Ja. 225 00:11:21,781 --> 00:11:24,207 >> Publikum: Was passiert, wenn es gibt zu viele Argumente? 226 00:11:24,207 --> 00:11:26,040 SAM GREEN: Also die Frage war, was passiert, 227 00:11:26,040 --> 00:11:27,380 Wenn es zu viele Argumente? 228 00:11:27,380 --> 00:11:29,171 Und die Antwort ist, dass JavaScript wird nur 229 00:11:29,171 --> 00:11:32,120 ignorieren diejenigen, die sind nach denen sie erwartet. 230 00:11:32,120 --> 00:11:36,420 Er werde versuchen, die Funktion auszuführen rufen, als ob es nur die ersten beiden. 231 00:11:36,420 --> 00:11:37,075 Recht? 232 00:11:37,075 --> 00:11:37,700 >> HUGH ZABRISKIE: Das ist richtig, ja. 233 00:11:37,700 --> 00:11:39,449 Gleiches gilt, wenn gibt zu wenige Argumente, 234 00:11:39,449 --> 00:11:42,640 es nur irgendwie gibt null bis alle Argumente sie keine Werte haben 235 00:11:42,640 --> 00:11:43,660 für. 236 00:11:43,660 --> 00:11:45,810 >> SAM GREEN: denen tatsächlich nützlich sein, wenn Sie 237 00:11:45,810 --> 00:11:49,060 möchte eine Funktion schreiben, dass erfolgt eine variable Anzahl Argumente. 238 00:11:49,060 --> 00:11:55,830 Sie können Standardwerte in eingestellt Die Definition der Funktion, 239 00:11:55,830 --> 00:11:59,060 und er kann die Tatsache zu ignorieren , dass der Eingang ist nicht da. 240 00:11:59,060 --> 00:12:01,584 241 00:12:01,584 --> 00:12:04,000 Deshalb möchte ich ein wenig sprechen mehr über diese letzte Kugel 242 00:12:04,000 --> 00:12:05,541 Punkt, der Funktionen sind Werte. 243 00:12:05,541 --> 00:12:07,930 244 00:12:07,930 --> 00:12:11,010 Dies ist ein Beispiel, das ist ein wenig überwältigend 245 00:12:11,010 --> 00:12:14,880 wenn Sie gerade lesen, und glaube nicht, dass über das, was vor sich geht für eine Sekunde. 246 00:12:14,880 --> 00:12:17,910 Also, lassen Sie uns einfach an die erste Linie hier. 247 00:12:17,910 --> 00:12:24,360 Wir haben diese Variablen f1, dass wir sagen, ist eine Funktion, diese Sache tut. 248 00:12:24,360 --> 00:12:28,535 Und der Inhalt der Funktion sind console.log ("Hallo"). 249 00:12:28,535 --> 00:12:32,220 Sie können von console.log die denken, JavaScript Äquivalent printf. 250 00:12:32,220 --> 00:12:35,510 So ist, was passieren wird, wenn wir führen Sie diesen Code in unserem Browser, 251 00:12:35,510 --> 00:12:37,530 es wird drucken Sie eine Zeichenfolge. 252 00:12:37,530 --> 00:12:39,342 Ich kann beweisen, dass. 253 00:12:39,342 --> 00:12:42,300 Publikum: Mit log, aber das tut meine, es ist irgendwo gespeichert? 254 00:12:42,300 --> 00:12:42,550 Sam Green: Ja. 255 00:12:42,550 --> 00:12:44,216 Also werde ich Ihnen zeigen, was passieren wird. 256 00:12:44,216 --> 00:12:48,085 So war die Frage, was bedeutet log das? 257 00:12:48,085 --> 00:12:51,262 >> HUGH ZABRISKIE: So console.log ist wie printf für C. 258 00:12:51,262 --> 00:12:52,970 SAM GREEN: So console.log ist wie printf, 259 00:12:52,970 --> 00:12:59,240 so dass, wenn ich diese console.log ("Hallo"), und ich fordere, dass die Zeichenfolge "Hallo" 260 00:12:59,240 --> 00:13:00,730 steigt aus auf der Konsole ausgegeben. 261 00:13:00,730 --> 00:13:03,340 Dies ist die Konsole. 262 00:13:03,340 --> 00:13:05,930 Es ist genau wie printf, wo er druckt die Standardausgabe. 263 00:13:05,930 --> 00:13:09,050 264 00:13:09,050 --> 00:13:11,230 Und wir werden gleich sehen, aber dies ist tatsächlich 265 00:13:11,230 --> 00:13:16,529 die sich auf die Konsolen-Objekt, und Aufrufen einer Methode für das Objekt. 266 00:13:16,529 --> 00:13:18,320 Das wird mehr Sinn machen in einer Minute, wenn wir 267 00:13:18,320 --> 00:13:20,660 bekommen, um darüber zu reden Objekte in JavaScript, 268 00:13:20,660 --> 00:13:22,509 aber ich dachte, ich würde nur erwähnen, dass. 269 00:13:22,509 --> 00:13:24,300 HUGH ZABRISKIE: Wir sind in C verwendet, right-- 270 00:13:24,300 --> 00:13:27,580 wir schreiben normalerweise ein großes Programm im Haupt, etwas zu tun. 271 00:13:27,580 --> 00:13:30,700 Aber was ist cool in JavaScript ist Sie haben diese Art von Interpreter, 272 00:13:30,700 --> 00:13:33,620 in Echtzeit läuft, so dass es dauert nur Zeile für Zeile, 273 00:13:33,620 --> 00:13:35,320 es ist nur interpretieren kann, dass auf der Stelle. 274 00:13:35,320 --> 00:13:37,403 Und es verfolgt Dinge, die vor ausgeführt haben, 275 00:13:37,403 --> 00:13:41,620 so ist es ein ziemlich nützliches Werkzeug, um benutzen console.log oder die Konsole, 276 00:13:41,620 --> 00:13:46,870 in der Regel, um nur zu spielen rund mit JavaScript. 277 00:13:46,870 --> 00:13:51,420 >> SAM GREEN: So geht zurück auf diese example-- die zweite Codezeile 278 00:13:51,420 --> 00:13:55,320 hier ist ziemlich irrsinnig in meinem Kopf. 279 00:13:55,320 --> 00:13:59,790 Das erste Mal las ich diese, es war, ist, was geht hier vor? 280 00:13:59,790 --> 00:14:04,580 Also, was passiert ist, diese Funktionsdeklaration, sagt, 281 00:14:04,580 --> 00:14:10,170 Ich habe eine Funktion namens f2 das ist erwartet ein Argument, f, 282 00:14:10,170 --> 00:14:12,990 und dann ruft sie, dass Funktion F, die 283 00:14:12,990 --> 00:14:17,652 wurde als Argument übergebenen ohne Argumente selber. 284 00:14:17,652 --> 00:14:19,110 So, das war vielleicht verwirrend sein. 285 00:14:19,110 --> 00:14:21,890 286 00:14:21,890 --> 00:14:28,400 Wenn wir verstehen dies als f2 nimmt f1 als Argument, und dann innerhalb von f2, 287 00:14:28,400 --> 00:14:31,190 f erhält called-- was bedeutet, dass dieser Codezeile, 288 00:14:31,190 --> 00:14:34,192 Nach diesen zwei Zeilen Code, führt zu "Hallo" 289 00:14:34,192 --> 00:14:35,400 wobei auf der Konsole ausgegeben. 290 00:14:35,400 --> 00:14:41,660 291 00:14:41,660 --> 00:14:44,910 >> Die Tatsache, dass wir weitergeben können Funktionen um, als Werte 292 00:14:44,910 --> 00:14:47,870 endet als einer der am meisten leistungsstarken Funktionen von JavaScript 293 00:14:47,870 --> 00:14:49,700 als Programmiersprache. 294 00:14:49,700 --> 00:14:52,782 Außerhalb aller genial Dinge tun können, 295 00:14:52,782 --> 00:14:54,990 ebenso ein Merkmal der Sprache in Bezug auf die Art und Weise 296 00:14:54,990 --> 00:14:58,400 dass es macht die Dinge einfach Programmierung und ermöglicht 297 00:14:58,400 --> 00:15:01,060 für Dinge, die nicht besonders sind auf die Bahn gut geeignet, 298 00:15:01,060 --> 00:15:04,500 funktionalen Programmierung und Funktions Programmierung Aspekte JavaScript 299 00:15:04,500 --> 00:15:07,130 ist einer der am meisten leistungsfähige Konzepte, 300 00:15:07,130 --> 00:15:11,030 existiert in JavaScript-- wenn Sie mich fragen. 301 00:15:11,030 --> 00:15:11,960 Cool. 302 00:15:11,960 --> 00:15:13,534 >> Also, das nächste Ding. 303 00:15:13,534 --> 00:15:16,450 Zusätzlich dazu, dass praktisch gibt es auch Elemente von JavaScript 304 00:15:16,450 --> 00:15:20,510 die objektorientiert sind, Das ist einer der ganz 305 00:15:20,510 --> 00:15:23,800 beliebte Schlagworte in der Informatik. 306 00:15:23,800 --> 00:15:27,040 Objekt orientierte Programmierung ist eine wirklich populäre Sache. 307 00:15:27,040 --> 00:15:34,210 JavaScript hat eine Version, dass, wo ich glaube, jeder Wert ist auch 308 00:15:34,210 --> 00:15:41,475 ein Objekt, das bedeutet, dass jedes Objekt wickelt eine Anzahl von Werten zusammen. 309 00:15:41,475 --> 00:15:44,020 310 00:15:44,020 --> 00:15:49,750 Also für Werte, die einfach sind, wie eine ganze Zahl, wie varX gleich 5, 311 00:15:49,750 --> 00:15:52,250 dieses Objekt wickelt nur, dass ein Wert. 312 00:15:52,250 --> 00:15:54,760 313 00:15:54,760 --> 00:15:59,036 >> Wir können aber auch eine Situation vorstellen, where-- wir von Situationen, in C denken kann 314 00:15:59,036 --> 00:16:00,910 wo wir wollten, etwas mit Strukturen, 315 00:16:00,910 --> 00:16:03,285 beispielsweise, dass mehrere hüllt Werte zusammen und Marken 316 00:16:03,285 --> 00:16:05,870 es wirklich einfach, die Dinge um weiterzugeben. 317 00:16:05,870 --> 00:16:09,270 Das ist, wenn sich ein Objekt in JavaScript. 318 00:16:09,270 --> 00:16:12,340 >> Es ist wichtig, daran zu erinnern, wenn ich sage, dass Objekte gewickelt 319 00:16:12,340 --> 00:16:15,330 eine Zahl von Werten zusammen, dass Funktionen auch 320 00:16:15,330 --> 00:16:21,506 Werte, die die Funktionen bedeutet, auch innerhalb eines JavaScript-Objekts sein. 321 00:16:21,506 --> 00:16:26,910 Und der Grund, die wichtig ist ist, dass, während wir oft 322 00:16:26,910 --> 00:16:30,290 denken Sie an Aufrufen einer Methode auf ein Objekt, das ist 323 00:16:30,290 --> 00:16:35,200 einer populären Begriff aus anderen populäre objektorientierten Sprachen, 324 00:16:35,200 --> 00:16:39,330 einer der Unterschiede ist hier, dass alles, was ein Verfahren ist in JavaScript 325 00:16:39,330 --> 00:16:47,270 ist ein Wert innerhalb eines Objekts gespeichert dass führt einige Action-- möglicherweise 326 00:16:47,270 --> 00:16:51,850 mit den anderen Werten, die im Inneren sind des Objekts, aber nicht notwendigerweise. 327 00:16:51,850 --> 00:16:56,930 So können Sie sich eine Situation vorstellen, I denke, in ein wenig von einer verrückten Art und Weise, 328 00:16:56,930 --> 00:17:02,990 in dem Sie eine Methode der sogenannte Objekt auf ein anderes Objekt, beispielsweise. 329 00:17:02,990 --> 00:17:06,010 Also, es ist ein bisschen flippig auf diese Weise. 330 00:17:06,010 --> 00:17:09,369 >> Und Sie können auch die Methoden zu ändern die einem Objekt zugeordnet sind, 331 00:17:09,369 --> 00:17:13,740 durch die Zuweisung dieser Methode ein neue Funktion, die auch 332 00:17:13,740 --> 00:17:18,250 ziemlich unterschiedlich zu anderen objektorientierten Sprachen, in denen 333 00:17:18,250 --> 00:17:21,410 wenn wir ein Objekt zu erklären und instanziiert es, 334 00:17:21,410 --> 00:17:25,839 können wir die Methoden, die sich nicht ändern, mit diesem Objekt mehr zugeordnet ist. 335 00:17:25,839 --> 00:17:28,680 Also, das ist ziemlich anders. 336 00:17:28,680 --> 00:17:29,570 Cool. 337 00:17:29,570 --> 00:17:34,010 >> Also hier ist ein Beispiel, zuerst, eines Objekts in Aktion. 338 00:17:34,010 --> 00:17:36,390 Dies ist, was heißt ein generisches Objekt, das 339 00:17:36,390 --> 00:17:39,460 bedeutet, dass es nicht irgendwelche insbesondere Name, verfügt nicht über eine Klasse, 340 00:17:39,460 --> 00:17:42,190 es ist nur einige Umhüllung von Werten. 341 00:17:42,190 --> 00:17:49,790 Und die Art und Weise, die aussieht, ist, wir haben diese äußere Paar von geschweiften Klammern hier 342 00:17:49,790 --> 00:17:57,950 , die JavaScript anzuzeigen und sagen, das ist ein Ziel. 343 00:17:57,950 --> 00:18:02,130 Die Werte in der es sind jeweils Werte in 344 00:18:02,130 --> 00:18:04,590 des Objekts Das sollte zusammen gewickelt werden. 345 00:18:04,590 --> 00:18:09,180 Und im Inneren des Objekts, wir haben dann Schlüssel Wert-Paare, 346 00:18:09,180 --> 00:18:13,880 wobei der Schlüssel sich auf den Namen der Wert innerhalb des Objekts, 347 00:18:13,880 --> 00:18:16,790 und der andere side-- gegenüber dem Doppelpunkt hier-- 348 00:18:16,790 --> 00:18:19,850 ist der tatsächliche Wert das sollte gespeichert werden. 349 00:18:19,850 --> 00:18:26,210 >> Sie sehen also hier, dass wir eine Taste aufgerufen mit Wert sam fn, 350 00:18:26,210 --> 00:18:29,430 gefolgt von einem Komma, sagen auf den nächsten Eintrag. 351 00:18:29,430 --> 00:18:33,560 Dann wird ein Schlüssel namens ln, mit einem Wert von Grün, 352 00:18:33,560 --> 00:18:35,840 gefolgt von einem Komma, gefolgt von "print" 353 00:18:35,840 --> 00:18:43,209 die gehen, um einen Funktionswert haben das wird diese Codezeile zu tun. 354 00:18:43,209 --> 00:18:45,500 Werfen wir einen Schritt zurück und auspacken, was hier vor sich geht. 355 00:18:45,500 --> 00:18:47,280 Also das ist ein wenig kompliziert, und wir etwas Neues sehen 356 00:18:47,280 --> 00:18:48,071 das erste Mal. 357 00:18:48,071 --> 00:18:51,190 358 00:18:51,190 --> 00:18:55,065 Das "this" Schlüsselwort ist das neue Ding wir hier sehen, und was dies tut 359 00:18:55,065 --> 00:19:00,540 ist, ist der Strom, Objekt in Umfang, nicht wahr? 360 00:19:00,540 --> 00:19:03,990 Wenn wir also sagen, diese weist den ganzen Weg zurück 361 00:19:03,990 --> 00:19:08,140 dieser gesamte object-- wenn wir das tun this.fn, 362 00:19:08,140 --> 00:19:11,990 wir werden den ganzen Weg zurück zu gehen auf dieses Objekt, um die fn-Wert gehen 363 00:19:11,990 --> 00:19:16,471 und erhalten sam, ziehen Sie es den ganzen Weg zurück, kleben Sie es hier, und dann weiterziehen. 364 00:19:16,471 --> 00:19:19,838 >> Publikum: So mit dem Abruf ist dass aufgrund der Parameter gemacht 365 00:19:19,838 --> 00:19:20,621 Definition? 366 00:19:20,621 --> 00:19:23,870 SAM GREEN: Die Frage war, ist die Abrufen wegen der Parameter getan 367 00:19:23,870 --> 00:19:24,727 Definition? 368 00:19:24,727 --> 00:19:25,435 Ja, absolut. 369 00:19:25,435 --> 00:19:29,660 370 00:19:29,660 --> 00:19:32,470 Was wird passieren, hier ist, dieser Punkt sagt zum JavaScript, 371 00:19:32,470 --> 00:19:39,990 OK, ich bin immer einen gewissen Wert von diesem Objekt von mir selbst. 372 00:19:39,990 --> 00:19:46,375 Und dann werden sie nach einem Eintrag zu suchen genannt fn, und wenn es sie findet, 373 00:19:46,375 --> 00:19:48,470 es wird, dass value-- zurück, so, es ist sam. 374 00:19:48,470 --> 00:19:51,540 Aber ich könnte auch eingegeben haben etwas, was hier nicht definiert wurde, 375 00:19:51,540 --> 00:19:54,090 und es wäre einfach Rück undefined-- die 376 00:19:54,090 --> 00:19:58,250 ist eine Sache, dass Javascript zu tun, die Vorteile haben kann, 377 00:19:58,250 --> 00:20:03,190 aber es ist also-- wenn Sie einen Tippfehler machen, es kann in seltsamen Fehlern führen. 378 00:20:03,190 --> 00:20:05,617 So dass es dann nur versuchen, zu finden was auch immer Sie sagen, es zu finden, 379 00:20:05,617 --> 00:20:07,700 und es ist nicht zu gehen beschweren, wenn es nicht findet. 380 00:20:07,700 --> 00:20:11,390 Es will nur sagen, ich habe nicht zu finden, und dann weiterziehen. 381 00:20:11,390 --> 00:20:17,581 Es wäre also nicht definiert werden, zzgl blank plus Nachname. 382 00:20:17,581 --> 00:20:18,080 Ja. 383 00:20:18,080 --> 00:20:21,070 Und dann werden wir sehen, dass, wenn wir könnte dann nach unten gehen und access-- 384 00:20:21,070 --> 00:20:25,450 und wir nennen tf.print () in Klammern. 385 00:20:25,450 --> 00:20:30,000 Es wird, dass die Druck nennen Funktion ohne Argumente, nicht wahr? 386 00:20:30,000 --> 00:20:34,490 Aber wenn wir gerade gesagt tf.print () Semikolon, ohne den Klammern, 387 00:20:34,490 --> 00:20:37,480 all das getan hätte, ist zu ziehen die Funktion aus dem Wert, 388 00:20:37,480 --> 00:20:40,609 aber nicht tatsächlich nannte. 389 00:20:40,609 --> 00:20:41,162 Cool. 390 00:20:41,162 --> 00:20:42,870 HUGH ZABRISKIE: Soll wir ein Objekt zu machen? 391 00:20:42,870 --> 00:20:44,161 SAM GREEN: Sicher, wir tun. 392 00:20:44,161 --> 00:20:48,750 So kann ich diese verschieben Beispiel an die Konsole. 393 00:20:48,750 --> 00:20:51,380 394 00:20:51,380 --> 00:20:55,466 Wir können uns vorstellen, dass ich ein Objekt. 395 00:20:55,466 --> 00:21:03,026 396 00:21:03,026 --> 00:21:04,150 So ist dies eine einfache Aufgabe. 397 00:21:04,150 --> 00:21:06,910 398 00:21:06,910 --> 00:21:11,050 Dies ist eine Aufgabe, die zwei enthält, Werte mit zwei Schlüsseln, zwei Schlüsselwert 399 00:21:11,050 --> 00:21:12,710 Paaren. 400 00:21:12,710 --> 00:21:21,850 So kann ich dann auf den gespeicherten Wert innerhalb dieses Objekts, indem Sie x.x1, 401 00:21:21,850 --> 00:21:23,400 zum Beispiel, und ich 1 zurück. 402 00:21:23,400 --> 00:21:29,590 Ebenso x.x2, erhalten diesen Wert zurück. 403 00:21:29,590 --> 00:21:33,330 >> Und jetzt die wirklich coole Sache ist, ich kann tatsächlich etwas zu diesem Objekt hinzufügen 404 00:21:33,330 --> 00:21:34,316 nachdem ich sie erstellt. 405 00:21:34,316 --> 00:21:36,315 So können Sie sich vorstellen, lassen Sie uns sagen, ich habe eine Funktion. 406 00:21:36,315 --> 00:21:44,430 407 00:21:44,430 --> 00:21:46,352 >> HUGH ZABRISKIE: Sie zu tun haben, Umschalt-Eingabe. 408 00:21:46,352 --> 00:21:47,643 >> SAM GREEN: Oh, das ist ärgerlich. 409 00:21:47,643 --> 00:22:02,460 410 00:22:02,460 --> 00:22:04,324 Was hat es nicht gefallen hat? 411 00:22:04,324 --> 00:22:04,824 Oh. 412 00:22:04,824 --> 00:22:07,532 413 00:22:07,532 --> 00:22:08,691 Auf geht's. 414 00:22:08,691 --> 00:22:09,190 Cool. 415 00:22:09,190 --> 00:22:12,840 >> Also habe ich einfach erstellt haben Diese Funktion, f, dass 416 00:22:12,840 --> 00:22:17,590 wird sich auf die aktuelle gehen Objekt und Druck this.x1. 417 00:22:17,590 --> 00:22:20,330 Also, wenn ich nenne nur f durch selbst, nichts los ist 418 00:22:20,330 --> 00:22:26,970 zu passieren, oder, weil es keine x1 Feld in dem Objekt handelt es sich bezieht. 419 00:22:26,970 --> 00:22:39,710 Aber, wenn ich sage, x.f = f, und dann habe ich rufen x.f (), werde ich wieder 1 zu bekommen. 420 00:22:39,710 --> 00:22:42,990 421 00:22:42,990 --> 00:22:46,530 Das f-Funktion ist jetzt mit dem Objekt x zugeordnet ist, 422 00:22:46,530 --> 00:22:51,800 welche einen Schlüssel namens x1 hat mit dem Wert 1 zugeordnet, 423 00:22:51,800 --> 00:22:54,570 so, wenn wir rufen this.x1, ist es herausfinden, was es für die Suche 424 00:22:54,570 --> 00:22:56,450 und in der Lage sein, um einen Wert zu drucken. 425 00:22:56,450 --> 00:22:58,700 Also das ist nur ein Beispiel der Art der verrückte Dinge 426 00:22:58,700 --> 00:23:01,190 Sie mit Objekten in JavaScript zu tun. 427 00:23:01,190 --> 00:23:03,870 428 00:23:03,870 --> 00:23:07,560 >> So dass Version war die generische Version, was bedeutet, 429 00:23:07,560 --> 00:23:13,780 dass wir ein Objekt mit diesem erstellt Klammern notation-- Klammer-Notation, 430 00:23:13,780 --> 00:23:16,880 rather-- und das ist, praktisch, wenn wir wollen einfach nur 431 00:23:16,880 --> 00:23:21,440 eine Instanz eines bestimmten Objekts, aber was ist, wenn wir wollen, um mehr als eine haben 432 00:23:21,440 --> 00:23:22,210 von derselben Art? 433 00:23:22,210 --> 00:23:24,440 Und die Antwort darauf Frage ist, gibt es Dinge, 434 00:23:24,440 --> 00:23:26,760 genannt Klassen in JavaScript als auch. 435 00:23:26,760 --> 00:23:31,470 436 00:23:31,470 --> 00:23:36,420 Wir können eine Funktion erstellen, die hat eine Art der Initialisierung 437 00:23:36,420 --> 00:23:41,690 für einen Fremdkörper, und wir würden sagen, wie, 438 00:23:41,690 --> 00:23:44,550 meine class-- so dem Namen der wiederverwendbaren object-- 439 00:23:44,550 --> 00:23:47,100 gleich-Funktion, die es baut. 440 00:23:47,100 --> 00:23:52,280 Also, was wäre gleich um sich ein Objekt zu schaffen, dass 441 00:23:52,280 --> 00:23:55,930 würde einfach gerne, geschweifte Klammer, str, Dickdarm, 442 00:23:55,930 --> 00:23:59,630 Dies ist eine Zeichenfolge, Semikolon, geschweifte Klammer. 443 00:23:59,630 --> 00:24:01,880 Das wäre die generisch sein Objekt, das wir zu initialisieren, 444 00:24:01,880 --> 00:24:06,380 mit dem einzigen Unterschied, auf die nächsten Zeilen erstellen wir einen Prototyp, der 445 00:24:06,380 --> 00:24:11,190 bedeutet, es ist ein Standard-Schlüssel, wir unser Objekt hinzufügen, dass 446 00:24:11,190 --> 00:24:13,970 hat die hier aufgeführten Wert. 447 00:24:13,970 --> 00:24:20,570 Was bedeutet, dass, wenn ich ein neues Instanz dieser MyClass-Objekt, 448 00:24:20,570 --> 00:24:27,440 es wird innerhalb von vorgefertigten haben es ist ein Wert namens str und einen anderen Wert 449 00:24:27,440 --> 00:24:32,418 genannt MyPrint, das ist wird eine Funktion sein. 450 00:24:32,418 --> 00:24:32,918 Fantastisch. 451 00:24:32,918 --> 00:24:37,410 452 00:24:37,410 --> 00:24:37,990 >> Groß. 453 00:24:37,990 --> 00:24:40,710 Also das letzte, was auf sagen zu JavaScript 454 00:24:40,710 --> 00:24:46,430 ist, dass es wirklich nützlich für das, was sind asynchrone Operationen bezeichnet. 455 00:24:46,430 --> 00:24:52,500 Asynchron bedeutet, dass wir kann für einige Betrieb warten 456 00:24:52,500 --> 00:24:57,870 abgeschlossen ist, bevor wir uns bewegen auf, sondern bewegen sich auf, während wir warten 457 00:24:57,870 --> 00:24:59,690 und dann muss etwas passieren später. 458 00:24:59,690 --> 00:25:03,480 Und was ich damit meine ist, können Sie kann eine Situation vorstellen, 459 00:25:03,480 --> 00:25:06,850 Sie eine Anfrage zu senden einige Web-Server irgendwo, 460 00:25:06,850 --> 00:25:09,670 und es wird an Sie zurückschicken einige großes Stück von Daten, nicht wahr? 461 00:25:09,670 --> 00:25:13,320 Und Ihre Benutzer konnte in der warten Inzwischen damit das geschehen kann, 462 00:25:13,320 --> 00:25:15,200 und nichts könnte geht zu dieser Zeit. 463 00:25:15,200 --> 00:25:18,110 Aber das ist nicht ein großer Entwurf, nicht wahr? 464 00:25:18,110 --> 00:25:20,214 Sie wollen nicht die Web-Seite zu frieren. 465 00:25:20,214 --> 00:25:22,380 Was, wenn der Benutzer möchte klicken Sie auf ein Dropdown-Menü? 466 00:25:22,380 --> 00:25:24,870 Es ist nicht eine große Design-Muster. 467 00:25:24,870 --> 00:25:29,290 Stattdessen im Grunde, was JavaScript muss ist, sagt, 468 00:25:29,290 --> 00:25:31,870 OK, machen diesen Vorgang asynchron. 469 00:25:31,870 --> 00:25:36,520 So wie, warten in den Hintergrund, und dann, wenn die Operation durchgeführt wird, 470 00:25:36,520 --> 00:25:39,420 rufen Sie die Callback-function-- rufen Sie eine Funktion, 471 00:25:39,420 --> 00:25:43,800 Tun Sie etwas Action--, um zu signalisieren, dass die Betrieb suchten wir bis zum Ende warten 472 00:25:43,800 --> 00:25:45,520 ist vorbei. 473 00:25:45,520 --> 00:25:51,240 Und der Grund dafür, dass super leistungsfähiges ist, können wir etwas tun, übergeben ein Argument, 474 00:25:51,240 --> 00:25:54,440 etwas zu tun, und dann warten dass etwas passiert. 475 00:25:54,440 --> 00:25:58,970 Dann, wenn dieser etwas abgeschlossen ist, können wir einen Rückruf anzurufen. 476 00:25:58,970 --> 00:26:03,300 Das ist wirklich praktisch, denn sie ermöglicht es uns Dinge tun, mit Web Audio API, 477 00:26:03,300 --> 00:26:07,490 zum Beispiel, wie ein Last Audio-Datei von einem Remote-Server 478 00:26:07,490 --> 00:26:11,660 ohne auf die warten, gesamte Audiodatei geladen werden soll, 479 00:26:11,660 --> 00:26:14,440 das ist wirklich wäre schlecht für die Benutzerfreundlichkeit. 480 00:26:14,440 --> 00:26:17,080 Cool. 481 00:26:17,080 --> 00:26:19,460 >> Letzten paar Notizen über Debugging, da dies 482 00:26:19,460 --> 00:26:23,682 ist eine Sache, die Sie tun, um haben werden als Teil des Projekts gewährleistet. 483 00:26:23,682 --> 00:26:25,140 Ich erwähnte die JavaScript-Konsole. 484 00:26:25,140 --> 00:26:27,550 Es ist ein super nützliche Funktion von allen modernen Browsern, 485 00:26:27,550 --> 00:26:30,300 Und wir empfehlen Ihnen, zu erhalten komfortabel mit Ihrer Konsole, 486 00:26:30,300 --> 00:26:33,660 wenn Sie wollen, zumin JavaScript gut zu bekommen. 487 00:26:33,660 --> 00:26:36,320 Es ist super praktisch für Debugging, aber es ist auch 488 00:26:36,320 --> 00:26:39,440 wirklich nützlich für Bezifferung herauszufinden, wie man eine API zu verwenden. 489 00:26:39,440 --> 00:26:41,950 Es ermöglicht die wirklich einfache Experimente 490 00:26:41,950 --> 00:26:45,910 ohne irgendeine Art Code, und kompilieren Sie es. 491 00:26:45,910 --> 00:26:47,500 Sie müssen nicht, all diese Schritte zu tun. 492 00:26:47,500 --> 00:26:49,619 Sie können einfach schreiben einige Code in einer Linie, 493 00:26:49,619 --> 00:26:52,410 und dann bekommen unmittelbares Feedback auf ob diese Codezeile oder nicht 494 00:26:52,410 --> 00:26:55,230 worked-- sehr handlich. 495 00:26:55,230 --> 00:26:59,760 >> Und auch, nur eine technische HINWEIS-- die JavaScript-Konsole ist ein Beispiel, 496 00:26:59,760 --> 00:27:05,680 eines REPL-- also ist das R-E-P-L, REPL, was für Lese steht, zu bewerten, 497 00:27:05,680 --> 00:27:06,180 Druckschleife. 498 00:27:06,180 --> 00:27:09,100 499 00:27:09,100 --> 00:27:12,120 Du wirst einige Sachen geben in, es wird gelesen, was Sie eingetippt, 500 00:27:12,120 --> 00:27:17,280 es wird sie zu bewerten, und es wird der Print Ausgang, und dann werde es wieder zu starten. 501 00:27:17,280 --> 00:27:22,056 Das ermöglicht es Ihnen, schnell zu gehen in Kreisen laufen, was wirklich cool ist. 502 00:27:22,056 --> 00:27:25,150 503 00:27:25,150 --> 00:27:28,930 >> Ich denke, Echt letzten HINWEIS-- diese ist die tatsächliche letzte Note, ja. 504 00:27:28,930 --> 00:27:30,780 Wie können wir tatsächlich nutzen JavaScript? 505 00:27:30,780 --> 00:27:34,040 So zuerst, wir importieren können es mit einem Skript-Tag 506 00:27:34,040 --> 00:27:39,500 an der Oberseite oder Unterseite eines HTML file-- überall innerhalb einer HTML-Datei, 507 00:27:39,500 --> 00:27:40,440 wirklich. 508 00:27:40,440 --> 00:27:47,390 Und in einem Skript-Tag, gibt es zwei Unterweisen Importieren JavaScript. 509 00:27:47,390 --> 00:27:51,370 Die erste ist, indem er eine getrennte JavaScript-Datei 510 00:27:51,370 --> 00:27:58,010 dass wir importieren in seiner Gesamtheit oder indem mit einer Fläche von Code wie script 511 00:27:58,010 --> 00:28:00,290 um zu starten, und dann Backslash-Skript, um zu beenden. 512 00:28:00,290 --> 00:28:02,620 Und dann haben wir nur schreiben JavaScript innerhalb der HTML-Datei. 513 00:28:02,620 --> 00:28:03,790 Das sind die zwei Arten. 514 00:28:03,790 --> 00:28:05,165 Sie können es nicht haben innerhalb von HTML. 515 00:28:05,165 --> 00:28:06,502 516 00:28:06,502 --> 00:28:08,126 Publikum: Ist einer besser als der andere? 517 00:28:08,126 --> 00:28:10,542 SAM GREEN: Die Frage war, ist besser als das andere. 518 00:28:10,542 --> 00:28:18,306 Also, ja, als eine Art der Programmierung der Praxis und es ist wie ein Designpraxis. 519 00:28:18,306 --> 00:28:20,180 Es gibt zwei Gründe Deshalb könnte es besser sein. 520 00:28:20,180 --> 00:28:23,934 Die erste ist, es macht Ihren Code ein viel besser lesbar, wenn alle Ihre HTML 521 00:28:23,934 --> 00:28:27,100 ist an einem Ort, alle Ihre CSS ist in ein weiterer Ort, alle Ihre JavaScript 522 00:28:27,100 --> 00:28:28,420 in einem dritten Platz. 523 00:28:28,420 --> 00:28:28,920 Recht? 524 00:28:28,920 --> 00:28:32,370 Ich denke, wir sollten bereits gesprochen haben darüber in sections-- wie CSS-- was 525 00:28:32,370 --> 00:28:35,220 daß ist-- und es versteht oft in einer anderen Datei. 526 00:28:35,220 --> 00:28:37,090 Also, ähnliche Art von Konzept hier. 527 00:28:37,090 --> 00:28:42,410 Sie können sich vorstellen, dass JavaScript würde auf mehr als einer wiederverwendet werden 528 00:28:42,410 --> 00:28:47,350 HTML-Seite, oder vielleicht ein Sehr viele HTML-Seiten, 529 00:28:47,350 --> 00:28:49,340 und mit, dass JavaScript zu einem Refactoring 530 00:28:49,340 --> 00:28:51,950 Datei, die Sie importieren können in mehr als einem Ort 531 00:28:51,950 --> 00:28:54,570 kann der Code sein Weise besser wartbar. 532 00:28:54,570 --> 00:28:57,930 Sie können sich vorstellen, dass man zu ändern, um die JavaScript- 533 00:28:57,930 --> 00:29:00,070 und mit, es zu ändern in 100 verschiedenen Dateien. 534 00:29:00,070 --> 00:29:04,070 Und statt dessen können wir nur ändern in eine, die viel mächtiger ist. 535 00:29:04,070 --> 00:29:05,420 Habe ich Ihre Frage beantwortet? 536 00:29:05,420 --> 00:29:07,950 Cool. 537 00:29:07,950 --> 00:29:10,830 >> Wir können auch in die Konsole eingeben, Wie wir bereits erwähnt. 538 00:29:10,830 --> 00:29:15,070 Und wieder eine letzte HINWEIS-- Web Audio ist eingebaut, 539 00:29:15,070 --> 00:29:16,978 brauchen Sie nicht, etwas zu laden. 540 00:29:16,978 --> 00:29:17,478 Cool. 541 00:29:17,478 --> 00:29:20,519 Gibt es irgendwelche Fragen, haben Sie mehr Fragen über JavaScript, 542 00:29:20,519 --> 00:29:21,930 bevor wir weitermachen? 543 00:29:21,930 --> 00:29:24,286 >> ZIELGRUPPE: [unverständlich] 544 00:29:24,286 --> 00:29:25,410 SAM GREEN: Okay, cool. 545 00:29:25,410 --> 00:29:27,200 So, jetzt, er wird über die API zu sprechen. 546 00:29:27,200 --> 00:29:28,490 >> HUGH ZABRISKIE: Kühle. 547 00:29:28,490 --> 00:29:28,990 Danke, Sam. 548 00:29:28,990 --> 00:29:30,184 >> SAM GREEN: Sicher. 549 00:29:30,184 --> 00:29:32,600 HUGH ZABRISKIE: Awesome, so wir werden auf von JavaScript zu bewegen. 550 00:29:32,600 --> 00:29:35,350 So dass wir über einige gesprochen das Wesentliche JavaScript, 551 00:29:35,350 --> 00:29:41,105 und das sind die Variablen, Funktionen, Objekte, Funktionen als Variablen, 552 00:29:41,105 --> 00:29:41,980 asynchroner Belastung. 553 00:29:41,980 --> 00:29:46,100 Das sind alles Dinge, die Sie zu sehen, wie Sie den Web Audio zu verwenden. 554 00:29:46,100 --> 00:29:49,230 Also sind wir gerade dabei, zu sprechen darüber zunächst auf einem hohen Niveau. 555 00:29:49,230 --> 00:29:52,120 >> Es ist eine API, so dass es etwas ist, das ist gebaut, als Sam sagte: 556 00:29:52,120 --> 00:29:57,010 rechts in die JavaScript- dass Sie in der Konsole. 557 00:29:57,010 --> 00:30:01,020 Und es ist eigentlich genau wie C ++ Code Das ist wirklich in Chrome eingebaut 558 00:30:01,020 --> 00:30:04,470 und Firefox, und alle diese Browser. 559 00:30:04,470 --> 00:30:07,060 So der Hauptidee mit Web Audio ist, dass man 560 00:30:07,060 --> 00:30:09,440 diese Art von Rohrleitung der Audio, nicht wahr? 561 00:30:09,440 --> 00:30:13,670 So Ihre Audiodaten kommt in irgendeiner Form. 562 00:30:13,670 --> 00:30:16,690 >> Es gibt Art drei Haupt forms-- Sie den Oszillator, haben die 563 00:30:16,690 --> 00:30:21,340 erzeugt eine Sinuswelle, Kosinuswelle, wir werden sehen, wie das funktioniert. 564 00:30:21,340 --> 00:30:23,890 Eine weitere sehr häufig eine, Natürlich ist ein MP3. 565 00:30:23,890 --> 00:30:25,810 Also vielleicht haben Sie mit zu beginnen ein Lied, und dann 566 00:30:25,810 --> 00:30:28,320 wollen einige Filterung zu tun zu und Ausgangs 567 00:30:28,320 --> 00:30:30,605 dass-- dass könnte eine mögliche Quelle sein. 568 00:30:30,605 --> 00:30:32,480 Und dann ein wirklich cooles eine ist das Mikrofon. 569 00:30:32,480 --> 00:30:37,230 So dass Sie einige sehr verwenden können Grundgespräche in JavaScript 570 00:30:37,230 --> 00:30:39,440 um den Zugriff auf das zu bekommen Mikrofon, und so, wenn Sie 571 00:30:39,440 --> 00:30:42,870 wollte eine App machen wie eine Tonhöhendetektor, 572 00:30:42,870 --> 00:30:45,290 beispielsweise, dass saugt Ihre Stimme und Figuren aus 573 00:30:45,290 --> 00:30:47,740 die pitch-- sehr einfache Möglichkeit, dass. 574 00:30:47,740 --> 00:30:50,730 Sie können nur irgendwie lesen in, herauszufinden, die Häufigkeit, 575 00:30:50,730 --> 00:30:52,250 erstellen und dann eine Nummer. 576 00:30:52,250 --> 00:30:56,080 So werden wir sehen, wie das funktioniert, wie gut. 577 00:30:56,080 --> 00:30:59,430 >> Das Ziel ist grundsätzlich wobei die Audio-Daten ausgegeben wird. 578 00:30:59,430 --> 00:31:02,890 So im Allgemeinen, das ist, wie Ihren Laptop-Lautsprecher. 579 00:31:02,890 --> 00:31:05,610 Weitere Optionen sind wie a ScriptProcessorNode-- 580 00:31:05,610 --> 00:31:07,990 wir werden, um Knoten in einem erhalten second-- aber im Grunde, 581 00:31:07,990 --> 00:31:11,939 entweder Sie setzen Sound aus über Ihren Computer über die Lautsprecher, 582 00:31:11,939 --> 00:31:14,730 oder du bist Art von der Aufnahme, so Sie es Speichern als Audiodaten. 583 00:31:14,730 --> 00:31:18,980 Vielleicht, wenn jemand schafft Musik in Ihrer App und dann 584 00:31:18,980 --> 00:31:22,410 Sie, dass aufzeichnen und vielleicht wie wollen exportieren, um Soundcloud, für example-- 585 00:31:22,410 --> 00:31:25,281 das wäre ein Weg, um das zu tun. 586 00:31:25,281 --> 00:31:27,030 Der ganze Spaß stuff, was wir darüber zu sprechen, 587 00:31:27,030 --> 00:31:29,950 passiert zwischen diesen beiden Punkten, wo wir laden in der Musik 588 00:31:29,950 --> 00:31:31,410 und dann auszugeben. 589 00:31:31,410 --> 00:31:36,660 >> Also werde ich über die Fünf sprechen Stadien der Audioproduktion in einem zweiten. 590 00:31:36,660 --> 00:31:38,950 Wir haben diese Sache namens ein AudioContext, die 591 00:31:38,950 --> 00:31:41,580 ist dieses kleine wrapper wir hier sehen. 592 00:31:41,580 --> 00:31:49,980 Im Grunde, was AudioContext ist--, wenn wir finden Sie auf der JavaScript-Konsole gerade jetzt, 593 00:31:49,980 --> 00:31:52,740 können wir einen Augenblick zu erstellen. 594 00:31:52,740 --> 00:31:54,040 Nur ein Beispiel von REPL, nicht wahr? 595 00:31:54,040 --> 00:31:57,880 Wir lesen, Bewertung und er druckt. 596 00:31:57,880 --> 00:32:00,260 >> AudioContext ist ein globaler Staat. 597 00:32:00,260 --> 00:32:05,500 Es ist eine Struktur, eine Aufgabe ist es hier Informationen hält und es 598 00:32:05,500 --> 00:32:09,960 über Dinge, die passiert sind, auf dem Bildschirm audio. 599 00:32:09,960 --> 00:32:15,220 Ein Beispiel dafür ist die aktuelle Uhrzeit. 600 00:32:15,220 --> 00:32:18,910 Dies sagt Ihnen, die Anzahl Sekunden, sehr genau, 601 00:32:18,910 --> 00:32:20,890 Da der Web-Seite geladen. 602 00:32:20,890 --> 00:32:24,110 Also das ist ein wirklich nützliches kleine Eigenschaft, die Sie verwenden können. 603 00:32:24,110 --> 00:32:27,898 Es only-- lesen Ich glaube tatsächlich können Sie versuchen, es zu einen Wert einzustellen. 604 00:32:27,898 --> 00:32:29,856 Es wird Ihnen sagen, es setzen, und dann, wenn Sie es drucken 605 00:32:29,856 --> 00:32:31,439 again-- es eigentlich nicht ganz funktioniert. 606 00:32:31,439 --> 00:32:34,472 Es gibt also nur gelesen werden Immobilien in JavaScript. 607 00:32:34,472 --> 00:32:36,430 Das ist wirklich nützlich, wenn Sie Art von Synchronisierung 608 00:32:36,430 --> 00:32:38,610 eine Menge verschiedener Informationen, wenn Sie 609 00:32:38,610 --> 00:32:41,280 Art spielt verschiedene Töne. 610 00:32:41,280 --> 00:32:43,630 >> Eine andere wirklich nützlich ein ist der Kontext Ziel. 611 00:32:43,630 --> 00:32:46,587 612 00:32:46,587 --> 00:32:49,670 Auf jeden Fall, wenn Sie interessiert sind, werden versuchen dies auf eigene Konsole rechts 613 00:32:49,670 --> 00:32:50,980 jetzt. 614 00:32:50,980 --> 00:32:53,150 Das ist also ein AudioDestinationNode. 615 00:32:53,150 --> 00:32:56,480 Im Grunde, was dieser sagt, ist, wo ist der Ausgang geht? 616 00:32:56,480 --> 00:32:59,590 So gibt es zwei echte Optionen bitte hier. 617 00:32:59,590 --> 00:33:01,940 Normalerweise ist die Standard- ist nur die Lautsprecher, 618 00:33:01,940 --> 00:33:05,150 so AudioDestinationNode im Grunde nur, sagt 619 00:33:05,150 --> 00:33:09,240 Es sind keine Ausgänge an die Sound herein, an den Lautsprecher gesendet wird. 620 00:33:09,240 --> 00:33:12,050 So im Allgemeinen, Sie dies nicht tun müssen damit zu spielen. 621 00:33:12,050 --> 00:33:15,720 Wenn Sie Interesse an tatsächlich nutzen können die ScriptProcessorNode zur Aufzeichnung, 622 00:33:15,720 --> 00:33:16,990 mir eine definitiv schießen E-Mail später, weil das ist, 623 00:33:16,990 --> 00:33:18,330 ein wenig komplizierter. 624 00:33:18,330 --> 00:33:21,590 Aber in der Regel, nur irgendwie bist du zum Ausgeben von Ton in irgendeiner Form. 625 00:33:21,590 --> 00:33:24,347 So cool, wir kommen wieder hier zu springen. 626 00:33:24,347 --> 00:33:25,180 Publikum: Es tut mir leid. 627 00:33:25,180 --> 00:33:26,054 HUGH ZABRISKIE: Ja. 628 00:33:26,054 --> 00:33:28,770 Publikum: Ich weiß, Sie sagten zu sprechen um es später über die Aufnahme. 629 00:33:28,770 --> 00:33:31,550 Können Sie Schnittstelle, die mit Pro Tools? 630 00:33:31,550 --> 00:33:33,120 >> HUGH ZABRISKIE: Mit Pro Tools? 631 00:33:33,120 --> 00:33:35,260 Mal schauen. 632 00:33:35,260 --> 00:33:37,220 Ich glaube nicht. 633 00:33:37,220 --> 00:33:41,670 So geht zwischen dem Kunden, das ist die JavaScript- 634 00:33:41,670 --> 00:33:44,310 Konsole und Ihrem tatsächlichen Computer ist in der Regel 635 00:33:44,310 --> 00:33:46,490 etwas, das Art ist der weg von den Begrenzungen, wenn Sie 636 00:33:46,490 --> 00:33:52,320 will, freundlich durch die Natur der the-- es ist eine Art Design-Sache, 637 00:33:52,320 --> 00:33:57,770 aber Sie versuchen, den Browser getrennt zu halten vom eigentlichen Computer des Benutzers. 638 00:33:57,770 --> 00:34:02,310 Im allgemeinen ist die einzige Sache, die Sie in der Lage, Zugang ist das Mikrofon oder die Kamera. 639 00:34:02,310 --> 00:34:04,730 Sie sind nicht in der Lage, I glaube nicht, verwenden Sie Pro Tools. 640 00:34:04,730 --> 00:34:07,480 Allerdings, wenn Sie erstellt ein Track in Pro Tools, 641 00:34:07,480 --> 00:34:12,710 exportiert, dass, könnten Sie, dass zu laden hier, zu filtern, zum Beispiel, 642 00:34:12,710 --> 00:34:16,820 Prozess, und notieren Sie die in eine Audio Destination-- oder NO- einer Kugel 643 00:34:16,820 --> 00:34:17,870 Prozessorknoten. 644 00:34:17,870 --> 00:34:20,730 Und dann von dort, könnten Sie exportieren, dass auf Soundcloud, die Sie 645 00:34:20,730 --> 00:34:25,320 könnte es in einer E-Mail zu schicken, oder was Sie wollen von dort aus. 646 00:34:25,320 --> 00:34:31,159 >> Aber es ist ein bisschen eine leichte Barriere zwischen Musik auf Ihrem Computer 647 00:34:31,159 --> 00:34:33,050 und Musizieren online. 648 00:34:33,050 --> 00:34:37,940 >> Sam Green: Und das ist, nicht eindeutig zu dieser API. 649 00:34:37,940 --> 00:34:44,060 Es ist ein Sicherheits-Feature von Chrome, und Ich denke, dass jedes andere moderne Browser. 650 00:34:44,060 --> 00:34:45,860 Der Browser ist in sich geschlossen. 651 00:34:45,860 --> 00:34:50,980 So kann beispielsweise eine Web-Seite nicht verwenden JavaScript, um die Klang schalten 652 00:34:50,980 --> 00:34:54,190 Auf der Lautsprecher, zum Beispiel. 653 00:34:54,190 --> 00:34:58,120 Oder es nicht einschalten können Sie Ihren Computer aus. 654 00:34:58,120 --> 00:35:01,530 Und es gibt keine Zwischenpunkt zwischen diesen beiden Dingen, rechts, 655 00:35:01,530 --> 00:35:05,960 also entweder Sie eine komplette Abstraktion, 656 00:35:05,960 --> 00:35:10,050 oder Sie öffnen die Sicherheitslücke der Vermietung 657 00:35:10,050 --> 00:35:14,440 ein Programmierer mit schlechten Absichten zu tun was sie wollen mit Ihrem Laptop. 658 00:35:14,440 --> 00:35:18,104 Und deshalb Chrome ist in sich abgeschlossen. 659 00:35:18,104 --> 00:35:19,310 >> HUGH ZABRISKIE: Ja. 660 00:35:19,310 --> 00:35:20,840 Ist das sinnvoll? 661 00:35:20,840 --> 00:35:21,369 Cool Cool. 662 00:35:21,369 --> 00:35:23,160 Ich war gerade dabei, zeigen ein Beispiel von einem. 663 00:35:23,160 --> 00:35:25,118 Das ist so ziemlich wie Soweit Sie erhalten, in Bezug auf 664 00:35:25,118 --> 00:35:26,950 des Zugreifens auf den Computer des Benutzers. 665 00:35:26,950 --> 00:35:30,180 Wenn Sie eine USB-Tastatur angeschlossen, können Sie etwas verwenden sogenannte Web 666 00:35:30,180 --> 00:35:32,180 MIDI-API, die wir nicht wirklich hier sprechen, 667 00:35:32,180 --> 00:35:36,330 aber dies ist eine andere API, die ist wieder in mindestens Chrome-- gebaut, 668 00:35:36,330 --> 00:35:41,570 das ist, warum wir lieben Chrome-- Ich denke, Firefox oder Safari, 669 00:35:41,570 --> 00:35:44,300 Das ist eine einfache Sache zu google-- verschiedenen Browsern 670 00:35:44,300 --> 00:35:46,917 unterschiedliche Unterstützung für die APIs sie implementiert. 671 00:35:46,917 --> 00:35:49,875 Aber wenn Sie wollte in einem Tastaturstecker und arbeiten mit diesen Informationen, 672 00:35:49,875 --> 00:35:52,850 Art der Nachricht auf der Tastatur Informationen über den Computer 673 00:35:52,850 --> 00:35:57,620 und verwenden Sie dann das online, diese API ist, wo Sie sein möchten arbeiten, dass. 674 00:35:57,620 --> 00:35:58,150 >> Cool. 675 00:35:58,150 --> 00:35:58,710 OK. 676 00:35:58,710 --> 00:36:01,320 Also, schnell bewegten hier. 677 00:36:01,320 --> 00:36:03,310 Wie sollen wir tun auf Zeit? 678 00:36:03,310 --> 00:36:04,210 >> Sprecher 1: Über 15. 679 00:36:04,210 --> 00:36:05,543 >> HUGH ZABRISKIE: 15 Minuten übrig? 680 00:36:05,543 --> 00:36:06,160 OK COOL. 681 00:36:06,160 --> 00:36:08,170 Also werden wir weiter hier zu fahren. 682 00:36:08,170 --> 00:36:13,500 >> Also im Grunde, der wichtigste Punkt der denken dies als eine Pipeline 683 00:36:13,500 --> 00:36:16,430 ist, dass jede Stufe in der Pipeline ist eine Reihe von Audio-Knoten. 684 00:36:16,430 --> 00:36:19,284 685 00:36:19,284 --> 00:36:20,950 Unsere Quelle, sagen wir, ist ein Oszillator. 686 00:36:20,950 --> 00:36:23,380 Wir müssen einen Oszillator Knoten erstellen. 687 00:36:23,380 --> 00:36:25,690 Und das ist nur eine Art des kleinen function-- 688 00:36:25,690 --> 00:36:30,460 und sie sind alle aus der Basis der Audio-Rahmen hier. 689 00:36:30,460 --> 00:36:32,885 >> Publikum: Wenn gesagt Oszillator, bedeutet das, 690 00:36:32,885 --> 00:36:37,250 es ist tatsächlich buchstäblich gehen von zwei verschiedene Pole hin und her? 691 00:36:37,250 --> 00:36:41,170 >> HUGH ZABRISKIE: Nein, es ist wie eine digitale Darstellung. 692 00:36:41,170 --> 00:36:42,740 Es ist eigentlich in C ++ implementiert. 693 00:36:42,740 --> 00:36:46,460 Ich eigentlich nicht wissen, die Spezifikationen der, wie es tatsächlich umgesetzt, 694 00:36:46,460 --> 00:36:48,500 aber all dies wird als Binär-Daten arbeiten. 695 00:36:48,500 --> 00:36:51,260 696 00:36:51,260 --> 00:36:52,370 Eigentlich ja. 697 00:36:52,370 --> 00:36:53,950 Das würde sagen, ich konnte tatsächlich, wenn Sie interessiert sind, 698 00:36:53,950 --> 00:36:56,533 Ich könnte Ihnen ein wenig mehr senden Informationen dazu, wie Wellenformen 699 00:36:56,533 --> 00:37:00,181 gehalten werden mit einem digitalen Format. 700 00:37:00,181 --> 00:37:00,680 OK COOL. 701 00:37:00,680 --> 00:37:03,120 >> So dass wir erzeugen einen Ton wie eine Sinus Welle oder so ähnlich, vielleicht 702 00:37:03,120 --> 00:37:04,190 440 Hertz. 703 00:37:04,190 --> 00:37:05,830 Wir schaffen einen Oszillator. 704 00:37:05,830 --> 00:37:09,180 Wenn wir, die Lautstärke einstellen möchten, wir verbinden alles zu einer GainNode, 705 00:37:09,180 --> 00:37:12,500 die wir mit .creategain tun konnte. 706 00:37:12,500 --> 00:37:14,250 Das setzt Ihr Volumen. 707 00:37:14,250 --> 00:37:17,820 Sie können, dass auf jede übergeben des anderen Optionen- gut, 708 00:37:17,820 --> 00:37:20,300 so einen Audiopuffer Quelle Knoten, wo Sie 709 00:37:20,300 --> 00:37:23,660 speichern Sie eine MP3, die Sie in geladen haben. 710 00:37:23,660 --> 00:37:27,670 >> Biquad-Filter für die Filterung, wenn Dank an alle die Basis herausnehmen wollen, 711 00:37:27,670 --> 00:37:29,630 eines Liedes, oder so ähnlich. 712 00:37:29,630 --> 00:37:32,450 Gott bewahre, Sie nehmen wollen die Basis aus einem Lied. 713 00:37:32,450 --> 00:37:36,980 Und AudioDestination Knoten wieder wie, wo unsere Finalisierung ist. 714 00:37:36,980 --> 00:37:39,980 Wenn Sie überhaupt daran interessiert zu sehen sind all die verschiedenen Möglichkeiten, 715 00:37:39,980 --> 00:37:45,190 einfach auf den Reiter gehen und lassen die auto-complete kommen. 716 00:37:45,190 --> 00:37:48,690 Und wenn Sie zu erstellen, werden Sie alle sehen verschiedene Dinge, die Sie erstellen können. 717 00:37:48,690 --> 00:37:50,398 Sie können dynamische erstellen Skript-Prozessoren, 718 00:37:50,398 --> 00:37:52,940 Ich weiß nicht einmal, was das ist, zum Mischen von Kanal-Fusionen 719 00:37:52,940 --> 00:37:55,930 und Kanalteiler und das alles. 720 00:37:55,930 --> 00:37:56,430 Cool. 721 00:37:56,430 --> 00:37:59,560 722 00:37:59,560 --> 00:38:01,390 >> Also das ist nur ein Beispiel einer Pipeline. 723 00:38:01,390 --> 00:38:03,580 So haben wir drei Quellen kommen in. 724 00:38:03,580 --> 00:38:06,830 Vielleicht sind Wellenformen, Vielleicht sind MP3s. 725 00:38:06,830 --> 00:38:08,740 One über ein gehen Filter, ist noch einer 726 00:38:08,740 --> 00:38:12,404 immer verzerrt weiteres jemandes Panning links und rechts. 727 00:38:12,404 --> 00:38:15,320 Sie können alle möglichen Dinge zu tun und sie alle umgehen miteinander vermischt werden, 728 00:38:15,320 --> 00:38:18,880 und dann kommt die Audio- am Ende, als Ziel. 729 00:38:18,880 --> 00:38:22,720 Dies ist ein Beispiel dafür, was mehr komplizierte Web Audio Code aussieht. 730 00:38:22,720 --> 00:38:26,720 Sie erstellen alle diese verschiedene Objekte rechten hier-- 731 00:38:26,720 --> 00:38:27,706 Ich bin mir nicht sicher. 732 00:38:27,706 --> 00:38:29,120 Nein, ist es nicht zoomen. 733 00:38:29,120 --> 00:38:29,620 OK. 734 00:38:29,620 --> 00:38:31,257 >> Sam Green: Sie tun, Kontrolle, Scroll-Up. 735 00:38:31,257 --> 00:38:32,590 HUGH ZABRISKIE: Steuer Scroll-- 736 00:38:32,590 --> 00:38:33,000 SAM GREEN: Nein, nein. 737 00:38:33,000 --> 00:38:33,500 Steuern-- 738 00:38:33,500 --> 00:38:36,540 739 00:38:36,540 --> 00:38:38,140 >> HUGH ZABRISKIE: Oh, Kontrolle, Blättern? 740 00:38:38,140 --> 00:38:38,780 Oh, gotcha. 741 00:38:38,780 --> 00:38:41,480 Ja. 742 00:38:41,480 --> 00:38:42,240 Wow, nee, nee. 743 00:38:42,240 --> 00:38:42,740 OK. 744 00:38:42,740 --> 00:38:46,090 Das werde ich nicht tun. 745 00:38:46,090 --> 00:38:48,300 >> Also ja, in dieser ersten Abschnitt hier, sehen Sie, 746 00:38:48,300 --> 00:38:52,720 schaffen wir all diese verschiedenen Knoten aus dem Kontext. 747 00:38:52,720 --> 00:38:54,980 Wir sind nur Setzen ihnen zusammen in dem zweiten Teil 748 00:38:54,980 --> 00:38:56,980 durch diese Funktion aufgerufen Connect. 749 00:38:56,980 --> 00:38:58,830 Das ist eine wirklich Schlüssel Funktion in Web Audio. 750 00:38:58,830 --> 00:39:01,930 Es bedeutet nur, wenn du getan hast etwas mit dem Sound in einem Knoten, 751 00:39:01,930 --> 00:39:03,705 geben sie nicht an den nächsten Knoten. 752 00:39:03,705 --> 00:39:05,830 So haben wir die Quelle, es mit dem Analysator verbunden, 753 00:39:05,830 --> 00:39:09,140 der Analysator tut etwas mit ihm, es geht um eine Verzerrung, und so weiter, 754 00:39:09,140 --> 00:39:12,725 und an die Ziel unten rechts hier. 755 00:39:12,725 --> 00:39:13,225 Cool. 756 00:39:13,225 --> 00:39:14,640 OK, so dass wir in Bewegung bleiben auf. 757 00:39:14,640 --> 00:39:17,180 >> Die pipeline-- Auch diese sind die häufigsten Pipelines 758 00:39:17,180 --> 00:39:21,300 so dass wir über all diese Dinge wie sprechen Verzerrung, Panning, all dieses Zeug. 759 00:39:21,300 --> 00:39:24,280 Wenn Sie wirklich daran interessiert sind sich mit Dingen Pro Tools, 760 00:39:24,280 --> 00:39:25,820 die wohl interessieren. 761 00:39:25,820 --> 00:39:27,740 Wenn nicht, vielleicht gerade wollen, um den Ton zu spielen, 762 00:39:27,740 --> 00:39:29,990 oder vielleicht wollen Sie nur zu stellen Sie die Lautstärke auf den Klang. 763 00:39:29,990 --> 00:39:35,270 Das sind die beiden häufigsten sort von Rohrleitungen in Audio-Produktion. 764 00:39:35,270 --> 00:39:38,640 >> Auch hier sind die Möglichkeiten, wie Sie es zu nehmen in als oscillator-- so, lassen Sie uns 765 00:39:38,640 --> 00:39:42,460 Führen Sie eine der Demo, dass genau hier. 766 00:39:42,460 --> 00:39:47,090 767 00:39:47,090 --> 00:39:52,225 So werden wir ein zu erstellen einfache Audio-Kontext hier, 768 00:39:52,225 --> 00:39:54,350 und dass wir gehen, unsere Oszillator zu schaffen. 769 00:39:54,350 --> 00:39:58,620 Das ist also, wieder, nur wir sind gehen zu nennen erstellen Oszillator. 770 00:39:58,620 --> 00:40:07,030 Wir werden eine Frequenz am Set daß, 440 Hertz, und locker. 771 00:40:07,030 --> 00:40:13,290 Dann verbinden wir, dass in den Ziel point-- dem der Sprecher, so 772 00:40:13,290 --> 00:40:15,750 der Kontext Ziel. 773 00:40:15,750 --> 00:40:21,400 Schließlich haben wir nur sagen, beginnen Null Sekunden ab jetzt, und wir haben klingen? 774 00:40:21,400 --> 00:40:22,400 >> [KLINGELN] 775 00:40:22,400 --> 00:40:24,980 >> HUGH ZABRISKIE: Hier gehen wir. 776 00:40:24,980 --> 00:40:25,940 Es ist nur eine Sinuswelle. 777 00:40:25,940 --> 00:40:26,440 OK COOL. 778 00:40:26,440 --> 00:40:28,274 Und dann werden wir damit aufhören. 779 00:40:28,274 --> 00:40:30,520 >> ZIELGRUPPE: Wo haben dass das Feedback aus? 780 00:40:30,520 --> 00:40:31,250 >> HUGH ZABRISKIE: Die Rückmeldungen? 781 00:40:31,250 --> 00:40:32,458 Oh, wahrscheinlich unsere Mikrofone. 782 00:40:32,458 --> 00:40:34,221 783 00:40:34,221 --> 00:40:35,470 Also ja, das ist, wie Sie es tun. 784 00:40:35,470 --> 00:40:37,261 Und tatsächlich, wenn ich hielt es läuft, können Sie 785 00:40:37,261 --> 00:40:39,540 könnte die Frequenz haben Wert wie es läuft, 786 00:40:39,540 --> 00:40:43,320 so ist das eine tolle Sache zu spielen, um. 787 00:40:43,320 --> 00:40:44,930 Cool. 788 00:40:44,930 --> 00:40:46,600 Das ist immer ein schönes einem bis zu präsentieren. 789 00:40:46,600 --> 00:40:48,792 >> Sam Green: Wir haben nicht denken Sie, dass haben wir? 790 00:40:48,792 --> 00:40:50,500 HUGH ZABRISKIE: Ja, das ist eine böse eins. 791 00:40:50,500 --> 00:40:53,249 Also, Puffer loading-- Ich werde ein zeigen Beispiel dafür am Ende. 792 00:40:53,249 --> 00:40:55,090 Das ist das Laden eines MP3. 793 00:40:55,090 --> 00:40:58,880 Und Mikrofon, nur eine Funktion nutzen zu können genannt Navigator.getUserMedia () 794 00:40:58,880 --> 00:41:03,240 um dem Benutzer den Zugriff zu verlangen Mikrofon für diese Informationen. 795 00:41:03,240 --> 00:41:05,610 >> Hier ist das Filtern, werde ich nur in Bewegung bleiben von diesem. 796 00:41:05,610 --> 00:41:08,600 Das ist ziemlich hohem Niveau, aber Filtern können Sie nur 797 00:41:08,600 --> 00:41:16,154 >> [PIEPTON] 798 00:41:16,154 --> 00:41:18,320 Filterung können Sie auch um Dinge wie rosa erstellen 799 00:41:18,320 --> 00:41:20,050 Lärm, braunes Rauschen, weißes Rauschen. 800 00:41:20,050 --> 00:41:24,330 Wenn Sie reines Rauschen, das erstellt werden soll Manche Leute lieben Kampf mit, 801 00:41:24,330 --> 00:41:27,490 können Sie Web Audio verwenden Filterung, das zu tun. 802 00:41:27,490 --> 00:41:30,039 >> Audio Panning-- so vorstellen, wenn Sie schreiben ein Spiel 803 00:41:30,039 --> 00:41:32,330 und Sie den Ton zu wollen klingen wie es kommt, wie, 804 00:41:32,330 --> 00:41:36,090 Schießen über den Bildschirm, die Sie können Sie die Stereoposition des Audio verwenden 805 00:41:36,090 --> 00:41:39,770 diese Art des Konus zu erzeugen, die like-- es ist ziemlich mathy, 806 00:41:39,770 --> 00:41:41,850 aber es ist eigentlich wirklich cool, wenn Sie es funktioniert, 807 00:41:41,850 --> 00:41:44,500 und es gibt einige gute Tutorials darauf kann ich Ihnen schicken. 808 00:41:44,500 --> 00:41:46,400 Grundsätzlich können Sie Art der Sound zu erzeugen 809 00:41:46,400 --> 00:41:50,480 der etwas los, indem in einer 3D-Weg. 810 00:41:50,480 --> 00:41:57,350 Und wenn Sie ein DJ Interesse haben, können Sie Mixen und überqueren Ausbleichen Songs. 811 00:41:57,350 --> 00:42:01,260 >> Dies ist nur einige sehr grundlegende Code, im Grunde, was ich tat, bevor. 812 00:42:01,260 --> 00:42:06,140 Dies stellt das Volumen der Oszillator, so schaffen wir unseren Oszillator 813 00:42:06,140 --> 00:42:07,380 das schafft die Wellenform. 814 00:42:07,380 --> 00:42:09,940 Wir schaffen unsere GainNode, Set unseren Frequenz, 815 00:42:09,940 --> 00:42:14,170 und schließen Sie dann den Oszillator auf die GainNode, die dann im Grunde ändert 816 00:42:14,170 --> 00:42:16,760 wie viel Signal wird durchgelassen. 817 00:42:16,760 --> 00:42:20,467 Aber wirklich, es ist ein Digital- Sache, so ist es mehr just-- ja. 818 00:42:20,467 --> 00:42:23,550 Das ist nicht das, was tatsächlich passiert, aber das ist, was passiert im wirklichen Leben 819 00:42:23,550 --> 00:42:24,393 mit einem Gewinn. 820 00:42:24,393 --> 00:42:27,258 >> ZIELGRUPPE: --quantization der Volumenparameter? 821 00:42:27,258 --> 00:42:28,174 HUGH ZABRISKIE: Es tut uns leid? 822 00:42:28,174 --> 00:42:30,360 Publikum: Ist es ein quantisiert Volumenparameter? 823 00:42:30,360 --> 00:42:31,840 HUGH ZABRISKIE: Ja. 824 00:42:31,840 --> 00:42:34,620 Und das ist eine Sache, ich bin wirklich mangelhaft in meinem Wissen, 825 00:42:34,620 --> 00:42:38,010 wie Gain arbeitet auf digitaler Ebene. 826 00:42:38,010 --> 00:42:40,140 Ich weiß, mit den tatsächlichen Signale, es ist im Grunde 827 00:42:40,140 --> 00:42:45,120 Steuern, wie viel Sie sind Verstärken des Signals. 828 00:42:45,120 --> 00:42:47,017 Also, ja. 829 00:42:47,017 --> 00:42:50,100 Ich werde Sie mehr Informationen zu senden dass, weil ich wirklich gespannt sein, 830 00:42:50,100 --> 00:42:51,099 um mehr über das wissen. 831 00:42:51,099 --> 00:42:54,090 Aber im Grunde die Parameter sind, ist einer der fold-- 832 00:42:54,090 --> 00:42:59,690 desto lauter signal-- und Null keine signalisieren, oder Sie werden keinen Ton hören. 833 00:42:59,690 --> 00:43:03,150 Wir Demo Zeit für diese, weil überspringen es ist im Grunde, was ich tat, bevor. 834 00:43:03,150 --> 00:43:07,630 Und wieder, die Context.Destination ist die Audio Zielknoten. 835 00:43:07,630 --> 00:43:08,360 Awesome, OK. 836 00:43:08,360 --> 00:43:10,470 >> Also werde ich, um eine schnelle zwei Demos zu tun. 837 00:43:10,470 --> 00:43:11,760 Wie sollen wir tun auf Zeit? 838 00:43:11,760 --> 00:43:12,640 >> Sprecher 1: ca. 10 Minuten. 839 00:43:12,640 --> 00:43:13,130 >> HUGH ZABRISKIE: 10 Minuten? 840 00:43:13,130 --> 00:43:13,630 Groß! 841 00:43:13,630 --> 00:43:14,320 Fantastisch. 842 00:43:14,320 --> 00:43:19,010 >> So ist die erste, die ich bin zu gehen weiß, es heißt mein Lieblingslied. 843 00:43:19,010 --> 00:43:22,410 So ist dies nur ein wenig HTML JavaScript. 844 00:43:22,410 --> 00:43:25,510 Wir werden zwei Tasten haben auf der Seite spielen mein Lieblingssong 845 00:43:25,510 --> 00:43:29,192 und verhindern, dass mein Lieblingslied. 846 00:43:29,192 --> 00:43:30,180 Ich werde dies zu ändern. 847 00:43:30,180 --> 00:43:32,110 >> ZIELGRUPPE: Bedecken Sie Ihr Mikrofon. 848 00:43:32,110 --> 00:43:33,430 >> HUGH ZABRISKIE: Ja. 849 00:43:33,430 --> 00:43:36,300 Und ich habe hier geladen ein Skript, das basically-- 850 00:43:36,300 --> 00:43:38,520 und das ist wirklich nützlich, zum Laden eines MP3, 851 00:43:38,520 --> 00:43:41,820 so ist dies nur macht Laden MP3s viel schneller. 852 00:43:41,820 --> 00:43:44,180 Es ist im Grunde nur ein Wrapper. 853 00:43:44,180 --> 00:43:48,737 Es macht den Prozess der Laden in MP3s viel schneller, 854 00:43:48,737 --> 00:43:51,570 sonst Sie verwenden HTTP-Anfrage, eine Art, wie, was wir taten 855 00:43:51,570 --> 00:43:53,950 Auf die aktuelle Stück mit Server gesetzt. 856 00:43:53,950 --> 00:43:55,950 Es ist wirklich hässlich, Sie wollen nicht, es zu tun. 857 00:43:55,950 --> 00:44:04,110 >> Also dieser Kerl, Boris Smus, schrieb ein wirklich nützliches kleines Tool namens BufferLoader. 858 00:44:04,110 --> 00:44:08,780 Alles, was Sie tun, ist einfach nur übergeben Sie die Dabei ist es ein list-- geben Sie 859 00:44:08,780 --> 00:44:11,327 oder, ja, es ist eine Liste in JavaScript? 860 00:44:11,327 --> 00:44:12,160 Sam Green: Ein Array. 861 00:44:12,160 --> 00:44:14,201 HUGH ZABRISKIE: Oh, ist es ein Array, das ist richtig. 862 00:44:14,201 --> 00:44:18,660 Es ist ein Array von Pfaden auf verschiedene Dateien. 863 00:44:18,660 --> 00:44:21,990 Und dann ist es eine Funktion übergeben. 864 00:44:21,990 --> 00:44:25,530 Dies ist der Rückruf wir sprachen etwa mit asynchroner Belastung. 865 00:44:25,530 --> 00:44:28,720 Das wird genannt werden Sobald die Dateien geladen. 866 00:44:28,720 --> 00:44:33,780 Und die Funktion, die aufgerufen wird, wenn die Datei geladen nimmt als Perimeter 867 00:44:33,780 --> 00:44:35,840 ein Array aus geladenen Puffer. 868 00:44:35,840 --> 00:44:37,990 So dass hier auftritt. 869 00:44:37,990 --> 00:44:41,180 Grundsätzlich ist BufferList Sie auf eine value-- sein 870 00:44:41,180 --> 00:44:46,380 oder es wird ein Array aus sein Länge eins, die in ihm in Index aufweist 871 00:44:46,380 --> 00:44:51,320 Null die gesamte geladene Datei des MP3. 872 00:44:51,320 --> 00:44:53,320 Also, was ich tun, wenn ich fertig Beladung ist, habe ich einfach 873 00:44:53,320 --> 00:44:57,430 erstellen Sie einen Pufferquelle, welche ein Audiopuffer Quellknoten. 874 00:44:57,430 --> 00:45:03,410 Der nächste Schritt ist I Last in der source.buffer wie die Voll geladenen Puffer 875 00:45:03,410 --> 00:45:06,740 vom BufferList-- es gibt eine Menge von buffers-- 876 00:45:06,740 --> 00:45:10,255 und dann, dass die Audio verbinden Sie Puffer zum Ziel. 877 00:45:10,255 --> 00:45:12,380 Also, was es tun wird Nur einfach die MP3- 878 00:45:12,380 --> 00:45:15,260 gerade auf den Ausgang, und starten Sie es sofort 879 00:45:15,260 --> 00:45:18,010 auf immer diesen Anruf. 880 00:45:18,010 --> 00:45:21,660 >> Cool, also mal sehen, dies geschieht in Aktion. 881 00:45:21,660 --> 00:45:24,490 Meine [unverständlich] hier, mal sehen. 882 00:45:24,490 --> 00:45:26,430 Also ich werde einfach beginne eine grundlegende Server. 883 00:45:26,430 --> 00:45:28,660 Das ist etwas, Sie tun, wenn Sie brauchen, 884 00:45:28,660 --> 00:45:32,490 machen Anfragen zum Laden von Dateien. 885 00:45:32,490 --> 00:45:34,140 Ich werde eine Grund Server zu starten. 886 00:45:34,140 --> 00:45:38,200 Dies ist im Grunde das gesamte PSET gerade jetzt in einer Zeile, 887 00:45:38,200 --> 00:45:43,930 aber es ist gerade erst anfangen ein Server auf Port 80/80. 888 00:45:43,930 --> 00:45:47,300 So dass wir hier gehen wir gehen zu laden, 80/80, 889 00:45:47,300 --> 00:45:49,110 wir werden, um mein Lieblingssong zu gehen. 890 00:45:49,110 --> 00:45:51,660 Also, wenn ich auf "Play my Lieblingslied "gerade jetzt, 891 00:45:51,660 --> 00:45:53,964 es geht um meine laden Lieblingslied spielen es-- 892 00:45:53,964 --> 00:45:55,880 [MUSIC - THE EAGLES "Leben im schnellen  FAHRBAHN"] 893 00:45:55,880 --> 00:46:00,490 --which passiert mit "Life in sein die Fast Lane "von den Eagles. 894 00:46:00,490 --> 00:46:06,346 Nun, ich treffen konnte "Hör mein Lieblingslied "und wiederholen es. 895 00:46:06,346 --> 00:46:09,160 >> [MUSIC - THE EAGLES "Leben im schnellen  FAHRBAHN"] 896 00:46:09,160 --> 00:46:18,340 >> Und wenn ich gehe zu trösten, denn Früher habe ich eine globale Variable hier 897 00:46:18,340 --> 00:46:23,390 den Überblick über diesen Wert tatsächlich zu halten, ist es Es wird nun in der Konsole erkennen. 898 00:46:23,390 --> 00:46:25,160 So dass es automatisch erstellt für mich. 899 00:46:25,160 --> 00:46:29,991 Also das ist, was gespielt wird gerade jetzt, und ich kann einfach anrufen source.stop () 900 00:46:29,991 --> 00:46:30,490 auf das. 901 00:46:30,490 --> 00:46:34,930 902 00:46:34,930 --> 00:46:35,860 Nun, wissen Sie was? 903 00:46:35,860 --> 00:46:39,760 Nur damit Sie Jungs haben das hörte song-- Dir vielleicht dieses Lied zu erkennen. 904 00:46:39,760 --> 00:46:41,801 >> [MUSIC - Rick Astley "Never Gonna GEBEN  SIE"] 905 00:46:41,801 --> 00:46:42,299 906 00:46:42,299 --> 00:46:44,215 [MUSIC - THE EAGLES "Leben im schnellen  FAHRBAHN"] 907 00:46:44,215 --> 00:46:46,195 Wir haben jetzt alle wurden Rickrolled. 908 00:46:46,195 --> 00:46:50,155 OK, groß, bewegen auf. 909 00:46:50,155 --> 00:46:51,160 Cool. 910 00:46:51,160 --> 00:46:54,554 Das ist also im Grunde ein Beispiel wie man einen MP3 laden file-- 911 00:46:54,554 --> 00:46:56,470 [MUSIC - THE EAGLES "Leben im schnellen  FAHRBAHN"] 912 00:46:56,470 --> 00:46:59,590 --und abspielen und stoppen und starten Sie es. 913 00:46:59,590 --> 00:47:03,008 Ich könnte noch viel mehr getan haben [unverständlich] 914 00:47:03,008 --> 00:47:07,570 >> Der letzte, den ich tue, ist, Ich zeige Ihnen ein [unverständlich]. 915 00:47:07,570 --> 00:47:18,070 >> [Musikwiedergabe] 916 00:47:18,070 --> 00:47:21,800 >> Es ist wie, ogg.wave.mp3. 917 00:47:21,800 --> 00:47:26,450 Ich denke, wenn ich mich richtig erinnere, Ich habe in einige Probleme mit .m4a laufen, 918 00:47:26,450 --> 00:47:27,721 aber ich bin nicht sicher. 919 00:47:27,721 --> 00:47:28,470 Ich denke, mp3.wave-- 920 00:47:28,470 --> 00:47:28,930 921 00:47:28,930 --> 00:47:30,971 >> [MUSIC - Rick Astley "Never Gonna GEBEN  SIE"] 922 00:47:30,971 --> 00:47:35,930 923 00:47:35,930 --> 00:47:36,500 >> OK, groß. 924 00:47:36,500 --> 00:47:37,625 Ich hätte das nicht sagen sollen. 925 00:47:37,625 --> 00:47:40,570 Wie auch immer, hallo. 926 00:47:40,570 --> 00:47:43,430 927 00:47:43,430 --> 00:47:45,490 So haben wir dieses geöffnet. 928 00:47:45,490 --> 00:47:52,320 So, jetzt alles, was ich zu tun ist, ich im Grunde erstellt eine grundlegende Syntax für die Erstellung von Musik. 929 00:47:52,320 --> 00:47:57,610 Also, wenn ich etwas zu tun, fügen Sie g4 auf 1 bis 2, was heißt, dass, 930 00:47:57,610 --> 00:48:00,950 fügen Sie die Klaviernote, G4, die den vierten G 931 00:48:00,950 --> 00:48:02,680 up auf dem Klavier von unten. 932 00:48:02,680 --> 00:48:05,930 Also das ist Art von MIDI zu sprechen, so dass für diejenigen, die Musik auf der Basis sind, 933 00:48:05,930 --> 00:48:07,860 dies ist nur MIDI-Noten. 934 00:48:07,860 --> 00:48:10,090 >> Publikum: Das ist die G des Mittleren C, nicht wahr? 935 00:48:10,090 --> 00:48:11,840 >> Hugh ZABRISKIE: Dies ist der G über dem mittleren C, das ist richtig. 936 00:48:11,840 --> 00:48:12,470 >> ZIELGRUPPE: Über Middle C 937 00:48:12,470 --> 00:48:13,345 >> HUGH ZABRISKIE: Ja. 938 00:48:13,345 --> 00:48:14,340 Eigentlich ja. 939 00:48:14,340 --> 00:48:16,131 Ich glaube, ich tatsächlich in der [unverständlich], 940 00:48:16,131 --> 00:48:18,860 so könnte dies eine Oktave über das sein. 941 00:48:18,860 --> 00:48:20,070 Also mal sehen. 942 00:48:20,070 --> 00:48:21,152 Wenn ich getroffen Play-- 943 00:48:21,152 --> 00:48:22,110 [REPETITIVE PIANO HINWEIS] 944 00:48:22,110 --> 00:48:23,200 --we're gehen, um das zu hören. 945 00:48:23,200 --> 00:48:25,700 Die Idee ist, dass es arbeitet, wie eine Befehlszeile würde, 946 00:48:25,700 --> 00:48:27,510 so, wenn ich nach oben und unten auf meiner Tastatur, die Sie 947 00:48:27,510 --> 00:48:31,550 können zur vorherigen zurück Befehle, die ziemlich nützlich ist. 948 00:48:31,550 --> 00:48:35,136 Und unten ist meine Liste der Tracks, die alle auf Schleife ausgeführt werden. 949 00:48:35,136 --> 00:48:38,260 >> ZIELGRUPPE: Sie wurden unter der Annahme der 88-Tasten-Tastatur auf, oder? 950 00:48:38,260 --> 00:48:41,051 >> HUGH ZABRISKIE: Die Frage war, gehe ich davon ein 88-Tasten-Tastatur, 951 00:48:41,051 --> 00:48:41,990 und ja, ich bin. 952 00:48:41,990 --> 00:48:45,030 Was ich getan habe ist, dass ich im Grunde nahm 88 Proben 953 00:48:45,030 --> 00:48:46,970 des Klaviers, eines für jede Note. 954 00:48:46,970 --> 00:48:49,180 Und so jedes Mal wenn Sie hören eine Notiz von nun an, 955 00:48:49,180 --> 00:48:57,550 das ist eigentlich eine Schleife, die aussieht like-- Dies ist immer auf Loop gespielt, 956 00:48:57,550 --> 00:49:00,120 so für jede Note, diese läuft. 957 00:49:00,120 --> 00:49:02,860 Was geschieht, ist, I erstellen Sie einen Puffer wieder, 958 00:49:02,860 --> 00:49:06,010 Erstelle ich einen Gewinn Knoten, um die Lautstärke einzustellen. 959 00:49:06,010 --> 00:49:08,240 Dies nur ein wirklich komplizierte Art zu sagen, ich 960 00:49:08,240 --> 00:49:10,550 speichern die Puffer in einem source.buffer. 961 00:49:10,550 --> 00:49:13,160 Ich gebe es die Verstärkung, I verbinden Sie es mit der Verstärkung, 962 00:49:13,160 --> 00:49:15,576 der Verstärkungsfaktor ist mit dem Ausgang, und dann spiele ich es. 963 00:49:15,576 --> 00:49:20,735 So, dass ist eine Art des Verfahrens der Einnahme in einem Puffer Quelle. 964 00:49:20,735 --> 00:49:24,820 >> ZIELGRUPPE: Können Sie tatsächlich, dass trockenen Klang und machen es nass [unverständlich]? 965 00:49:24,820 --> 00:49:26,260 >> HUGH ZABRISKIE: Sie können, ja. 966 00:49:26,260 --> 00:49:29,260 Es gibt Wieder Verb, es gibt Delay, Distortion. 967 00:49:29,260 --> 00:49:33,260 Grundsätzlich können Sie legte alles in zwischen in diesem Sandwich von-- gut, 968 00:49:33,260 --> 00:49:37,660 Pipeline ist eine bessere Metapher, aber Sie können etwas, dass hinzuzufügen. 969 00:49:37,660 --> 00:49:38,200 Cool. 970 00:49:38,200 --> 00:49:40,280 >> Also werde ich die Demo zu beenden hier, um Ihnen ein Gefühl geben, 971 00:49:40,280 --> 00:49:46,390 nur die schiere Anzahl der Zeiten, die Sie kann diese Funktion auf einmal laufen. 972 00:49:46,390 --> 00:49:49,280 Also werde ich diese entfernen. 973 00:49:49,280 --> 00:49:59,110 Ich gehe, um einen Generator zu erstellen dass-- im Grunde, was does-- dies wirklich 974 00:49:59,110 --> 00:50:04,220 Art einer komplizierten syntax-- aber es ist gehen, um Notizen on the fly zu generieren, 975 00:50:04,220 --> 00:50:06,601 und gerade anfangen zu spielen sie, wie sie wertet sie aus. 976 00:50:06,601 --> 00:50:07,392 [Zwischen PIANO] 977 00:50:07,392 --> 00:50:10,990 978 00:50:10,990 --> 00:50:12,817 >> So können wir nur machen ein wenig Musik hier. 979 00:50:12,817 --> 00:50:13,608 [Zwischen PIANO] 980 00:50:13,608 --> 00:50:39,570 981 00:50:39,570 --> 00:50:41,470 >> Also, was dieser Befehl der Fall, zum Beispiel, ist 982 00:50:41,470 --> 00:50:46,910 es nimmt diese drei wichtigen Hinweise zu den Klavier und setzt sie dann auf B3. 983 00:50:46,910 --> 00:50:48,660 Diese Syntax machen könnte ein wenig mehr Sinn 984 00:50:48,660 --> 00:50:50,590 für diejenigen, die einen haben Musik Hintergrund hier. 985 00:50:50,590 --> 00:50:55,180 986 00:50:55,180 --> 00:50:56,551 >> Ich kann einen Kick Drum hinzuzufügen. 987 00:50:56,551 --> 00:50:57,050 Ich kann-- 988 00:50:57,050 --> 00:50:58,048 >> [Zwischen INSTRUMENTS] 989 00:50:58,048 --> 00:50:59,256 >> --just spielen, um mit, dass. 990 00:50:59,256 --> 00:51:12,519 991 00:51:12,519 --> 00:51:13,474 >> So dass Sie make-- können 992 00:51:13,474 --> 00:51:14,515 [Zwischen INSTRUMENTS] 993 00:51:14,515 --> 00:51:15,513 Dass man ist ein wenig ärgerlich. 994 00:51:15,513 --> 00:51:16,554 [Zwischen INSTRUMENTS] 995 00:51:16,554 --> 00:51:26,491 996 00:51:26,491 --> 00:51:30,981 >> So dass nach dem Zufallsprinzip fügt eine trockene Becken auf jedem 16tel Note, mit einem 16% 997 00:51:30,981 --> 00:51:31,481 [UNVERSTÄNDLICH]. 998 00:51:31,481 --> 00:51:32,522 >> [Zwischen INSTRUMENTS] 999 00:51:32,522 --> 00:51:40,962 1000 00:51:40,962 --> 00:51:50,400 >> Ja, also die Art, wie diese works-- es ist immer in 4: 4. 1001 00:51:50,400 --> 00:51:51,441 [Zwischen INSTRUMENTS] 1002 00:51:51,441 --> 00:52:06,910 1003 00:52:06,910 --> 00:52:10,902 >> Ja, also die vier Quartale und 16/8. 1004 00:52:10,902 --> 00:52:14,851 1005 00:52:14,851 --> 00:52:15,892 [Zwischen INSTRUMENTS] 1006 00:52:15,892 --> 00:52:27,970 1007 00:52:27,970 --> 00:52:33,780 >> So im Durchschnitt, erhalten Sie 60% Zugriffe auf den 16tel-Noten. 1008 00:52:33,780 --> 00:52:35,990 >> Wie auch immer, nur war dieser Art zu zeigen, 1009 00:52:35,990 --> 00:52:39,780 einige der Dinge, die man bauen mit der Web Audio API. 1010 00:52:39,780 --> 00:52:43,840 Es ist wirklich stark, es ist wirklich schnell, und Sie können eine Menge coole Sachen machen 1011 00:52:43,840 --> 00:52:44,340 damit. 1012 00:52:44,340 --> 00:52:51,260 Also noch einmal, alle Fragen können Sie, E-Mail-myself-- Hugh-- oder Sam, 1013 00:52:51,260 --> 00:52:55,869 und ehrlich, hat Google eine Tonne von guten Ressourcen. 1014 00:52:55,869 --> 00:52:56,660 Irgendwelche letzten Fragen? 1015 00:52:56,660 --> 00:52:57,970 Ja. 1016 00:52:57,970 --> 00:53:00,790 >> Publikum: So können Sie auf das eingebaute Mikrofon. 1017 00:53:00,790 --> 00:53:03,089 Was, wenn man wollte, verwenden Sie ein besseres Mikrofon? 1018 00:53:03,089 --> 00:53:05,380 HUGH ZABRISKIE: Wenn Sie wollten um bessere Mikrofon verwenden? 1019 00:53:05,380 --> 00:53:11,320 Also noch einmal, ist dieser Teil der Abstraktion zwischen Chrome 1020 00:53:11,320 --> 00:53:12,950 und der Rest des Computers. 1021 00:53:12,950 --> 00:53:18,950 Es sei denn, es ist durch die verfügbaren eine API, wie Web-MIDI-API, 1022 00:53:18,950 --> 00:53:22,030 Sie könnten wahrscheinlich finden Sie einige Hacks, aber im Allgemeinen nicht machbar. 1023 00:53:22,030 --> 00:53:25,300 >> Sam Green: Sie können also-- alle Chrome weiß 1024 00:53:25,300 --> 00:53:28,820 ist das, was Ihr Standard-Mikrofon ist, und es greift auf, dass. 1025 00:53:28,820 --> 00:53:33,410 Also, wenn Sie ein Mikrofon hatte man konnte Als Standard-Mikrofon-Computers eingestellt, 1026 00:53:33,410 --> 00:53:35,990 Sie darauf zugreifen könnten auf diese Weise und es würde wahrscheinlich funktionieren. 1027 00:53:35,990 --> 00:53:37,490 HUGH ZABRISKIE: Das ist ein guter Punkt. 1028 00:53:37,490 --> 00:53:39,656 Ich habe nie versucht, aber Sie könnten zu freundlich sein 1029 00:53:39,656 --> 00:53:45,700 von--, wenn Sie die Eingangslautsprecher umgeleitet werden, Sie könnten in der Lage, das zu tun, ja. 1030 00:53:45,700 --> 00:53:48,360 >> Irgendwelche letzten Fragen? 1031 00:53:48,360 --> 00:53:49,340 Cool. 1032 00:53:49,340 --> 00:53:51,680 Na danke euch so viel für das Ansehen. 1033 00:53:51,680 --> 00:53:52,199 Ich bin Hugh. 1034 00:53:52,199 --> 00:53:52,990 Sam Green: Ich bin Sam. 1035 00:53:52,990 --> 00:53:55,410 HUGH ZABRISKIE: Und das ist CS50. 1036 00:53:55,410 --> 00:53:56,767