Cómo crear un visualizador de audio codificando con Javascript

1. Introducción: Bienvenido de nuevo a esta sección. Haremos un visualizador de audio increíble que sea receptivo a cualquier entrada de audio. Como pueden ver, las bolas están saltando cuando hablo, cuando clip o cuando toco música. Y entonces sigues siendo bueno. Cuando estés listo para hacer esto. Dirígete al siguiente video para comenzar. 2. Preparación: Como siempre, partiremos de la línea de comandos. Entonces déjame traer la mía. Actualmente estoy en escritorio. Vamos a la carpeta de proyectos donde guardaré y almacenaré mis proyectos. Entonces si escribo ls aquí, pueden ver nuestros viejos proyectos. Entonces vamos a crear una nueva carpeta aquí. Y llamémoslo visualizador de audio. Entra a esa carpeta. Vamos sólo grandes archivos. Entonces, como de costumbre, necesitamos un archivo HTML. Esta vez. Ya que estamos obteniendo los datos del micrófono, quiero crear un nuevo archivo llamado micrófono JS. Y por último, necesitamos un nuevo archivo para la visualización. Llamémoslo Visualizador dot js. De acuerdo, estamos bien para irnos. Si recuerdas el comando o abriendo esta carpeta en código ancho. Si estás usando dentro de esta versión como yo, puedes escribir un comando como este. O si estás usando la versión normal del código de riesgo, puedes simplemente mandar llamado espacio-tiempo. Cuando escribimos ese comando, abre la carpeta en código West para que estemos bien para ir. 3. Plantilla Html: Comencemos el proyecto importando plantilla HTML5. Como siempre. Entonces aquí, en esta ocasión utilizaremos archivos JavaScript. En primer lugar, cambiemos el título. Por lo que queremos importar estos dos archivos JavaScript, HTML boilerplate. Entonces crearé un nuevo script y haré un micrófono swash JS, y también visualizador JS. Así que recuerda, usaremos clase de micrófono en visualizador. Por lo que aquí es importante el orden. El script de micrófono debe ser un arco de script visualizador. De acuerdo, Así que para empezar, por favor. Pasemos al archivo JS del micrófono y lo guardaremos. 4. Completa el HTML: Estas etiquetas de guiones no deben estar en sombrero, pero deben estar en cuerpo. Justo después de que tenemos innumerables, ¿verdad? Voy a llamar id de Michael era incontable. Aunque una cosa más que deberíamos agregar aquí es el archivo CSS. Casi lo olvidamos, pero es que hay otra forma de agregar archivos. Para que puedas hacerlo por dentro con Dios. Por lo que podemos dar clic en este nuevo icono de archivo y usted sólo puede escribir el nombre. De acuerdo, y vamos a vincular también ese archivo CSS así. De acuerdo, entonces no tenemos que crear nuevos archivos desde la línea de comandos. A lo mejor esta es una forma más fácil. Entonces ahora tenemos archivos CSS o JavaScript, y nuestro código fue creado en HTML. Para que podamos empezar a escribir código. Micrófono, Jess. 5. Microphone.js: En lugar de escribir todo el archivo JS del micrófono, simplemente copiaré y pegaré el código aquí. Por lo que encontré esto en la web para obtener datos de micrófono. Esta es una boilerplate que puedes usar todos tus visualizadores de audio. Entonces no necesitamos conocer los detalles exactamente aquí. Simplemente obtendrá los datos del micrófono, la entrada de audio. En realidad no necesitas cambiar nada aquí. O tal vez quieras cambiar. Es posible que desee cambiar el tamaño de FFT si desea alguna variedad en la salida. Entonces déjame explicarte rápidamente lo que tenemos aquí. Esta es sólo una clase casual llamada micrófono. Aquí tenemos al constructor. Entonces la primera propiedad es identifica si el micrófono está inicializado o no porque queremos esperarlo si aún no está inicializado, ¿de acuerdo? Y al final de todo, se hará realidad. Y luego solo obtenemos la función de medios de usuario. Y ten en cuenta que sigue ahí, todo cuando religioso. Por lo que aquí no tenemos ninguna biblioteca de terceros. Y al parecer, este método devuelve una promesa porque usa entonces después de obtener la función de medios de usuario, que básicamente esperará esta línea. Y correremos después de que devuelva algo. Entonces, si regresa con éxito, llamarán a estas líneas. O si hay un error, solo avisa el error en el navegador. ¿ De acuerdo? Y cuando esté listo, llamarán estas líneas. Entonces tenemos analizador aquí. Y estas líneas decidirán el tamaño de FFT, longitud del búfer, y así sucesivamente. Y por último, cambie la propiedad inicializada a true después de conectarse al micrófono. Y de lo contrario, solo alertará el error en el navegador. De acuerdo, así que aquí también tenemos dos métodos. El primero obtiene las muestras. Por lo que es el resultado que vamos a utilizar. El objeto devuelto será una matriz y su longitud será la mitad del tamaño FFT. Por lo que declaramos un tamaño 50 512. Aquí hay muestras. La longitud de la matriz será de 256, ¿de acuerdo? Por lo que siempre es la mitad del tamaño FFT. Y utilizaremos esa encuesta de muestra durante la visualización del audio. De acuerdo, así que piensa así. Podemos tener 256 bolas que cada bola responderá a un elemento de esta matriz. ¿ De acuerdo? Entenderás mejor cuando realmente lo hagamos, lo hagamos y lo pongamos en práctica. Y por último, tenemos la función de volumen que obtendrá los métodos del útero. Y creo que es bastante autoexplicativo. Este método devolverá el volumen de las entradas de audio. 6. Consiga datos de micrófono: Ahora que nuestro micrófono está listo, podemos empezar a escribir el código en visualización. Abre este archivo. Loprimero que quiero hacer aquí es mostrarte los datos que obtenemos del micrófono. Para ello, crearé una nueva variable, micrófono. De la clase de micrófono. No teníamos ningún parámetro en constructor. Podemos crear un nuevo micrófono u objeto como este. Vamos a crear también esa función de animación. Porque queremos obtener los datos del micrófono en tiempo real de forma continua. Y como ustedes saben, necesitamos solicitar marco de animación para animar esta función. Y también necesitamos llamarlo en algún lugar del código. Entonces entre estas dos líneas, lo que escribamos será llamado en cada fotograma continuamente. Entonces solo quiero registrar los datos del micrófono en la consola para que podamos ver qué es exactamente. Pero primero, quiero comprobar si micrófono ya está inicializado. Entonces recuerda, tenemos una propiedad y es cierto cuando Eris tenía cosas se hacen en micrófono. Entonces, si se inicializa el micrófono, solo obtengamos muestras usando la función samples. Y esto de aquí. Por ahora solo iniciemos sesión en la consola. Entonces guardo esto y simplemente entraré en index.HTML. Haga clic derecho en abrir con servidor en vivo. Si no tienes esta opción, siempre puedes descargar extensión Live Server desde extensiones en VSCode. Esto lo hicimos antes en este curso. Por lo que no voy a explicar los pasos en este momento. Pero si instalaste la extensión Live Server, solo puedes abrirla así. Y permítanme simplemente llevarla a esta pantalla. Y también lo haré el blanco mi pantalla así. De acuerdo, entonces nuestro código se está ejecutando en este puerto. Echemos un vistazo a la consola. Estamos recibiendo datos de micrófono continuamente. Y hay montones , montones de muestras. Y sólo va continuamente porque estoy hablando, ¿no? Y esto también usa mi navegador de micrófonos. En el primer paso. Cuando abres Live Server, puede que te pida que permitas usar micrófono, ¿de acuerdo? Y una vez que lo aceptes, puedes usar la entrada de audio. De acuerdo, pues echemos un vistazo al registro de aquí. Por lo que es una matriz. Según lo discutimos. longitud es 256, y los valores son sólo algunos valores pequeños. Estos valores son, cada uno de ellos representa algo. No soy realmente un experto en sonido. Y yo no, en realidad no sé cuáles son estos valores. Pero puedes imaginarlo como si fueran frecuencias o algunas señales que explican el sonido en ese punto exacto. Podemos utilizar estos valores para visualizar el sonido. Y estos valores son valores realmente pequeños. Hay como entre menos cuatro y más cuatro. Y suelen ser menos de uno. Por lo que pueden ser valores negativos también, o valores positivos también. Y creo que a medida que los valores van en aumento. Ahora estamos recibiendo algunos sonidos interesantes. ¿ De acuerdo? Entonces si no hablo, los valores serán 0. Por ejemplo, en este punto, no hay entrada de audio. ¿ De acuerdo? Entonces ahora que sabemos cómo son nuestros datos de muestras, usaremos estos datos. Podemos preprocesarlo, por supuesto. Pero eventualmente usaremos estos datos para crear algunos visuales. De acuerdo, entonces empecemos a usar nuestro comercio para crear algunos visuales. 7. Crea la clase de bola: Empecemos a dibujar nuestros visuales con la creación de Karl Marx. Como de costumbre, obtendremos elemento por ID de plantilla HTML. Déjame revisar el ID de mis colores. Copiémoslo y peguémoslo aquí solo para estar seguros los nombres tapetes. Vamos a crear también CTX, esos métodos de contexto. Y queremos 2D. Y por último, podemos ajustar el peso al ancho de la ventana y a la altura de la ventana. Muy bien. Ahora, ¿por qué los ajustes están listos? Podemos empezar a crear la primera clase. Entonces al final, lo que queremos en innumerables una matriz de pernos, ¿verdad? O atajos. Yo sólo les llamaré bolas porque van a saltar. En este proyecto. Por eso estoy creando una clase llamada bola. Y como de costumbre, tendremos un constructor de esa clase. Obtendrá dos parámetros, x e y Y estos valores serán las posiciones iniciales x e y de la bola que habrá spawn. Así que vamos a asignar este punto x punto y. entonces, ¿por qué queremos aquí es, así que vamos a crear un tazón y que es un círculo completo. Y si te acuerdas, estamos haciendo esto usando CTX aumentada. Aquí, lo que tenemos que hacer es el valor del radio. Por eso también necesitamos un radio. Pero no quiero sacarlo de parámetros porque solo estábamos queriendo hacer que todos los radios de las bolas están diciendo. Por lo que sólo usaré un valor predeterminado de ocho. Entonces decidamos también su color. Puedes cambiar lo que quieras. Se puede utilizar azul, rojo, gris. Y creo que también explicaré esto más adelante, pero solo quiero dejarnos, saltémonos esta parte. Agreguemos esa propiedad. Y entonces lo que necesito aquí es salto para SSH y también falso. De acuerdo, porque las bolas caerán y saltarán según el audio en Detroit. Pero en la fase inicial, en el primer inicio del proyecto, las bolas caerán. Por lo que comenzarán desde arriba y caerán ante todo. Por eso no quiero hacer que la caída fuerce 0, sino que en cambio, sólo lo haré 0.1. ¿ De acuerdo? Donde he hecho con el constructor, solo agregaremos una propiedad más, pero la agregaré cuando sea la hora correcta. Entonces, como de costumbre, también necesitamos dibujar métodos. Es que incluye ella toma FillStyle. Voy a asignar esto a este color porque cuando queramos cambiar el color, la bola también estará en ese color. Por lo que deberíamos decir comenzar Pat también debe decir barra CTX para dibujar un círculo. Entonces este punto x barra, x valor, lo siento, este punto y para valor y. Esto lo intentarán y usarán para radio. El ángulo de inicio será 0 y el ángulo será pi por dos porque siempre dibujaremos un círculo completo que se verá como un tazón. Por último, podemos decir píldora CTX. De acuerdo, entonces ya deberías estar familiarizado con estas líneas. Hicimos muchas prácticas al respecto antes. Entonces lo que necesitamos, qué más necesitamos son dos métodos más. Entonces solo queremos un formateado y un salto. Eso es todo para la clase de pelota. Y escribiremos el contexto de los métodos de caída y salto más adelante. 8. Genere bolas: De acuerdo, tenemos la clase de pelota. Sigamos adelante y generemos la pelota para que podamos verlas en columnas. Para ello, lo que necesitamos es una matriz. Estará vacío al principio. Y necesitaremos una función que genere las bolas. Voy a utilizar la función de flecha aquí. ¿ De acuerdo? Entonces en esta función, en primer lugar, déjame borrar este log para que no veamos. Entonces vamos a limpiar. Cierra la consola. De acuerdo. Por lo que en enero falso, esta vez vamos a hacer algo diferente. No quiero definir estáticamente la longitud de la matriz de bolas. Entonces no quiero simplemente crear un jefe 100. Digamos. Lo que quiero en su lugar es crear las bolas, que serán responsivas para el pie de Carlos. Entonces lo que quiero decir es, si el carbón era ¿por qué sabes que debería ser menos bolas para ante, por ejemplo, no? Ahora bien, si tenemos una mancomunería más grande, podemos tener un 100 bonos. ¿De acuerdo? Por lo que eventualmente la tierra de la matriz de bolas será dinámica. Para hacer eso, solo asignemos. Vamos a crear una nueva variable, la distancia. Esto aclarará la distancia entre cada rejilla de bolas. Entonces solo quiero hacer una fiesta o el principio. Y sólo vamos a calcular cuántas bolas debería estar usando. Ancho de Carlos dividido por distancia. ¿ De acuerdo? Lo cual tiene sentido, ¿verdad? Porque B tiene un ancho de 1 mil encendido queremos estoy cansado t distancia. Entonces deberíamos tener algo alrededor. Estoy cansado de tazones de té, ¿verdad? Porque habrá instancias y el peso de la pelota también. Pero yo sólo diré menos dos aquí porque queremos distancia desde el principio y al final también. La cantidad de bolas se calculará así. De acuerdo, así que ahora es sensible a la Kawasaki. Cuando cambiemos el ancho del navegador, la cantidad de bolas cambiará. Y lo que necesitamos es un bucle for. Y digamos que yo para iterador. Y queremos hacer un bucle de esto. Queremos identificar cantidad de Bosch vio que esta va a estar corriendo cantidad de moles veces. Y en el bucle de otoño, sólo diré bolas empujan r1 para crear una bola nueva y la empujaré en los tazones, ¿verdad? Entonces vamos a llamar a bola nueva. Y sólo necesitamos dar valores x e y aquí. Para valores x e y. Para y pocas veces, es realmente sencillo. Simplemente podemos dar un valor estático. Por ejemplo, 500. ¿ De acuerdo? Pero, ¿qué valor x? Tenemos que volver a usar la distancia. Entonces el primer balón debe ser la distancia, ¿no? Entonces cuando digo un tardío, es x debe ser tardío. El segundo balón debe ser más una distancia más, ¿no? Por lo que 2R2 más Turquía, la exposición del segundo balón debería ser de 60. Entonces si digo distancia más yo tiempos distancia, creo que habrá un jefe justo al lado del otro entre el cosmos. Por lo que habrá ambos a lo largo de la Guerra Fría, habrá brechas al inicio y también entre cada una de las bolas. Eso es lo que queremos. Y cuando guardo esto, no pasa nada porque aún no llamamos a la función de bolas genéricas. Cuando lo llamo como digo, las bolas se generan pero aún no las podemos ver porque nuestro color es ¿qué? En realidad, solo quiero cambiar el fondo a negro, pero vamos a comprobarlo primero. Al cambiar el color de las bolas. ¿ Tenemos la canción de pelota, Carlos? No estoy exactamente. Eso porque aún no sacamos las bolas. Entonces solo generamos al jefe, pero no llamamos a la función de sorteo. Entonces lo que tenemos que hacer es decir bola por cada bola, yo sólo estoy básicamente iterando en cada bola en esa matriz. Y llamaré a negrita una función de empate. Por lo que ahora tenemos las bolas en el Lienzo. ¿ De acuerdo? Por lo que nuestra función está funcionando. No hace falta que aquí dibujemos las paredes. Simplemente lo borraré. Y también volveré a hacer el color blanco. Y vamos a entrar en style.css, plomo muy real, solo color de fondo. Entonces aquí quiero seleccionar todo usando asterix. Permite que coincida con margen y relleno 0, tamaño de caja, border-box. Por lo que estos son sólo por defecto. Casi estamos haciendo esta matriz en cada proyecto. Y también. Entonces ahora mismo, si te das cuenta, tenemos rejas a la derecha. Entonces esto es justo, esto hace que estas líneas hace que amigo sea desplazable. No queremos esto. Por eso sólo diré desbordamiento. A ver. Por lo que van los barrotes. Por último, solo cambiemos. La columna estaba pelada, molida , negra o fuera. 9. Bolas caídas: Muy bien chicos, vamos a sacar las bolas y hacerlas caer. Entonces, en primer lugar, animar la función. Si se inicializa el micrófono, quiero sacar las bolas. Entonces para hacer eso llamado bolas array. Y utilizar para cada método. Aquí, solo pasemos una pelota que itera de las bolas. Y yo sólo quería decir balón dibujado. Cuando hacemos eso, se pueden ver las bolas en comas. Y fíjate si cambiamos el tamaño de la columna, la cantidad de bolas, cadenas, para que tengamos tanto ensayo a vacas. Y como aquí vamos a hacer una animación, solo quiero despejar los conos en un reframe. Voy a hacer esto mediante el uso de la función clear rect. Pasará x e y comenzando desde 0 hasta Carl Woese, ancho y alto. Para que vean que tenemos buenos bonos. Si también los hacemos caer. Justo antes del empate. Podemos ver caer las bolas. Pero primero también debemos buscar la función. Entonces para hacer eso, perderé formas de caída y cambiaré las bolas. ¿ Por qué? En realidad, diré que este punto y plus es igual a este punto fuerza completa, que actualizará el valor y de la pelota en cada cuadro y agrega fuerza completa. Entonces cuando guardo esto, se puede ver que las bolas simplemente están jalando lentamente. Hagamos que esto se vea más natural. En la vida real, cuando algo está cayendo, es toda su fuerza va en aumento, ¿no? Por la gravedad. Por eso también aumentaré toda la fuerza en cada cuadro, 0.05. Por lo que ahora puedes ver un efecto más natural. Pero en algún momento la pelota debería detenerse. Entonces aquí solo agregaré la restricción. Nosotros sólo queremos que los muros caigan si sólo lo son. Y es menor que la altura de Coleman dividida por dos. Entonces si sólo el jefe o un tazón, mitad de los colores, caerán. De lo contrario, se detendrán. Al igual que esto. Déjamerefrescarlo de nuevo. Por lo que partieron desde la posición de los bifans ella. Y empezaron a caer porque estamos llamando a la función de caída en cada fotograma. Y sólo tenemos una restricción, que es tanto la posición y debe ser mayor que la altura de Carlos dividida por dos. Por eso hay, hay top. Cuando lleguen a ese punto. 10. Bolas de salto: Cuando las bolas para cada uno en este punto, que haya golpeando, golpeando al suelo. Queremos hacerles saltar, ¿verdad? Para ello, lo que necesitamos es otra declaración if aquí. Tenemos que comprobar si la pelota está cayendo. Porque si no están cayendo, queremos hacerles saltar. Y para comprobar ese valor, solo necesitas otra propiedad. Agreguemos. Se está cayendo un inmueble. Y será cierto en un principio porque el jefe caerá en el estado inicial. Entonces si las bolas no están cayendo, lo que significa que las bolas está cayendo la propiedad es falsa. En ese caso, queremos que brinque. Muy bien, Subamos y aquí declaramos un método de salto. Entonces lo haré, en primer lugar, lo que queremos hacer es hacer plena fuerza a 0, porque antes teníamos toda la fuerza. Y afectará nuestra posición y en cada cuadro. Entonces cuando la caída y cuando la tenencia de la propiedad es falsa, lo primero que queremos hacer es hacer a cuatro patas 0. Entonces ya podemos afectar a nuestra y. Saltamos fuerza. Entonces esta vez usaré menos iguales porque en sistema de coordenadas de comercio, cuando la pelota está subiendo, por eso que ReLu está disminuyendo. Entonces en los mancomunados, 0 está aquí en la parte superior y va en aumento cuando las bolas van hacia abajo. Entonces si quieres que una pelota salte, deberíamos disminuir su valor y. Entonces quiero disminuir por qué ReLu saltaría fuerza. Y para hacerlo más natural, volveré a hacer la misma lógica. Voy a disminuir la fuerza de salto también. ¿ De acuerdo? Por lo que ahora también hemos saltado métodos. Pero una cosa que no debemos olvidar al terminar el salto. Cuando vuelve al estado de caída. También deberíamos reiniciarnos. Saltar fuerza a 0, igual que hicimos fuerza caída aquí. De acuerdo, Así que ahora se ven idénticos. Simplemente son simétricos al otro. De acuerdo, vamos a darle una oportunidad. No funcionó. Y esto es porque, esto es porque nuestra fuerza de salto es 0. Cambiemos esto. Entonces tenemos una fuerza de salto. Pelota. De acuerdo, Entonces tal vez también deberíamos cambiar bola está cayendo propiedad porque nunca lo hacemos falso, ¿ verdad? Siempre es cierto. Por lo que agregaré aquí una declaración else. Y hacer bola está cayendo a falso. Y vamos a intentarlo. Se. Sólosalta por un rato. ¿ Ves eso? Déjame ejecutarlo otra vez. Y luego continua cayendo. ¿ De acuerdo? Entonces esto se debe a que esta sentencia if ejecuta uno, aunque está cayendo propiedad es falsa. Por lo que también deberíamos dar aquí una restricción. El cheque si está cayendo y cayendo estado, ¿verdad? Entonces si la pelota, por lo que estábamos llamando a la función, si sólo la pelota está en estado de caída y su posición y es menor que sitio coma. Entonces vamos a guardar esto. Y también, tal vez deberíamos. A lo mejor deberíamos simplemente cambiar el nuestro por else-if. Y solo agreguemos una restricción. Si las bolas y la posición es mayor que causa altura dividida por dos. Esto se ve mejor, ¿verdad? Porque sólo queremos saltar si sólo, si sólo su valor y es mayor que Carlos altura dividida por dos. Entonces, en otras palabras, en medio de las columnas. De acuerdo, entonces cambiaremos tanto fuerza saltada aquí más adelante y aquí cuando el balón. Entonces básicamente sólo estamos disminuyendo la fuerza de salto, ¿verdad? Cuando la pelota, Vamos a comentar esta línea. Entonces no bajar. Cuando no comento va hacia abajo. Entonces también estamos disminuyendo la fuerza de salto, y comienza desde 0.1, que será un valor negativo. Entonces en lugar de dar un salto, simplemente, ya sabes, hacemos que caigan de nuevo. Entonces hagamos que este valor sea diez, digamos 400. Nada cambia. Vamos a comentar esta línea. Esto acaba de, ¿ hice un errata aquí? Por lo que deberíamos cambiar su posición y en cada cuadro. Entonces vamos a entrar en consola. Me falta algo. Entonces si la pelota está cayendo, así deberíamos, este tronco debería ahogarse en nuestro marco ahora mismo. Y es en efecto que podemos ver en la consola, ¿verdad? Entonces el método de salto se está llamando ahora reframe y por qué se llama. También vamos a iniciar sesión aquí. La fuerza de salto. Vamos a borrar esto. Entonces la fuerza de salto es 0. ¿ Por qué está pasando eso? Es porque cuando estamos cayendo, simplemente hacemos fuerza de salto 0, ¿no? Entonces en un principio lo hicimos diez. Pero cada vez que acaba de hacer que caiga, hacia abajo, la fuerza se convierte en 0, así que no están saltando. Entonces, en realidad, no deberíamos asignarlo aquí. Deberíamos asignarlo corrió el estado de votación termina, que está aquí, ¿no? Cuando el balón está jalando se quedó falso. También debemos declarar una fuerza de salto. Yo sólo haré Tanh aquí. Ahora, se puede ver que nuestras bolas apenas están saltando. Pero tal vez diez es demasiado. Hagámoslo también. De acuerdo, genial. Pero ahora mismo tenemos otro problema. El, nunca regresan. ¿De acuerdo? Entonces para evitar eso, solo agregaré otra restricción aquí y si declaración. Entonces cuando el balón está saltando, en algún momento, deberíamos encender el estado espantoso, derecha, para que vuelvan. Y yo sólo quiero hacerlo. Cuando la fuerza saltada se convierte en 0. De acuerdo, entonces es en la vida real. Aunque. Cuando saltamos. En la vida real, escuchamos una fuerza de salto en la fase inicial. Y la gravedad está disminuyendo la fuerza de salto en cada segundo rasgo. Y en algún momento, o fuerza de salto se convierte en 0 y empezamos a caer. ¿ Verdad? Entonces hagamos la misma lógica. Lógica aquí. Cuando la fuerza de salto se convierta en 0 o menor que 0, haga que las bolas caigan de nuevo. Pero para ello, debemos activar descomentar, esta línea que va a disminuir, saltar fuerza, reencuadrar. Y cuando es menor que 0 o igual a 0, deberíamos volver a activar el estado descendente a verdadero. Entonces probemos esto. De acuerdo. Ahora podemos ver que nuestras bolas están saltando en cualquier salto, en cada salto, o la fuerza de salto y la fuerza de caída solo están aumentando y disminuyendo como naturales. Y en algún momento, en el punto pico, fuerza de salto se convierte en 0. Cuando eso sucede, empiezan a caer de nuevo. ¿De acuerdo? Entonces así es como puedes hacer una lógica de gravedad sin usar ningún motor de juego y nada más. Con puro Vainilla JS. Un equipo más que queremos agregar aquí, que será la conexión real entre el audio y nuestras bolas para cambiar la fuerza de salto con las entradas de audio. Y eso lo haremos en el siguiente video. 11. Consigue entrada de audio: Bien chicos, son los pernos están saltando. Y es hora de que la parte más emocionante, que es Jim, haga que salten receptivos a la entrada de audio. Entonces deberíamos cambiar esta línea, obviamente, porque queremos simplemente saltar fuerza con el micrófono. Bien, entonces ya tenemos datos de micrófono. Y recuerde, la matriz de muestras es el área de muestras incluye 256 elementos. Y también tenemos algunas bolas, pero nuestra cantidad de bolas no es específica. Depende de Canvas. Entonces podríamos tener más de 256 o podríamos tener menos. Entonces no los voy a igualar exactamente. Pero podríamos, si pudiéramos ser indexados de alguna manera, implica array, ¿verdad? Podríamos asignar cada muestra a una bola. Entonces como primera muestra. Por lo que el primer elemento en la encuesta muestral puede ser la fuerza de salto para la primera bola. Y el segundo elemento en la encuesta por muestreo puede ser la fuerza de salto para la segunda bola y así sucesivamente. Creo que va a ser genial. Y para ello, debemos rastrear el índice de bolas en esto para cada uno. Y si solo buscas en Google para el script ETL, podrás ver los parámetros de esa función. Y el segundo parámetro es index. Entonces el primero que acabamos usar es el valor del elemento actual. Nosotros solo lo llamamos pelota. Si pasas segundo, esto es opcional. Pero puedes pasar. Y es, está devolviendo el índice del elemento actual, pero solo estamos buscando. Entonces sigamos adelante y usémoslo. Entonces para usar eso, solo voy a agregar un paréntesis al lado de bola. Diré indexado. Ahora en este forraje, puedo encerrar. Siguiente. Permítanme simplemente borrar las otras líneas de registros. Entonces sólo tenemos éste. Guardemos esto y revisemos la consola. Entonces ves que parte de cero y aumenta en cada iteración. Bien, así podemos usar este valor de índice. Y aquí quiero llamar a muestra, perdón. Vamos a probar el índice de muestras. Solo intentemos usar muestras para la fuerza de salto. Pero de nuevo, recuerde que las muestras son solo valores realmente, muy pequeños. Así que también vamos a registrar la consola, iniciar sesión en las muestras de la consola para ver. Entonces parece que no están saltando. Pero si miras de cerca, puedes ver algunos pequeños movimientos. Y esto se debe a que nuestras muestras son números realmente pequeños. Entonces deberíamos, y también hay valores negativos. Entonces no queremos ninguna fuerza de salto negativa. Entonces podemos usar función mat abs para obtener el resumen del valor. ¿Bien? Cuando hacemos eso, ya no tenemos valores negativos. Y también lo que queremos hacer es multiplicar este valor con diez, tal vez porque son demasiado pequeños. Hagámoslos positivos y multiplicémoslo por diez y veamos qué pasa. Cuando cierro Consola. Ya no necesitamos cerraduras. Digamos esto. Entonces ahora mismo puedes verte y yo hablo, las pelotas apenas están saltando y parece que multiplicar con diez es suficiente. Podrías por supuesto, aumentar este valor si quieres más saltó Fox. O si quieres volverte loco, también puedes volverte loco. Pero recuerden, si saltaron demasiado, saldrán fuera de la lona. Así que me quedaré diez. Y creo que ya está hecho. Entonces probemos una solución diferente. Sólo se están moviendo de nuevo. Y en este punto, realidad podrías, realmente depende de ti a partir de ahora. Así que podrías cambiar los colores, o también podrías agregar un método aquí va a cambiar los colores. Y tal vez puedas hacer un parámetro aquí, como un valor. Y podrías cambiar los colores según el índice de muestras. Para que las bolas puedan cambiar de color con el audio. Y aquí puedes usar valores RGB, RGBA y parámetros de paso. Se puede hacer de todo. Puedes cambiar, saltar fuerza si quieres pelotas más rápidas. O lo que puedes hacer. De lo contrario. Si quieres bolas más altas o más grandes, podrías simplemente cambiar el radio así. Pero recuerda cambiar la distancia también. Sólo para estar seguros de que no están colisionando. Es hacerlos más pequeños otra vez. O podrías hacerlos realmente más pequeños así. Depende de ti. Sigue adelante y juega con los valores y agrega algunas características nuevas para todos. 12. Visualizador de audio 2: En esta sección, vamos a hacer otro visualizador de audio que podrás ver en la pantalla. Déjame tocar música para que veas mejor el efecto. Trabajo. Si te gusta el efecto. No trabajo hasta el siguiente video donde empezaremos a hacer este proyecto. 13. Pasos previos: He creado el proyecto y todo es igual con el visualizador de audio anterior. Esta vez solo cambia el título con visualizador de audio a. Así que también vinculamos estilo CSS. Nuevamente, tenemos un comercio con el id Mike sin hogar. Contamos con micrófono JS y visualizador y generoso. Y apo. Este archivo HTML con show en vivo sobre solo hacer clic derecho y seleccionar esta opción. Y luego solo puedes usar la misma plantilla para micrófono JS. Porque de nuevo, no necesitamos ninguna diferencia y esto es lo que necesitamos en este proyecto. También el estilo CSS es el mismo que el anterior. Solo usa asterix para seleccionar todo para ajustar el margen y el relleno. Simplemente haga propiedad de desbordamiento oculto del cuerpo y haga que el fondo sea negro. Entonces aún no definimos el ancho y la altura del comercio. Es por eso que nuestra Cola viene con estos anchos y alturas por defecto. Entonces lo cambiaremos en el visualizador JS. Si estás listo con estos dos archivos, podemos empezar a visualizar un JS. 14. Crea las figuras: Como siempre, comencemos a crear colores. Usemos nuestro ID de comercio aquí. Creemos también CTX. Ajustemos qué a Ventana. Y también la altura, que conocemos en nuestras alturas. Por lo que nuestro comercio ahora está totalmente ajustado y cubre todos los navegadores en su pantalla. Y lo que queremos hacer a continuación es asignar el micrófono al nuevo micrófono. Y recuerda que llamamos a esta clase desde micrófono js. Y podemos hacerlo así. No estamos importando nada porque micrófono JS es solo un tazón de visualizador JS. Y al final, todo el JavaScript es se transformará en este archivo HTML. Así que tenemos realmente clase de micrófono en el visualizador JS. Y vamos a comprobar si todo funciona simplemente creando la función de animación. Solicitar animación frame animate. Y recuerda, estos blogs nos están proporcionando una animación llamando a esta función de animación en cada fotograma. Entonces aquí queremos comprobar si el micrófono ya está inicializado. Esta propiedad. Entonces si el micrófono se inicializó, quiero obtener las muestras. Muestras. Micrófono que muestree. Vamos a registrarlo para ver si todo funciona. Voy a abrir la consola usando f 12th. No tenemos ninguna muestra. Entonces déjenme abrir. Eso vuelve a vivir. A lo mejor hay alguna caja. No tenemos todavía. Es porque no llamamos a la función de animación Mi mala. Bien. Ahora podemos ver las muestras cuando hablo. Obtendrá la entrada de audio correcta. Ahora podemos deshacernos de este registro de la consola. Ya podemos empezar a crear nuestra clase. Esta vez. Quiero llamar a figura sin paréntesis aquí porque va a tener diferentes métodos. Por lo que será ajustable. Será autopista, teletransportará y encadenará métodos de dimensionamiento, algunas cosas así. Entonces simplemente no es tan simple pelota. Por eso decidí llamarlo figura. Pero como siempre, necesitamos un constructor. Entonces esta vez, comencemos de nuevo con X e Y, pero vamos a aumentar el número de parámetros más adelante. Entonces este delta x es igual a x, este punto y es igual a y tamaño. Voy a usar ocho y luego cuatro tamaño inicial. Pero recuerda que cambiaremos este valor con la entrada del micrófono. ¿Bien? Entonces esto es suficiente por ahora. Vamos a dibujar esta cifra. Y esto es todo. No hay nada nuevo para nosotros. Entonces esto sí, este punto FillStyle es de este color oscuro. Dx también comienzan Pat dx arc porque de nuevo, queremos dibujar atajos. Entonces pasaré X4 carbones x. ¿Por qué? Y tamaño. Esta vez no llamé radio. También se podría decir tamaño, lo mismo. Entonces cero para el ángulo de inicio. Y math.pi veces 24 y ángulo, que es exactamente lo mismo con 260 in-grados, pero deberíamos dar algunos radianes aquí. Entonces usamos esta expresión. Y por último, deberíamos sentir lo que acabamos de dibujar. Bien, déjame guardar esto. Y abajo, debemos acreditar los dedos de error, ¿verdad? Para hacer eso, necesito un for-loop. Cambiemos su índice a i. Quiero crear diez cifras. Por lo que voy a decir cifras empujan cerca de figura. Entonces todos deberían estar familiarizados con esta sintaxis, ¿verdad? Hicimos todo esto muchas veces. Entonces nueva cifra, pero esta vez, en vez de hacer una x e y específica, quiero generar estas cifras al azar. Bien, por eso voy a llamar a la función Math.random. Y lo multiplicaré con suite de colores para que el valor x esté entre cero y columna dulce. Puede estar en cualquier parte del Congreso y hacer el mismo tanque para el valor y también. Y esta vez vamos a decir coma altura. ¿Bien? Entonces, intentemos dibujar las cifras en este punto. Entonces antes que nada, quiero despejar directo porque vamos a hacer algunas animaciones en el futuro. Entonces aclaremos la calma, todas las comas en fuselaje. Y ahora podemos, intentemos dibujar cifras. Para eso. Quiero iterar sobre la matriz de figuras, ¿verdad? Y voy a usar para cada uno, voy a decir figura. Y para todos figura, se quiere llamar al método de dibujar. ¿Bien? Entonces no hemos dado ningún color. Simplemente hagamos un color claro para que tengamos las figuras en las columnas. Y cada vez que actualice este navegador, nos hará una figura posicionada generada aleatoriamente recta porque nuestros valores x e y son aleatorios. Pero deberían estar en los incontables. Entonces deberíamos, en cada fotograma deberían tener diez dedos, exactamente. 1 234-567-8910. 15. Movimiento circular: Lo siguiente que quiero hacer con estas cifras es darles algún movimiento circular. Como los movimientos circulares porque hace que los objetos se vean como un vivo. Bien, así que vamos a implementar movimientos circulares para nuestro altavoz. En la clase Figura, crearé un nuevo método llamado movimiento circular. Así que aquí estoy en realidad podemos usar funciones coseno y seno. Entonces deberíamos cambiar el valor x y el valor y de las figuras con algunos valores para que dibuje una ruta circular. ¿Verdad? Entonces, si solo cambiamos el valor x, digamos que no coseno. Entonces también necesitamos un contador aquí que vaya a bucle a bucle 0-360. Entonces será que los grados comiencen todos los grados comiencen desde cero y vayan hasta 360. Entonces para hacer eso, voy a implementar contador en esta cifra. Por lo que partirá de cero. Y entonces lo haré, lo voy a aumentar. Cada movimiento circular al final. En realidad. Vamos a este contorno plus, plus y ejecutarlo más grande o igual a 260, volveré a hacerlo cero. ¿Verdad? De manera que ese contorno aumentará el recuerdo del movimiento circular. Y cuando llegue a esos 260 grados, volverá a cero y partirá de ahí. Otra vez. Eso es lo que necesitamos en realidad. Ahora, voy a llamar aquí a este contador. Pero recuerden, la función coseno no está buscando grados. En cambio, está buscando la lectura. Si recuerdas, radianes a grados fórmula x dividido por 180 veces pastel de barro. ¿Bien? Entonces hagamos esto para nuestro contador dividido por 180 veces pi para que nos aseguremos de que dibuje un círculo completo. Permítanme guardarlo así y llamar momento circular en cada fotograma. Veamos qué pasa. Entonces nuestras pelotas se mueven, ¿ verdad? Lo cual es genial. Entonces cósmica, esa función de costo devuelve un valor entre menos uno y más uno. Y es simplemente cambiar entre estos valores. Y estamos actualizando x con esos valores para que nuestras bolas vayan a derecha e izquierda continuamente. Hagamos lo mismo por Y también. Pero esta vez vamos a usar, um, en realidad vamos a usar coseno de nuevo para ver qué pasa. Sólo puedo copiarlo y pegarlo aquí y guardar esto. Así se puede ver cuando le damos la misma función a por qué dibujará algún camino como este, como diagonal, porque estamos aumentando a x e y al mismo tiempo, al mismo valor, con el mismo valor. Pero si cambias esto para firmarlo y guardarlo, puedes ver que están dibujando un círculo un momento. Esta es la clave para hacer algún movimiento circular como este. 16. Cambie el tamaño con la entrada de micrófono: Bien chicos, sigamos llamando. siguiente paso es agregar la entrada del micrófono al movimiento de los círculos. En realidad, no el momento, sino el tamaño de los circuitos que queremos. Hazlos más grandes. Cuando hay una entrada de una guerra alta. Y su tamaño dependerá de la entrada de voz. Se harán más y más pequeños según la entrada del micrófono. Entonces para hacer eso, agregaré un nuevo método en la clase figure. Justo aquí. Vamos a agregar un nuevo método y eres un nombre de cambio de tamaño. Entonces esto importaba necesita un parámetro. Yo lo llamaré valor. Y este parámetro vendrá de la matriz samples, que está conectada con el micrófono en retrato. Entonces usaremos un parámetro de las barras de entrada y cambiaremos el tamaño de cada arco. Entonces para hacer eso, primero vamos a verificar si el valor es mayor que el tamaño. Por lo que vamos a ajustar el valor sólo un tazón. Pero primero vamos a comprobar si el valor es mayor que el tamaño. Entonces, si lo es, haremos que el tamaño sea igual a valor. En otro caso, queremos cambiar la talla. Entonces esto más significa que no tenemos ninguna entrada de voz o tenemos una, pero es muy, muy baja para que no podamos oírla, para que esa computadora no pueda oírla. En ese caso, queremos cambiar el tamaño y queremos disminuir su tamaño. Digamos, no sé 0.1. Entonces esto se llamará en cada fotograma. Entonces es disminución de tamaño. Soy Tom por ciento en fuselaje. ¿Correcto? Así que vamos a llamar a este método en función de animación. Justo aquí. La suciedad, ese tamaño de cadena. Pero para darle un parámetro que provenga de la muestra por separado, necesitamos obtener la tasa de índice de muestras. Entonces no tenemos un índice en estos momentos. Pero si recuerdas, podemos obtener el índice simplemente pasando un segundo parámetro para cada función. Entonces, si lo haces así, la primera será la figura misma sobre la que estamos iterando. Y segundo parámetro será el índice de eso. Entonces de esa manera, podemos obtener ese índice en el array samples y podemos cambiar su tamaño. Estoy usando la entrada de voz. ¿Bien? Entonces déjame guardar esto y ver el resultado. Bien, entonces no podemos ver nada. En realidad, vimos algo al principio, pero simplemente desaparecen instantáneamente. Entonces, ¿por qué sucede? Porque a lo mejor nuestro valor de disminuir es demasiado. Cambiemos esto al 1% y lo guardemos de nuevo. Entonces esto es mejor ahora mismo. Están desapareciendo lentamente. Pero al final, no podemos volver a ver nada. Entonces parece que el valor es demasiado pequeño, ¿verdad? Por lo que al parecer rara vez no es suficiente para hacer el tamaño más grande. Vamos, también podemos comprobarlo. Lo inicio de sesión. A ver. Entonces nuestro valor es cero. Um, esto no es lo que esperaba. Bien, entonces intentemos multiplicar este valor. Digamos que quiero crear una nueva variable llamada silent. Y será el resultado de valor multiplicado por 200. Y usemos el sonido aquí y aquí, Ezra. Permítanme decir esto otra vez. No tenemos ninguna salida otra vez. Así que solo voy a abrir esto en una nueva pestaña. Esto fue un error para Google Chrome. Entonces cuando lo abrimos en una nueva pestaña, no hay problema. Así se puede ver que se están haciendo más grandes cuando hablo más alto o más pequeño cuando hablo carga. Pero veamos también valor y el sonido en la consola. Primero verifiquemos el valor. Para que veas que es algo realmente pequeño. Por eso solo queremos multiplicarlo con 200. ¿Bien? Es esto algo que encuentro al intentar, bien, No hay fórmula para esto. Pero probé algunos valores. Y 200 parece agradable porque quiero cifras para hacerlas más grandes, para hacerlas más grandes. Y 200 está bien para mí. Puedes probar diferentes valores y puedes decidir sobre otro aleatorio. Pero el punto principal aquí es que, ahora mismo, tenemos círculos y hay tamaño que están cambiando dependiendo de la entrada de voz. 17. Reproducir música: En este punto, el tamaño de las cifras debería cambiar con la entrada de la esposa. Entonces déjame tocar una canción para decirlo. Obviamente. 18. Añade Teleportación: Por último, quiero mostrarte algunos ejemplos de personalización. Porque quiero que personalices tu propio efecto con la forma que quieras. ¿Bien? Entonces, para un ejemplo, agreguemos un nuevo método en la clase Figure. Entonces quiero agregar un método de teletransporte. Porque cuando las figuras terópodos, es, el hecho se ve mucho mejor. Agreguemos el efecto de teletransporte y podrás ver el resultado. Entonces voy a decir teletransportarse ahí. Deberíamos cambiar su valor x y también y de los fracasos. Y quiero que se teletransporten al azar. Entonces digamos mucho al azar veces el ancho de pérdida de columna, lo que significa que será teletransportada en algún lugar dentro del Carlos. ¿Bien? Y haz lo mismo por y, pero esta vez, escribe aquí Hunt. Entonces tenemos nuestro método de teletransporte. Vamos a llamarlo animación lunar. Entonces para cada figura, si llamamos a la función de teletransporte, se cambian de ubicación en cada fotograma. Esto parece un cos. Bien, no queremos vacas. Entonces no deberíamos llamar teletransporte en todos los cuadros. O este es un verdadero enfoque de atención. Nuevamente, podríamos agregar una restricción aquí. Entonces cuando pasa algo que teletransportarse, no en todos los cuadros. Para que pueda agregar cualquier restricción. Depende de ti. Por simplicidad. Sólo voy a añadir una restricción de random. Entonces esto también puede ser aleatorio. Yo soplé es perfecto si aleatorizas una rutina. Entonces, cuando agrego aquí una restricción como esta, math random devuelve algún número 0-1. Y si es mayor a 0.99, que es aproximado ser una sola persona, ¿verdad? Después teletransportarse a la figura. Déjenme decir esto. Ya puedes ver, es más raro en estos momentos. Vemos algunos teletransportes, pero no es continuamente. Podríamos disminuir su frecuencia simplemente aumentando este valor aquí. Entonces están casi, ya no están apoyando. O puede aumentar su frecuencia disminuyendo el valor de restricción. El 50% sigue siendo demasiado. A lo mejor el 90% será de 95. ¿Bien? Pero mi opinión, 99 se ve muy bien. Bien, Entonces la razón por la que quería mostrar esto es para mostrarte que esta cifra, este efecto es personalizable. Puedes agregar cualquier método que quieras, jugar con él. Se pueden ver diferentes resultados. Y por último, al final, quiero mostrarles una cosa más, que es aumentar la velocidad de animación. ¿Bien? Entonces ahora mismo nuestro movimiento circular es demasiado lento. En mi opinión. Quiero aumentarlo. Entonces también podrías hacerlo con llamadas. Pero, ¿y si quieres cambiar la velocidad de fotogramas? Si quieres cambiar el FPS, también podrías agregar diferentes bibliotecas y así sucesivamente para hacerlo. Pero hay otro enfoque complicado para eso. Quiero mostrarte. Entonces estamos llamando a función animada aquí y se llama a sí misma una y otra vez, ¿verdad? ¿Y si ahora llamamos a enumerar función para mí? Entonces cambiemos esto a diez o cinco, tal vez. Solo llama animar una caída. Entonces esto aumentará la velocidad de animación cinco x porque estamos llamando a función de animación cinco veces. Déjame guardar esto. Para que veas que los círculos se mueven más rápido. ¿Bien? Entonces esto es básicamente aumentar la velocidad de fotogramas en un segundo.