Bentornata in questa lezione ci concentreremo sull'aggiunta dell'audio, aggiungendo così gli esempi musicali che suoneremo quando colpiremo ciascun tasto
e ci concentreremo anche sul dare a ciascun tasto il proprio colore in modo da non ottenere sempre questi arancione sbiadendo
al giallo e poi al verde ma ne avremo alcuni che sono viola alcuni che sono
blu come potete vedere qui tutti i diversi colori.
Ma è sempre lo stesso colore per ogni dato tasto come H ha sempre questa stecca arancione è sempre questa che è
T Y e così via.
OK.
Quindi, per iniziare, capiremo come possiamo suonare un suono.
Quindi, solo come attiviamo un suono usando Hallard.
Sì in Hausler è sostanzialmente l'opposto di Paperchase, per quanto la sua complessità sia davvero molto semplice,
il che lo rende davvero piacevole.
Ancora una volta è possibile riprodurre audio senza una libreria, ma è un po '.
È un po 'doloroso quando vuoi fare qualcosa di simile a quello che vogliamo fare dove non suoniamo un
solo suono una volta ma voglio essere in grado di far scattare un suono dieci volte di seguito come se dicessi che
sto facendo questo merda qui voglio essere in
grado di fare qualcosa di simile c'è un po 'di lavoro nel fare in modo che si comportino nel modo in cui lo vogliamo.
È davvero facile suonare un suono come suonare una canzone che è davvero fastidioso, ma se vai su un
sito Web e c'è qualcuno che conosci una sorta di suono o canzone in sottofondo che è
davvero semplice da fare con h o gufo e javascript .
Ma per fare qualcosa di simile in cui possiamo avere un sacco di suoni simultanei e
possiamo ripetere le cose e sarebbe molto più facile usare qualcosa come Hallard J us.
Quindi di nuovo non impossibile.
Come qualsiasi cosa che una biblioteca ti può fare da solo.
Ma non vorremmo davvero.
Quindi se diamo un'occhiata a come funziona questo è tutto ciò di cui avremo bisogno per usare questo piccolo bit
di codice qui dove ne creiamo un nuovo come.
Quindi, come è la cosa che stiamo inizializzando e sapevamo come.
Poi gli forniamo un elenco di alcuni URL dei file che vogliamo riprodurre.
Quindi, la ragione per cui gli diamo una serie di questi diversi sei diversi file anche se
sembrano uguali sono solo diversi tipi di file e l'ordine in cui li
metti è l'ordine che l'howler proverà e caricherà Loro dentro.
alcuni tipi di file che funzioneranno in ogni browser, alcuni dei quali non funzioneranno in tutti i browser.
Quindi fondamentalmente ci sono
Quindi è possibile specificare alcuni backup.
Non lo faremo.
Avremo solo un singolo file.
Ma se volessi avere dei backup fondamentalmente nel modo in cui funziona per quanto ne so,
puoi leggerlo qui ne sono certo.
Qui andiamo tu o la fonte che stai facendo per la traccia o le tracce da caricare per il suono.
Questi dovrebbero essere un ordine di preferenza.
Howard Jasc caricherà automaticamente il primo compatibile con il browser corrente.
Quindi eccoti.
Potremmo aggiungere altre versioni della stessa canzone.
Nel nostro caso lo stesso campione e holler caricheranno automaticamente il primo compatibile.
OK.
Quindi il codice che ci serve è il nuovo Howell.
E poi vai e basta.
E poi, quando siamo pronti per giocare, chiamiamo solo giochi.
Puoi vedere
qui e non lo fermeremo.
Non faremo una pausa.
Non andremo in loop perché i nostri suoni sono veramente brevi.
Quindi vogliamo solo che giochino e che finiscano.
Ognuno si trova a metà tra un secondo e un secondo.
Quindi, se non lo hai fatto, vai avanti e scarica il file zip che contiene tutti i
suoni e trascinato nella stessa directory in cui hai scritto il codice.
Quindi, invece dei suoni, abbiamo tutti questi file.
Tutto ok.
E la prossima cosa che dobbiamo fare è installare HAUSLER per poterlo usare.
Quindi puoi scaricarlo.
Ma solo per motivi vari userò un CDN.
Quindi ho appena fatto una ricerca per l'url CDN
copiato questo prima.
Sei tutto qui, potresti sempre provarlo per vedere se è valido.
Eccoci qui.
Ecco il codice che è per howler.
Perfezionare.
Torniamo alla nostra
app e poi aggiungeremo uno script.
Quindi, dopo che la carta può duplicarlo e basta cambiare la fonte per essere l'urlatore che sai, assicuriamoci
che si carichi OK senza alcun problema.
Perfezionare.
In seguito facciamo in realtà il nostro primo ululato.
Ricapitoliamo questo codice da hower.
Prendi questo primo
qui e facciamolo all'inizio.
Quindi lo faremo proprio qui e diremo che il suono di VAR equivale a sapere come e poi metteremo in
un solo file e facciamo il primo che vediamo.
Quindi, Bubbles ha ottenuto MP 3, quindi è all'interno della cartella sonora MP 3.
Quindi, suono.
Bolla di Slash.
Ho già dimenticato di usare le bolle.
Ecco qua.
È pluralizzato
Quindi sembra come te bolle.
MP 3 e questo è tutto ciò di cui abbiamo bisogno.
E non giochiamo subito.
Creiamo solo quello.
Questo è tutto ciò che dobbiamo fare.
E poi a suonarlo, suoniamolo.
Quando premi un tasto verso il basso in modo che sia il suono, il punto è veramente bello e semplice diamo un'occhiata provalo.
Eccoci.
Quindi ogni tasto che preme un gruppo di tasti diversi ora attiva il suono ok.
Spero che non sia stato troppo fastidioso.
Quindi il prossimo concentriamoci sull'aggiunta di un altro suono.
Quindi ne faremo solo due per iniziare.
Quindi abbiamo delle bolle.
Facciamo MP3 di Clay in modo che potessimo fare è duplicare questo e fare un suono due uguale a nuovo
Howell e faremo suono di barra e P3.
E poi quello che faremo qui è avere una dichiarazione if.
Quindi concentriamoci su due chiavi.
Facciamo un e s.
Quindi, se premi un tasto se è a, allora suoneremo il suono e chiamiamolo uno solo per renderlo più
chiaro se la chiave è che tu metti anche le virgolette.
Poi suoneremo anche il suono.
Quindi per dire quale tasto è stato premuto è molto semplice con Paperchase abbiamo questo oggetto evento qui e
dobbiamo fare è un punto chiave evento.
Quindi leggiamo un'istruzione if se l'evento è uguale a a.
Quindi faremo solo un suono di riproduzione.
Quindi è il suono che si suona e poi si fa la stessa cosa.
Se il tasto punto evento è uguale a X, verrà riprodotto anche il suono.
Quindi suona per suonare proprio così.
Quindi possiamo provarlo.
Quindi solo le chiavi e S dovrebbero innescare le cose.
Quindi ti dirò che ora sto colpendo q sembra che abbiamo un errore.
Cosa stiamo ottenendo qui.
Il suono non è definito.
Ignora questi avvertimenti qui per ora li sistemeremo alla fine.
È un problema più complesso, ma in realtà non ostacolerà l'avvio del nostro codice.
Ma questo errore sarà così sciocco.
Stavo facendo riferimento al suono proprio qui.
Non abbiamo più suono.
OK.
Quindi ora niente dovrebbe suonare.
Quando premo la maggior parte dei tasti, premo un altro tasto K e ora ho s.
Quindi abbiamo un n.
Perfezionare.
E quello che potremmo fare ora è assegnare un colore a ciascuno di essi in modo da poter fare qualcosa del genere.
Spostiamolo verso il basso dello stesso tasto, ma prima di spingere potremmo avere qualcosa del
genere se l'evento ha una riproduzione che suona e possiamo impostare il colore del nuovo colore di riempimento del punto del cerchio
uguale e quindi possiamo dargli un il colore piace vedere 3 5 0 e poi fare la stessa cosa.
Se premiamo S ma con un colore diverso come facciamo 16 a 0 8 5 e poi possiamo avere un altro e spero che tu stia pensando a te stesso
Questo probabilmente non è il modo migliore per farlo.
Potrebbe essere OK per due e noi, ma per quanto riguarda 20 30 o 50 chiavi.
Usiamo l'intera tastiera e tutti i diversi caratteri.
Quello sarebbe un sacco di codice.
Ma lascia che ti mostri proprio adesso.
Pertanto, la maggior parte dei colori o la maggior parte dei tasti non riproduce il suono.
Ci danno lo stesso colore.
Ora, se avessi un UPS, premo due tasti e ci dà un colore leggermente diverso in quanto ci dà un blu.
Quindi, ovviamente, il colore che ho scelto qui è difficile.
È difficile vedere di farmi cambiare i cambiamenti in viola.
E tecnicamente dovremmo renderlo un altro.
Se è così, controlleremo se la chiave è un LCF e altro se abbiamo due istruzioni if.
Questo verrà eseguito e quindi ne avremo un altro se e se ciò non è vero, allora l'elso sarà vero ma non
terrà conto di ciò che appare.
Quindi se vogliamo solo che uno di questi sia vero, vogliamo solo un colore viola blu o arancione.
Quindi vogliamo che siano parte di una dichiarazione if, ma non ha molta importanza
perché lo cambieremo in un secondo.
Ora il nostro aggiornamento qui è normale.
Colpisco a anche se otteniamo un effetto viola quando otteniamo il blu e due suoni diversi.
OK.
Ecco come usiamo Hausler.
Ora vogliamo fare questo per ogni singola chiave e c'è un modo molto migliore di quello che abbiamo qui.
Quindi in realtà mi libererò di tutto
questo perché potremmo.
Come ho detto prima ho un'istruzione if per ogni singola chiave se key è una do this se la chiave è B e per
ogni singola chiave.
Ma non è davvero una buona pratica.
Quindi quello che faremo è definire un oggetto e lo chiameremo semplicemente dati chiave ed è un oggetto.
E questo è come sarà.
Quindi avremo una chiave come a.
E poi quando viene premuto a, diremo che il colore dovrebbe essere viola e che il suono dovrebbe essere.
E mettiamo tutta questa cosa lì dentro.
Quindi lo esaminerò tra un secondo.
Lascia che prima metta questo qui e poi possiamo fare di nuovo la stessa identica cosa per noi.
Quindi quando viene premuto il colore dovrebbe essere verde e il suono dovrebbe essere nuovo.
Come sarà.
La stessa cosa che sei o altro e facciamo una barra del suono. Clay ha pensato all'MP3 e quindi potremmo
farlo per ogni singola chiave.
E sì, qui c'è molta sintassi, ma il vantaggio è che abbiamo un posto in cui tutti i nostri
dati sono definiti e quindi non abbiamo bisogno di un'istruzione if o di un condizionale separato per ogni singola chiave.
Tutto ciò che dobbiamo fare è prendere dove sei la chiave per i punti dell'evento che in realtà ti sei sbarazzata.
Prendi questo qui.
Tasto punto evento che è il tasto premuto.
E diciamo che questa è la lettera J.
Se è così, lo prendiamo e lo inseriamo nei dati chiave e questo ci darà un suono color viola.
È questo suono
Quindi ti mostrerò cosa intendo.
Andiamo con questi due esempi e per rendere più ovvio aggiungiamo in un altro
duplicato quello che abbiamo.
Quindi abbiamo anche noi facciamo D.
E il colore può essere troppo giallo e poi suono.
Cos'altro abbiamo.
Facciamo i coriandoli.
Perfezionare.
Sbarazzati di questa virgola finale.
Ora possiamo sbarazzarci di questo e avremo bisogno di cambiarlo un po 'e
la prossima cosa che faremo è prendere la chiave dell'evento e collegarla ai nostri dati chiave.
Quindi potremmo fare qualcosa di simile.
Chiave evento chiave dati chiave e che ci darebbe per se se fosse un evento ci ha dato questa intera cosa
qui e poi possiamo fare il colore in modo che possiamo iniziare lì.
Quindi, ciò che faremo prima di spingere la nuova cerchia e diremo solo che il nuovo colore di riempimento della circonferenza è
uguale al colore della chiave dell'evento dei dati chiave.
Quindi, per ribadire che la chiave scura è una lettera.
Bene nel nostro caso ci assicureremo che sia una lettera.
Tecnicamente potrebbe essere un numero o una scheda shiftier, ma è la chiave che è stata premuta.
Quindi lo prendiamo e lo inseriamo nei dati chiave.
Otteniamo questa intera faccenda.
Se la chiave eventime è a se l'utente ha premuto a, allora stiamo facendo il colore scuro che ci dà il viola.
Quindi, stiamo impostando una nuova cerchia ma riempiamo il colore per essere viola.
Se l'evento Duck Key è un avviso, non è necessario avere una dichiarazione if per farlo.
Quindi non dobbiamo dire se la Turchia ha un ruolo se questo evento viene chiesto di farlo.
Questa è la stessa linea, non importa cosa.
Poiché abbiamo questo unico dizionario o questa fonte dei nostri dati definiti, c'è un problema, naturalmente.
Questo funzionerà solo per una S e D al momento.
Quindi ti mostrerò l'aggiornamento assicurandoti che non ci siano errori di sintassi.
Noi non possiamo leggere il colore o non possiamo leggere correttamente colorati indefiniti e questo non è un errore di sintassi.
Questo è l'errore che mi aspetto.
Quindi ti mostrerò.
Premerò una buona pressione, oppure sono buoni e D.
Ma ora premo Q E abbiamo un problema.
E questo perché questi dati chiave non definiti di Q non esistono.
Abbiamo una S e una D.
Quindi questo è un problema.
Il modo per risolvere questo è semplice.
Tutto quello che faremo è controllare se lo fai qui.
Nella parte superiore di quel tasto, premere se l'evento di parentesi di dati chiave Docky.
Quindi ricorda se questa è la verità Fondamentalmente se esiste allora faremo tutto questo.
Altrimenti, se non esiste, non faremo nulla per iniziare.
In realtà non farò nulla.
Quindi in questo momento la nostra Apple funziona solo se farà qualcosa o farà qualsiasi cosa quando premi una S e una D.
Quindi, per tornare indietro, assicuriamoci che funzioni ora.
Q Non succede nulla.
Sto premendo un mazzo di chiavi.
Ora ho colpito a.
E funziona.
S e D ma nessun altro tasto fa nulla.
Grande.
Quindi ora facciamo suonare il suono.
Quindi è anche bello e semplice.
di suoni chiave per i dati degli eventi e non sono sicuro del motivo per cui ho chiamato questi due suoni che avrebbero dovuto suonare.
Abbiamo solo bisogno
Lì andiamo a suonare il punto.
Ricorda che i Venki si inseriscono in questa savey press D.
Otteniamo questo oggetto.
Facciamo un suono dat su di esso.
Otteniamo questo che poi eseguiremo come prima.
OK, facciamo un tentativo.
A come il.
E gli altri tasti non fanno nulla.
Perfezionare.
Quindi tutto quello che ci rimane da fare qui è in realtà solo aggiungere tutte le altre chiavi
e sarebbe davvero doloroso per te guardarmi digitare da zero.
Ho pre-fatto che ti ho dato il file nel download.
L'ho chiamato giorno per giorno.
Sì.
Quindi se lo apriamo è solo un oggetto gigante che ha tutti i tasti delle lettere.
Quindi abbiamo q w r.
Non sono davvero in alcun ordine.
Bene, ma non hanno un ordine particolare per quanto riguarda i colori e i suoni.
Ho scelto solo quelli casuali e ognuno di loro ha un colore.
Quindi se copiamo questo e sostituiamo quello che abbiamo qui, assicuriamoci di chiamarlo
perfetto per i dati chiave.
Ora abbiamo fornito questo dizionario di suoni cromatici per ogni singola chiave, almeno ogni singolo tasto
alfabetico.
E possiamo usare quello.
Non dobbiamo assolutamente cambiare il nostro codice.
Quindi è davvero bello se vogliamo aggiungere tasti numerici in cui vogliamo aggiungere tab e shift
e escape e qualsiasi altra cosa aggiungiamo solo proprietà extra su questo oggetto.
Quindi proviamo a chiudere l'aggiornamento.
Perfezionare.
Tutto ok.
Quindi non farti trasportare qui.
Molto divertente però.
OK.
Va bene, basta.
Quindi abbiamo coperto molto, ma alla fine della giornata tutto ciò che abbiamo fatto è stato prendere un codice che
abbiamo trovato per fare un cerchio.
Abbiamo preso del codice che abbiamo trovato per animare un cerchio per cambiare il colore.
Abbiamo trovato del codice per fare eventi.
Quindi quando si preme un tasto.
E poi lo combiniamo con qualche altro codice che abbiamo trovato per suonare della musica.
E quando lo metti insieme puoi fare cose interessanti e c'è molto di più che puoi fare qui.
E non siamo fatti al 100%.
Abbiamo finito con la funzionalità, quindi non aggiungiamo nuove funzionalità e non sembreremo diverse.
Ma se apri la console vedrai che tutti questi file non possono caricare i file SML HTP request cross cross
origin.
Blah blah blah.
Lo copro nel prossimo video.
Parla del perché sta accadendo e anche di come possiamo aggiustarlo.
E poi l'altra cosa che faremo è parlare di un piccolo modo di refactoring perché in questo
momento ogni volta che premo aggiungo una nuova cerchia alla matrice del cerchio e non li rimuoverò
mai da quell'array.
Quindi potrei averne 10000 in questo momento.
Beh, io no, ma potrei averne cento e ce ne sono 200 e passeremo sopra a quella cosa intera.
Anche se non vediamo i cerchi perché sono così piccoli.
Quindi faremo una piccola modifica per sbarazzarci di quelli nel prossimo video.
Ma ancora una volta abbiamo finito con la funzionalità, quindi se non ti interessa vedere che ti è piaciuto
farlo e vuoi andare avanti.
Vai avanti e passa alla prossima unità.