Bienvenido de nuevo a esta lección, nos enfocaremos en agregar el audio para agregar las muestras de música que tocaremos
cuando toquemos cada tecla y también nos enfocaremos en darle a cada tecla su propio color para que no siempre obtengamos estas
naranja desvaneciéndose en amarillo y luego en verde, pero tendremos algunos que son morados algunos que son
azules, como puede ver aquí todos los colores diferentes.
Pero siempre es el mismo color para cualquier tecla dada, como H siempre tiene esta señal naranja, siempre es esto, es
T Y, y así sucesivamente.
DE ACUERDO.
Entonces, para comenzar, simplemente descubriremos cómo podemos reproducir un sonido.
Entonces, cómo disparamos un sonido usando Hallard.
Sí, en el Hausler es básicamente lo contrario de Paperchase, en cuanto a su complejidad, es muy
simple y lo hace realmente agradable.
Nuevamente puedes reproducir audio sin una biblioteca, pero es un poco.
Es un poco doloroso cuando quieres hacer algo como lo que queremos hacer cuando no solo
estamos reproduciendo un sonido una vez, sino que también queremos poder emitir un sonido diez veces seguidas, digamos que
estoy haciendo esto. Mierda, aquí quiero hacer
algo así como que hay un poco de trabajo involucrado para hacer que realmente se comporte de la manera que queremos.
Es muy fácil reproducir un sonido como reproducir una canción que es realmente molesto, pero si vas a un
sitio web y hay algún tipo de sonido o canción que suena en segundo plano, es muy
fácil de hacer con h tim owl y javascript. .
Pero para hacer algo como esto, podemos tener un montón de sonido simultáneo y
podemos repetir cosas, y sería mucho más fácil usar algo como Hallard Jus.
Así que de nuevo no es imposible.
Como cualquier cosa que haga una biblioteca, puede hacerlo usted mismo.
Pero no queremos realmente.
Entonces, si echamos un vistazo a cómo funciona, esto es todo lo que necesitaremos para usar este
pequeño código aquí donde creamos un nuevo cómo.
Entonces, ¿cómo es lo que estamos inicializando y sabíamos cómo hacerlo?
Luego le damos una lista de algunas URL de los archivos que queremos reproducir.
Entonces, la razón por la que le damos una variedad de estos diferentes archivos es diferente, aunque parezca que
son lo mismo, son solo tipos de archivos diferentes y el orden en que los
pones es el orden que el aullador intentará cargar. ellos en.
de archivos que funcionarán en todos los navegadores, algunos de ellos que no funcionarán en todos los navegadores.
Básicamente, existen ciertos tipos
Entonces puedes especificar ciertas copias de seguridad.
No vamos a hacer eso.
Tendremos un solo archivo.
Pero si quieres tener copias de seguridad básicamente de la manera en que eso funciona hasta donde yo sé, al
menos puedes leer sobre esto aquí, estoy seguro.
Aquí vamos a ti o la fuente que eres más a la pista o pistas que se cargarán para el sonido.
Estos deberían ser un orden de preferencia.
Howard Jasc cargará automáticamente el primero que sea compatible con el navegador actual.
Ahí vas.
Podríamos agregar en otras versiones de la misma canción.
En nuestro caso, la misma muestra y holler cargarían automáticamente el primero que sea compatible.
DE ACUERDO.
Entonces el código que necesitamos es nuevo Howell.
Y luego vas y eso es todo.
Y luego, cuando estamos listos para jugar, solo llamamos a las jugadas.
Puedes ver
aquí y no lo detendremos.
No nos estaremos pausando.
No haremos bucles porque nuestros sonidos son muy cortos.
Así que solo queremos que jueguen y dejar que terminen.
Cada uno tiene aproximadamente entre medio segundo y un segundo.
Entonces, si aún no lo ha hecho, continúe y descargue ese archivo comprimido que tiene todos los sonidos
y los arrastró al mismo directorio donde ha estado escribiendo su código.
Entonces, en lugar de sonidos, tenemos todos estos archivos.
Todo bien.
Y lo siguiente que tenemos que hacer es instalar HAUSLER para poder usarlo.
Entonces puedes descargarlo.
Pero solo por variedad, usaré un CDN.
Así que acabo de hacer una búsqueda de Howler CDN
copie esto primero.
Todos ustedes están aquí, siempre pueden probarlo para ver si es válido.
Aquí vamos.
Aquí está el código que es para Howler.
Perfecto.
Volvamos a nuestra
aplicación y luego agregaremos un guión.
Entonces, después de que el papel puede duplicar eso y simplemente cambiar la fuente para que sea el aullador, usted sabe, asegurémonos
de que se carga correctamente sin ningún problema.
Perfecto.
A continuación, hagamos nuestro primer aullido.
Copiemos este código nuevamente de hower.
Solo toma el
primero aquí y hagámoslo arriba.
Así que lo haremos justo aquí y diremos que el sonido de VAR es igual a cómo lo sabíamos y luego
pondremos un solo archivo y haremos el primero que veamos.
Así que Bubbles obtuvo MP 3 por lo que está dentro del directorio de sonido slash bubbles stud MP 3.
Así que suena.
Slash bubble.
Ya olvidé usar burbujas.
Ahí tienes.
Está pluralizado.
Así que suena como tu Bubbles.
MP 3 y eso es todo lo que necesitamos.
Y no juguemos de inmediato.
Vamos a crear eso.
Eso es todo lo que tenemos que hacer.
Y luego para jugarlo, simplemente jugamos.
Cuando presionas una tecla para que el sonido suene realmente bien, echemos un vistazo, pruébalo.
Aquí vamos.
Así que cada tecla presionando un montón de teclas diferentes ahora activa ese sonido.
Afortunadamente eso no fue demasiado molesto.
Entonces, vamos a concentrarnos en agregar otro sonido.
Así que haremos dos para comenzar.
Entonces tenemos burbujas.
Hagamos Clay MP3 para que podamos hacer solo duplicar esto y hacer un sonido igual al nuevo Howell
y haremos sound slash clay y P3.
Y luego, lo que haremos aquí es tener una declaración if.
Así que centrémonos en dos claves.
Vamos a hacer a y s.
Entonces, si presiona a si la tecla es a, entonces reproduciremos el sonido y vamos a llamarlo sonido solo para
aclararlo si la clave es s, también puede poner comillas alrededor de esto.
Entonces jugaremos sonido también.
Entonces, para saber qué tecla se presionó, es muy fácil con Paperchase tener aquí este evento y lo que
debemos hacer es marcar la tecla de evento.
Entonces, simplemente leeremos una instrucción if si el evento de esa clave es igual a a.
Luego haremos un sonido de reproducción uno.
Entonces suena una jugada y luego haces lo mismo.
Si la tecla de punto del evento es igual a X, también reproducirá el sonido.
Así que suena para jugar así.
Entonces podemos probar eso.
Entonces solo las teclas y S deberían disparar cosas.
Así que te diré que en este momento estoy golpeando q parece que tenemos un error.
¿Qué estamos recibiendo aquí?
El sonido no está definido.
Ignora estas advertencias aquí por ahora las repararemos al final.
Es un problema más complejo, pero en realidad no obstaculizará el inicio de nuestro código.
Pero esto será un error tan tonto.
Estaba haciendo referencia al sonido aquí mismo.
Ya no tenemos sonido.
DE ACUERDO.
Entonces ahora nada debería jugar.
Cuando toco la mayoría de las teclas, presionaré otras K y ahora tengo s.
Entonces tenemos un n s.
Perfecto.
Y lo que podríamos hacer es asignarle un color a cada uno para que podamos hacer algo como esto.
Vamos a mover esto a la parte inferior de la misma tecla, pero justo antes de presionar
podemos tener algo como esto si el evento tiene un sonido play y podemos establecer el color del nuevo círculo de relleno de puntos
de color igual y luego podemos darle un color como para ver 3 5 0 y luego hacer lo mismo.
Si presionamos S pero con un color diferente, hagamos 16 a 0 8 5 y luego podemos tener otro y esperamos que piense para sí mismo. Probablemente
esta no sea la mejor manera de hacerlo.
Podría estar bien para dos y nosotros, pero ¿qué pasa con 20 30 o 50 teclas.
Usamos todo el teclado y todos los diferentes personajes.
Eso sería mucho código.
Pero déjame mostrarte ahora mismo.
Así que cue la mayoría de los colores o la mayoría de las teclas no reproducen sonido.
Nos dan el mismo color.
Ahora si tuviera un UPS, presioné dos teclas y nos da un color ligeramente diferente, lo que nos da un azul.
Así que, por supuesto, el color que elegí aquí es difícil.
Es difícil de ver, déjame cambiar los cambios para que sean de color púrpura.
Y técnicamente deberíamos hacer esto otro.
Si es así, comprobaremos si la clave es un LCF y si tenemos dos declaraciones if.
Este se ejecutará y luego tenemos otro si, y si eso no es cierto, entonces el elo será verdadero, pero no
tendrá en cuenta que este aparezca.
Entonces, si solo queremos que uno de estos sea cierto, solo queremos un color azul púrpura o naranja.
Entonces queremos que sean parte de una declaración if, pero en realidad no importa porque vamos
a cambiar esto en solo un segundo.
Ahora nuestra actualización aquí es teclas normales.
Golpeé aunque recibimos un golpe violeta a medida que obtenemos el azul y dos sonidos diferentes.
DE ACUERDO.
Así que así es como usamos Hausler.
Ahora queremos hacer esto para cada clave y hay una manera mucho mejor que la que tenemos aquí.
Así que en realidad voy a deshacerme de
todo esto porque podríamos.
Como mencioné anteriormente, tengo una declaración if para cada tecla individual si la tecla es a, haz esto si la tecla es B y
para cada tecla.
Pero eso no es una buena práctica.
Entonces, lo que haremos será definir un objeto y lo llamaremos datos clave y es un objeto.
Y así es como se verá.
Entonces tendremos una clave como a.
Y luego, cuando se presiona a, diremos que el color debe ser púrpura y ese sonido debería ser.
Y pongamos todo esto ahí.
Así que voy a repasar esto en solo un segundo.
Déjame poner esto aquí primero y luego podemos hacer exactamente lo mismo otra vez por nosotros.
Entonces, cuando se presiona el color debe ser verde y el sonido debe ser nuevo.
¿Cómo lo hará?
Lo mismo que tú o, si no, hagamos slash. Clay pensó MP3 y luego podríamos hacer
eso con cada tecla.
Y sí, aquí hay mucha sintaxis, pero la ventaja es que tenemos un lugar para todos nuestros
datos y, por lo tanto, no necesitamos una instrucción if o un condicional independiente para cada clave.
Todo lo que tenemos que hacer es tomar el lugar donde se encuentra la tecla de punto del evento que en realidad se eliminó.
Toma esto aquí mismo.
La tecla de punto del evento que es la tecla que se presionó.
Y digamos que esa es la letra J.
Si ese es el caso, simplemente lo tomamos y lo conectamos a los datos clave y eso nos dará un sonido de color púrpura.
Es este sonido
Entonces te mostraré lo que quiero decir.
Vayamos con estos dos ejemplos y para hacerlo más obvio, agreguemos un duplicado más
de lo que tenemos.
Así que tenemos un ns también vamos a hacer D.
Y el color puede ser demasiado amarillo y luego sonar.
Qué más tenemos.
Hagamos confeti.
Perfecto.
Deshazte de esta coma final.
Podemos deshacernos de esto ahora y necesitaremos cambiar esto un poco y lo
siguiente que hará será tomar esa clave de pato de evento y conectarla a nuestros datos clave.
Entonces podríamos hacer algo como esto.
Clave clave del evento clave de datos y que nos daría si fuera un evento, él nos da todo esto
aquí y luego podemos hacer el color para que podamos comenzar allí.
Entonces, lo que haremos es antes de empujar el nuevo círculo y simplemente diremos que el nuevo color de relleno del círculo equivale al
color de la clave del evento de datos clave.
Entonces, solo para reiterar que la clave oscura es una letra.
Bueno, en nuestro caso nos aseguraremos de que sea una carta.
Técnicamente podría ser un número o una pestaña más variable, pero es la tecla que se presionó.
Luego tomamos eso y lo conectamos a datos clave.
Nosotros sacamos todo esto.
Si la clave de evento es una si el usuario presionó a, entonces estamos haciendo un color oscuro que nos da color púrpura.
Entonces, estamos configurando un nuevo círculo, pero el color de relleno es de color púrpura.
Si el evento Duck Key es un aviso, no es necesario que tengamos una declaración if para hacer eso.
Entonces, no tenemos que decir si Turquía tiene que hacer esto si se solicita que la clave haga esto.
Esta es la misma línea sin importar qué.
Debido a que tenemos este diccionario o esta fuente única de nuestros datos definidos, hay un problema, por supuesto.
Esto solo funcionará para un S y D ahora mismo.
Por lo tanto, le mostraré una actualización para asegurarse de que no tengamos ningún error de sintaxis.
No podemos leer el color o no podemos leer el color correctamente indefinido y eso no es un error de sintaxis.
Ese es el error que estoy esperando.
Así que te mostraré.
Voy a presionar una buena prensa a o s también son buenas y D.
Pero ahora presiono Q y tenemos un problema.
Y eso es porque esto no está definido. Los datos clave de Q no existen.
Tenemos un S y un D.
Entonces eso es un problema.
La forma de arreglar eso es simple.
Todo lo que haremos es verificar si haces esto aquí mismo.
Arriba dentro de esa tecla presiona si el evento clave de datos de la consola Docky.
Así que recuerda si esto es verdad. Básicamente si existe entonces haremos todo esto.
De lo contrario, si no existe, no haremos nada para comenzar.
De hecho, no haré nada en absoluto.
Entonces, en este momento, nuestro único trabajo de Apple hará cualquier cosa o solo hará algo al presionar un S y un D.
Así que solo para volver atrás, asegurémonos de que eso funcione ahora.
Q no pasa nada
Estoy presionando un montón de teclas.
Ahora golpeé a.
Y funciona.
S y D pero ninguna otra tecla hace nada.
Estupendo.
Así que ahora vamos a tener el sonido para jugar.
Entonces eso también es bueno y simple.
sonido de clave de evento de datos clave y no estoy seguro de por qué llamé a estos dos sonidos que deberían haber sido el sonido.
Solo necesitamos el
Ahí vamos ese sonido dot play.
Recuerda los enchufes de Venki en esta prensa de savey D.
Obtenemos este objeto.
Nosotros damos sonido en eso.
Obtenemos esto que luego ejecutamos justo como antes.
OK, demos una oportunidad.
A Como el.
Y las otras teclas no hacen nada.
Perfecto.
Así que todo lo que tenemos que hacer aquí es agregar todas sus otras claves y
sería realmente doloroso para mí verme escribir desde cero.
Tengo ese pre-hecho. Te di el archivo en la descarga.
Lo llamé día a día.
Sí.
Entonces, si abrimos eso, es solo un objeto gigante que tiene todas las teclas de letras.
Entonces tenemos q w e r.
En realidad no están en ningún orden.
Bueno, no son sino un orden particular en cuanto a colores y sonidos.
Escogí algunos al azar y cada uno tiene un color.
Entonces, si copiamos esto y reemplazamos lo que tenemos aquí, asegúrese de que
lo llamemos datos clave perfectos.
Ahora hemos proporcionado este diccionario de colores de sonido para cada tecla, al menos cada tecla del
alfabeto.
Y podemos usar eso.
No tenemos que cambiar nuestro código en absoluto.
Por lo tanto, es muy bueno si queremos agregar las teclas numéricas a las que queremos agregar en la pestaña y
cambiar y escapar, y lo que sea que acabamos de agregar, agrega propiedades adicionales en este objeto.
Así que probémoslo, cierre la actualización.
Perfecto.
Todo bien.
Así que no te dejes llevar aquí.
Bastante divertido sin embargo.
DE ACUERDO.
De acuerdo, eso es suficiente.
Así que cubrimos mucho, pero al final del día, lo único que hicimos fue tomar un código que
encontramos para hacer un círculo.
Tomamos un código que encontramos para animar un círculo para cambiar el color.
Encontramos un código para hacer eventos.
Entonces cuando presionas una tecla.
Y luego combinamos eso con algún otro código que encontramos para reproducir algo de música.
Y cuando lo juntas puedes hacer algunas cosas interesantes y hay mucho más que puedes hacer aquí.
Y no estamos completos al 100%.
Hemos terminado con la funcionalidad, por lo que no agregaremos nuevas funciones y no se verá diferente.
Pero si abres la consola verás que obtenemos todos estos no se pueden cargar los archivos SML solicitud HTP cruz
origen.
Bla, bla, bla.
Lo cubriré en el próximo video.
Habla sobre por qué está sucediendo y también cómo podemos solucionarlo.
Y luego, lo otro que haremos es hablar de una pequeña forma de refactorizar esto porque ahora
cada vez que presiono, agrego un nuevo círculo a la matriz del círculo y nunca los eliminaré
de esa matriz.
Entonces podría tener 10000 allí ahora.
Bueno, yo no, pero podría tener cien y hay 200 y estamos dando vueltas sobre todo eso.
Incluso si no vemos los círculos porque son muy pequeños.
Así que haremos un pequeño cambio para deshacernos de ellos en el próximo video.
Pero nuevamente hemos terminado con la funcionalidad así que si no te importa ver que te gusta hacer
esto y quieres seguir adelante.
Continúa y pasa a la siguiente unidad.