>> Sam Green: Hi, everyone.
Benvenuti nel nostro seminario.
Il mio nome è Sam.
HUGH ZABRISKIE: Sono Hugh.
Sam Green: E stiamo andando a parlare oggi su JavaScript e le API Web Audio.
Tanto per cominciare, questo è uno schema della nostra agenda per il seminario.
Stiamo per iniziare a parlare di perché si dovrebbe essere interessato al Web
API Audio, perché è JavaScript la lingua che serve per esso,
e poi parlare di JavaScript essentials-- così come,
camminare attraverso alcuni basi della lingua,
e poi parlare del API audio a un livello elevato.
Poi, Hugh parlerà di alcuni delle fasi di produzione audio
e poi questo demo sequencer impressionante progetto ha costruito e vi mostrerà il codice.
E poi, avremo tempo per domande alla fine per le persone
che sono qui vivono.
>> HUGH ZABRISKIE: Freddo.
>> Sam Green: Freddo.
>> HUGH ZABRISKIE: Freddo.
Io backup.
>> Sam Green: Allora, andiamo con ordine.
Così una delle grandi cose circa l'API Web Audio
è che non c'è nessun set up richiesto.
Viene built-in a maggior parte dei browser moderni,
tra cui Chrome, bordo, un intero mazzo di others-- tutti quelli
che grandi porzioni di la gente sta usando oggi.
Quindi non c'è istituito, oltre a ottenere giusto
un web server in corso, per di iniziare a lavorare
sul progetto, che è grande.
>> Consigliamo piuttosto fortemente che si considera
utilizzando Chrome per Sviluppo web JavaScript,
solo perché il suo sviluppatore strumenti sono veramente forti.
Come esempio di ciò che si intende dicendo aprire il tuo JavaScript
console-- se si va in Chrome e si guarda a qualsiasi pagina web,
e te ne sei andato clic Inspect Element, e poi
si va in questa piccola discesa proprio qui e si fa clic su Console,
vedrete che cosa apre sembra un molto simile a un prompt dei comandi che si
potrebbe vedere sul vostro Mac, o su ID.
E proprio così, possiamo Tipo comandi qui, come trasparente,
e altri comandi del genere.
Siamo in grado di creare variabili, come vedremo più avanti in JavaScript.
E così qualcosa che possiamo fare in JavaScript, siamo in grado di fare con la console,
e questo è un modo super pratico per iniziare a giocare in giro con le API
e prendere confidenza con Javascript destra fuori del blocco.
Nessun set up richiesto, che è davvero bello.
Raffreddare.
Eccezionale.
>> Quindi, solo una cosa da aggiungere.
Se avete qualche questions-- ci sono molti di voi che non sono qui vivo,
sentitevi liberi di e-mail noi-- questi sono i nostri indirizzi e-mail.
Se avete domande non si vuole a chiedere a noi,
come, oh ho un bug nel mio codice, o qualcosa del genere
che è un po 'più specifico, forse google prima.
Ci sono un sacco di grandi risorse circa l'API Web Audio là fuori.
E 'davvero bene documentata ed è di essere
utilizzata da un sacco di persone in industria, e le persone che sono solo
la costruzione di cose divertenti per loro stessi.
Quindi ci dovrebbe essere un sacco delle risorse là fuori.
Eccezionale.
>> Fresco, quindi perché il API Web Audio?
Questo schema è un po ' di un'evoluzione del modo
audio sul web è cresciuto nel corso del tempo.
Bgsound era come il tag HTML originale Internet Explorer utilizzato per sostenere.
E 'consentita solo per i suoni piuttosto semplice, la funzionalità non era molto robusto,
e non si poteva fare sequenziamento complicata,
o controllare quando il suono ha cominciato e si fermò molto robusta.
Quindi, non era particolarmente ben sviluppato.
Poi, dopo che, Flash venuto along-- che,
Sono sicuro che voi siete tutti a conoscenza con Flash-- non forse come funziona,
ma hai certamente visto.
Hai avuto l'aggiornamento del Flash Plug-in, tutto questo genere di cose,
e che certamente esteso la gamma di funzionalità che era disponibile.
Ma fare l'utente di installazione un plug-in è sicuramente
uno svantaggio di includere Flash nella vostra applicazione, giusto?
Perché allora sei dipendente dal utente andare e trovare questo plug-in,
e probabilmente essere trasformato fuori da questo passo in più
devono prendere per utilizzare la vostra applicazione.
E poi ci potrebbe essere un aggiornamento che sarà rompere tutta la vostra applicazione,
e si finisce per essere un incubo per lo sviluppatore, anche.
Così che era una barricata.
>> E poi, dopo che è arrivato, il tag audio HTML, che
è una caratteristica di più moderno che HTML-- certamente permesso per molto di più roba,
ma anche le cose che si potevano fare c'erano un po 'limitato solo
come risultato delle cose che l'HTML era capace.
Così, quando il codice JavaScript API, il Web Audio API,
è diventato uno standard praticare tutti i browser,
che in realtà ampliato il set di opportunità per gli sviluppatori
per entrare davvero nella costruzione cose interessanti per il web.
Per lungo tempo ci fosse stati strumenti veramente potenti
per applicazioni audio native, like-- tutti sanno GarageBand,
e poi ovviamente ci sono più applicazioni audio professionali, miscelazione
e questo genere di cose.
Ma non c'era un davvero buono Cloud-- non
Nube, si, credo Piattaforma web-based Cloud--
che permetterebbe agli sviluppatori di creare applicazioni per le persone
fare missaggio audio.
E come egli vi mostrerà più tardi, il Web Audio API
consente davvero potente roba accada davvero semplice,
che è piuttosto fresco.
Ecco, questo è il motivo per cui si istruzione dovrebbe guardare il resto del seminario,
fondamentalmente.
>> E ora, ho intenzione di parlare di alcuni elementi di Javascript-- solo di base
del linguaggio, in modo che possiamo essere sulla stessa pagina
quando si parla di API un po 'più tardi.
Raffreddare.
>> Così, questo è un sommario.
Ho dimenticato che questo era qui.
Già.
>> HUGH ZABRISKIE: Ci sono due scivoli qui.
>> Sam Green: Questo è il riassunto di alcune delle limitazioni
degli altri, vecchi metodi di rilegatura.
E poi ora, abbiamo queste cose.
Raffreddare.
Eccezionale.
>> Così, elementi essenziali JavaScript.
Per prima cosa, c'è una differenza piuttosto significativo
in JavaScript rispetto a un linguaggio come il C, in modo
che le variabili sono create.
Quindi, in C, siamo abituati ad avere digitare nostre variabili, giusto?
E non mi riferisco tipo come digitarli, tipo intendo
come assegnare loro un significato type-- come, un int, float, un char.
In C, eravamo davvero abituati a dover creare una variabile
e quindi attenersi a tale tipo per la tutto il tempo che usiamo quella variabile.
E questo non è necessariamente peggio, ma è probabilmente più difficile da usare.
Una delle caratteristiche fredde JavaScript è
che le variabili sono quello che ha chiamato "dinamicamente tipizzati", che
significa che posso creare un variabile con questa sintassi,
varX uguale 5, per esempio.
Questo crea originariamente un intero variable--
proprio sotto il cappuccio somewhere-- ma io
può cambiare la variabile per fare riferimento a una stringa
senza fare nulla di simile creare una nuova variabile.
Non ho bisogno di preoccuparsi circa il cambiamento del tipo.
JavaScript sa che il tipo di cambiato, e ciò accade in modo dinamico.
>> Quindi, ci sono benefici e inconvenienti che,
come chiunque abbia lavorato in JavaScript per un po 'potrebbe sapere.
Ci sono momenti in cui si potrebbe accidentalmente
modificare il tipo di una variabile e Non maneggiare quel tipo che cambia,
e poi il tuo JavaScript può crash-- o un'eccezione
essere buttato, perché avrete la tipo sbagliato quando ci si aspetta un tipo.
Raffreddare.
>> Così, scoping-- che è come, se si ricordare le prime settimane in corso,
si riferisce a come visibile una variabile è e in quale area del codice.
Tutto questo sembra molto simile per il modo in cui appare in C.
Così variabili vengono generalmente scope tra parentesi graffe all'interno di una funzione,
e poi ci sono anche variabili a livello globale che di ambito
are-- se si scrive una variabile al di fuori di una funzione,
sarà visibile in tutto il testo.
>> Una differenza tra JavaScript e C in particolare,
è che se si dichiara una globale ovunque variabile in un file di testo
è visibile in qualsiasi funzione all'interno di tale file di testo.
Questo è corretto, giusto?
>> HUGH ZABRISKIE: Sì.
>> Sam Green: Così che è anche un po ' po 'eccentrico rispetto a C,
dove abbiamo sempre dovuto avere il nostro definizioni di variabili sopra i luoghi
sono stati utilizzati.
Questa non è una regola che è applicata più, quindi, un po 'diverso.
E di nuovo solo per sottolineare nuovamente, globale contro variables-- locale
molto simile a C. Si potrebbe avere due variabili con lo stesso nome,
e hanno uno dei loro nomi da Shadowed da una variabile locale se uno di essi
era globale.
Così, simile tipo di problemi che alcuni di voi
può aver incontrato in qualche del problema imposta finora.
Fresco, in modo che le variabili.
>> Flusso di controllo, vale a dire come, se-else-- stuff-- logico e loop.
Quindi, per cominciare, questo è ciò che if-else dichiarazioni sembrano in JavaScript.
Il posizionamento delle varie cose sulle linee non è importante.
Questo è solo una delle convenzioni per il codice di struttura che modo.
Proprio come in C, abbiamo un "se", una dichiarazione parentesi.
Non è quello che intendevo fare.
L'ho fatto di nuovo.
>> HUGH ZABRISKIE: Cercando di uscire?
Sam Green: No, io sono solo cercando per ingrandire.
Non ha importanza.
>> Quindi, abbiamo un "if" e abbiamo una condizione all'interno di esso
che restituisce true o false, e che determina o meno
entriamo in quel blocco di codice.
E allo stesso modo, abbiamo un altro, se e un altro, proprio come siamo abituati a in C.
>> Inoltre, dovrebbe essere abbastanza comodo destra fuori del blocco con i loop,
perché anche guardare un po 'come C sembra.
Ma si noterà ancora una volta che noi hanno, invece di int inizializzazioni,
abbiamo inizializzazioni var.
E credo che avete stare attenti a fare
Assicurarsi di non modificare il valore di I da un int in una stringa,
per esempio, perché che sta per causare un comportamento strano non si potrebbe
aspettano.
Ma questo dovrebbe essere abbastanza familiare, pure.
>> Quindi questo è dove le cose cominciano a ottenere un po 'matto in JavaScript
per qualcuno che sta andando da un sfondo di C. Ci sono funzioni
in JavaScript, e non c'è un modo per dichiarare una funzione che sembra
sorta di simile a C, e poi ce n'è un altro che
Sembra un po 'diverso.
>> La prima versione, che possiamo vedere qui,
è una specie di C-like, dove diciamo, questa è una funzione,
dargli un nome, dare il numero di argomenti,
e poi il contenuto della funzione andare dentro quelle parentesi graffe.
Vedremo un esempio di argomenti in appena un secondo.
>> Mentre nella riga successiva, vediamo, oh, ecco una variabile chiamata "myFunction,"
e noi uguale a questo generic function-- cosa-- che
non sembra avere nulla in corso.
La ragione per cui è diverso di C è che Javascript
è ciò che è chiamato un linguaggio funzionale, o ha elementi funzionali, il che significa
che le funzioni sono in realtà valori.
E questo significa che possiamo impostare una variabile di una funzione uguale
e quindi spostare tale funzione intorno, passarlo come argomento,
fare ogni genere di cose come quello con le funzioni.
>> Un'altra cosa da note-- funzioni sono scritte
con un certo numero di argomenti.
Vedremo un esempio di una funzione con un argomento sulla diapositiva successiva.
Ma non lo farà JavaScript urlare a voi se provate
utilizzare una funzione con il numero errato di argomenti.
Sarà solo fare il suo meglio per rendere fare, il che significa che se si passa,
si chiama una funzione che prevede un argomento con nessun argomento, tutto ciò che
che accadrà è che farà del suo meglio per cercare di eseguire tale codice,
e se funziona casualmente in un'eccezione o un errore,
che sarà lanciare tale eccezione e solo a mantenere going-- che è solo uno dei modi
che Javascript funziona.
Già.
>> PUBBLICO: Cosa succede se ci sono troppi argomenti?
Sam Green: Così il domanda era: cosa succede
se ci sono troppi argomenti?
E la risposta è che JavaScript sarà solo
ignorare quelli che sono dopo quelli che si aspetta.
Si cercherà di eseguire la funzione chiamarlo come se fosse solo le prime due.
Destra?
>> HUGH ZABRISKIE: Esatto, sì.
Allo stesso modo, se ci sono troppo pochi argomenti,
solo tipo di dà nulla per tutto il argomenti che non ha alcun valore
per.
>> Sam Green: Quale può effettivamente essere a portata di mano, se
vuole scrivere una funzione che prende un argomento numero variabile.
È possibile impostare i valori predefiniti la definizione della funzione,
e può ignorare che l'ingresso non c'è.
Quindi voglio parlare un po ' di più su questo ultimo punto
punto, che è funzioni sono valori.
Questo è un esempio che è un po 'allucinante
se hai appena letto, e non pensate su quello che sta succedendo per un secondo.
Quindi, diamo un'occhiata a solo la prima linea qui.
Abbiamo questa variabile, f1, che si dice è una funzione che fa questa cosa.
E il contenuto della funzione sono console.log ('ciao').
Si può pensare di console.log come JavaScript equivalente di printf.
Quindi, che cosa accadrà è, se noi eseguire questo codice nel nostro browser,
che sarà stampare una stringa.
Posso dimostrare che.
PUBBLICO: Da log, tuttavia, fa quel significa che è in fase di registrazione da qualche parte?
Sam Green: Sì.
Così mi faccio vedere che cosa sta per accadere.
Quindi la domanda era: che cosa significa log medio?
>> HUGH ZABRISKIE: Così console.log è come printf per C.
Sam Green: Così console.log è come printf,
quindi se ho questo console.log ('ciao'), e che io chiamo, la stringa "ciao"
viene stampato sulla console.
Questa è la console.
E 'proprio come printf, dove la stampa di fuori standard.
E vedremo in un minuto, ma questo è in realtà
riferimento all'oggetto console, e chiamando un metodo su tale oggetto.
Come per più senso in un minuto quando
arrivare a parlare di oggetti in JavaScript,
ma ho pensato che vorrei solo ricordare che.
HUGH ZABRISKIE: Siamo utilizzato per in C, destra- sopra
scriviamo solitamente un grande programma di in principale di fare qualsiasi cosa.
Ma cosa c'è di fresco in JavaScript si è avere questo tipo di interprete che
viene eseguito in tempo reale, in modo da vuole solo riga per riga,
può solo interpretare tale sul posto.
E registra cose che hanno eseguito prima,
quindi è uno strumento molto utile per utilizzare console.log, o la console,
in generale, per solo giocando in giro con JavaScript.
>> Sam Green: Quindi tornare in questo example-- la seconda riga di codice
qui è abbastanza da capogiro nella mia testa.
La prima volta che ho letto questo, era come, che cosa sta succedendo?
Quindi, ciò che sta accadendo è, questo dichiarazione di funzione dice,
Ho una funzione chiamata f2 che è in attesa di un argomento, f,
e poi chiama che funzione f, che
è stato passato a esso come argomento senza sé argomenti.
Quindi, che avrebbe potuto essere fonte di confusione.
Se capiamo questo come f2 prende f1 come argomento, e quindi all'interno di f2,
f ottiene called-- quali mezzi che questa linea di codice,
dopo queste due linee di codice, si traduce in "ciao"
in fase di stampa alla console.
>> Il fatto che possiamo passare Funzioni intorno come valori
finisce per essere uno dei più potenti funzionalità di JavaScript
come linguaggio di programmazione.
Fuori di tutto quanto cose impressionanti che può fare,
come una caratteristica del lingua in termini di modo
che rende le cose facili programmare e consente
per cose che non sono particolarmente ben si adatta al web,
programmazione funzionale e funzionale aspetti di programmazione di JavaScript
è uno dei più concetti potenti che
esiste in Javascript-- se mi chiedete.
Raffreddare.
>> Così, la prossima cosa.
Oltre ad essere funzionali, ci sono anche elementi di JavaScript
che sono orientato agli oggetti, che è uno dei molto
popolari parole di ronzio di informatica.
Programmazione orientata agli oggetti è un fatto popolare.
JavaScript ha una versione di tale, dove credo che ogni valore è anche
un oggetto, il che significa che ogni oggetto avvolge insieme un numero di valori.
Quindi, per i valori che sono semplici, come un numero intero, come varX uguale a 5,
quell'oggetto solo avvolge che un valore.
>> Ma possiamo anche immaginare una situazione where-- possiamo pensare a situazioni in C
dove volevamo fare qualcosa con le strutture,
per esempio, che avvolge vari valori insieme e marche
veramente facile passare le cose intorno.
Questo è quando un oggetto è in JavaScript.
>> E 'importante ricordare quando dico che gli oggetti avvolti
alcuni numero di valori insieme, che le funzioni sono anche
valori, il che significa che le funzioni possono essere anche all'interno di un oggetto JavaScript.
E la ragione per cui è importante è che, mentre noi spesso
pensare di chiamare un metodo su un oggetto che è
di un termine popolare da altri linguaggi orientati agli oggetti popolari,
una delle differenze qui è che tutto ciò che un metodo è in JavaScript
è un valore memorizzato all'interno di un oggetto che esegue alcuni Action-- forse
utilizzando gli altri valori che si trovano all'interno di tale oggetto, ma non necessariamente.
Così si può immaginare una situazione, indovinate un po 'di un modo pazzesco,
dove hai chiamato un metodo di uno oggetto su un altro oggetto, per esempio.
Quindi, è un po 'funky in quel modo.
>> E si può anche modificare i metodi che sono associati con un oggetto
assegnando il metodo un nuova funzione, che è anche
piuttosto diverso dagli altri linguaggi orientati agli oggetti, dove
una volta che si dichiara un oggetto e un'istanza,
non possiamo cambiare i metodi che sono associata a tale oggetto più.
Ecco, questo è molto diverso.
Raffreddare.
>> Quindi, ecco un esempio, prima, di un oggetto in azione.
Questo è ciò che si chiama un oggetto generico, che
significa che non ha alcuna particolare nome, non ha una classe,
è solo alcuni valori di avvolgimento.
E il modo in cui appare è, abbiamo questa coppia esterna di ricci bretelle qui
che indicano a JavaScript e dire, si tratta di un oggetto.
I valori all'interno di esso sono ogni valore all'interno
dell'oggetto che dovrebbe essere avvolti insieme.
E all'interno di tale oggetto, abbiamo poi coppie di valori chiave,
dove la chiave si riferisce al nome del valore all'interno dell'oggetto,
e l'altro side-- di fronte al qui-- colon
è il valore effettivo che devono essere conservati.
>> Quindi vedete qui che abbiamo un chiave denominata fn con valore sam,
seguito da una virgola, dicendo che sulla voce successiva.
Poi una chiave denominata ln, con un valore di verde,
seguito da una virgola, seguito da "stampa"
che sta per avere un valore di funzione che sta per fare questa riga di codice.
Facciamo un passo indietro e disfare quello che sta succedendo qui.
Quindi questo è un po 'complicato, e stiamo vedendo qualcosa di nuovo
per la prima volta.
Il "questo" parola chiave è la cosa nuova stiamo vedendo qui, e ciò che fa
è, si riferisce alla corrente opporsi portata, giusto?
Così, quando diciamo, questo punti per tutto il tragitto
per l'intero object-- quando facciamo this.fn,
abbiamo intenzione di andare fino in fondo schiena a questo oggetto, passare al valore fn
e ottenere sam, tirarlo fino in fondo indietro, bastone qui, e poi andare avanti.
>> PUBBLICO: Quindi, con il recupero, è quello fatto causa del parametro
definizione?
Sam Green: Quindi la domanda era, è il recupero fatto perché del parametro
definizione?
Sì, assolutamente.
Che cosa succederà qui è, questo punto dice al JavaScript,
Ok, sto diventando un certo valore da questo oggetto da me stesso.
E poi guarderò per una voce chiamato fn, e se lo trova,
si tornerà che value-- così, è sam.
Ma potrei anche aver digitato qualcosa che non era definito qui,
e allora sarebbe solo tornare undefined-- che
è una cosa che JavaScript può fare, che può avere benefici,
ma è also-- se si commette un errore di battitura, esso può causare errori strani.
Quindi sarà solo cercare di trovare qualunque cosa gli si dice di trovare
e non sta andando a lamentarsi se non lo trova.
Sarà solo dire, non l'ho fatto trovarlo, e poi andare avanti.
Quindi sarebbe essere indefinito, più vuota, più il cognome.
Già.
E allora possiamo vedere che se noi potrebbe poi scendere e access--
e chiamiamo tf.print () con parentesi.
Sta andando a chiamare quella stampa funzione senza argomenti, giusto?
Ma se abbiamo appena detto tf.print () virgola, senza le parentesi,
tutto quello che avrebbe fatto è tirare la funzione dal valore,
ma non effettivamente chiamato.
Raffreddare.
HUGH ZABRISKIE: Dovrebbe facciamo un oggetto?
Sam Green: Certo, facciamo quello.
Così posso spostare questo esempio per la console.
Possiamo immaginare che ho un oggetto.
Quindi questo è un oggetto semplice.
Questo è un oggetto che contiene due valori con due chiavi, due valori chiave
coppie.
Così posso quindi accedere al valore memorizzato all'interno di questo oggetto facendo x.x1,
per esempio, e ottengo uno indietro.
Allo stesso modo, x.x2, ottenere che il valore indietro.
>> E ora la cosa veramente interessante è, posso effettivamente aggiungere qualcosa a questo oggetto
dopo che ho creato io.
Quindi potete immaginare, diamo dire che ho una funzione.
>> HUGH ZABRISKIE: Si hanno a che fare Maiusc-Invio.
>> Sam Green: Oh, questo è fastidioso.
Che cosa non piace?
Oh.
Eccoci qui.
Raffreddare.
>> Così ho appena creato questa funzione, f, che
sta per andare alla corrente oggetto e stampa this.x1.
Quindi, se mi basta chiamare da f sé, niente sta andando
ad accadere, a destra, perché non c'è x1 campo dell'oggetto, esso si riferisce a.
Ma, se io dico, x.f = f, e poi io chiamare x.f (), ho intenzione di tornare indietro uno.
Tale funzione f è ora associato all'oggetto x,
che ha una chiave denominata x1 associata al valore 1,
così quando chiamiamo this.x1, è andando a trovare ciò che sta cercando
ed essere in grado di stampare su un valore.
Ecco, questo è solo un esempio di tipo delle cose folli
si può fare con gli oggetti in JavaScript.
>> Così che la versione era versione generica, significato
che abbiamo creato un oggetto utilizzando questo parentesi notazione brace notation--,
rather-- e questo è utile se vogliamo solo
una istanza di un oggetto particolare, ma quello che se vogliamo avere più di una
dello stesso tipo?
E la risposta a questa domanda è, ci sono cose
chiamato classi in JavaScript pure.
Possiamo creare una funzione che fa una sorta di inizializzazione
per un oggetto estraneo, e diremmo, come,
il mio class-- così il nome del object-- riutilizzabile
uguale funzione che imposta lo compongono.
Così che cosa questo sarebbe equivalente a è la creazione di un oggetto che
sarebbe proprio come, parentesi graffa, str, colon,
questo è una stringa, virgola, parentesi graffa.
Questa sarebbe la generica oggetto si inizializza,
con l'unica differenza essendo sulla righe successive creiamo un prototipo, che
significa che è un tasto predefinito che aggiungiamo al nostro oggetto che
ha il valore elencati qui.
Il che significa che, quando creo un nuovo istanza di questo oggetto MyClass,
sta andando a hanno pre-costruito all'interno di un valore chiamato str e un altro valore
chiamato MyPrint, che è andare a una funzione.
Eccezionale.
>> Grande.
Quindi l'ultima cosa da dire su JavaScript
è che è molto utile per quello sono chiamati operazioni asincrone.
Significa asincrono è che noi può attendere per qualche operazione
per completare prima di passare su, ma andare avanti mentre aspettiamo
e poi hanno qualcosa accada in seguito.
E quello che voglio dire con questo è, si può immaginare una situazione in cui
si invia una richiesta di alcuni web server da qualche parte,
e sta andando a inviare indietro qualche grande blocco di dati, giusto?
E il tuo utente potrebbe aspettare in Intanto per quel che accada,
e niente potrebbe essere in corso in quel momento.
Ma questo non è un grande disegno, giusto?
Tu non vuoi la pagina web di congelare.
Che cosa succede se l'utente vuole cliccare su un menu a discesa?
Non è un grande modello di progettazione.
Invece, in fondo ciò che JavaScript non è, dice,
OK, fare questa operazione in modo asincrono.
Così come, aspettare in fondo, e poi, quando l'operazione viene effettuata,
chiamare la callback function-- chiamare qualche funzione,
Fare qualche Action-- per segnalare che il operazione stavamo aspettando per terminare
è finita.
E la ragione per cui è super potente è, possiamo fare qualcosa, passare un argomento,
fare qualcosa, e poi attendere che succedesse qualcosa.
Poi, una volta che qualcosa complètes, possiamo chiamare un callback.
Questo è davvero comodo perché lascia a fare le cose con API Web Audio,
per esempio, come un carico file audio da un server remoto
senza dover attendere la tutto il file audio da caricare,
il che sarebbe davvero male per l'esperienza degli utenti.
Raffreddare.
>> Ultima coppia note su debugging, poiché questo
è una cosa che si sta andando ad avere a che fare come parte del progetto, garantito.
Ho accennato la console JavaScript.
Si tratta di una funzione super utile di tutti i browser moderni,
E abbiamo davvero ti consigliamo di ottenere agio con la console,
se si vuole ottenere buoni JavaScript.
E 'super utile per debugging, ma è anche
davvero utile per capire il modo di usare un'API.
Esso permette davvero facile sperimentazione
senza dover digitare un po ' codice, e quindi compilarlo.
Non è necessario fare tutti questi passaggi.
Si può solo scrivere codice in una linea,
e quindi ottenere un feedback immediato su se tale linea di codice o meno
worked-- molto utile.
>> E anche, solo un note-- tecnico la console JavaScript è un esempio
di un REPL-- così che è R-E-P-L, REPL, che sta per leggere, valutare,
ciclo di stampa.
Stai andando a digitare alcune cose in, che sarà leggere quello che hai digitato,
che sarà valutare, e che sarà la stampa uscita, e poi inizierà di nuovo.
Che ti permette di andare rapidamente a cerchi iterazione, che è davvero cool.
>> Credo che l'ultima vera note-- questo è l'ultima nota vero, sì.
Come possiamo effettivamente utilizzare JavaScript?
Quindi, prima, possiamo importare utilizzando un tag script
nella parte superiore o inferiore di un HTML file-- ovunque all'interno di un file HTML,
davvero.
E all'interno di un tag script, ci sono due sotto-modalità di importazione JavaScript.
La prima è di avere un file JavaScript separato
che importiamo nella sua interezza, o avendo un'area di codice come scritto
per iniziare, e poi sceneggiatura backslash alla fine.
E poi abbiamo appena scriviamo Javascript all'interno del file HTML.
Questi sono i due modi.
Non si può avere all'interno di HTML.
PUBBLICO: È uno migliore dell'altro?
Sam Green: La domanda era: è uno meglio dell'altro.
Quindi, sì, come pratica stile di codifica, e anche è come una pratica di progettazione.
Ci sono due ragioni il motivo per cui potrebbe essere migliore.
Il primo è, rende il codice un molto più leggibile se tutti del codice HTML
è in un unico luogo, tutto il vostro CSS è a un altro luogo, tutto il vostro JavaScript
è in un terzo posto.
Destra?
Credo che dovremmo già parlato a questo proposito in sections-- come CSS-- cosa
che è-- e va spesso in un altro file.
Così, simile tipo di concetto qui.
Si può anche immaginare che Javascript sarebbe riutilizzato su più
Pagina HTML, o forse un gran numero di pagine HTML,
e avere quella JavaScript refactoring in uno
file che è possibile importare in più di un luogo
permette il codice sia modo più gestibile.
Si può immaginare di fare un cambiare il codice JavaScript
e di dover modificarlo in 100 diversi file.
E invece possiamo semplicemente cambiare in uno, che è molto più potente.
Ho risposto alla tua domanda?
Raffreddare.
>> Possiamo anche digitare nella console, come abbiamo detto prima.
E ancora, un ultimo note-- Web audio è integrato,
non c'è bisogno di caricare qualsiasi cosa.
Raffreddare.
Ci sono domande, avete qualsiasi altre domande su JavaScript,
prima di passare?
>> PUBBLICO: [incomprensibile]
Sam Green: Va bene, fresco.
Così ora ha intenzione di parlare l'API.
>> HUGH ZABRISKIE: Freddo.
Grazie, Sam.
>> Sam Green: Certo.
HUGH ZABRISKIE: Awesome, così ci sposteremo da JavaScript.
Così abbiamo parlato di alcune delle gli elementi essenziali di JavaScript,
e queste sono le variabili, le funzioni, oggetti, funzioni come variabili,
caricamento asincrono.
Queste sono tutte cose che ti vedere come si utilizza il Web Audio.
Quindi stiamo solo andando a parlare su di esso prima ad un livello elevato.
>> Si tratta di una API, quindi è qualcosa che è costruito, come ha detto Sam,
a destra in JavaScript che si utilizza nella console.
E in realtà è proprio come codice C ++ Questo è davvero costruito in Chrome
e Firefox, e tutti questi browser.
Così l'idea principale con il Web Audio è che avete
questo tipo di conduttura di audio, giusto?
Quindi, i dati audio viene in qualche forma.
>> Ci sono tre tipi di forms-- principale avete l'oscillatore, che
crea una sinusoide, onda coseno stiamo andando a vedere come funziona.
Un altro molto comune, Naturalmente, è un MP3.
Così forse si inizia con una canzone, e poi si
voglia di fare un po 'di filtraggio a tale uscita e
che-- che potrebbe essere una possibile fonte.
E poi una davvero cool uno è il microfono.
Quindi è possibile utilizzare alcuni molto chiamate di base in JavaScript
per ottenere l'accesso al microfono, e quindi se si
voluto fare un app come un rilevatore di campo,
per esempio, che prende in la tua voce e dati fuori
il pitch-- modo molto semplice per questo.
Si può solo tipo di leggerlo in, a capire la frequenza,
e quindi un numero di uscita.
Quindi vedremo come funziona, pure.
>> La destinazione è fondamentalmente dove i dati audio viene emesso.
Quindi in generale, che è come gli altoparlanti del computer portatile.
Altre opzioni sono come un ScriptProcessorNode--
ci arriveremo nodi in un secondo-- ma in fondo,
o si sta mettendo fuori il suono attraverso il computer attraverso gli altoparlanti,
o che cerchiate un tipo di registrazione, in modo sei memorizzare come dati audio.
Così forse se qualcuno crea musica nella vostra applicazione e quindi
si desidera registrare e che forse come esportarla in SoundCloud, per example--
che sarebbe un modo per farlo.
Tutte le cose divertenti, che parleremo,
succede tra questi due punti, dove carichiamo nella musica
e poi output.
>> Quindi ho intenzione di parlare di cinque fasi di produzione audio in un secondo.
Abbiamo questa cosa chiamata un AudioContext, che
è questo piccolo involucro che vediamo qui.
Fondamentalmente quello AudioContext è-- se andare alla console JavaScript in questo momento,
siamo in grado di crearne uno proprio ora.
Solo un esempio di REPL, giusto?
Noi stiamo leggendo, la valutazione, e la stampa.
>> AudioContext è uno stato globale.
E 'una struttura, è un oggetto qui, e mantiene le informazioni
di cose che sono in corso sullo schermo relative a audio.
Un esempio è l'ora corrente.
Questo indica il numero di secondi, con estrema precisione,
Dato che la pagina web caricata.
Quindi questo è un davvero utile piccola proprietà che è possibile utilizzare.
E ha letto only-- penso in realtà si può provare a impostare un valore.
Essa vi dirà imposta, e poi se si stampa
again-- non ha in realtà funzionato.
Quindi ci sono di sola lettura immobili a JavaScript.
Questo è veramente utile se stai tipo di sincronizzazione
un lotto di diverso informazioni, quando si è
tipo di riproduzione di suoni diversi.
>> Un altro veramente utile è la destinazione contesto.
Sicuramente, se siete interessati, essere provare questo a proprio destra della console
adesso.
Quindi questo è un AudioDestinationNode.
Fondamentalmente ciò che questo dice è, dove è l'uscita andando?
Quindi ci sono due opzioni reali qui.
Di solito il default è a soli altoparlanti,
così AudioDestinationNode fondamentalmente dice basta
ci sono zero uscite al suono in arrivo, ha inviato al diffusore.
Quindi in generale, non è necessario deve giocare con questo.
Se siete interessati ad utilizzare effettivamente il ScriptProcessorNode per la registrazione,
sicuramente mi spara un e-mail più tardi perché questo è
un po 'più complicato.
Ma in generale, sei solo tipo di emettere suono in qualche forma.
Così fresco, ci saltiamo di nuovo qui.
PUBBLICO: Mi dispiace.
HUGH ZABRISKIE: Sì.
PUBBLICO: So che hai detto di parlare a più tardi sulla registrazione.
Si può interfacciarsi che con Pro Tools?
>> HUGH ZABRISKIE: Con Pro Tools?
Vediamo.
Non ci penso.
In modo da andare tra il cliente, che è il codice JavaScript
console e il vostro attuale computer è generalmente
qualcosa che è genere di off limits, se
sarà, specie per la natura del the-- è una specie di una cosa disegno,
ma si tenta di mantenere il browser separata dal computer effettivo dell'utente.
In generale, l'unica cosa che siete in grado di accesso è il microfono o la fotocamera.
Non sei in grado di, io non credo, utilizzare Pro Tools.
Tuttavia, se è stato creato una traccia in Pro Tools,
esportati che, si potrebbe caricare il qui, filtrare, ad esempio,
tale processo, e registrare che in un Audio Destination-- o, no-- una sfera
Nodo del processore.
E poi da lì, si potrebbe esportare che a SoundCloud, voi
potrebbe inviare in una e-mail, o quello che vuoi da lì.
>> Ma vi è una specie di leggera barriera tra fare musica sul computer
e fare musica on-line.
>> Sam Green: E questo è non unico a questa API.
Si tratta di una funzione di sicurezza di Chrome, e Penso che ogni altro browser moderno.
Il browser è autosufficiente.
Così, per esempio, una pagina web non può utilizzare JavaScript per trasformare il suono
su gli altoparlanti, per esempio.
O non è possibile spegnere il computer.
E non esiste un punto intermedio tra queste due cose, a destra,
quindi o si dispone di un completa astrazione,
o si apre il falla di sicurezza di lasciare
un programmatore con cattive intenzioni fare ciò che vogliono con il vostro portatile.
Ed è per questo che Chrome è autosufficiente.
>> HUGH ZABRISKIE: Sì.
Questo fa senso?
Bene bene.
Stavo per mostrare un esempio di uno.
Questo è più o meno come quanto si ottiene, in termini
di accesso computer dell'utente.
Se si dispone di una tastiera USB collegato, è possibile utilizzare qualcosa chiamato il Web
API MIDI, che non lo faremo davvero parlare qui,
ma questo è un altro che è API ricostruita in almeno Chrome--,
è per questo che amiamo Chrome-- Penso Firefox o Safari,
questa è una cosa facile da diversi browser hanno google--
supporto diverso per il quale API hanno implementato.
Ma se si voleva collegare una tastiera e lavorare con queste informazioni,
tipo di invio della tastiera Informazioni sopra al calcolatore
e quindi utilizzare tale linea, questa API è dove ti piacerebbe lavorare così.
>> Raffreddare.
OK.
Così, muovendosi rapidamente qui.
Come stiamo facendo in tempo?
>> SPEAKER 1: A proposito di 15.
>> HUGH ZABRISKIE: 15 minuti di sinistra?
Ok bello.
Quindi dovremo gara d'anticipo qui.
>> Quindi, in pratica, il principale punto di pensare a questo come una pipeline
è che ogni passo in cantiere è una serie di nodi audio.
La nostra fonte, diciamo, è un oscillatore.
Abbiamo bisogno di creare un nodo oscillatore.
E questo è solo tipo del piccolo function--
e sono tutti basati su del contesto audio qui.
>> PUBBLICO: Quando ha detto oscillatore, significa che
in realtà è letteralmente passando da due poli differenti avanti e indietro?
>> HUGH ZABRISKIE: No, è come una rappresentazione digitale.
In realtà è implementato in C ++.
Io in realtà non so le specifiche di come in realtà è implementato,
ma tutto questo funziona come dati binari.
A dire il vero, sì.
Questo sarebbe, ho potuto in realtà, se siete interessati,
Potrei inviare un po 'di più Informazioni su come le forme d'onda
sono mantenuti aventi un formato digitale.
Ok bello.
>> Quindi stiamo generando un tono come un seno onda o qualcosa di simile, forse
440 Hertz.
Creiamo un oscillatore.
Se vogliamo impostare il volume, ci collegare nulla un GainNode,
che potremmo fare con .creategain.
Che imposta il volume.
Si può passare che su qualsiasi dall'altra options-- bene,
così una fonte del buffer audio nodo è dove si potrebbe
memorizzare un MP3 che hai caricato in.
>> Filtro Biquad è per il filtraggio se si vuole prendere tutto alla base fuori
di una canzone, o qualcosa del genere.
Dio non voglia che si vuole prendere la base di una canzone.
E il nodo AudioDestination è, ancora una volta, come dove la nostra messa a punto è.
Se siete mai interessati a vedere tutte le diverse opzioni possibili,
basta andare alla scheda e lasciare il completamento automatico venire.
E se si crea, si vedrà tutto il cose diverse che si possono creare.
È possibile creare dinamico processori di script,
Io non so nemmeno cosa che è, per la miscelazione fusioni di canale
e splitter canale e tutto il resto.
Raffreddare.
>> Quindi questo è solo un esempio di una condotta.
Così abbiamo tre fonti in arrivo.
Forse si tratta di forme d'onda, forse si tratta di MP3.
Uno sta andando attraverso un filtro, un altro di
ottenendo distorto un'altra uno di panning a destra ea sinistra.
Si può fare ogni sorta di cose e tutti si mescolano in giro insieme,
e poi esce l'audio alla fine, come destinazione.
Questo è un esempio di ciò che più complicato codice Web Audio assomiglia.
Si sta creando tutti questi diversi oggetti destra qui--
Non sono sicuro di questo.
No, non zoomare.
OK.
>> Sam Green: Tu fai di controllo, Scroll-up.
HUGH ZABRISKIE: Controllo Scroll--
Sam Green: No, no.
Controllo--
>> HUGH ZABRISKIE: Oh, controllo, Scroll?
Oh, Gotcha.
Già.
Wow, no, no.
OK.
Io non lo farò.
>> Quindi sì, in questo primo sezione qui, si vede
stiamo creando tutti questi diversi nodi fuori del contesto.
Stiamo solo mettendo loro insieme nella seconda parte
da questa funzione denominata Connect.
Questa è davvero una chiave funzione in Web Audio.
Significa solo una volta che hai fatto qualcosa con il suono in un nodo,
passarlo al nodo successivo.
Così abbiamo la fonte, si collega all'analizzatore,
l'analizzatore fa qualcosa con esso, va a distorsione, e così via,
e alla destinazione in basso a destra qui.
Raffreddare.
OK, così continueremo andare avanti.
>> Il nuovo pipeline--, questi sono pipeline più comuni,
così si parla di tutte queste cose come distorsione, panning, tutta questa roba.
Se siete veramente interessati nell'uso cose Pro Tools,
quelli probabilmente interessano.
Se non, forse basta vuole riprodurre il suono,
o forse volete solo impostare il volume sul suono.
Questi sono i due tipo più comune di tubazioni nella produzione audio.
>> Anche in questo caso, i modi in cui può prendere in quanto oscillator-- così, cerchiamo di
fare una demo di questo diritto qui.
Quindi stiamo andando a creare un semplice contesto audio qui,
e da che stiamo andando per creare la nostra oscillatore.
In modo che sia, ancora una volta, siamo solo chiamerà Creare Oscillator.
Stiamo andando a impostare una frequenza su che, 440 Hertz, preferito da tutti.
Poi ci colleghiamo che alla destinazione Point-- che è l'altoparlante, così
la destinazione contesto.
Infine, diciamo solo, iniziare a zero secondi da ora, e dobbiamo suonare?
>> [RINGING]
>> HUGH ZABRISKIE: Qui andiamo.
E 'solo una sinusoide.
Ok bello.
E poi ci fermeremo quello.
>> PUBBLICO: Da dove che il feedback viene?
>> HUGH ZABRISKIE: Il feedback?
Oh, probabilmente nostri microfoni.
Quindi sì, è così che si fa.
E in realtà, se ho avuto tenuto in esecuzione, è
potrebbe avere la frequenza valore è in esecuzione,
così che è una cosa divertente da giocare.
Raffreddare.
Questo è sempre un bel uno a presentare.
>> Sam Green: Non ha fatto pensiamo che, abbiamo?
HUGH ZABRISKIE: Sì, questo è un brutto uno.
Così, tampone loading-- vi mostrerò un esempio che alla fine.
Questo è il caricamento di un MP3.
E microfono, è possibile utilizzare solo una funzione chiamato Navigator.getUserMedia ()
per richiedere l'accesso per l'utente del microfono per tali informazioni.
>> Qui sta il filtraggio, io sarò solo continuare a muoversi da questo.
Questo è abbastanza alto livello, ma solo filtri consentono di
>> [SEGNALE ACUSTICO]
Filtering permette anche per creare cose come il rosa
rumore, rumore marrone, rumore bianco.
Se si desidera creare rumore puro, che alcune persone amano pasticciare con,
è possibile utilizzare Web Audio filtraggio per farlo.
>> Audio Panning-- quindi immaginare se si sta scrivendo un gioco
e si desidera che il suono suonare come è venuta, come,
tiro attraverso lo schermo, si può usare il pan dell'audio
per creare questo tipo di cono, che like-- è abbastanza mathy,
ma in realtà è davvero cool se si ottiene il lavoro,
e c'è qualche buona tutorial su di esso posso inviarvi.
In sostanza, è possibile tipo di creare il suono
di qualcosa che va da in modo 3D.
E se avete un interesse DJ, è possibile iniziare a mescolare e attraversare canzoni dissolvenza.
>> Questo è solo alcuni molto di base codice, in pratica quello che ho fatto prima.
Questo imposta il volume della oscillatore, così creiamo il nostro oscillatore
che crea la forma d'onda.
Creiamo il nostro GainNode, set la nostra frequenza,
e quindi collegare l'oscillatore al GainNode, che poi cambia fondamentalmente
la quantità di segnale è consentito passare.
Ma in realtà, è un digitale cosa, quindi è più solo-- sì.
Questo non è ciò che sta realmente accadendo, ma questo è ciò che accade nella vita reale
con un guadagno.
>> PUBBLICO: --quantization del parametro volume?
HUGH ZABRISKIE: Siamo spiacenti?
PUBBLICO: Si tratta di un parametro del volume quantizzato?
HUGH ZABRISKIE: Sì.
E questa è una cosa di cui sono veramente carente nella mia conoscenza,
come funziona il guadagno su un livello digitale.
So che con l'attuale segnali, è fondamentalmente
controllare quanto sei amplificare il segnale.
Quindi, sì.
Ti manderò ulteriori informazioni su che, perché sarei curioso realtà
per saperne di più su questo.
Ma in fondo i parametri sono, uno è il fold--
il signal-- più forte e pari a zero non fa segnale o non si sente alcun suono.
Ci salteremo tempo demo per questo, perché è fondamentalmente quello che ho fatto prima.
E ancora, il Context.Destination è il nodo di destinazione audio.
Impressionante, OK.
>> Quindi ho intenzione di fare un rapido due demo.
Come stiamo facendo in tempo?
>> SPEAKER 1: Circa 10 minuti.
>> HUGH ZABRISKIE: 10 minuti?
Grande!
Eccezionale.
>> Così il primo che ho intenzione di do, si chiama la mia canzone preferita.
Quindi questo è solo un poco HTML JavaScript.
Stiamo per avere due pulsanti sulla pagina suonare la mia canzone preferita
e fermare la mia canzone preferita.
Cambierò questo.
>> PUBBLICO: Coprire il microfono.
>> HUGH ZABRISKIE: Sì.
E ho caricato qui uno script che basically--
e questo è molto utile per caricare un MP3,
quindi questo fa solo caricamento modo MP3 più veloce.
E 'fondamentalmente solo un wrapper.
Rende solo il processo di caricamento in MP3 molto più veloce,
altrimenti si sta utilizzando richiesta HTTP, un po 'come quello che stavamo facendo
sul pezzo corrente impostato con Server.
E 'davvero brutto, è non voglio farlo.
>> Così questo ragazzo, Boris PMI, ha scritto un davvero utile piccolo strumento chiamato BufferLoader.
Tutto ciò che fai è semplicemente passarlo la contesto, si passa un list--
o, sì, si tratta di una lista in JavaScript?
Sam Green: Un array.
HUGH ZABRISKIE: Oh, è un array, che è di destra.
Si tratta di una serie di percorsi di file diversi.
E poi si passa una funzione.
Questo è il callback di cui parlavamo circa con caricamento asincrono.
Che si chiamerà una volta che i file caricati.
E quella funzione che viene chiamata quando il file del caricato prende come un perimetro
una serie di buffer caricati.
Quindi, che si verifica qui.
In sostanza, è BufferList sta per essere uno value--
o che sta per essere un array di length, che ha in sé nell'indice
azzerare l'intero file caricato del MP3.
Quindi quello che faccio quando ho finito carico è, ho semplicemente
creare un'origine buffer, è un nodo di origine buffer audio.
Il passo successivo è che carico in source.buffer come il buffer pieno carico
dal BufferList-- è un sacco di buffers--
e poi ci si connette che l'audio tampone alla destinazione.
Così che cosa sta andando a fare è semplicemente messo l'MP3
dritto attraverso l'uscita, e avviarlo subito
su come raggiungere questa chiamata.
>> Fresco, e vediamo questo accada in azione.
Il mio [incomprensibile] qui, vediamo.
Così sto solo andando a avviare un server di base.
Questo è qualcosa che è necessario fare se si è
fare richieste di caricamento dei file.
Ho intenzione di avviare un server di base.
Questo è fondamentalmente il vostro intero PSET in questo momento in una linea,
ma è solo a partire un server sulla porta 80/80.
Quindi andiamo qui, abbiamo andando a caricare il 80/80,
stiamo per andare a la mia canzone preferita.
Quindi, se ho colpito "Play mia canzone preferita "in questo momento,
sta andando a caricare la mia canzone preferita e giocare it--
[MUSICA - Aquile, "LA VITA IN VELOCE CORSIA"]
--che sembra essere "La vita in la Fast Lane "dei The Eagles.
Ora, ho potuto colpire "Stop mia canzone preferita "e riprodurre esso.
>> [MUSICA - Aquile, "LA VITA IN VELOCE CORSIA"]
>> E se vado oltre per consolare, perché Ho usato una variabile globale qui
per tenere traccia di questo valore, in realtà ora sarà riconosciuta nella console.
Così si auto-crea per me.
Ecco, questo è quello che sta giocando in questo momento, e posso semplicemente chiamare source.stop ()
su quello.
Beh, sai una cosa?
Solo così voi ragazzi hanno sentito questo song-- si potrebbe riconoscere questa canzone.
>> [MUSICA - Rick Astley "Never Gonna GIVE You Up "]
[MUSICA - Aquile, "LA VITA IN VELOCE CORSIA"]
Ora abbiamo tutti stati Rickrolled.
OK, grande, andare avanti.
Raffreddare.
Quindi, questo è fondamentalmente un esempio di proprio come si potrebbe caricare un MP3 file--
[MUSICA - Aquile, "LA VITA IN VELOCE CORSIA"]
--e giocare, e fermarsi e avviarlo.
Avrei potuto fare molto di più [incomprensibile]
>> L'ultimo che farò è, Ti faccio vedere un [incomprensibile].
>> [RIPRODUZIONE DI BRANI MUSICALI]
>> E 'come, ogg.wave.mp3.
Penso che, se non ricordo male, Ho incontrato alcuni problemi con .m4a,
ma io non sono sicuro di questo.
Penso mp3.wave--
>> [MUSICA - Rick Astley "Never Gonna GIVE You Up "]
>> Ok fantastico.
Io non avrei dovuto dirlo.
In ogni caso, ciao.
Quindi abbiamo questo open.
Così ora tutto quello che faccio è, io fondamentalmente creato una sintassi di base per la creazione di musica.
Quindi, se faccio qualcosa di simile, aggiungere g4 il 1 ° 2, che cosa significa è che,
aggiungere la nota pianoforte, G4, che è la quarta G
sul piano dal basso.
Quindi questo è una specie di MIDI parlare, così per coloro che sono la musica basata,
questo è solo note MIDI.
>> PUBBLICO: Questo è il G del Medio C, giusto?
>> HUGH ZABRISKIE: Questo è il G sopra Middle C, che è di destra.
>> PUBBLICO: Sopra Medio C.
>> HUGH ZABRISKIE: Sì.
Attualmente si.
Credo di aver effettivamente fatto uno [incomprensibile],
quindi questo potrebbe essere un'ottava sopra che.
Quindi cerchiamo di vedere.
Se mi ha colpito Play--
[PIANO RIPETITIVA NOTA]
--we're andare a sentire questo.
L'idea è che opera proprio come una riga di comando sarebbe,
quindi se vado su e giù sulla mia tastiera, è
può tornare alla precedente comandi, che è molto utile.
E sotto è la mia lista di tracce, che sono tutti in esecuzione su loop.
>> PUBBLICO: Siete stati assumendo il Tastiera a 88 tasti su questo, giusto?
>> HUGH ZABRISKIE: La domanda era: Io parto dal presupposto sto una tastiera a 88 tasti,
e sì, lo sono.
Quello che ho fatto è che fondamentalmente ha preso 88 campioni
del pianoforte, uno per ogni nota.
E così ogni volta che si sentire una nota da ora in poi,
che è in realtà un ciclo che sembra like-- questo è sempre giocato su loop,
così per ogni nota, questo è in esecuzione.
Quello che succede è che io ricreare un buffer,
Creo un nodo guadagno per regolare il volume.
Questo solo un davvero modo complicato per dire che
memorizzare il buffer in una source.buffer.
Io do il guadagno, io collegarlo al guadagno,
il guadagno è collegato al uscita, e poi ci gioco.
Quindi cioè tipo di processo di prendere in una fonte di buffer.
>> PUBBLICO: si può effettivamente prendere quel suono secco e renderlo bagnato [incomprensibile]?
>> HUGH ZABRISKIE: È possibile, sì.
Ci sono ri-verbo, non c'è ritardo, distorsione.
Si può sostanzialmente mettere nulla in tra in quel panino di-- bene,
pipeline è una metafora migliore, ma è possibile aggiungere qualsiasi cosa in questo.
Raffreddare.
>> Quindi finirò la demo qui per darvi un senso
di appena il gran numero di volte che può funzionare quella funzione tutto in una volta.
Quindi ho intenzione di rimuovere questo.
Ho intenzione di creare un generatore che-- fondamentalmente ciò does-- questo è davvero
una specie di syntax-- complicato ma è andando a generare note al volo,
e solo iniziare a giocare loro come li valuta.
[PIANO interponendo]
>> Così possiamo solo fare un po 'di musica qui.
[PIANO interponendo]
>> Così che cosa questo comando fa, per esempio, è
ci vogliono quelle tre note per la pianoforte e poi li mette in B3.
Questa sintassi potrebbe rendere un po 'più senso
a coloro che hanno un musica di sottofondo qui.
>> Posso aggiungere una grancassa.
Io posso--
>> [Interponendo STRUMENTI]
>> --just giocare con quella.
>> Così si può make--
[Interponendo STRUMENTI]
Quello è un po 'più fastidioso.
[Interponendo STRUMENTI]
>> In modo che aggiunge in modo casuale un piatto a secco su ogni nota 16, con un 16%
[Incomprensibile].
>> [Interponendo STRUMENTI]
>> Sì, così il modo in cui questa works-- è sempre in 4: 4.
[Interponendo STRUMENTI]
>> Sì, così i quattro quarti, e 16/8.
[Interponendo STRUMENTI]
>> Quindi, in media, si ottiene il 60% dei colpi sulle note 16.
>> In ogni modo, questo era solo tipo di mettersi in mostra
alcune delle cose che si potrebbero costruire con l'API Web Audio.
E 'davvero potente, è veramente veloce, e si può fare un sacco di cose interessanti
con esso.
Così ancora una volta, tutte le domande che avete, e-mail myself-- Hugh-- o Sam,
e onestamente, Google ha un sacco di buone risorse.
Tutte le ultime domande?
Già.
>> PUBBLICO: Quindi si può accedere il microfono incorporato.
Che cosa succede se si voleva utilizzare un microfono migliore?
HUGH ZABRISKIE: Se si voleva di utilizzare meglio il microfono?
Quindi, di nuovo, questo fa parte del astrazione tra Chrome
e il resto del computer.
Meno che non sia disponibile attraverso una API, come Web API MIDI,
si potrebbe forse trovare alcuni hack, ma generalmente non fattibile.
>> Sam Green: è possibile also-- tutto il Chrome sa
è ciò che il vostro microfono predefinito è, e che accede.
Quindi, se si ha un microfono si potrebbe impostato come microfono predefinito del computer,
è possibile accedere in questo modo e sarebbe probabilmente funzionerà.
HUGH ZABRISKIE: Questo è un buon punto.
Non ho mai provato, ma si potrebbe essere in grado di genere
di-- se si reindirizza l'altoparlante di ingresso, si potrebbe essere in grado di farlo, sì.
>> Tutte le ultime domande?
Raffreddare.
Beh, grazie ragazzi tanto per guardare.
Sono Hugh.
Sam Green: Io sono Sam.
HUGH ZABRISKIE: E questo è CS50.