1 00:00:00,000 --> 00:00:05,900 2 00:00:05,900 --> 00:00:07,170 >> Sam Green: Hi, everyone. 3 00:00:07,170 --> 00:00:08,640 Benvenuti nel nostro seminario. 4 00:00:08,640 --> 00:00:10,009 Il mio nome è Sam. 5 00:00:10,009 --> 00:00:11,050 HUGH ZABRISKIE: Sono Hugh. 6 00:00:11,050 --> 00:00:17,420 Sam Green: E stiamo andando a parlare oggi su JavaScript e le API Web Audio. 7 00:00:17,420 --> 00:00:21,180 Tanto per cominciare, questo è uno schema della nostra agenda per il seminario. 8 00:00:21,180 --> 00:00:25,350 Stiamo per iniziare a parlare di perché si dovrebbe essere interessato al Web 9 00:00:25,350 --> 00:00:30,130 API Audio, perché è JavaScript la lingua che serve per esso, 10 00:00:30,130 --> 00:00:32,619 e poi parlare di JavaScript essentials-- così come, 11 00:00:32,619 --> 00:00:34,800 camminare attraverso alcuni basi della lingua, 12 00:00:34,800 --> 00:00:37,290 e poi parlare del API audio a un livello elevato. 13 00:00:37,290 --> 00:00:41,140 Poi, Hugh parlerà di alcuni delle fasi di produzione audio 14 00:00:41,140 --> 00:00:45,509 e poi questo demo sequencer impressionante progetto ha costruito e vi mostrerà il codice. 15 00:00:45,509 --> 00:00:48,050 E poi, avremo tempo per domande alla fine per le persone 16 00:00:48,050 --> 00:00:49,593 che sono qui vivono. 17 00:00:49,593 --> 00:00:50,540 >> HUGH ZABRISKIE: Freddo. 18 00:00:50,540 --> 00:00:50,990 >> Sam Green: Freddo. 19 00:00:50,990 --> 00:00:51,383 >> HUGH ZABRISKIE: Freddo. 20 00:00:51,383 --> 00:00:52,170 Io backup. 21 00:00:52,170 --> 00:00:54,960 >> Sam Green: Allora, andiamo con ordine. 22 00:00:54,960 --> 00:00:57,840 Così una delle grandi cose circa l'API Web Audio 23 00:00:57,840 --> 00:01:00,480 è che non c'è nessun set up richiesto. 24 00:01:00,480 --> 00:01:04,230 Viene built-in a maggior parte dei browser moderni, 25 00:01:04,230 --> 00:01:08,630 tra cui Chrome, bordo, un intero mazzo di others-- tutti quelli 26 00:01:08,630 --> 00:01:12,650 che grandi porzioni di la gente sta usando oggi. 27 00:01:12,650 --> 00:01:14,807 Quindi non c'è istituito, oltre a ottenere giusto 28 00:01:14,807 --> 00:01:16,890 un web server in corso, per di iniziare a lavorare 29 00:01:16,890 --> 00:01:18,420 sul progetto, che è grande. 30 00:01:18,420 --> 00:01:21,500 31 00:01:21,500 --> 00:01:24,190 >> Consigliamo piuttosto fortemente che si considera 32 00:01:24,190 --> 00:01:26,530 utilizzando Chrome per Sviluppo web JavaScript, 33 00:01:26,530 --> 00:01:30,260 solo perché il suo sviluppatore strumenti sono veramente forti. 34 00:01:30,260 --> 00:01:33,220 Come esempio di ciò che si intende dicendo aprire il tuo JavaScript 35 00:01:33,220 --> 00:01:38,600 console-- se si va in Chrome e si guarda a qualsiasi pagina web, 36 00:01:38,600 --> 00:01:43,897 e te ne sei andato clic Inspect Element, e poi 37 00:01:43,897 --> 00:01:46,730 si va in questa piccola discesa proprio qui e si fa clic su Console, 38 00:01:46,730 --> 00:01:50,660 vedrete che cosa apre sembra un molto simile a un prompt dei comandi che si 39 00:01:50,660 --> 00:01:53,720 potrebbe vedere sul vostro Mac, o su ID. 40 00:01:53,720 --> 00:01:59,260 E proprio così, possiamo Tipo comandi qui, come trasparente, 41 00:01:59,260 --> 00:02:01,350 e altri comandi del genere. 42 00:02:01,350 --> 00:02:04,267 Siamo in grado di creare variabili, come vedremo più avanti in JavaScript. 43 00:02:04,267 --> 00:02:07,100 E così qualcosa che possiamo fare in JavaScript, siamo in grado di fare con la console, 44 00:02:07,100 --> 00:02:11,430 e questo è un modo super pratico per iniziare a giocare in giro con le API 45 00:02:11,430 --> 00:02:15,760 e prendere confidenza con Javascript destra fuori del blocco. 46 00:02:15,760 --> 00:02:18,290 Nessun set up richiesto, che è davvero bello. 47 00:02:18,290 --> 00:02:18,790 Raffreddare. 48 00:02:18,790 --> 00:02:22,064 49 00:02:22,064 --> 00:02:22,880 Eccezionale. 50 00:02:22,880 --> 00:02:24,780 >> Quindi, solo una cosa da aggiungere. 51 00:02:24,780 --> 00:02:27,780 Se avete qualche questions-- ci sono molti di voi che non sono qui vivo, 52 00:02:27,780 --> 00:02:31,232 sentitevi liberi di e-mail noi-- questi sono i nostri indirizzi e-mail. 53 00:02:31,232 --> 00:02:33,190 Se avete domande non si vuole a chiedere a noi, 54 00:02:33,190 --> 00:02:36,160 come, oh ho un bug nel mio codice, o qualcosa del genere 55 00:02:36,160 --> 00:02:39,270 che è un po 'più specifico, forse google prima. 56 00:02:39,270 --> 00:02:42,340 Ci sono un sacco di grandi risorse circa l'API Web Audio là fuori. 57 00:02:42,340 --> 00:02:44,089 E 'davvero bene documentata ed è di essere 58 00:02:44,089 --> 00:02:47,194 utilizzata da un sacco di persone in industria, e le persone che sono solo 59 00:02:47,194 --> 00:02:48,610 la costruzione di cose divertenti per loro stessi. 60 00:02:48,610 --> 00:02:51,306 Quindi ci dovrebbe essere un sacco delle risorse là fuori. 61 00:02:51,306 --> 00:02:53,040 Eccezionale. 62 00:02:53,040 --> 00:02:56,100 >> Fresco, quindi perché il API Web Audio? 63 00:02:56,100 --> 00:02:59,840 Questo schema è un po ' di un'evoluzione del modo 64 00:02:59,840 --> 00:03:04,100 audio sul web è cresciuto nel corso del tempo. 65 00:03:04,100 --> 00:03:13,080 Bgsound era come il tag HTML originale Internet Explorer utilizzato per sostenere. 66 00:03:13,080 --> 00:03:16,790 E 'consentita solo per i suoni piuttosto semplice, la funzionalità non era molto robusto, 67 00:03:16,790 --> 00:03:19,380 e non si poteva fare sequenziamento complicata, 68 00:03:19,380 --> 00:03:21,890 o controllare quando il suono ha cominciato e si fermò molto robusta. 69 00:03:21,890 --> 00:03:23,930 Quindi, non era particolarmente ben sviluppato. 70 00:03:23,930 --> 00:03:27,470 Poi, dopo che, Flash venuto along-- che, 71 00:03:27,470 --> 00:03:31,712 Sono sicuro che voi siete tutti a conoscenza con Flash-- non forse come funziona, 72 00:03:31,712 --> 00:03:32,920 ma hai certamente visto. 73 00:03:32,920 --> 00:03:35,586 Hai avuto l'aggiornamento del Flash Plug-in, tutto questo genere di cose, 74 00:03:35,586 --> 00:03:40,110 e che certamente esteso la gamma di funzionalità che era disponibile. 75 00:03:40,110 --> 00:03:45,370 Ma fare l'utente di installazione un plug-in è sicuramente 76 00:03:45,370 --> 00:03:48,480 uno svantaggio di includere Flash nella vostra applicazione, giusto? 77 00:03:48,480 --> 00:03:52,410 Perché allora sei dipendente dal utente andare e trovare questo plug-in, 78 00:03:52,410 --> 00:03:54,660 e probabilmente essere trasformato fuori da questo passo in più 79 00:03:54,660 --> 00:03:56,640 devono prendere per utilizzare la vostra applicazione. 80 00:03:56,640 --> 00:04:01,270 E poi ci potrebbe essere un aggiornamento che sarà rompere tutta la vostra applicazione, 81 00:04:01,270 --> 00:04:03,880 e si finisce per essere un incubo per lo sviluppatore, anche. 82 00:04:03,880 --> 00:04:06,230 Così che era una barricata. 83 00:04:06,230 --> 00:04:10,480 >> E poi, dopo che è arrivato, il tag audio HTML, che 84 00:04:10,480 --> 00:04:16,579 è una caratteristica di più moderno che HTML-- certamente permesso per molto di più roba, 85 00:04:16,579 --> 00:04:20,050 ma anche le cose che si potevano fare c'erano un po 'limitato solo 86 00:04:20,050 --> 00:04:22,730 come risultato delle cose che l'HTML era capace. 87 00:04:22,730 --> 00:04:26,060 Così, quando il codice JavaScript API, il Web Audio API, 88 00:04:26,060 --> 00:04:29,290 è diventato uno standard praticare tutti i browser, 89 00:04:29,290 --> 00:04:32,490 che in realtà ampliato il set di opportunità per gli sviluppatori 90 00:04:32,490 --> 00:04:36,590 per entrare davvero nella costruzione cose interessanti per il web. 91 00:04:36,590 --> 00:04:39,220 Per lungo tempo ci fosse stati strumenti veramente potenti 92 00:04:39,220 --> 00:04:44,360 per applicazioni audio native, like-- tutti sanno GarageBand, 93 00:04:44,360 --> 00:04:48,360 e poi ovviamente ci sono più applicazioni audio professionali, miscelazione 94 00:04:48,360 --> 00:04:49,640 e questo genere di cose. 95 00:04:49,640 --> 00:04:52,690 Ma non c'era un davvero buono Cloud-- non 96 00:04:52,690 --> 00:04:55,811 Nube, si, credo Piattaforma web-based Cloud-- 97 00:04:55,811 --> 00:04:58,310 che permetterebbe agli sviluppatori di creare applicazioni per le persone 98 00:04:58,310 --> 00:05:00,570 fare missaggio audio. 99 00:05:00,570 --> 00:05:03,960 E come egli vi mostrerà più tardi, il Web Audio API 100 00:05:03,960 --> 00:05:07,470 consente davvero potente roba accada davvero semplice, 101 00:05:07,470 --> 00:05:09,597 che è piuttosto fresco. 102 00:05:09,597 --> 00:05:12,680 Ecco, questo è il motivo per cui si istruzione dovrebbe guardare il resto del seminario, 103 00:05:12,680 --> 00:05:14,350 fondamentalmente. 104 00:05:14,350 --> 00:05:17,880 >> E ora, ho intenzione di parlare di alcuni elementi di Javascript-- solo di base 105 00:05:17,880 --> 00:05:20,240 del linguaggio, in modo che possiamo essere sulla stessa pagina 106 00:05:20,240 --> 00:05:22,470 quando si parla di API un po 'più tardi. 107 00:05:22,470 --> 00:05:23,260 Raffreddare. 108 00:05:23,260 --> 00:05:26,192 >> Così, questo è un sommario. 109 00:05:26,192 --> 00:05:27,150 Ho dimenticato che questo era qui. 110 00:05:27,150 --> 00:05:27,510 Già. 111 00:05:27,510 --> 00:05:27,870 >> HUGH ZABRISKIE: Ci sono due scivoli qui. 112 00:05:27,870 --> 00:05:30,245 >> Sam Green: Questo è il riassunto di alcune delle limitazioni 113 00:05:30,245 --> 00:05:35,220 degli altri, vecchi metodi di rilegatura. 114 00:05:35,220 --> 00:05:37,828 E poi ora, abbiamo queste cose. 115 00:05:37,828 --> 00:05:40,011 Raffreddare. 116 00:05:40,011 --> 00:05:40,510 Eccezionale. 117 00:05:40,510 --> 00:05:43,200 >> Così, elementi essenziali JavaScript. 118 00:05:43,200 --> 00:05:47,230 Per prima cosa, c'è una differenza piuttosto significativo 119 00:05:47,230 --> 00:05:49,940 in JavaScript rispetto a un linguaggio come il C, in modo 120 00:05:49,940 --> 00:05:52,050 che le variabili sono create. 121 00:05:52,050 --> 00:05:55,634 Quindi, in C, siamo abituati ad avere digitare nostre variabili, giusto? 122 00:05:55,634 --> 00:05:57,800 E non mi riferisco tipo come digitarli, tipo intendo 123 00:05:57,800 --> 00:06:01,900 come assegnare loro un significato type-- come, un int, float, un char. 124 00:06:01,900 --> 00:06:05,210 In C, eravamo davvero abituati a dover creare una variabile 125 00:06:05,210 --> 00:06:09,690 e quindi attenersi a tale tipo per la tutto il tempo che usiamo quella variabile. 126 00:06:09,690 --> 00:06:13,990 E questo non è necessariamente peggio, ma è probabilmente più difficile da usare. 127 00:06:13,990 --> 00:06:16,190 Una delle caratteristiche fredde JavaScript è 128 00:06:16,190 --> 00:06:19,740 che le variabili sono quello che ha chiamato "dinamicamente tipizzati", che 129 00:06:19,740 --> 00:06:22,500 significa che posso creare un variabile con questa sintassi, 130 00:06:22,500 --> 00:06:25,800 varX uguale 5, per esempio. 131 00:06:25,800 --> 00:06:27,790 Questo crea originariamente un intero variable-- 132 00:06:27,790 --> 00:06:29,870 proprio sotto il cappuccio somewhere-- ma io 133 00:06:29,870 --> 00:06:33,040 può cambiare la variabile per fare riferimento a una stringa 134 00:06:33,040 --> 00:06:35,820 senza fare nulla di simile creare una nuova variabile. 135 00:06:35,820 --> 00:06:37,880 Non ho bisogno di preoccuparsi circa il cambiamento del tipo. 136 00:06:37,880 --> 00:06:45,440 JavaScript sa che il tipo di cambiato, e ciò accade in modo dinamico. 137 00:06:45,440 --> 00:06:48,510 >> Quindi, ci sono benefici e inconvenienti che, 138 00:06:48,510 --> 00:06:51,250 come chiunque abbia lavorato in JavaScript per un po 'potrebbe sapere. 139 00:06:51,250 --> 00:06:53,600 Ci sono momenti in cui si potrebbe accidentalmente 140 00:06:53,600 --> 00:06:57,720 modificare il tipo di una variabile e Non maneggiare quel tipo che cambia, 141 00:06:57,720 --> 00:07:01,120 e poi il tuo JavaScript può crash-- o un'eccezione 142 00:07:01,120 --> 00:07:06,070 essere buttato, perché avrete la tipo sbagliato quando ci si aspetta un tipo. 143 00:07:06,070 --> 00:07:07,040 Raffreddare. 144 00:07:07,040 --> 00:07:11,470 >> Così, scoping-- che è come, se si ricordare le prime settimane in corso, 145 00:07:11,470 --> 00:07:15,420 si riferisce a come visibile una variabile è e in quale area del codice. 146 00:07:15,420 --> 00:07:18,400 Tutto questo sembra molto simile per il modo in cui appare in C. 147 00:07:18,400 --> 00:07:24,755 Così variabili vengono generalmente scope tra parentesi graffe all'interno di una funzione, 148 00:07:24,755 --> 00:07:27,005 e poi ci sono anche variabili a livello globale che di ambito 149 00:07:27,005 --> 00:07:29,171 are-- se si scrive una variabile al di fuori di una funzione, 150 00:07:29,171 --> 00:07:31,790 sarà visibile in tutto il testo. 151 00:07:31,790 --> 00:07:35,840 >> Una differenza tra JavaScript e C in particolare, 152 00:07:35,840 --> 00:07:40,280 è che se si dichiara una globale ovunque variabile in un file di testo 153 00:07:40,280 --> 00:07:43,324 è visibile in qualsiasi funzione all'interno di tale file di testo. 154 00:07:43,324 --> 00:07:44,240 Questo è corretto, giusto? 155 00:07:44,240 --> 00:07:46,330 >> HUGH ZABRISKIE: Sì. 156 00:07:46,330 --> 00:07:49,120 >> Sam Green: Così che è anche un po ' po 'eccentrico rispetto a C, 157 00:07:49,120 --> 00:07:52,660 dove abbiamo sempre dovuto avere il nostro definizioni di variabili sopra i luoghi 158 00:07:52,660 --> 00:07:53,770 sono stati utilizzati. 159 00:07:53,770 --> 00:07:57,957 Questa non è una regola che è applicata più, quindi, un po 'diverso. 160 00:07:57,957 --> 00:08:00,540 E di nuovo solo per sottolineare nuovamente, globale contro variables-- locale 161 00:08:00,540 --> 00:08:03,457 molto simile a C. Si potrebbe avere due variabili con lo stesso nome, 162 00:08:03,457 --> 00:08:06,540 e hanno uno dei loro nomi da Shadowed da una variabile locale se uno di essi 163 00:08:06,540 --> 00:08:07,546 era globale. 164 00:08:07,546 --> 00:08:09,420 Così, simile tipo di problemi che alcuni di voi 165 00:08:09,420 --> 00:08:11,920 può aver incontrato in qualche del problema imposta finora. 166 00:08:11,920 --> 00:08:14,450 Fresco, in modo che le variabili. 167 00:08:14,450 --> 00:08:20,310 >> Flusso di controllo, vale a dire come, se-else-- stuff-- logico e loop. 168 00:08:20,310 --> 00:08:24,510 Quindi, per cominciare, questo è ciò che if-else dichiarazioni sembrano in JavaScript. 169 00:08:24,510 --> 00:08:29,750 Il posizionamento delle varie cose sulle linee non è importante. 170 00:08:29,750 --> 00:08:34,409 Questo è solo una delle convenzioni per il codice di struttura che modo. 171 00:08:34,409 --> 00:08:38,634 Proprio come in C, abbiamo un "se", una dichiarazione parentesi. 172 00:08:38,634 --> 00:08:40,840 173 00:08:40,840 --> 00:08:42,090 Non è quello che intendevo fare. 174 00:08:42,090 --> 00:08:44,860 175 00:08:44,860 --> 00:08:45,550 L'ho fatto di nuovo. 176 00:08:45,550 --> 00:08:46,841 >> HUGH ZABRISKIE: Cercando di uscire? 177 00:08:46,841 --> 00:08:49,770 Sam Green: No, io sono solo cercando per ingrandire. 178 00:08:49,770 --> 00:08:50,660 Non ha importanza. 179 00:08:50,660 --> 00:08:54,730 180 00:08:54,730 --> 00:08:59,370 >> Quindi, abbiamo un "if" e abbiamo una condizione all'interno di esso 181 00:08:59,370 --> 00:09:03,130 che restituisce true o false, e che determina o meno 182 00:09:03,130 --> 00:09:04,510 entriamo in quel blocco di codice. 183 00:09:04,510 --> 00:09:09,860 E allo stesso modo, abbiamo un altro, se e un altro, proprio come siamo abituati a in C. 184 00:09:09,860 --> 00:09:14,010 >> Inoltre, dovrebbe essere abbastanza comodo destra fuori del blocco con i loop, 185 00:09:14,010 --> 00:09:16,440 perché anche guardare un po 'come C sembra. 186 00:09:16,440 --> 00:09:19,600 Ma si noterà ancora una volta che noi hanno, invece di int inizializzazioni, 187 00:09:19,600 --> 00:09:22,570 abbiamo inizializzazioni var. 188 00:09:22,570 --> 00:09:24,650 E credo che avete stare attenti a fare 189 00:09:24,650 --> 00:09:28,460 Assicurarsi di non modificare il valore di I da un int in una stringa, 190 00:09:28,460 --> 00:09:31,780 per esempio, perché che sta per causare un comportamento strano non si potrebbe 191 00:09:31,780 --> 00:09:32,280 aspettano. 192 00:09:32,280 --> 00:09:35,750 Ma questo dovrebbe essere abbastanza familiare, pure. 193 00:09:35,750 --> 00:09:39,460 >> Quindi questo è dove le cose cominciano a ottenere un po 'matto in JavaScript 194 00:09:39,460 --> 00:09:44,920 per qualcuno che sta andando da un sfondo di C. Ci sono funzioni 195 00:09:44,920 --> 00:09:48,070 in JavaScript, e non c'è un modo per dichiarare una funzione che sembra 196 00:09:48,070 --> 00:09:50,361 sorta di simile a C, e poi ce n'è un altro che 197 00:09:50,361 --> 00:09:52,450 Sembra un po 'diverso. 198 00:09:52,450 --> 00:09:54,930 >> La prima versione, che possiamo vedere qui, 199 00:09:54,930 --> 00:09:59,260 è una specie di C-like, dove diciamo, questa è una funzione, 200 00:09:59,260 --> 00:10:01,490 dargli un nome, dare il numero di argomenti, 201 00:10:01,490 --> 00:10:05,150 e poi il contenuto della funzione andare dentro quelle parentesi graffe. 202 00:10:05,150 --> 00:10:08,850 Vedremo un esempio di argomenti in appena un secondo. 203 00:10:08,850 --> 00:10:13,420 >> Mentre nella riga successiva, vediamo, oh, ecco una variabile chiamata "myFunction," 204 00:10:13,420 --> 00:10:17,546 e noi uguale a questo generic function-- cosa-- che 205 00:10:17,546 --> 00:10:19,170 non sembra avere nulla in corso. 206 00:10:19,170 --> 00:10:22,780 207 00:10:22,780 --> 00:10:26,080 La ragione per cui è diverso di C è che Javascript 208 00:10:26,080 --> 00:10:30,040 è ciò che è chiamato un linguaggio funzionale, o ha elementi funzionali, il che significa 209 00:10:30,040 --> 00:10:33,510 che le funzioni sono in realtà valori. 210 00:10:33,510 --> 00:10:39,520 E questo significa che possiamo impostare una variabile di una funzione uguale 211 00:10:39,520 --> 00:10:43,210 e quindi spostare tale funzione intorno, passarlo come argomento, 212 00:10:43,210 --> 00:10:46,550 fare ogni genere di cose come quello con le funzioni. 213 00:10:46,550 --> 00:10:49,682 >> Un'altra cosa da note-- funzioni sono scritte 214 00:10:49,682 --> 00:10:51,140 con un certo numero di argomenti. 215 00:10:51,140 --> 00:10:54,056 Vedremo un esempio di una funzione con un argomento sulla diapositiva successiva. 216 00:10:54,056 --> 00:10:56,720 Ma non lo farà JavaScript urlare a voi se provate 217 00:10:56,720 --> 00:10:59,330 utilizzare una funzione con il numero errato di argomenti. 218 00:10:59,330 --> 00:11:05,310 Sarà solo fare il suo meglio per rendere fare, il che significa che se si passa, 219 00:11:05,310 --> 00:11:09,410 si chiama una funzione che prevede un argomento con nessun argomento, tutto ciò che 220 00:11:09,410 --> 00:11:13,990 che accadrà è che farà del suo meglio per cercare di eseguire tale codice, 221 00:11:13,990 --> 00:11:16,541 e se funziona casualmente in un'eccezione o un errore, 222 00:11:16,541 --> 00:11:19,790 che sarà lanciare tale eccezione e solo a mantenere going-- che è solo uno dei modi 223 00:11:19,790 --> 00:11:21,070 che Javascript funziona. 224 00:11:21,070 --> 00:11:21,781 Già. 225 00:11:21,781 --> 00:11:24,207 >> PUBBLICO: Cosa succede se ci sono troppi argomenti? 226 00:11:24,207 --> 00:11:26,040 Sam Green: Così il domanda era: cosa succede 227 00:11:26,040 --> 00:11:27,380 se ci sono troppi argomenti? 228 00:11:27,380 --> 00:11:29,171 E la risposta è che JavaScript sarà solo 229 00:11:29,171 --> 00:11:32,120 ignorare quelli che sono dopo quelli che si aspetta. 230 00:11:32,120 --> 00:11:36,420 Si cercherà di eseguire la funzione chiamarlo come se fosse solo le prime due. 231 00:11:36,420 --> 00:11:37,075 Destra? 232 00:11:37,075 --> 00:11:37,700 >> HUGH ZABRISKIE: Esatto, sì. 233 00:11:37,700 --> 00:11:39,449 Allo stesso modo, se ci sono troppo pochi argomenti, 234 00:11:39,449 --> 00:11:42,640 solo tipo di dà nulla per tutto il argomenti che non ha alcun valore 235 00:11:42,640 --> 00:11:43,660 per. 236 00:11:43,660 --> 00:11:45,810 >> Sam Green: Quale può effettivamente essere a portata di mano, se 237 00:11:45,810 --> 00:11:49,060 vuole scrivere una funzione che prende un argomento numero variabile. 238 00:11:49,060 --> 00:11:55,830 È possibile impostare i valori predefiniti la definizione della funzione, 239 00:11:55,830 --> 00:11:59,060 e può ignorare che l'ingresso non c'è. 240 00:11:59,060 --> 00:12:01,584 241 00:12:01,584 --> 00:12:04,000 Quindi voglio parlare un po ' di più su questo ultimo punto 242 00:12:04,000 --> 00:12:05,541 punto, che è funzioni sono valori. 243 00:12:05,541 --> 00:12:07,930 244 00:12:07,930 --> 00:12:11,010 Questo è un esempio che è un po 'allucinante 245 00:12:11,010 --> 00:12:14,880 se hai appena letto, e non pensate su quello che sta succedendo per un secondo. 246 00:12:14,880 --> 00:12:17,910 Quindi, diamo un'occhiata a solo la prima linea qui. 247 00:12:17,910 --> 00:12:24,360 Abbiamo questa variabile, f1, che si dice è una funzione che fa questa cosa. 248 00:12:24,360 --> 00:12:28,535 E il contenuto della funzione sono console.log ('ciao'). 249 00:12:28,535 --> 00:12:32,220 Si può pensare di console.log come JavaScript equivalente di printf. 250 00:12:32,220 --> 00:12:35,510 Quindi, che cosa accadrà è, se noi eseguire questo codice nel nostro browser, 251 00:12:35,510 --> 00:12:37,530 che sarà stampare una stringa. 252 00:12:37,530 --> 00:12:39,342 Posso dimostrare che. 253 00:12:39,342 --> 00:12:42,300 PUBBLICO: Da log, tuttavia, fa quel significa che è in fase di registrazione da qualche parte? 254 00:12:42,300 --> 00:12:42,550 Sam Green: Sì. 255 00:12:42,550 --> 00:12:44,216 Così mi faccio vedere che cosa sta per accadere. 256 00:12:44,216 --> 00:12:48,085 Quindi la domanda era: che cosa significa log medio? 257 00:12:48,085 --> 00:12:51,262 >> HUGH ZABRISKIE: Così console.log è come printf per C. 258 00:12:51,262 --> 00:12:52,970 Sam Green: Così console.log è come printf, 259 00:12:52,970 --> 00:12:59,240 quindi se ho questo console.log ('ciao'), e che io chiamo, la stringa "ciao" 260 00:12:59,240 --> 00:13:00,730 viene stampato sulla console. 261 00:13:00,730 --> 00:13:03,340 Questa è la console. 262 00:13:03,340 --> 00:13:05,930 E 'proprio come printf, dove la stampa di fuori standard. 263 00:13:05,930 --> 00:13:09,050 264 00:13:09,050 --> 00:13:11,230 E vedremo in un minuto, ma questo è in realtà 265 00:13:11,230 --> 00:13:16,529 riferimento all'oggetto console, e chiamando un metodo su tale oggetto. 266 00:13:16,529 --> 00:13:18,320 Come per più senso in un minuto quando 267 00:13:18,320 --> 00:13:20,660 arrivare a parlare di oggetti in JavaScript, 268 00:13:20,660 --> 00:13:22,509 ma ho pensato che vorrei solo ricordare che. 269 00:13:22,509 --> 00:13:24,300 HUGH ZABRISKIE: Siamo utilizzato per in C, destra- sopra 270 00:13:24,300 --> 00:13:27,580 scriviamo solitamente un grande programma di in principale di fare qualsiasi cosa. 271 00:13:27,580 --> 00:13:30,700 Ma cosa c'è di fresco in JavaScript si è avere questo tipo di interprete che 272 00:13:30,700 --> 00:13:33,620 viene eseguito in tempo reale, in modo da vuole solo riga per riga, 273 00:13:33,620 --> 00:13:35,320 può solo interpretare tale sul posto. 274 00:13:35,320 --> 00:13:37,403 E registra cose che hanno eseguito prima, 275 00:13:37,403 --> 00:13:41,620 quindi è uno strumento molto utile per utilizzare console.log, o la console, 276 00:13:41,620 --> 00:13:46,870 in generale, per solo giocando in giro con JavaScript. 277 00:13:46,870 --> 00:13:51,420 >> Sam Green: Quindi tornare in questo example-- la seconda riga di codice 278 00:13:51,420 --> 00:13:55,320 qui è abbastanza da capogiro nella mia testa. 279 00:13:55,320 --> 00:13:59,790 La prima volta che ho letto questo, era come, che cosa sta succedendo? 280 00:13:59,790 --> 00:14:04,580 Quindi, ciò che sta accadendo è, questo dichiarazione di funzione dice, 281 00:14:04,580 --> 00:14:10,170 Ho una funzione chiamata f2 che è in attesa di un argomento, f, 282 00:14:10,170 --> 00:14:12,990 e poi chiama che funzione f, che 283 00:14:12,990 --> 00:14:17,652 è stato passato a esso come argomento senza sé argomenti. 284 00:14:17,652 --> 00:14:19,110 Quindi, che avrebbe potuto essere fonte di confusione. 285 00:14:19,110 --> 00:14:21,890 286 00:14:21,890 --> 00:14:28,400 Se capiamo questo come f2 prende f1 come argomento, e quindi all'interno di f2, 287 00:14:28,400 --> 00:14:31,190 f ottiene called-- quali mezzi che questa linea di codice, 288 00:14:31,190 --> 00:14:34,192 dopo queste due linee di codice, si traduce in "ciao" 289 00:14:34,192 --> 00:14:35,400 in fase di stampa alla console. 290 00:14:35,400 --> 00:14:41,660 291 00:14:41,660 --> 00:14:44,910 >> Il fatto che possiamo passare Funzioni intorno come valori 292 00:14:44,910 --> 00:14:47,870 finisce per essere uno dei più potenti funzionalità di JavaScript 293 00:14:47,870 --> 00:14:49,700 come linguaggio di programmazione. 294 00:14:49,700 --> 00:14:52,782 Fuori di tutto quanto cose impressionanti che può fare, 295 00:14:52,782 --> 00:14:54,990 come una caratteristica del lingua in termini di modo 296 00:14:54,990 --> 00:14:58,400 che rende le cose facili programmare e consente 297 00:14:58,400 --> 00:15:01,060 per cose che non sono particolarmente ben si adatta al web, 298 00:15:01,060 --> 00:15:04,500 programmazione funzionale e funzionale aspetti di programmazione di JavaScript 299 00:15:04,500 --> 00:15:07,130 è uno dei più concetti potenti che 300 00:15:07,130 --> 00:15:11,030 esiste in Javascript-- se mi chiedete. 301 00:15:11,030 --> 00:15:11,960 Raffreddare. 302 00:15:11,960 --> 00:15:13,534 >> Così, la prossima cosa. 303 00:15:13,534 --> 00:15:16,450 Oltre ad essere funzionali, ci sono anche elementi di JavaScript 304 00:15:16,450 --> 00:15:20,510 che sono orientato agli oggetti, che è uno dei molto 305 00:15:20,510 --> 00:15:23,800 popolari parole di ronzio di informatica. 306 00:15:23,800 --> 00:15:27,040 Programmazione orientata agli oggetti è un fatto popolare. 307 00:15:27,040 --> 00:15:34,210 JavaScript ha una versione di tale, dove credo che ogni valore è anche 308 00:15:34,210 --> 00:15:41,475 un oggetto, il che significa che ogni oggetto avvolge insieme un numero di valori. 309 00:15:41,475 --> 00:15:44,020 310 00:15:44,020 --> 00:15:49,750 Quindi, per i valori che sono semplici, come un numero intero, come varX uguale a 5, 311 00:15:49,750 --> 00:15:52,250 quell'oggetto solo avvolge che un valore. 312 00:15:52,250 --> 00:15:54,760 313 00:15:54,760 --> 00:15:59,036 >> Ma possiamo anche immaginare una situazione where-- possiamo pensare a situazioni in C 314 00:15:59,036 --> 00:16:00,910 dove volevamo fare qualcosa con le strutture, 315 00:16:00,910 --> 00:16:03,285 per esempio, che avvolge vari valori insieme e marche 316 00:16:03,285 --> 00:16:05,870 veramente facile passare le cose intorno. 317 00:16:05,870 --> 00:16:09,270 Questo è quando un oggetto è in JavaScript. 318 00:16:09,270 --> 00:16:12,340 >> E 'importante ricordare quando dico che gli oggetti avvolti 319 00:16:12,340 --> 00:16:15,330 alcuni numero di valori insieme, che le funzioni sono anche 320 00:16:15,330 --> 00:16:21,506 valori, il che significa che le funzioni possono essere anche all'interno di un oggetto JavaScript. 321 00:16:21,506 --> 00:16:26,910 E la ragione per cui è importante è che, mentre noi spesso 322 00:16:26,910 --> 00:16:30,290 pensare di chiamare un metodo su un oggetto che è 323 00:16:30,290 --> 00:16:35,200 di un termine popolare da altri linguaggi orientati agli oggetti popolari, 324 00:16:35,200 --> 00:16:39,330 una delle differenze qui è che tutto ciò che un metodo è in JavaScript 325 00:16:39,330 --> 00:16:47,270 è un valore memorizzato all'interno di un oggetto che esegue alcuni Action-- forse 326 00:16:47,270 --> 00:16:51,850 utilizzando gli altri valori che si trovano all'interno di tale oggetto, ma non necessariamente. 327 00:16:51,850 --> 00:16:56,930 Così si può immaginare una situazione, indovinate un po 'di un modo pazzesco, 328 00:16:56,930 --> 00:17:02,990 dove hai chiamato un metodo di uno oggetto su un altro oggetto, per esempio. 329 00:17:02,990 --> 00:17:06,010 Quindi, è un po 'funky in quel modo. 330 00:17:06,010 --> 00:17:09,369 >> E si può anche modificare i metodi che sono associati con un oggetto 331 00:17:09,369 --> 00:17:13,740 assegnando il metodo un nuova funzione, che è anche 332 00:17:13,740 --> 00:17:18,250 piuttosto diverso dagli altri linguaggi orientati agli oggetti, dove 333 00:17:18,250 --> 00:17:21,410 una volta che si dichiara un oggetto e un'istanza, 334 00:17:21,410 --> 00:17:25,839 non possiamo cambiare i metodi che sono associata a tale oggetto più. 335 00:17:25,839 --> 00:17:28,680 Ecco, questo è molto diverso. 336 00:17:28,680 --> 00:17:29,570 Raffreddare. 337 00:17:29,570 --> 00:17:34,010 >> Quindi, ecco un esempio, prima, di un oggetto in azione. 338 00:17:34,010 --> 00:17:36,390 Questo è ciò che si chiama un oggetto generico, che 339 00:17:36,390 --> 00:17:39,460 significa che non ha alcuna particolare nome, non ha una classe, 340 00:17:39,460 --> 00:17:42,190 è solo alcuni valori di avvolgimento. 341 00:17:42,190 --> 00:17:49,790 E il modo in cui appare è, abbiamo questa coppia esterna di ricci bretelle qui 342 00:17:49,790 --> 00:17:57,950 che indicano a JavaScript e dire, si tratta di un oggetto. 343 00:17:57,950 --> 00:18:02,130 I valori all'interno di esso sono ogni valore all'interno 344 00:18:02,130 --> 00:18:04,590 dell'oggetto che dovrebbe essere avvolti insieme. 345 00:18:04,590 --> 00:18:09,180 E all'interno di tale oggetto, abbiamo poi coppie di valori chiave, 346 00:18:09,180 --> 00:18:13,880 dove la chiave si riferisce al nome del valore all'interno dell'oggetto, 347 00:18:13,880 --> 00:18:16,790 e l'altro side-- di fronte al qui-- colon 348 00:18:16,790 --> 00:18:19,850 è il valore effettivo che devono essere conservati. 349 00:18:19,850 --> 00:18:26,210 >> Quindi vedete qui che abbiamo un chiave denominata fn con valore sam, 350 00:18:26,210 --> 00:18:29,430 seguito da una virgola, dicendo che sulla voce successiva. 351 00:18:29,430 --> 00:18:33,560 Poi una chiave denominata ln, con un valore di verde, 352 00:18:33,560 --> 00:18:35,840 seguito da una virgola, seguito da "stampa" 353 00:18:35,840 --> 00:18:43,209 che sta per avere un valore di funzione che sta per fare questa riga di codice. 354 00:18:43,209 --> 00:18:45,500 Facciamo un passo indietro e disfare quello che sta succedendo qui. 355 00:18:45,500 --> 00:18:47,280 Quindi questo è un po 'complicato, e stiamo vedendo qualcosa di nuovo 356 00:18:47,280 --> 00:18:48,071 per la prima volta. 357 00:18:48,071 --> 00:18:51,190 358 00:18:51,190 --> 00:18:55,065 Il "questo" parola chiave è la cosa nuova stiamo vedendo qui, e ciò che fa 359 00:18:55,065 --> 00:19:00,540 è, si riferisce alla corrente opporsi portata, giusto? 360 00:19:00,540 --> 00:19:03,990 Così, quando diciamo, questo punti per tutto il tragitto 361 00:19:03,990 --> 00:19:08,140 per l'intero object-- quando facciamo this.fn, 362 00:19:08,140 --> 00:19:11,990 abbiamo intenzione di andare fino in fondo schiena a questo oggetto, passare al valore fn 363 00:19:11,990 --> 00:19:16,471 e ottenere sam, tirarlo fino in fondo indietro, bastone qui, e poi andare avanti. 364 00:19:16,471 --> 00:19:19,838 >> PUBBLICO: Quindi, con il recupero, è quello fatto causa del parametro 365 00:19:19,838 --> 00:19:20,621 definizione? 366 00:19:20,621 --> 00:19:23,870 Sam Green: Quindi la domanda era, è il recupero fatto perché del parametro 367 00:19:23,870 --> 00:19:24,727 definizione? 368 00:19:24,727 --> 00:19:25,435 Sì, assolutamente. 369 00:19:25,435 --> 00:19:29,660 370 00:19:29,660 --> 00:19:32,470 Che cosa succederà qui è, questo punto dice al JavaScript, 371 00:19:32,470 --> 00:19:39,990 Ok, sto diventando un certo valore da questo oggetto da me stesso. 372 00:19:39,990 --> 00:19:46,375 E poi guarderò per una voce chiamato fn, e se lo trova, 373 00:19:46,375 --> 00:19:48,470 si tornerà che value-- così, è sam. 374 00:19:48,470 --> 00:19:51,540 Ma potrei anche aver digitato qualcosa che non era definito qui, 375 00:19:51,540 --> 00:19:54,090 e allora sarebbe solo tornare undefined-- che 376 00:19:54,090 --> 00:19:58,250 è una cosa che JavaScript può fare, che può avere benefici, 377 00:19:58,250 --> 00:20:03,190 ma è also-- se si commette un errore di battitura, esso può causare errori strani. 378 00:20:03,190 --> 00:20:05,617 Quindi sarà solo cercare di trovare qualunque cosa gli si dice di trovare 379 00:20:05,617 --> 00:20:07,700 e non sta andando a lamentarsi se non lo trova. 380 00:20:07,700 --> 00:20:11,390 Sarà solo dire, non l'ho fatto trovarlo, e poi andare avanti. 381 00:20:11,390 --> 00:20:17,581 Quindi sarebbe essere indefinito, più vuota, più il cognome. 382 00:20:17,581 --> 00:20:18,080 Già. 383 00:20:18,080 --> 00:20:21,070 E allora possiamo vedere che se noi potrebbe poi scendere e access-- 384 00:20:21,070 --> 00:20:25,450 e chiamiamo tf.print () con parentesi. 385 00:20:25,450 --> 00:20:30,000 Sta andando a chiamare quella stampa funzione senza argomenti, giusto? 386 00:20:30,000 --> 00:20:34,490 Ma se abbiamo appena detto tf.print () virgola, senza le parentesi, 387 00:20:34,490 --> 00:20:37,480 tutto quello che avrebbe fatto è tirare la funzione dal valore, 388 00:20:37,480 --> 00:20:40,609 ma non effettivamente chiamato. 389 00:20:40,609 --> 00:20:41,162 Raffreddare. 390 00:20:41,162 --> 00:20:42,870 HUGH ZABRISKIE: Dovrebbe facciamo un oggetto? 391 00:20:42,870 --> 00:20:44,161 Sam Green: Certo, facciamo quello. 392 00:20:44,161 --> 00:20:48,750 Così posso spostare questo esempio per la console. 393 00:20:48,750 --> 00:20:51,380 394 00:20:51,380 --> 00:20:55,466 Possiamo immaginare che ho un oggetto. 395 00:20:55,466 --> 00:21:03,026 396 00:21:03,026 --> 00:21:04,150 Quindi questo è un oggetto semplice. 397 00:21:04,150 --> 00:21:06,910 398 00:21:06,910 --> 00:21:11,050 Questo è un oggetto che contiene due valori con due chiavi, due valori chiave 399 00:21:11,050 --> 00:21:12,710 coppie. 400 00:21:12,710 --> 00:21:21,850 Così posso quindi accedere al valore memorizzato all'interno di questo oggetto facendo x.x1, 401 00:21:21,850 --> 00:21:23,400 per esempio, e ottengo uno indietro. 402 00:21:23,400 --> 00:21:29,590 Allo stesso modo, x.x2, ottenere che il valore indietro. 403 00:21:29,590 --> 00:21:33,330 >> E ora la cosa veramente interessante è, posso effettivamente aggiungere qualcosa a questo oggetto 404 00:21:33,330 --> 00:21:34,316 dopo che ho creato io. 405 00:21:34,316 --> 00:21:36,315 Quindi potete immaginare, diamo dire che ho una funzione. 406 00:21:36,315 --> 00:21:44,430 407 00:21:44,430 --> 00:21:46,352 >> HUGH ZABRISKIE: Si hanno a che fare Maiusc-Invio. 408 00:21:46,352 --> 00:21:47,643 >> Sam Green: Oh, questo è fastidioso. 409 00:21:47,643 --> 00:22:02,460 410 00:22:02,460 --> 00:22:04,324 Che cosa non piace? 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 Eccoci qui. 414 00:22:08,691 --> 00:22:09,190 Raffreddare. 415 00:22:09,190 --> 00:22:12,840 >> Così ho appena creato questa funzione, f, che 416 00:22:12,840 --> 00:22:17,590 sta per andare alla corrente oggetto e stampa this.x1. 417 00:22:17,590 --> 00:22:20,330 Quindi, se mi basta chiamare da f sé, niente sta andando 418 00:22:20,330 --> 00:22:26,970 ad accadere, a destra, perché non c'è x1 campo dell'oggetto, esso si riferisce a. 419 00:22:26,970 --> 00:22:39,710 Ma, se io dico, x.f = f, e poi io chiamare x.f (), ho intenzione di tornare indietro uno. 420 00:22:39,710 --> 00:22:42,990 421 00:22:42,990 --> 00:22:46,530 Tale funzione f è ora associato all'oggetto x, 422 00:22:46,530 --> 00:22:51,800 che ha una chiave denominata x1 associata al valore 1, 423 00:22:51,800 --> 00:22:54,570 così quando chiamiamo this.x1, è andando a trovare ciò che sta cercando 424 00:22:54,570 --> 00:22:56,450 ed essere in grado di stampare su un valore. 425 00:22:56,450 --> 00:22:58,700 Ecco, questo è solo un esempio di tipo delle cose folli 426 00:22:58,700 --> 00:23:01,190 si può fare con gli oggetti in JavaScript. 427 00:23:01,190 --> 00:23:03,870 428 00:23:03,870 --> 00:23:07,560 >> Così che la versione era versione generica, significato 429 00:23:07,560 --> 00:23:13,780 che abbiamo creato un oggetto utilizzando questo parentesi notazione brace notation--, 430 00:23:13,780 --> 00:23:16,880 rather-- e questo è utile se vogliamo solo 431 00:23:16,880 --> 00:23:21,440 una istanza di un oggetto particolare, ma quello che se vogliamo avere più di una 432 00:23:21,440 --> 00:23:22,210 dello stesso tipo? 433 00:23:22,210 --> 00:23:24,440 E la risposta a questa domanda è, ci sono cose 434 00:23:24,440 --> 00:23:26,760 chiamato classi in JavaScript pure. 435 00:23:26,760 --> 00:23:31,470 436 00:23:31,470 --> 00:23:36,420 Possiamo creare una funzione che fa una sorta di inizializzazione 437 00:23:36,420 --> 00:23:41,690 per un oggetto estraneo, e diremmo, come, 438 00:23:41,690 --> 00:23:44,550 il mio class-- così il nome del object-- riutilizzabile 439 00:23:44,550 --> 00:23:47,100 uguale funzione che imposta lo compongono. 440 00:23:47,100 --> 00:23:52,280 Così che cosa questo sarebbe equivalente a è la creazione di un oggetto che 441 00:23:52,280 --> 00:23:55,930 sarebbe proprio come, parentesi graffa, str, colon, 442 00:23:55,930 --> 00:23:59,630 questo è una stringa, virgola, parentesi graffa. 443 00:23:59,630 --> 00:24:01,880 Questa sarebbe la generica oggetto si inizializza, 444 00:24:01,880 --> 00:24:06,380 con l'unica differenza essendo sulla righe successive creiamo un prototipo, che 445 00:24:06,380 --> 00:24:11,190 significa che è un tasto predefinito che aggiungiamo al nostro oggetto che 446 00:24:11,190 --> 00:24:13,970 ha il valore elencati qui. 447 00:24:13,970 --> 00:24:20,570 Il che significa che, quando creo un nuovo istanza di questo oggetto MyClass, 448 00:24:20,570 --> 00:24:27,440 sta andando a hanno pre-costruito all'interno di un valore chiamato str e un altro valore 449 00:24:27,440 --> 00:24:32,418 chiamato MyPrint, che è andare a una funzione. 450 00:24:32,418 --> 00:24:32,918 Eccezionale. 451 00:24:32,918 --> 00:24:37,410 452 00:24:37,410 --> 00:24:37,990 >> Grande. 453 00:24:37,990 --> 00:24:40,710 Quindi l'ultima cosa da dire su JavaScript 454 00:24:40,710 --> 00:24:46,430 è che è molto utile per quello sono chiamati operazioni asincrone. 455 00:24:46,430 --> 00:24:52,500 Significa asincrono è che noi può attendere per qualche operazione 456 00:24:52,500 --> 00:24:57,870 per completare prima di passare su, ma andare avanti mentre aspettiamo 457 00:24:57,870 --> 00:24:59,690 e poi hanno qualcosa accada in seguito. 458 00:24:59,690 --> 00:25:03,480 E quello che voglio dire con questo è, si può immaginare una situazione in cui 459 00:25:03,480 --> 00:25:06,850 si invia una richiesta di alcuni web server da qualche parte, 460 00:25:06,850 --> 00:25:09,670 e sta andando a inviare indietro qualche grande blocco di dati, giusto? 461 00:25:09,670 --> 00:25:13,320 E il tuo utente potrebbe aspettare in Intanto per quel che accada, 462 00:25:13,320 --> 00:25:15,200 e niente potrebbe essere in corso in quel momento. 463 00:25:15,200 --> 00:25:18,110 Ma questo non è un grande disegno, giusto? 464 00:25:18,110 --> 00:25:20,214 Tu non vuoi la pagina web di congelare. 465 00:25:20,214 --> 00:25:22,380 Che cosa succede se l'utente vuole cliccare su un menu a discesa? 466 00:25:22,380 --> 00:25:24,870 Non è un grande modello di progettazione. 467 00:25:24,870 --> 00:25:29,290 Invece, in fondo ciò che JavaScript non è, dice, 468 00:25:29,290 --> 00:25:31,870 OK, fare questa operazione in modo asincrono. 469 00:25:31,870 --> 00:25:36,520 Così come, aspettare in fondo, e poi, quando l'operazione viene effettuata, 470 00:25:36,520 --> 00:25:39,420 chiamare la callback function-- chiamare qualche funzione, 471 00:25:39,420 --> 00:25:43,800 Fare qualche Action-- per segnalare che il operazione stavamo aspettando per terminare 472 00:25:43,800 --> 00:25:45,520 è finita. 473 00:25:45,520 --> 00:25:51,240 E la ragione per cui è super potente è, possiamo fare qualcosa, passare un argomento, 474 00:25:51,240 --> 00:25:54,440 fare qualcosa, e poi attendere che succedesse qualcosa. 475 00:25:54,440 --> 00:25:58,970 Poi, una volta che qualcosa complètes, possiamo chiamare un callback. 476 00:25:58,970 --> 00:26:03,300 Questo è davvero comodo perché lascia a fare le cose con API Web Audio, 477 00:26:03,300 --> 00:26:07,490 per esempio, come un carico file audio da un server remoto 478 00:26:07,490 --> 00:26:11,660 senza dover attendere la tutto il file audio da caricare, 479 00:26:11,660 --> 00:26:14,440 il che sarebbe davvero male per l'esperienza degli utenti. 480 00:26:14,440 --> 00:26:17,080 Raffreddare. 481 00:26:17,080 --> 00:26:19,460 >> Ultima coppia note su debugging, poiché questo 482 00:26:19,460 --> 00:26:23,682 è una cosa che si sta andando ad avere a che fare come parte del progetto, garantito. 483 00:26:23,682 --> 00:26:25,140 Ho accennato la console JavaScript. 484 00:26:25,140 --> 00:26:27,550 Si tratta di una funzione super utile di tutti i browser moderni, 485 00:26:27,550 --> 00:26:30,300 E abbiamo davvero ti consigliamo di ottenere agio con la console, 486 00:26:30,300 --> 00:26:33,660 se si vuole ottenere buoni JavaScript. 487 00:26:33,660 --> 00:26:36,320 E 'super utile per debugging, ma è anche 488 00:26:36,320 --> 00:26:39,440 davvero utile per capire il modo di usare un'API. 489 00:26:39,440 --> 00:26:41,950 Esso permette davvero facile sperimentazione 490 00:26:41,950 --> 00:26:45,910 senza dover digitare un po ' codice, e quindi compilarlo. 491 00:26:45,910 --> 00:26:47,500 Non è necessario fare tutti questi passaggi. 492 00:26:47,500 --> 00:26:49,619 Si può solo scrivere codice in una linea, 493 00:26:49,619 --> 00:26:52,410 e quindi ottenere un feedback immediato su se tale linea di codice o meno 494 00:26:52,410 --> 00:26:55,230 worked-- molto utile. 495 00:26:55,230 --> 00:26:59,760 >> E anche, solo un note-- tecnico la console JavaScript è un esempio 496 00:26:59,760 --> 00:27:05,680 di un REPL-- così che è R-E-P-L, REPL, che sta per leggere, valutare, 497 00:27:05,680 --> 00:27:06,180 ciclo di stampa. 498 00:27:06,180 --> 00:27:09,100 499 00:27:09,100 --> 00:27:12,120 Stai andando a digitare alcune cose in, che sarà leggere quello che hai digitato, 500 00:27:12,120 --> 00:27:17,280 che sarà valutare, e che sarà la stampa uscita, e poi inizierà di nuovo. 501 00:27:17,280 --> 00:27:22,056 Che ti permette di andare rapidamente a cerchi iterazione, che è davvero cool. 502 00:27:22,056 --> 00:27:25,150 503 00:27:25,150 --> 00:27:28,930 >> Credo che l'ultima vera note-- questo è l'ultima nota vero, sì. 504 00:27:28,930 --> 00:27:30,780 Come possiamo effettivamente utilizzare JavaScript? 505 00:27:30,780 --> 00:27:34,040 Quindi, prima, possiamo importare utilizzando un tag script 506 00:27:34,040 --> 00:27:39,500 nella parte superiore o inferiore di un HTML file-- ovunque all'interno di un file HTML, 507 00:27:39,500 --> 00:27:40,440 davvero. 508 00:27:40,440 --> 00:27:47,390 E all'interno di un tag script, ci sono due sotto-modalità di importazione JavaScript. 509 00:27:47,390 --> 00:27:51,370 La prima è di avere un file JavaScript separato 510 00:27:51,370 --> 00:27:58,010 che importiamo nella sua interezza, o avendo un'area di codice come scritto 511 00:27:58,010 --> 00:28:00,290 per iniziare, e poi sceneggiatura backslash alla fine. 512 00:28:00,290 --> 00:28:02,620 E poi abbiamo appena scriviamo Javascript all'interno del file HTML. 513 00:28:02,620 --> 00:28:03,790 Questi sono i due modi. 514 00:28:03,790 --> 00:28:05,165 Non si può avere all'interno di HTML. 515 00:28:05,165 --> 00:28:06,502 516 00:28:06,502 --> 00:28:08,126 PUBBLICO: È uno migliore dell'altro? 517 00:28:08,126 --> 00:28:10,542 Sam Green: La domanda era: è uno meglio dell'altro. 518 00:28:10,542 --> 00:28:18,306 Quindi, sì, come pratica stile di codifica, e anche è come una pratica di progettazione. 519 00:28:18,306 --> 00:28:20,180 Ci sono due ragioni il motivo per cui potrebbe essere migliore. 520 00:28:20,180 --> 00:28:23,934 Il primo è, rende il codice un molto più leggibile se tutti del codice HTML 521 00:28:23,934 --> 00:28:27,100 è in un unico luogo, tutto il vostro CSS è a un altro luogo, tutto il vostro JavaScript 522 00:28:27,100 --> 00:28:28,420 è in un terzo posto. 523 00:28:28,420 --> 00:28:28,920 Destra? 524 00:28:28,920 --> 00:28:32,370 Credo che dovremmo già parlato a questo proposito in sections-- come CSS-- cosa 525 00:28:32,370 --> 00:28:35,220 che è-- e va spesso in un altro file. 526 00:28:35,220 --> 00:28:37,090 Così, simile tipo di concetto qui. 527 00:28:37,090 --> 00:28:42,410 Si può anche immaginare che Javascript sarebbe riutilizzato su più 528 00:28:42,410 --> 00:28:47,350 Pagina HTML, o forse un gran numero di pagine HTML, 529 00:28:47,350 --> 00:28:49,340 e avere quella JavaScript refactoring in uno 530 00:28:49,340 --> 00:28:51,950 file che è possibile importare in più di un luogo 531 00:28:51,950 --> 00:28:54,570 permette il codice sia modo più gestibile. 532 00:28:54,570 --> 00:28:57,930 Si può immaginare di fare un cambiare il codice JavaScript 533 00:28:57,930 --> 00:29:00,070 e di dover modificarlo in 100 diversi file. 534 00:29:00,070 --> 00:29:04,070 E invece possiamo semplicemente cambiare in uno, che è molto più potente. 535 00:29:04,070 --> 00:29:05,420 Ho risposto alla tua domanda? 536 00:29:05,420 --> 00:29:07,950 Raffreddare. 537 00:29:07,950 --> 00:29:10,830 >> Possiamo anche digitare nella console, come abbiamo detto prima. 538 00:29:10,830 --> 00:29:15,070 E ancora, un ultimo note-- Web audio è integrato, 539 00:29:15,070 --> 00:29:16,978 non c'è bisogno di caricare qualsiasi cosa. 540 00:29:16,978 --> 00:29:17,478 Raffreddare. 541 00:29:17,478 --> 00:29:20,519 Ci sono domande, avete qualsiasi altre domande su JavaScript, 542 00:29:20,519 --> 00:29:21,930 prima di passare? 543 00:29:21,930 --> 00:29:24,286 >> PUBBLICO: [incomprensibile] 544 00:29:24,286 --> 00:29:25,410 Sam Green: Va bene, fresco. 545 00:29:25,410 --> 00:29:27,200 Così ora ha intenzione di parlare l'API. 546 00:29:27,200 --> 00:29:28,490 >> HUGH ZABRISKIE: Freddo. 547 00:29:28,490 --> 00:29:28,990 Grazie, Sam. 548 00:29:28,990 --> 00:29:30,184 >> Sam Green: Certo. 549 00:29:30,184 --> 00:29:32,600 HUGH ZABRISKIE: Awesome, così ci sposteremo da JavaScript. 550 00:29:32,600 --> 00:29:35,350 Così abbiamo parlato di alcune delle gli elementi essenziali di JavaScript, 551 00:29:35,350 --> 00:29:41,105 e queste sono le variabili, le funzioni, oggetti, funzioni come variabili, 552 00:29:41,105 --> 00:29:41,980 caricamento asincrono. 553 00:29:41,980 --> 00:29:46,100 Queste sono tutte cose che ti vedere come si utilizza il Web Audio. 554 00:29:46,100 --> 00:29:49,230 Quindi stiamo solo andando a parlare su di esso prima ad un livello elevato. 555 00:29:49,230 --> 00:29:52,120 >> Si tratta di una API, quindi è qualcosa che è costruito, come ha detto Sam, 556 00:29:52,120 --> 00:29:57,010 a destra in JavaScript che si utilizza nella console. 557 00:29:57,010 --> 00:30:01,020 E in realtà è proprio come codice C ++ Questo è davvero costruito in Chrome 558 00:30:01,020 --> 00:30:04,470 e Firefox, e tutti questi browser. 559 00:30:04,470 --> 00:30:07,060 Così l'idea principale con il Web Audio è che avete 560 00:30:07,060 --> 00:30:09,440 questo tipo di conduttura di audio, giusto? 561 00:30:09,440 --> 00:30:13,670 Quindi, i dati audio viene in qualche forma. 562 00:30:13,670 --> 00:30:16,690 >> Ci sono tre tipi di forms-- principale avete l'oscillatore, che 563 00:30:16,690 --> 00:30:21,340 crea una sinusoide, onda coseno stiamo andando a vedere come funziona. 564 00:30:21,340 --> 00:30:23,890 Un altro molto comune, Naturalmente, è un MP3. 565 00:30:23,890 --> 00:30:25,810 Così forse si inizia con una canzone, e poi si 566 00:30:25,810 --> 00:30:28,320 voglia di fare un po 'di filtraggio a tale uscita e 567 00:30:28,320 --> 00:30:30,605 che-- che potrebbe essere una possibile fonte. 568 00:30:30,605 --> 00:30:32,480 E poi una davvero cool uno è il microfono. 569 00:30:32,480 --> 00:30:37,230 Quindi è possibile utilizzare alcuni molto chiamate di base in JavaScript 570 00:30:37,230 --> 00:30:39,440 per ottenere l'accesso al microfono, e quindi se si 571 00:30:39,440 --> 00:30:42,870 voluto fare un app come un rilevatore di campo, 572 00:30:42,870 --> 00:30:45,290 per esempio, che prende in la tua voce e dati fuori 573 00:30:45,290 --> 00:30:47,740 il pitch-- modo molto semplice per questo. 574 00:30:47,740 --> 00:30:50,730 Si può solo tipo di leggerlo in, a capire la frequenza, 575 00:30:50,730 --> 00:30:52,250 e quindi un numero di uscita. 576 00:30:52,250 --> 00:30:56,080 Quindi vedremo come funziona, pure. 577 00:30:56,080 --> 00:30:59,430 >> La destinazione è fondamentalmente dove i dati audio viene emesso. 578 00:30:59,430 --> 00:31:02,890 Quindi in generale, che è come gli altoparlanti del computer portatile. 579 00:31:02,890 --> 00:31:05,610 Altre opzioni sono come un ScriptProcessorNode-- 580 00:31:05,610 --> 00:31:07,990 ci arriveremo nodi in un secondo-- ma in fondo, 581 00:31:07,990 --> 00:31:11,939 o si sta mettendo fuori il suono attraverso il computer attraverso gli altoparlanti, 582 00:31:11,939 --> 00:31:14,730 o che cerchiate un tipo di registrazione, in modo sei memorizzare come dati audio. 583 00:31:14,730 --> 00:31:18,980 Così forse se qualcuno crea musica nella vostra applicazione e quindi 584 00:31:18,980 --> 00:31:22,410 si desidera registrare e che forse come esportarla in SoundCloud, per example-- 585 00:31:22,410 --> 00:31:25,281 che sarebbe un modo per farlo. 586 00:31:25,281 --> 00:31:27,030 Tutte le cose divertenti, che parleremo, 587 00:31:27,030 --> 00:31:29,950 succede tra questi due punti, dove carichiamo nella musica 588 00:31:29,950 --> 00:31:31,410 e poi output. 589 00:31:31,410 --> 00:31:36,660 >> Quindi ho intenzione di parlare di cinque fasi di produzione audio in un secondo. 590 00:31:36,660 --> 00:31:38,950 Abbiamo questa cosa chiamata un AudioContext, che 591 00:31:38,950 --> 00:31:41,580 è questo piccolo involucro che vediamo qui. 592 00:31:41,580 --> 00:31:49,980 Fondamentalmente quello AudioContext è-- se andare alla console JavaScript in questo momento, 593 00:31:49,980 --> 00:31:52,740 siamo in grado di crearne uno proprio ora. 594 00:31:52,740 --> 00:31:54,040 Solo un esempio di REPL, giusto? 595 00:31:54,040 --> 00:31:57,880 Noi stiamo leggendo, la valutazione, e la stampa. 596 00:31:57,880 --> 00:32:00,260 >> AudioContext è uno stato globale. 597 00:32:00,260 --> 00:32:05,500 E 'una struttura, è un oggetto qui, e mantiene le informazioni 598 00:32:05,500 --> 00:32:09,960 di cose che sono in corso sullo schermo relative a audio. 599 00:32:09,960 --> 00:32:15,220 Un esempio è l'ora corrente. 600 00:32:15,220 --> 00:32:18,910 Questo indica il numero di secondi, con estrema precisione, 601 00:32:18,910 --> 00:32:20,890 Dato che la pagina web caricata. 602 00:32:20,890 --> 00:32:24,110 Quindi questo è un davvero utile piccola proprietà che è possibile utilizzare. 603 00:32:24,110 --> 00:32:27,898 E ha letto only-- penso in realtà si può provare a impostare un valore. 604 00:32:27,898 --> 00:32:29,856 Essa vi dirà imposta, e poi se si stampa 605 00:32:29,856 --> 00:32:31,439 again-- non ha in realtà funzionato. 606 00:32:31,439 --> 00:32:34,472 Quindi ci sono di sola lettura immobili a JavaScript. 607 00:32:34,472 --> 00:32:36,430 Questo è veramente utile se stai tipo di sincronizzazione 608 00:32:36,430 --> 00:32:38,610 un lotto di diverso informazioni, quando si è 609 00:32:38,610 --> 00:32:41,280 tipo di riproduzione di suoni diversi. 610 00:32:41,280 --> 00:32:43,630 >> Un altro veramente utile è la destinazione contesto. 611 00:32:43,630 --> 00:32:46,587 612 00:32:46,587 --> 00:32:49,670 Sicuramente, se siete interessati, essere provare questo a proprio destra della console 613 00:32:49,670 --> 00:32:50,980 adesso. 614 00:32:50,980 --> 00:32:53,150 Quindi questo è un AudioDestinationNode. 615 00:32:53,150 --> 00:32:56,480 Fondamentalmente ciò che questo dice è, dove è l'uscita andando? 616 00:32:56,480 --> 00:32:59,590 Quindi ci sono due opzioni reali qui. 617 00:32:59,590 --> 00:33:01,940 Di solito il default è a soli altoparlanti, 618 00:33:01,940 --> 00:33:05,150 così AudioDestinationNode fondamentalmente dice basta 619 00:33:05,150 --> 00:33:09,240 ci sono zero uscite al suono in arrivo, ha inviato al diffusore. 620 00:33:09,240 --> 00:33:12,050 Quindi in generale, non è necessario deve giocare con questo. 621 00:33:12,050 --> 00:33:15,720 Se siete interessati ad utilizzare effettivamente il ScriptProcessorNode per la registrazione, 622 00:33:15,720 --> 00:33:16,990 sicuramente mi spara un e-mail più tardi perché questo è 623 00:33:16,990 --> 00:33:18,330 un po 'più complicato. 624 00:33:18,330 --> 00:33:21,590 Ma in generale, sei solo tipo di emettere suono in qualche forma. 625 00:33:21,590 --> 00:33:24,347 Così fresco, ci saltiamo di nuovo qui. 626 00:33:24,347 --> 00:33:25,180 PUBBLICO: Mi dispiace. 627 00:33:25,180 --> 00:33:26,054 HUGH ZABRISKIE: Sì. 628 00:33:26,054 --> 00:33:28,770 PUBBLICO: So che hai detto di parlare a più tardi sulla registrazione. 629 00:33:28,770 --> 00:33:31,550 Si può interfacciarsi che con Pro Tools? 630 00:33:31,550 --> 00:33:33,120 >> HUGH ZABRISKIE: Con Pro Tools? 631 00:33:33,120 --> 00:33:35,260 Vediamo. 632 00:33:35,260 --> 00:33:37,220 Non ci penso. 633 00:33:37,220 --> 00:33:41,670 In modo da andare tra il cliente, che è il codice JavaScript 634 00:33:41,670 --> 00:33:44,310 console e il vostro attuale computer è generalmente 635 00:33:44,310 --> 00:33:46,490 qualcosa che è genere di off limits, se 636 00:33:46,490 --> 00:33:52,320 sarà, specie per la natura del the-- è una specie di una cosa disegno, 637 00:33:52,320 --> 00:33:57,770 ma si tenta di mantenere il browser separata dal computer effettivo dell'utente. 638 00:33:57,770 --> 00:34:02,310 In generale, l'unica cosa che siete in grado di accesso è il microfono o la fotocamera. 639 00:34:02,310 --> 00:34:04,730 Non sei in grado di, io non credo, utilizzare Pro Tools. 640 00:34:04,730 --> 00:34:07,480 Tuttavia, se è stato creato una traccia in Pro Tools, 641 00:34:07,480 --> 00:34:12,710 esportati che, si potrebbe caricare il qui, filtrare, ad esempio, 642 00:34:12,710 --> 00:34:16,820 tale processo, e registrare che in un Audio Destination-- o, no-- una sfera 643 00:34:16,820 --> 00:34:17,870 Nodo del processore. 644 00:34:17,870 --> 00:34:20,730 E poi da lì, si potrebbe esportare che a SoundCloud, voi 645 00:34:20,730 --> 00:34:25,320 potrebbe inviare in una e-mail, o quello che vuoi da lì. 646 00:34:25,320 --> 00:34:31,159 >> Ma vi è una specie di leggera barriera tra fare musica sul computer 647 00:34:31,159 --> 00:34:33,050 e fare musica on-line. 648 00:34:33,050 --> 00:34:37,940 >> Sam Green: E questo è non unico a questa API. 649 00:34:37,940 --> 00:34:44,060 Si tratta di una funzione di sicurezza di Chrome, e Penso che ogni altro browser moderno. 650 00:34:44,060 --> 00:34:45,860 Il browser è autosufficiente. 651 00:34:45,860 --> 00:34:50,980 Così, per esempio, una pagina web non può utilizzare JavaScript per trasformare il suono 652 00:34:50,980 --> 00:34:54,190 su gli altoparlanti, per esempio. 653 00:34:54,190 --> 00:34:58,120 O non è possibile spegnere il computer. 654 00:34:58,120 --> 00:35:01,530 E non esiste un punto intermedio tra queste due cose, a destra, 655 00:35:01,530 --> 00:35:05,960 quindi o si dispone di un completa astrazione, 656 00:35:05,960 --> 00:35:10,050 o si apre il falla di sicurezza di lasciare 657 00:35:10,050 --> 00:35:14,440 un programmatore con cattive intenzioni fare ciò che vogliono con il vostro portatile. 658 00:35:14,440 --> 00:35:18,104 Ed è per questo che Chrome è autosufficiente. 659 00:35:18,104 --> 00:35:19,310 >> HUGH ZABRISKIE: Sì. 660 00:35:19,310 --> 00:35:20,840 Questo fa senso? 661 00:35:20,840 --> 00:35:21,369 Bene bene. 662 00:35:21,369 --> 00:35:23,160 Stavo per mostrare un esempio di uno. 663 00:35:23,160 --> 00:35:25,118 Questo è più o meno come quanto si ottiene, in termini 664 00:35:25,118 --> 00:35:26,950 di accesso computer dell'utente. 665 00:35:26,950 --> 00:35:30,180 Se si dispone di una tastiera USB collegato, è possibile utilizzare qualcosa chiamato il Web 666 00:35:30,180 --> 00:35:32,180 API MIDI, che non lo faremo davvero parlare qui, 667 00:35:32,180 --> 00:35:36,330 ma questo è un altro che è API ricostruita in almeno Chrome--, 668 00:35:36,330 --> 00:35:41,570 è per questo che amiamo Chrome-- Penso Firefox o Safari, 669 00:35:41,570 --> 00:35:44,300 questa è una cosa facile da diversi browser hanno google-- 670 00:35:44,300 --> 00:35:46,917 supporto diverso per il quale API hanno implementato. 671 00:35:46,917 --> 00:35:49,875 Ma se si voleva collegare una tastiera e lavorare con queste informazioni, 672 00:35:49,875 --> 00:35:52,850 tipo di invio della tastiera Informazioni sopra al calcolatore 673 00:35:52,850 --> 00:35:57,620 e quindi utilizzare tale linea, questa API è dove ti piacerebbe lavorare così. 674 00:35:57,620 --> 00:35:58,150 >> Raffreddare. 675 00:35:58,150 --> 00:35:58,710 OK. 676 00:35:58,710 --> 00:36:01,320 Così, muovendosi rapidamente qui. 677 00:36:01,320 --> 00:36:03,310 Come stiamo facendo in tempo? 678 00:36:03,310 --> 00:36:04,210 >> SPEAKER 1: A proposito di 15. 679 00:36:04,210 --> 00:36:05,543 >> HUGH ZABRISKIE: 15 minuti di sinistra? 680 00:36:05,543 --> 00:36:06,160 Ok bello. 681 00:36:06,160 --> 00:36:08,170 Quindi dovremo gara d'anticipo qui. 682 00:36:08,170 --> 00:36:13,500 >> Quindi, in pratica, il principale punto di pensare a questo come una pipeline 683 00:36:13,500 --> 00:36:16,430 è che ogni passo in cantiere è una serie di nodi audio. 684 00:36:16,430 --> 00:36:19,284 685 00:36:19,284 --> 00:36:20,950 La nostra fonte, diciamo, è un oscillatore. 686 00:36:20,950 --> 00:36:23,380 Abbiamo bisogno di creare un nodo oscillatore. 687 00:36:23,380 --> 00:36:25,690 E questo è solo tipo del piccolo function-- 688 00:36:25,690 --> 00:36:30,460 e sono tutti basati su del contesto audio qui. 689 00:36:30,460 --> 00:36:32,885 >> PUBBLICO: Quando ha detto oscillatore, significa che 690 00:36:32,885 --> 00:36:37,250 in realtà è letteralmente passando da due poli differenti avanti e indietro? 691 00:36:37,250 --> 00:36:41,170 >> HUGH ZABRISKIE: No, è come una rappresentazione digitale. 692 00:36:41,170 --> 00:36:42,740 In realtà è implementato in C ++. 693 00:36:42,740 --> 00:36:46,460 Io in realtà non so le specifiche di come in realtà è implementato, 694 00:36:46,460 --> 00:36:48,500 ma tutto questo funziona come dati binari. 695 00:36:48,500 --> 00:36:51,260 696 00:36:51,260 --> 00:36:52,370 A dire il vero, sì. 697 00:36:52,370 --> 00:36:53,950 Questo sarebbe, ho potuto in realtà, se siete interessati, 698 00:36:53,950 --> 00:36:56,533 Potrei inviare un po 'di più Informazioni su come le forme d'onda 699 00:36:56,533 --> 00:37:00,181 sono mantenuti aventi un formato digitale. 700 00:37:00,181 --> 00:37:00,680 Ok bello. 701 00:37:00,680 --> 00:37:03,120 >> Quindi stiamo generando un tono come un seno onda o qualcosa di simile, forse 702 00:37:03,120 --> 00:37:04,190 440 Hertz. 703 00:37:04,190 --> 00:37:05,830 Creiamo un oscillatore. 704 00:37:05,830 --> 00:37:09,180 Se vogliamo impostare il volume, ci collegare nulla un GainNode, 705 00:37:09,180 --> 00:37:12,500 che potremmo fare con .creategain. 706 00:37:12,500 --> 00:37:14,250 Che imposta il volume. 707 00:37:14,250 --> 00:37:17,820 Si può passare che su qualsiasi dall'altra options-- bene, 708 00:37:17,820 --> 00:37:20,300 così una fonte del buffer audio nodo è dove si potrebbe 709 00:37:20,300 --> 00:37:23,660 memorizzare un MP3 che hai caricato in. 710 00:37:23,660 --> 00:37:27,670 >> Filtro Biquad è per il filtraggio se si vuole prendere tutto alla base fuori 711 00:37:27,670 --> 00:37:29,630 di una canzone, o qualcosa del genere. 712 00:37:29,630 --> 00:37:32,450 Dio non voglia che si vuole prendere la base di una canzone. 713 00:37:32,450 --> 00:37:36,980 E il nodo AudioDestination è, ancora una volta, come dove la nostra messa a punto è. 714 00:37:36,980 --> 00:37:39,980 Se siete mai interessati a vedere tutte le diverse opzioni possibili, 715 00:37:39,980 --> 00:37:45,190 basta andare alla scheda e lasciare il completamento automatico venire. 716 00:37:45,190 --> 00:37:48,690 E se si crea, si vedrà tutto il cose diverse che si possono creare. 717 00:37:48,690 --> 00:37:50,398 È possibile creare dinamico processori di script, 718 00:37:50,398 --> 00:37:52,940 Io non so nemmeno cosa che è, per la miscelazione fusioni di canale 719 00:37:52,940 --> 00:37:55,930 e splitter canale e tutto il resto. 720 00:37:55,930 --> 00:37:56,430 Raffreddare. 721 00:37:56,430 --> 00:37:59,560 722 00:37:59,560 --> 00:38:01,390 >> Quindi questo è solo un esempio di una condotta. 723 00:38:01,390 --> 00:38:03,580 Così abbiamo tre fonti in arrivo. 724 00:38:03,580 --> 00:38:06,830 Forse si tratta di forme d'onda, forse si tratta di MP3. 725 00:38:06,830 --> 00:38:08,740 Uno sta andando attraverso un filtro, un altro di 726 00:38:08,740 --> 00:38:12,404 ottenendo distorto un'altra uno di panning a destra ea sinistra. 727 00:38:12,404 --> 00:38:15,320 Si può fare ogni sorta di cose e tutti si mescolano in giro insieme, 728 00:38:15,320 --> 00:38:18,880 e poi esce l'audio alla fine, come destinazione. 729 00:38:18,880 --> 00:38:22,720 Questo è un esempio di ciò che più complicato codice Web Audio assomiglia. 730 00:38:22,720 --> 00:38:26,720 Si sta creando tutti questi diversi oggetti destra qui-- 731 00:38:26,720 --> 00:38:27,706 Non sono sicuro di questo. 732 00:38:27,706 --> 00:38:29,120 No, non zoomare. 733 00:38:29,120 --> 00:38:29,620 OK. 734 00:38:29,620 --> 00:38:31,257 >> Sam Green: Tu fai di controllo, Scroll-up. 735 00:38:31,257 --> 00:38:32,590 HUGH ZABRISKIE: Controllo Scroll-- 736 00:38:32,590 --> 00:38:33,000 Sam Green: No, no. 737 00:38:33,000 --> 00:38:33,500 Controllo-- 738 00:38:33,500 --> 00:38:36,540 739 00:38:36,540 --> 00:38:38,140 >> HUGH ZABRISKIE: Oh, controllo, Scroll? 740 00:38:38,140 --> 00:38:38,780 Oh, Gotcha. 741 00:38:38,780 --> 00:38:41,480 Già. 742 00:38:41,480 --> 00:38:42,240 Wow, no, no. 743 00:38:42,240 --> 00:38:42,740 OK. 744 00:38:42,740 --> 00:38:46,090 Io non lo farò. 745 00:38:46,090 --> 00:38:48,300 >> Quindi sì, in questo primo sezione qui, si vede 746 00:38:48,300 --> 00:38:52,720 stiamo creando tutti questi diversi nodi fuori del contesto. 747 00:38:52,720 --> 00:38:54,980 Stiamo solo mettendo loro insieme nella seconda parte 748 00:38:54,980 --> 00:38:56,980 da questa funzione denominata Connect. 749 00:38:56,980 --> 00:38:58,830 Questa è davvero una chiave funzione in Web Audio. 750 00:38:58,830 --> 00:39:01,930 Significa solo una volta che hai fatto qualcosa con il suono in un nodo, 751 00:39:01,930 --> 00:39:03,705 passarlo al nodo successivo. 752 00:39:03,705 --> 00:39:05,830 Così abbiamo la fonte, si collega all'analizzatore, 753 00:39:05,830 --> 00:39:09,140 l'analizzatore fa qualcosa con esso, va a distorsione, e così via, 754 00:39:09,140 --> 00:39:12,725 e alla destinazione in basso a destra qui. 755 00:39:12,725 --> 00:39:13,225 Raffreddare. 756 00:39:13,225 --> 00:39:14,640 OK, così continueremo andare avanti. 757 00:39:14,640 --> 00:39:17,180 >> Il nuovo pipeline--, questi sono pipeline più comuni, 758 00:39:17,180 --> 00:39:21,300 così si parla di tutte queste cose come distorsione, panning, tutta questa roba. 759 00:39:21,300 --> 00:39:24,280 Se siete veramente interessati nell'uso cose Pro Tools, 760 00:39:24,280 --> 00:39:25,820 quelli probabilmente interessano. 761 00:39:25,820 --> 00:39:27,740 Se non, forse basta vuole riprodurre il suono, 762 00:39:27,740 --> 00:39:29,990 o forse volete solo impostare il volume sul suono. 763 00:39:29,990 --> 00:39:35,270 Questi sono i due tipo più comune di tubazioni nella produzione audio. 764 00:39:35,270 --> 00:39:38,640 >> Anche in questo caso, i modi in cui può prendere in quanto oscillator-- così, cerchiamo di 765 00:39:38,640 --> 00:39:42,460 fare una demo di questo diritto qui. 766 00:39:42,460 --> 00:39:47,090 767 00:39:47,090 --> 00:39:52,225 Quindi stiamo andando a creare un semplice contesto audio qui, 768 00:39:52,225 --> 00:39:54,350 e da che stiamo andando per creare la nostra oscillatore. 769 00:39:54,350 --> 00:39:58,620 In modo che sia, ancora una volta, siamo solo chiamerà Creare Oscillator. 770 00:39:58,620 --> 00:40:07,030 Stiamo andando a impostare una frequenza su che, 440 Hertz, preferito da tutti. 771 00:40:07,030 --> 00:40:13,290 Poi ci colleghiamo che alla destinazione Point-- che è l'altoparlante, così 772 00:40:13,290 --> 00:40:15,750 la destinazione contesto. 773 00:40:15,750 --> 00:40:21,400 Infine, diciamo solo, iniziare a zero secondi da ora, e dobbiamo suonare? 774 00:40:21,400 --> 00:40:22,400 >> [RINGING] 775 00:40:22,400 --> 00:40:24,980 >> HUGH ZABRISKIE: Qui andiamo. 776 00:40:24,980 --> 00:40:25,940 E 'solo una sinusoide. 777 00:40:25,940 --> 00:40:26,440 Ok bello. 778 00:40:26,440 --> 00:40:28,274 E poi ci fermeremo quello. 779 00:40:28,274 --> 00:40:30,520 >> PUBBLICO: Da dove che il feedback viene? 780 00:40:30,520 --> 00:40:31,250 >> HUGH ZABRISKIE: Il feedback? 781 00:40:31,250 --> 00:40:32,458 Oh, probabilmente nostri microfoni. 782 00:40:32,458 --> 00:40:34,221 783 00:40:34,221 --> 00:40:35,470 Quindi sì, è così che si fa. 784 00:40:35,470 --> 00:40:37,261 E in realtà, se ho avuto tenuto in esecuzione, è 785 00:40:37,261 --> 00:40:39,540 potrebbe avere la frequenza valore è in esecuzione, 786 00:40:39,540 --> 00:40:43,320 così che è una cosa divertente da giocare. 787 00:40:43,320 --> 00:40:44,930 Raffreddare. 788 00:40:44,930 --> 00:40:46,600 Questo è sempre un bel uno a presentare. 789 00:40:46,600 --> 00:40:48,792 >> Sam Green: Non ha fatto pensiamo che, abbiamo? 790 00:40:48,792 --> 00:40:50,500 HUGH ZABRISKIE: Sì, questo è un brutto uno. 791 00:40:50,500 --> 00:40:53,249 Così, tampone loading-- vi mostrerò un esempio che alla fine. 792 00:40:53,249 --> 00:40:55,090 Questo è il caricamento di un MP3. 793 00:40:55,090 --> 00:40:58,880 E microfono, è possibile utilizzare solo una funzione chiamato Navigator.getUserMedia () 794 00:40:58,880 --> 00:41:03,240 per richiedere l'accesso per l'utente del microfono per tali informazioni. 795 00:41:03,240 --> 00:41:05,610 >> Qui sta il filtraggio, io sarò solo continuare a muoversi da questo. 796 00:41:05,610 --> 00:41:08,600 Questo è abbastanza alto livello, ma solo filtri consentono di 797 00:41:08,600 --> 00:41:16,154 >> [SEGNALE ACUSTICO] 798 00:41:16,154 --> 00:41:18,320 Filtering permette anche per creare cose come il rosa 799 00:41:18,320 --> 00:41:20,050 rumore, rumore marrone, rumore bianco. 800 00:41:20,050 --> 00:41:24,330 Se si desidera creare rumore puro, che alcune persone amano pasticciare con, 801 00:41:24,330 --> 00:41:27,490 è possibile utilizzare Web Audio filtraggio per farlo. 802 00:41:27,490 --> 00:41:30,039 >> Audio Panning-- quindi immaginare se si sta scrivendo un gioco 803 00:41:30,039 --> 00:41:32,330 e si desidera che il suono suonare come è venuta, come, 804 00:41:32,330 --> 00:41:36,090 tiro attraverso lo schermo, si può usare il pan dell'audio 805 00:41:36,090 --> 00:41:39,770 per creare questo tipo di cono, che like-- è abbastanza mathy, 806 00:41:39,770 --> 00:41:41,850 ma in realtà è davvero cool se si ottiene il lavoro, 807 00:41:41,850 --> 00:41:44,500 e c'è qualche buona tutorial su di esso posso inviarvi. 808 00:41:44,500 --> 00:41:46,400 In sostanza, è possibile tipo di creare il suono 809 00:41:46,400 --> 00:41:50,480 di qualcosa che va da in modo 3D. 810 00:41:50,480 --> 00:41:57,350 E se avete un interesse DJ, è possibile iniziare a mescolare e attraversare canzoni dissolvenza. 811 00:41:57,350 --> 00:42:01,260 >> Questo è solo alcuni molto di base codice, in pratica quello che ho fatto prima. 812 00:42:01,260 --> 00:42:06,140 Questo imposta il volume della oscillatore, così creiamo il nostro oscillatore 813 00:42:06,140 --> 00:42:07,380 che crea la forma d'onda. 814 00:42:07,380 --> 00:42:09,940 Creiamo il nostro GainNode, set la nostra frequenza, 815 00:42:09,940 --> 00:42:14,170 e quindi collegare l'oscillatore al GainNode, che poi cambia fondamentalmente 816 00:42:14,170 --> 00:42:16,760 la quantità di segnale è consentito passare. 817 00:42:16,760 --> 00:42:20,467 Ma in realtà, è un digitale cosa, quindi è più solo-- sì. 818 00:42:20,467 --> 00:42:23,550 Questo non è ciò che sta realmente accadendo, ma questo è ciò che accade nella vita reale 819 00:42:23,550 --> 00:42:24,393 con un guadagno. 820 00:42:24,393 --> 00:42:27,258 >> PUBBLICO: --quantization del parametro volume? 821 00:42:27,258 --> 00:42:28,174 HUGH ZABRISKIE: Siamo spiacenti? 822 00:42:28,174 --> 00:42:30,360 PUBBLICO: Si tratta di un parametro del volume quantizzato? 823 00:42:30,360 --> 00:42:31,840 HUGH ZABRISKIE: Sì. 824 00:42:31,840 --> 00:42:34,620 E questa è una cosa di cui sono veramente carente nella mia conoscenza, 825 00:42:34,620 --> 00:42:38,010 come funziona il guadagno su un livello digitale. 826 00:42:38,010 --> 00:42:40,140 So che con l'attuale segnali, è fondamentalmente 827 00:42:40,140 --> 00:42:45,120 controllare quanto sei amplificare il segnale. 828 00:42:45,120 --> 00:42:47,017 Quindi, sì. 829 00:42:47,017 --> 00:42:50,100 Ti manderò ulteriori informazioni su che, perché sarei curioso realtà 830 00:42:50,100 --> 00:42:51,099 per saperne di più su questo. 831 00:42:51,099 --> 00:42:54,090 Ma in fondo i parametri sono, uno è il fold-- 832 00:42:54,090 --> 00:42:59,690 il signal-- più forte e pari a zero non fa segnale o non si sente alcun suono. 833 00:42:59,690 --> 00:43:03,150 Ci salteremo tempo demo per questo, perché è fondamentalmente quello che ho fatto prima. 834 00:43:03,150 --> 00:43:07,630 E ancora, il Context.Destination è il nodo di destinazione audio. 835 00:43:07,630 --> 00:43:08,360 Impressionante, OK. 836 00:43:08,360 --> 00:43:10,470 >> Quindi ho intenzione di fare un rapido due demo. 837 00:43:10,470 --> 00:43:11,760 Come stiamo facendo in tempo? 838 00:43:11,760 --> 00:43:12,640 >> SPEAKER 1: Circa 10 minuti. 839 00:43:12,640 --> 00:43:13,130 >> HUGH ZABRISKIE: 10 minuti? 840 00:43:13,130 --> 00:43:13,630 Grande! 841 00:43:13,630 --> 00:43:14,320 Eccezionale. 842 00:43:14,320 --> 00:43:19,010 >> Così il primo che ho intenzione di do, si chiama la mia canzone preferita. 843 00:43:19,010 --> 00:43:22,410 Quindi questo è solo un poco HTML JavaScript. 844 00:43:22,410 --> 00:43:25,510 Stiamo per avere due pulsanti sulla pagina suonare la mia canzone preferita 845 00:43:25,510 --> 00:43:29,192 e fermare la mia canzone preferita. 846 00:43:29,192 --> 00:43:30,180 Cambierò questo. 847 00:43:30,180 --> 00:43:32,110 >> PUBBLICO: Coprire il microfono. 848 00:43:32,110 --> 00:43:33,430 >> HUGH ZABRISKIE: Sì. 849 00:43:33,430 --> 00:43:36,300 E ho caricato qui uno script che basically-- 850 00:43:36,300 --> 00:43:38,520 e questo è molto utile per caricare un MP3, 851 00:43:38,520 --> 00:43:41,820 quindi questo fa solo caricamento modo MP3 più veloce. 852 00:43:41,820 --> 00:43:44,180 E 'fondamentalmente solo un wrapper. 853 00:43:44,180 --> 00:43:48,737 Rende solo il processo di caricamento in MP3 molto più veloce, 854 00:43:48,737 --> 00:43:51,570 altrimenti si sta utilizzando richiesta HTTP, un po 'come quello che stavamo facendo 855 00:43:51,570 --> 00:43:53,950 sul pezzo corrente impostato con Server. 856 00:43:53,950 --> 00:43:55,950 E 'davvero brutto, è non voglio farlo. 857 00:43:55,950 --> 00:44:04,110 >> Così questo ragazzo, Boris PMI, ha scritto un davvero utile piccolo strumento chiamato BufferLoader. 858 00:44:04,110 --> 00:44:08,780 Tutto ciò che fai è semplicemente passarlo la contesto, si passa un list-- 859 00:44:08,780 --> 00:44:11,327 o, sì, si tratta di una lista in JavaScript? 860 00:44:11,327 --> 00:44:12,160 Sam Green: Un array. 861 00:44:12,160 --> 00:44:14,201 HUGH ZABRISKIE: Oh, è un array, che è di destra. 862 00:44:14,201 --> 00:44:18,660 Si tratta di una serie di percorsi di file diversi. 863 00:44:18,660 --> 00:44:21,990 E poi si passa una funzione. 864 00:44:21,990 --> 00:44:25,530 Questo è il callback di cui parlavamo circa con caricamento asincrono. 865 00:44:25,530 --> 00:44:28,720 Che si chiamerà una volta che i file caricati. 866 00:44:28,720 --> 00:44:33,780 E quella funzione che viene chiamata quando il file del caricato prende come un perimetro 867 00:44:33,780 --> 00:44:35,840 una serie di buffer caricati. 868 00:44:35,840 --> 00:44:37,990 Quindi, che si verifica qui. 869 00:44:37,990 --> 00:44:41,180 In sostanza, è BufferList sta per essere uno value-- 870 00:44:41,180 --> 00:44:46,380 o che sta per essere un array di length, che ha in sé nell'indice 871 00:44:46,380 --> 00:44:51,320 azzerare l'intero file caricato del MP3. 872 00:44:51,320 --> 00:44:53,320 Quindi quello che faccio quando ho finito carico è, ho semplicemente 873 00:44:53,320 --> 00:44:57,430 creare un'origine buffer, è un nodo di origine buffer audio. 874 00:44:57,430 --> 00:45:03,410 Il passo successivo è che carico in source.buffer come il buffer pieno carico 875 00:45:03,410 --> 00:45:06,740 dal BufferList-- è un sacco di buffers-- 876 00:45:06,740 --> 00:45:10,255 e poi ci si connette che l'audio tampone alla destinazione. 877 00:45:10,255 --> 00:45:12,380 Così che cosa sta andando a fare è semplicemente messo l'MP3 878 00:45:12,380 --> 00:45:15,260 dritto attraverso l'uscita, e avviarlo subito 879 00:45:15,260 --> 00:45:18,010 su come raggiungere questa chiamata. 880 00:45:18,010 --> 00:45:21,660 >> Fresco, e vediamo questo accada in azione. 881 00:45:21,660 --> 00:45:24,490 Il mio [incomprensibile] qui, vediamo. 882 00:45:24,490 --> 00:45:26,430 Così sto solo andando a avviare un server di base. 883 00:45:26,430 --> 00:45:28,660 Questo è qualcosa che è necessario fare se si è 884 00:45:28,660 --> 00:45:32,490 fare richieste di caricamento dei file. 885 00:45:32,490 --> 00:45:34,140 Ho intenzione di avviare un server di base. 886 00:45:34,140 --> 00:45:38,200 Questo è fondamentalmente il vostro intero PSET in questo momento in una linea, 887 00:45:38,200 --> 00:45:43,930 ma è solo a partire un server sulla porta 80/80. 888 00:45:43,930 --> 00:45:47,300 Quindi andiamo qui, abbiamo andando a caricare il 80/80, 889 00:45:47,300 --> 00:45:49,110 stiamo per andare a la mia canzone preferita. 890 00:45:49,110 --> 00:45:51,660 Quindi, se ho colpito "Play mia canzone preferita "in questo momento, 891 00:45:51,660 --> 00:45:53,964 sta andando a caricare la mia canzone preferita e giocare it-- 892 00:45:53,964 --> 00:45:55,880 [MUSICA - Aquile, "LA VITA IN VELOCE  CORSIA"] 893 00:45:55,880 --> 00:46:00,490 --che sembra essere "La vita in la Fast Lane "dei The Eagles. 894 00:46:00,490 --> 00:46:06,346 Ora, ho potuto colpire "Stop mia canzone preferita "e riprodurre esso. 895 00:46:06,346 --> 00:46:09,160 >> [MUSICA - Aquile, "LA VITA IN VELOCE  CORSIA"] 896 00:46:09,160 --> 00:46:18,340 >> E se vado oltre per consolare, perché Ho usato una variabile globale qui 897 00:46:18,340 --> 00:46:23,390 per tenere traccia di questo valore, in realtà ora sarà riconosciuta nella console. 898 00:46:23,390 --> 00:46:25,160 Così si auto-crea per me. 899 00:46:25,160 --> 00:46:29,991 Ecco, questo è quello che sta giocando in questo momento, e posso semplicemente chiamare source.stop () 900 00:46:29,991 --> 00:46:30,490 su quello. 901 00:46:30,490 --> 00:46:34,930 902 00:46:34,930 --> 00:46:35,860 Beh, sai una cosa? 903 00:46:35,860 --> 00:46:39,760 Solo così voi ragazzi hanno sentito questo song-- si potrebbe riconoscere questa canzone. 904 00:46:39,760 --> 00:46:41,801 >> [MUSICA - Rick Astley "Never Gonna GIVE  You Up "] 905 00:46:41,801 --> 00:46:42,299 906 00:46:42,299 --> 00:46:44,215 [MUSICA - Aquile, "LA VITA IN VELOCE  CORSIA"] 907 00:46:44,215 --> 00:46:46,195 Ora abbiamo tutti stati Rickrolled. 908 00:46:46,195 --> 00:46:50,155 OK, grande, andare avanti. 909 00:46:50,155 --> 00:46:51,160 Raffreddare. 910 00:46:51,160 --> 00:46:54,554 Quindi, questo è fondamentalmente un esempio di proprio come si potrebbe caricare un MP3 file-- 911 00:46:54,554 --> 00:46:56,470 [MUSICA - Aquile, "LA VITA IN VELOCE  CORSIA"] 912 00:46:56,470 --> 00:46:59,590 --e giocare, e fermarsi e avviarlo. 913 00:46:59,590 --> 00:47:03,008 Avrei potuto fare molto di più [incomprensibile] 914 00:47:03,008 --> 00:47:07,570 >> L'ultimo che farò è, Ti faccio vedere un [incomprensibile]. 915 00:47:07,570 --> 00:47:18,070 >> [RIPRODUZIONE DI BRANI MUSICALI] 916 00:47:18,070 --> 00:47:21,800 >> E 'come, ogg.wave.mp3. 917 00:47:21,800 --> 00:47:26,450 Penso che, se non ricordo male, Ho incontrato alcuni problemi con .m4a, 918 00:47:26,450 --> 00:47:27,721 ma io non sono sicuro di questo. 919 00:47:27,721 --> 00:47:28,470 Penso mp3.wave-- 920 00:47:28,470 --> 00:47:28,930 921 00:47:28,930 --> 00:47:30,971 >> [MUSICA - Rick Astley "Never Gonna GIVE  You Up "] 922 00:47:30,971 --> 00:47:35,930 923 00:47:35,930 --> 00:47:36,500 >> Ok fantastico. 924 00:47:36,500 --> 00:47:37,625 Io non avrei dovuto dirlo. 925 00:47:37,625 --> 00:47:40,570 In ogni caso, ciao. 926 00:47:40,570 --> 00:47:43,430 927 00:47:43,430 --> 00:47:45,490 Quindi abbiamo questo open. 928 00:47:45,490 --> 00:47:52,320 Così ora tutto quello che faccio è, io fondamentalmente creato una sintassi di base per la creazione di musica. 929 00:47:52,320 --> 00:47:57,610 Quindi, se faccio qualcosa di simile, aggiungere g4 il 1 ° 2, che cosa significa è che, 930 00:47:57,610 --> 00:48:00,950 aggiungere la nota pianoforte, G4, che è la quarta G 931 00:48:00,950 --> 00:48:02,680 sul piano dal basso. 932 00:48:02,680 --> 00:48:05,930 Quindi questo è una specie di MIDI parlare, così per coloro che sono la musica basata, 933 00:48:05,930 --> 00:48:07,860 questo è solo note MIDI. 934 00:48:07,860 --> 00:48:10,090 >> PUBBLICO: Questo è il G del Medio C, giusto? 935 00:48:10,090 --> 00:48:11,840 >> HUGH ZABRISKIE: Questo è il G sopra Middle C, che è di destra. 936 00:48:11,840 --> 00:48:12,470 >> PUBBLICO: Sopra Medio C. 937 00:48:12,470 --> 00:48:13,345 >> HUGH ZABRISKIE: Sì. 938 00:48:13,345 --> 00:48:14,340 Attualmente si. 939 00:48:14,340 --> 00:48:16,131 Credo di aver effettivamente fatto uno [incomprensibile], 940 00:48:16,131 --> 00:48:18,860 quindi questo potrebbe essere un'ottava sopra che. 941 00:48:18,860 --> 00:48:20,070 Quindi cerchiamo di vedere. 942 00:48:20,070 --> 00:48:21,152 Se mi ha colpito Play-- 943 00:48:21,152 --> 00:48:22,110 [PIANO RIPETITIVA NOTA] 944 00:48:22,110 --> 00:48:23,200 --we're andare a sentire questo. 945 00:48:23,200 --> 00:48:25,700 L'idea è che opera proprio come una riga di comando sarebbe, 946 00:48:25,700 --> 00:48:27,510 quindi se vado su e giù sulla mia tastiera, è 947 00:48:27,510 --> 00:48:31,550 può tornare alla precedente comandi, che è molto utile. 948 00:48:31,550 --> 00:48:35,136 E sotto è la mia lista di tracce, che sono tutti in esecuzione su loop. 949 00:48:35,136 --> 00:48:38,260 >> PUBBLICO: Siete stati assumendo il Tastiera a 88 tasti su questo, giusto? 950 00:48:38,260 --> 00:48:41,051 >> HUGH ZABRISKIE: La domanda era: Io parto dal presupposto sto una tastiera a 88 tasti, 951 00:48:41,051 --> 00:48:41,990 e sì, lo sono. 952 00:48:41,990 --> 00:48:45,030 Quello che ho fatto è che fondamentalmente ha preso 88 campioni 953 00:48:45,030 --> 00:48:46,970 del pianoforte, uno per ogni nota. 954 00:48:46,970 --> 00:48:49,180 E così ogni volta che si sentire una nota da ora in poi, 955 00:48:49,180 --> 00:48:57,550 che è in realtà un ciclo che sembra like-- questo è sempre giocato su loop, 956 00:48:57,550 --> 00:49:00,120 così per ogni nota, questo è in esecuzione. 957 00:49:00,120 --> 00:49:02,860 Quello che succede è che io ricreare un buffer, 958 00:49:02,860 --> 00:49:06,010 Creo un nodo guadagno per regolare il volume. 959 00:49:06,010 --> 00:49:08,240 Questo solo un davvero modo complicato per dire che 960 00:49:08,240 --> 00:49:10,550 memorizzare il buffer in una source.buffer. 961 00:49:10,550 --> 00:49:13,160 Io do il guadagno, io collegarlo al guadagno, 962 00:49:13,160 --> 00:49:15,576 il guadagno è collegato al uscita, e poi ci gioco. 963 00:49:15,576 --> 00:49:20,735 Quindi cioè tipo di processo di prendere in una fonte di buffer. 964 00:49:20,735 --> 00:49:24,820 >> PUBBLICO: si può effettivamente prendere quel suono secco e renderlo bagnato [incomprensibile]? 965 00:49:24,820 --> 00:49:26,260 >> HUGH ZABRISKIE: È possibile, sì. 966 00:49:26,260 --> 00:49:29,260 Ci sono ri-verbo, non c'è ritardo, distorsione. 967 00:49:29,260 --> 00:49:33,260 Si può sostanzialmente mettere nulla in tra in quel panino di-- bene, 968 00:49:33,260 --> 00:49:37,660 pipeline è una metafora migliore, ma è possibile aggiungere qualsiasi cosa in questo. 969 00:49:37,660 --> 00:49:38,200 Raffreddare. 970 00:49:38,200 --> 00:49:40,280 >> Quindi finirò la demo qui per darvi un senso 971 00:49:40,280 --> 00:49:46,390 di appena il gran numero di volte che può funzionare quella funzione tutto in una volta. 972 00:49:46,390 --> 00:49:49,280 Quindi ho intenzione di rimuovere questo. 973 00:49:49,280 --> 00:49:59,110 Ho intenzione di creare un generatore che-- fondamentalmente ciò does-- questo è davvero 974 00:49:59,110 --> 00:50:04,220 una specie di syntax-- complicato ma è andando a generare note al volo, 975 00:50:04,220 --> 00:50:06,601 e solo iniziare a giocare loro come li valuta. 976 00:50:06,601 --> 00:50:07,392 [PIANO interponendo] 977 00:50:07,392 --> 00:50:10,990 978 00:50:10,990 --> 00:50:12,817 >> Così possiamo solo fare un po 'di musica qui. 979 00:50:12,817 --> 00:50:13,608 [PIANO interponendo] 980 00:50:13,608 --> 00:50:39,570 981 00:50:39,570 --> 00:50:41,470 >> Così che cosa questo comando fa, per esempio, è 982 00:50:41,470 --> 00:50:46,910 ci vogliono quelle tre note per la pianoforte e poi li mette in B3. 983 00:50:46,910 --> 00:50:48,660 Questa sintassi potrebbe rendere un po 'più senso 984 00:50:48,660 --> 00:50:50,590 a coloro che hanno un musica di sottofondo qui. 985 00:50:50,590 --> 00:50:55,180 986 00:50:55,180 --> 00:50:56,551 >> Posso aggiungere una grancassa. 987 00:50:56,551 --> 00:50:57,050 Io posso-- 988 00:50:57,050 --> 00:50:58,048 >> [Interponendo STRUMENTI] 989 00:50:58,048 --> 00:50:59,256 >> --just giocare con quella. 990 00:50:59,256 --> 00:51:12,519 991 00:51:12,519 --> 00:51:13,474 >> Così si può make-- 992 00:51:13,474 --> 00:51:14,515 [Interponendo STRUMENTI] 993 00:51:14,515 --> 00:51:15,513 Quello è un po 'più fastidioso. 994 00:51:15,513 --> 00:51:16,554 [Interponendo STRUMENTI] 995 00:51:16,554 --> 00:51:26,491 996 00:51:26,491 --> 00:51:30,981 >> In modo che aggiunge in modo casuale un piatto a secco su ogni nota 16, con un 16% 997 00:51:30,981 --> 00:51:31,481 [Incomprensibile]. 998 00:51:31,481 --> 00:51:32,522 >> [Interponendo STRUMENTI] 999 00:51:32,522 --> 00:51:40,962 1000 00:51:40,962 --> 00:51:50,400 >> Sì, così il modo in cui questa works-- è sempre in 4: 4. 1001 00:51:50,400 --> 00:51:51,441 [Interponendo STRUMENTI] 1002 00:51:51,441 --> 00:52:06,910 1003 00:52:06,910 --> 00:52:10,902 >> Sì, così i quattro quarti, e 16/8. 1004 00:52:10,902 --> 00:52:14,851 1005 00:52:14,851 --> 00:52:15,892 [Interponendo STRUMENTI] 1006 00:52:15,892 --> 00:52:27,970 1007 00:52:27,970 --> 00:52:33,780 >> Quindi, in media, si ottiene il 60% dei colpi sulle note 16. 1008 00:52:33,780 --> 00:52:35,990 >> In ogni modo, questo era solo tipo di mettersi in mostra 1009 00:52:35,990 --> 00:52:39,780 alcune delle cose che si potrebbero costruire con l'API Web Audio. 1010 00:52:39,780 --> 00:52:43,840 E 'davvero potente, è veramente veloce, e si può fare un sacco di cose interessanti 1011 00:52:43,840 --> 00:52:44,340 con esso. 1012 00:52:44,340 --> 00:52:51,260 Così ancora una volta, tutte le domande che avete, e-mail myself-- Hugh-- o Sam, 1013 00:52:51,260 --> 00:52:55,869 e onestamente, Google ha un sacco di buone risorse. 1014 00:52:55,869 --> 00:52:56,660 Tutte le ultime domande? 1015 00:52:56,660 --> 00:52:57,970 Già. 1016 00:52:57,970 --> 00:53:00,790 >> PUBBLICO: Quindi si può accedere il microfono incorporato. 1017 00:53:00,790 --> 00:53:03,089 Che cosa succede se si voleva utilizzare un microfono migliore? 1018 00:53:03,089 --> 00:53:05,380 HUGH ZABRISKIE: Se si voleva di utilizzare meglio il microfono? 1019 00:53:05,380 --> 00:53:11,320 Quindi, di nuovo, questo fa parte del astrazione tra Chrome 1020 00:53:11,320 --> 00:53:12,950 e il resto del computer. 1021 00:53:12,950 --> 00:53:18,950 Meno che non sia disponibile attraverso una API, come Web API MIDI, 1022 00:53:18,950 --> 00:53:22,030 si potrebbe forse trovare alcuni hack, ma generalmente non fattibile. 1023 00:53:22,030 --> 00:53:25,300 >> Sam Green: è possibile also-- tutto il Chrome sa 1024 00:53:25,300 --> 00:53:28,820 è ciò che il vostro microfono predefinito è, e che accede. 1025 00:53:28,820 --> 00:53:33,410 Quindi, se si ha un microfono si potrebbe impostato come microfono predefinito del computer, 1026 00:53:33,410 --> 00:53:35,990 è possibile accedere in questo modo e sarebbe probabilmente funzionerà. 1027 00:53:35,990 --> 00:53:37,490 HUGH ZABRISKIE: Questo è un buon punto. 1028 00:53:37,490 --> 00:53:39,656 Non ho mai provato, ma si potrebbe essere in grado di genere 1029 00:53:39,656 --> 00:53:45,700 di-- se si reindirizza l'altoparlante di ingresso, si potrebbe essere in grado di farlo, sì. 1030 00:53:45,700 --> 00:53:48,360 >> Tutte le ultime domande? 1031 00:53:48,360 --> 00:53:49,340 Raffreddare. 1032 00:53:49,340 --> 00:53:51,680 Beh, grazie ragazzi tanto per guardare. 1033 00:53:51,680 --> 00:53:52,199 Sono Hugh. 1034 00:53:52,199 --> 00:53:52,990 Sam Green: Io sono Sam. 1035 00:53:52,990 --> 00:53:55,410 HUGH ZABRISKIE: E questo è CS50. 1036 00:53:55,410 --> 00:53:56,767