Bem-vindo de volta a esta lição, nos concentraremos em adicionar o áudio para adicionar as amostras de música que tocaremos
quando tocaremos cada tecla e também nos concentraremos em dar a cada tecla sua própria cor para que nem sempre obtenhamos essas
laranja desaparecendo para amarelo e depois verde, mas teremos alguns que são roxos, que são azuis, como
você pode ver aqui todas as cores diferentes.
Mas sempre é a mesma cor para qualquer chave como H, sempre essa sugestão laranja é sempre essa, que é T
Y e assim por diante.
ESTÁ BEM.
Então, para começar, descobriremos como podemos tocar um som.
Então, como desencadeamos um som usando Hallard.
Sim, no Hausler, é basicamente o oposto da Paperchase, na medida em que é complexa, é muito simples,
o que o torna muito bom.
Novamente você pode reproduzir áudio sem uma biblioteca, mas é um pouco.
É um pouco doloroso quando você quer fazer algo como o que queremos fazer onde não estamos apenas
tocando um som uma vez, mas eu quero ser capaz de disparar um som dez vezes seguidas, como se estivesse fazendo
isso Por favor, eu quero ser capaz
de fazer algo como se houvesse um pouco de trabalho envolvido para que isso realmente se comportasse da maneira que queremos.
É realmente fácil tocar um som como tocar uma música que é realmente irritante, mas se você entrar em um site
e há algum que você conhece algum tipo de som ou música que está jogando no fundo que é
realmente simples de fazer com h tim owl e javascript .
Mas para fazer algo como isso, onde podemos ter um monte de som simultâneo e podemos repetir
coisas e isso seria muito mais fácil de usar algo como a Hallard J us.
Então, novamente, não é impossível.
Como qualquer coisa que uma biblioteca você pode fazer você sozinho.
Mas nós realmente não queremos.
Então, se dar uma olhada em como funciona, isso é tudo o que precisamos usar este pequeno
código aqui onde criamos um novo como.
Então, como é a coisa que estamos inicializando e sabia como.
Então, damos uma lista de alguns URLs dos arquivos que queremos jogar.
Então, o motivo pelo qual lhe damos uma variedade destes diferentes, você é um arquivo diferente, mesmo que eles pareçam serem
os mesmos, são apenas tipos de arquivos diferentes e a ordem em que os colocou é
a ordem em que o atril irá tentar e carregar eles dentro.
tipos de arquivos que irão funcionar em todos os navegadores, alguns deles que não funcionarão em todos os navegadores.
Então, basicamente, existem certos
Então, você pode especificar determinados backups.
Nós não vamos fazer isso.
Teremos apenas um único arquivo.
Mas se você queria ter backups basicamente da maneira que isso funciona, tanto quanto eu sei, pelo menos você
pode ler sobre isso aqui, tenho certeza.
Aqui vamos você ou então a fonte, você é mais para a faixa ou as faixas a serem carregadas para o som.
Estas devem ser uma ordem de preferência.
Howard Jasc carregará automaticamente o primeiro que é compatível com o navegador atual.
Então, você vai.
Poderíamos adicionar outras versões da mesma música.
No nosso caso, a mesma amostra e holler carregariam automaticamente o primeiro compatível.
ESTÁ BEM.
Então, o código que precisamos é o novo Howell.
E então você vai e é isso.
E então, quando estamos prontos para jogar, chamamos peças.
Você pode ver
aqui e não vamos parar.
Não vamos fazer uma pausa.
Não vamos fazer um loop porque nossos sons são muito baixos.
Então, queremos que eles joguem e deixá-los terminar.
Cada um está em algum lugar entre meio segundo e segundo.
Então, se você não fez isso, vá em frente e baixe esse arquivo zip que tenha todos os
sons e arrastado para o mesmo diretório onde você escreveu seu código.
Então, em vez de sons, temos todos esses arquivos.
Tudo bem.
E a próxima coisa que precisamos fazer é instalar o HAUSLER para usá-lo.
Então você pode baixá-lo.
Mas, por causa da variedade, usarei um CDN.
Então, eu fiz uma pesquisa para o CD de
howler CD, primeiro.
Você está tudo aqui sempre pode testá-lo ver se é válido.
Aqui vamos nós.
Aqui está o código que é para o atril.
Perfeito.
Voltemos ao nosso aplicativo
e depois vamos adicionar um script.
Então, depois que o papel pode duplicar isso e simplesmente mudar a fonte para ser o atril que você conhece, vamos nos certificar
de que ele seja carregado OK sem nenhum problema.
Perfeito.
Em seguida, vamos fazer o nosso primeiro aipo.
Então, vamos copiar este código novamente.
Basta pegar este primeiro
aqui e vamos fazer isso no início.
Então, vamos apenas fazê-lo aqui e diremos que os iguais de som da VAR sabiam como e então vamos colocar
um único arquivo e fazer o primeiro que vemos.
Então, Bubbles obteve MP 3, de modo que está dentro do diretório de som slash bubbles stud MP 3.
Então soa.
Slash bubble.
Eu já esqueci de usar bolhas.
Ai está.
É pluralizado.
Então soa como você Bubbles.
MP 3 e isso é tudo o que precisamos.
E não vamos jogar de imediato.
Vamos apenas criar isso.
Isso é tudo o que precisamos fazer.
E então, para jogar, vamos jogar.
Quando você pressiona uma tecla para baixo, então é um jogo de ponto de som realmente agradável e simples, vamos dar uma olhada, experimente.
Aqui vamos nós.
Então, cada tecla pressionando um monte de teclas diferentes agora aciona esse som, ok.
Espero que isso não seja muito irritante.
Então, em seguida, vamos nos concentrar em adicionar outro som.
Então, vamos fazer duas para começar.
Então, temos bolhas.
Vamos fazer Clay MP3 para que possamos fazer é apenas duplicar isso e fazer um som dois é igual a
Howell novo e vamos fazer argila e P3.
E então, o que faremos aqui é ter uma declaração if.
Então, vamos nos concentrar em duas chaves.
Vamos fazer um e s.
Então, se você pressionar uma tecla se for, então, tocaremos o som e vamos chamar um som, apenas para torná-lo
mais claro se a chave for, você também colocou citações sobre isso.
Então, tocaremos o som também.
Então, para dizer qual a chave pressionada, é realmente fácil com a Paperchase que temos este objeto de evento aqui e precisamos
fazer é uma chave de ponto de evento.
Então, vamos apenas ler uma declaração if se evento que a chave é igual a.
Então, vamos fazer um som de reprodução.
Então, é uma peça de som e depois faça o mesmo.
Se a chave de ponto de evento igual a igual a X, então, tocará o som também.
Então toca tocar assim.
Então podemos tentar isso.
Então, apenas chaves e S devem desencadear coisas.
Então, eu vou te dizer agora que estou acertando q parece que temos um erro.
O que estamos chegando aqui.
O som não está definido.
Ignore estas advertências aqui por agora, vamos consertar as mesmas no final.
É uma questão mais complexa, mas na verdade não entrará no caminho do nosso código trabalhando para começar.
Mas isso será um erro tão bobo.
Eu estava referenciando o som aqui.
Já não temos som.
ESTÁ BEM.
Então, agora nada deve jogar.
Quando eu toco a maioria das teclas, eu vou bater em outras K e agora tenho s.
Então nós temos um n s.
Perfeito.
E o que podemos fazer também é atribuir uma cor a cada um para que possamos fazer algo assim.
Vamos mover isso para a parte inferior da mesma chave, mas logo antes de empurrar podemos
ter algo assim se o evento tiver uma peça que soa e podemos definir a cor do novo círculo, a cor de preenchimento
de pontos é igual e então podemos dar uma Cor como ver 3 5 0 e depois fazer o mesmo.
Se pressionarmos S, mas com uma cor diferente, vamos fazer 16 a 0 8 5 e então podemos ter outra coisa e espero que esteja pensando em si mesmo.
Provavelmente não é a melhor maneira de fazer isso.
Pode ser bom para dois e para nós, mas o que é cerca de 20 30 ou 50 chaves.
Usamos todo o teclado e todos os caracteres diferentes.
Isso seria um monte de código.
Mas deixe-me mostrar-lhe agora.
Então, indique a maioria das cores ou a maioria das teclas não reproduzem o som.
Eles nos dão a mesma cor.
Agora, se eu tivesse uma UPS, bati duas chaves e nos dá uma cor ligeiramente diferente, pois nos dá um azul.
Então, é claro, a cor que eu escolhi aqui é difícil.
É difícil de ver, deixe-me mudar as mudanças para serem roxos.
E, tecnicamente, devemos fazer isso de outra forma.
Se assim for, verificamos se a chave é um LCF e, se tivermos duas instruções if.
Este será executado e, em seguida, temos outro se e se isso não for verdade, então o elso seja verdadeiro, mas não
levará em conta que este apareça.
Então, se nós queremos que um desses seja verdadeiro, o que é que queremos apenas uma cor azul ou laranja.
Então queremos que eles façam parte de uma declaração if, mas isso realmente não importa, porque
vamos mudar isso em apenas um segundo.
Agora, nossa atualização aqui é uma chave normal.
Eu acerta um, embora nós obtenhamos um golpe púrpura quando ficamos azuis e dois sons diferentes.
ESTÁ BEM.
Então é assim que usamos Hausler.
Agora queremos fazer isso por cada chave e há uma maneira muito melhor do que o que temos aqui.
Então, eu realmente vou me livrar de tudo
isso porque poderíamos.
Como mencionei anteriormente, tenha uma instrução if para cada chave se a chave for fazer isso se a chave for B e para
cada única chave.
Mas essa não é realmente uma boa prática.
Então, o que faremos em vez disso é definir um objeto e chamaremos de dados-chave e é um objeto.
E é assim que será.
Então, teremos uma chave como a.
E então, quando a é pressionada, diremos que a cor deve ser roxa e que o som deve ser.
E vamos colocar tudo isso lá dentro.
Então vou passar por um segundo.
Deixe-me colocar isso aqui primeiro e, em seguida, podemos fazer exatamente a mesma coisa novamente para nós.
Então, quando é pressionado, a cor deve ser verde e o som deve ser novo.
Como vai.
A mesma coisa que você é ou então, e vamos fazer a barra de som Clay pensou MP3 e então
poderíamos fazer isso por cada chave.
E sim, é uma grande sintaxe aqui, mas a vantagem é que temos um lugar para todos os nossos
dados é definido e, então, não precisamos de uma declaração if ou em um condicional separado para cada chave.
Tudo o que temos a fazer é levar onde você está a chave de ponto do evento que realmente se livrou.
Leve isso aqui.
Chave de ponto de evento, que é a chave que foi pressionada.
E digamos que essa é a letra J.
Se for esse o caso, basta levá-lo e conectá-lo em dados-chave e isso nos dará cor som roxo.
É esse som.
Então, vou mostrar o que quero dizer.
Vamos apenas com esses dois exemplos e, para torná-lo mais óbvio, vamos adicionar mais duas
vezes o que temos.
Então, nós temos um n, vamos também D. D.
E a cor pode ser muito amarela e depois som.
O que mais nos temos.
Vamos fazer confetes.
Perfeito.
Se livrar dessa vírgula.
Podemos nos livrar disso agora e precisamos mudar isso um pouco e a
próxima coisa a fazer é levar essa chave de pato de evento e conectá-la aos nossos dados-chave.
Então, poderíamos fazer algo assim.
Chave de evento de suporte de dados chave e que nos daria para se, se fosse um evento, ele nos fornece essa coisa
toda aqui e então podemos fazer cores para que possamos começar por aí.
Então, o que faremos é antes de pressionar o novo círculo e simplesmente diremos que a cor do preenchimento do novo círculo é igual
à cor da chave do evento de dados chave.
Então, apenas para reiterar a chave escura é uma carta.
Bem, no nosso caso, teremos certeza de que é uma carta.
Tecnicamente, pode ser um número ou guia mais variável, mas é a chave que foi pressionada.
Em seguida, tomamos isso e conecte-o aos dados-chave.
Recebemos tudo isso.
Se a hora do tempo é um se o usuário pressionou um, então nós estamos fazendo cores escuras que nos dão a roxo.
Então, estamos estabelecendo um novo círculo, mas preenchemos a cor para ser roxo.
Se o evento Duck Key é um aviso, não temos que ter uma declaração if para fazer isso.
Portanto, não precisamos dizer se a Turquia tem um fazer se esse evento for solicitado a fazer isso.
Esta é a mesma linha, não importa o quê.
Porque temos este um dicionário ou esta fonte de nossos dados definidos há um problema, é claro.
Isso só funcionará para um S e D agora.
Então, vou mostrar-lhe atualizar, certifique-se de que não temos erros de sintaxe.
Nós não conseguimos ler cores ou não podemos ler um padrão indefinido e isso não é um erro de sintaxe.
Esse é o erro que eu estou esperando.
Então eu vou te mostrar.
Vou pressionar uma boa pressão a ou s também são bons e D.
Mas agora eu pressiono Q E nós temos um problema.
E isso é porque isso é indefinido, os dados principais de Q não existem.
Nós temos um S e D.
Então é um problema.
A maneira de consertar isso é simples.
Tudo o que faremos é verificar se você faz isso aqui.
Topo dentro dessa pressão de tecla se o evento do suporte de dados da chave Docky.
Então lembre-se se isso é verdade. Basicamente, se ele existir, então faremos tudo isso.
Caso contrário, se não existir, não faremos nada para começar.
Na verdade, não vou fazer nada.
Então, agora, nossa Apple só funciona, fará qualquer coisa ou apenas faz qualquer coisa quando você pressionar um S e D.
Então, apenas para voltar, vamos nos certificar de que funciona agora.
Q Nada acontece.
Estou pressionando um monte de chaves.
Agora eu acerta um.
E funciona.
S e D, mas nenhuma outra chave faz qualquer coisa.
Ótimo.
Então, agora vamos começar o som a tocar.
Então, isso também é bom e simples.
do som chave da chave de evento de dados e não tenho certeza por que eu mencionei esses dois sons que deveriam ter sido som.
Nós só precisamos
Lá vamos a tocar esse ponto de som.
Lembre-se das fichas da Venki neste savey, pressione D.
Obtemos esse objeto.
Nós fazemos esse som nela.
Obtemos o que então corremos, como antes.
OK vamos dar uma chance.
A como o.
E as outras chaves não fazem nada.
Perfeito.
Então, tudo o que resta para fazer aqui é realmente apenas adicionar todas as suas outras chaves e isso seria
muito doloroso para você observar-me digitar a partir do zero.
Eu fiz isso pré-concluído Eu dei-lhe o arquivo no download.
Liguei para o dia a dia.
Sim.
Então, se abrimos isso, é apenas um objeto gigante que possui todas as letras.
Então, temos q w e r.
Eles não estão realmente em nenhuma ordem.
Bem, eles não são uma ordem particular, tanto quanto cores e sons.
Eu simplesmente escolhi aleatoriamente e cada um deles tem uma cor.
Então, se nós coparmos isso e substituímos o que temos aqui, certifique-se de
chamá-lo de dados-chave perfeitos.
Agora fornecemos este Dicionário de cores de som para cada chave, cada chave de alfabeto, pelo
menos.
E podemos usar isso.
Não precisamos alterar o nosso código.
Então, é muito bom se queremos adicionar chaves numéricas onde queremos adicionar na guia e mudar
e escapar e qualquer outra coisa que possamos adicionar mais propriedades neste objeto.
Então, vamos tentar fechá-lo para baixo, atualize.
Perfeito.
Tudo bem.
Então não se deixe levar aqui.
Muito divertido.
ESTÁ BEM.
Tudo bem, basta.
Então, cobrimos muito, mas no final do dia, tudo o que realmente fizemos foi levar algum código que
encontramos para fazer um círculo.
Tomamos algum código que encontramos para animar um círculo para mudar a cor.
Encontramos algum código para fazer eventos.
Então, quando você pressiona uma tecla.
E então combinamos isso com algum outro código que encontramos para tocar música.
E quando você juntar, você pode fazer algumas coisas legais e há muito mais que você pode fazer aqui.
E não estamos 100 por cento feitos.
Terminamos com a funcionalidade, então não estamos adicionando novos recursos e não pareceremos diferentes.
Mas se você abrir o console, você verá que nós obtemos tudo isso não pode carregar arquivos SML HTP solicitação de
origem cruzada.
Blá blá blá.
Eu abordarei isso no próximo vídeo.
Fale sobre por que isso está acontecendo e também como podemos consertá-lo.
E então, a outra coisa que faremos é falar sobre uma pequena maneira de refatorar isso, porque agora
mesmo, cada vez que pressiono, estou adicionando um novo círculo à matriz do círculo e nunca as retiro
dessa matriz.
Então eu posso ter 10000 lá agora.
Bem, eu não sei, mas eu posso ter uma centena e há 200 e estamos fazendo um loop sobre isso.
Mesmo que não vejamos os círculos porque são tão pequenos.
Então, vamos fazer uma pequena mudança para livrar-se daqueles no próximo vídeo.
Mas, novamente, terminamos com funcionalidades, então, se você não se importar em ver que você simplesmente gostou de fazer isso
e você quer seguir em frente.
Vá em frente e vá para a próxima unidade.