Comment créer un visualiseur audio en codant avec Javascript

1. Introduction: Bienvenue dans cette section. Nous allons créer un visualiseur audio incroyable qui répondra à toutes les entrées audio. Comme vous pouvez le voir, les balles sautent quand je parle, quand je pince ou quand je joue de la musique. Et puis tu es toujours bon. Quand tu seras prête à le faire. Pour commencer, passez à la vidéo suivante. 2. Mettre en place: Comme toujours, nous partirons de la ligne de commande. Alors laisse-moi apporter le mien. Je suis actuellement sur ordinateur. Allons dans le dossier des projets où je vais enregistrer et stocker mes projets. Donc si je tape ls ici, vous pouvez voir nos anciens projets. Nous allons donc créer un nouveau dossier ici. Et appelons-le visualiseur audio. Allez dans ce dossier. Faisons simplement de bons fichiers. Comme d'habitude, nous avons besoin d'un fichier HTML. Cette fois-ci. Puisque nous recevons les données du microphone, je souhaite créer un nouveau fichier appelé microphone JS. Enfin, nous avons besoin d'un nouveau fichier pour la visualisation. Appelons-le Visualizer dot js. Ok, on peut y aller. Si vous vous souvenez de la commande ou ouverture de ce dossier en code largeur. Si vous utilisez cette version comme moi, vous pouvez taper une commande comme celle-ci. Ou si vous utilisez la version normale du code de risque, vous pouvez simplement commander spacetime. Lorsque nous tapons cette commande, elle ouvre le dossier dans code West afin que nous puissions y aller. 3. Modèle Html: Commençons le projet en important modèle HTML5. Comme toujours. Donc, ici, nous allons utiliser des fichiers JavaScript. Tout d'abord, changeons le titre. Nous voulons donc importer ces deux fichiers JavaScript, HTML boilerplate. Je vais donc créer un nouveau script et faire un micro swash JS, et aussi un visualiseur JS. N'oubliez pas que nous utiliserons la classe de microphone dans le visualiseur. La commande est donc importante ici. Le script du microphone doit être un arc du script du visualiseur. Bon, pour commencer, s'il te plaît. Allons dans le fichier JS du microphone et nous allons l'enregistrer. 4. Compléter le HTML: Ces balises de script ne doivent pas figurer sur le chapeau, mais dans le corps. Juste après qu'on en ait eu d'innombrables, non ? Je dirai que si Michael était un nombre incalculable. Mais une autre chose que nous devrions ajouter ici est le fichier CSS. Nous l'avons presque oublié, mais il existe une autre façon d'ajouter des fichiers. Vous pouvez donc le faire à l'intérieur avec Dieu. Nous pouvons donc cliquer sur cette nouvelle icône de fichier et vous pouvez simplement taper le nom. OK, et associons également ce fichier CSS comme ceci. Bon, nous n'avons donc pas à créer de nouveaux fichiers à partir de la ligne de commande. C'est peut-être un moyen plus simple. Nous avons maintenant des fichiers CSS ou JavaScript, et notre code a été créé en HTML. Nous pouvons donc commencer à écrire du code. Microphone, Jess. 5. Microphone.js: Au lieu d'écrire le fichier JS complet du microphone, je vais simplement copier et coller le code ici. J'ai donc trouvé ça sur le web pour obtenir des données de microphone. Il s'agit d'un standard que vous pouvez utiliser tous vos visualiseurs audio. Nous n'avons donc pas besoin de connaître les détails exacts ici. Il obtiendra simplement les données du microphone, l'entrée audio. Vous n'avez pas vraiment besoin de changer quoi que ce soit ici. Ou peut-être veux-tu changer. Vous pouvez modifier la taille de la FFT si vous souhaitez une certaine variété dans la sortie. Permettez-moi donc de vous expliquer rapidement ce que nous avons ici. C'est juste un cours occasionnel appelé microphone. Nous avons ici le constructeur. La première propriété est donc d'identifier si le microphone est initialisé ou non parce que nous voulons attendre s'il n'est pas encore initialisé, d'accord ? Et à la fin de tout, cela deviendra vrai. Et puis nous obtenons simplement la fonction multimédia utilisateur. Et gardez à l'esprit que toujours là, tout ce qui est religieux. Nous n'avons donc aucune bibliothèque tierce ici. Et apparemment, cette méthode renvoie une promesse car elle utilise then after get user media function, qui attendra essentiellement cette ligne. Et nous courrons après qu'il ait retourné quelque chose. Donc, s'il est renvoyé avec succès, ces lignes seront appelées. Ou s'il y a une erreur, elle alerte simplement l' erreur sur le navigateur. Ok ? Et quand ce sera prêt, ces lignes seront appelées. Nous avons donc un analyseur ici. Et ces lignes décideront de la taille de la FFT, la longueur de la mémoire tampon, etc. Enfin, remplacez la propriété initialized sur true après la connexion au microphone. Et sinon, il ne fera qu' alerter l'erreur sur le navigateur. Très bien, nous avons donc deux méthodes ici. Le premier reçoit les échantillons. C'est donc le résultat que nous allons utiliser. L'objet renvoyé sera un tableau et sa longueur sera égale à la moitié de la taille de la FFT. Nous avons donc déclaré une taille 50 512. Voici des exemples. La longueur du tableau sera de 256, d'accord ? C'est donc toujours la moitié de la taille de la FFT. Et nous utiliserons cette enquête par sondage lors de la visualisation de l'audio. Ok, alors réfléchis comme ça. Nous pouvons avoir 256 balles dont chaque balle répondra à un élément de ce tableau. Ok ? Vous comprendrez mieux quand nous le ferons, le ferons et le mettrons en pratique. Et enfin, nous avons la fonction de volume qui va obtenir les méthodes de l'utérus. Et je pense que c'est assez explicite. Cette méthode renvoie le volume des entrées audio. 6. Obtenez des données de microphone: Maintenant que notre micro est prêt, nous pouvons commencer à écrire le code dans la visualisation. Ouvrez ce fichier. La première chose que je veux faire ici est de vous montrer les données que nous obtenons du microphone. Pour ce faire, je vais créer une nouvelle variable, microphone. De la classe de micro. Nous n'avions aucun paramètre dans le constructeur. Nous pouvons créer un nouveau microphone ou un nouvel objet comme celui-ci. Créons également cette fonction d'animation. Parce que nous voulons obtenir les données du microphone en temps réel en continu. Et comme vous le savez, nous devons demander une image d'animation pour animer cette fonction. Et nous devons aussi l'appeler quelque part dans le code. Donc, entre ces deux lignes, tout ce que nous écrirons sera appelé dans chaque image en continu. Je veux donc simplement enregistrer les données du microphone dans la console afin que nous puissions voir de quoi il s'agit exactement. Mais d'abord, je veux vérifier si microphone est déjà initialisé. Donc rappelez-vous, nous avons une propriété et c'est vrai quand Eris a fait faire les choses au micro. Donc, si le microphone est initialisé, récupérons simplement des échantillons à l'aide de la fonction samples. Et ça, ici. Pour l'instant, connectons-nous simplement à la console. Je l'enregistre donc et je vais juste aller dans index.HTML. Cliquez avec le bouton droit pour ouvrir avec Live Server Si vous n'avez pas cette option, vous pouvez toujours télécharger extension Live Server à partir des extensions de VSCode. C'est ce que nous avons déjà fait dans ce cours. Je ne vais donc pas expliquer les étapes pour l'instant. Mais si vous avez installé l'extension Live Server, vous pouvez simplement l'ouvrir comme ceci. Et laisse-moi juste l'afficher sur cet écran. Et je vais aussi le blanc de mon écran comme ça. Très bien, donc notre code est en cours d'exécution sur ce port. Regardons simplement la console. Nous recevons des données de microphone en permanence. Et il y a beaucoup, beaucoup d'échantillons. Et ça continue parce que je parle, n'est-ce pas ? Et cela utilise également mon navigateur de microphone. Dans un premier temps. Lorsque vous ouvrez Live Server, il peut vous demander d' autoriser l'utilisation du microphone, d'accord ? Et une fois que vous l'acceptez, pouvez utiliser l'entrée audio. Bon, regardons le seul journal ici. Il s'agit donc d'un tableau. Comme nous en avons discuté. Sa longueur est de 256, et les valeurs ne sont que de petites valeurs. Ces valeurs sont, chacune d' elles représente quelque chose. Je ne suis pas vraiment un expert du son. Et je ne sais pas, je ne sais pas vraiment quelles sont ces valeurs. Mais vous pouvez l'imaginer comme s'il s'agissait de fréquences ou de signaux qui expliquent le son à ce point précis. Nous pouvons utiliser ces valeurs pour visualiser le son. Et ces valeurs sont vraiment de petites valeurs. Il y en a entre moins quatre et plus quatre. Et ils sont généralement inférieurs à un. Il peut donc s'agir de valeurs négatives ou de valeurs positives également. Et je crois que les valeurs augmentent. Maintenant, nous obtenons des sons intéressants. Ça va ? Donc, si je ne parle pas, les valeurs seront 0. Par exemple, à ce stade, il n'y a pas d'entrée audio. Ça va ? Maintenant que nous savons à quoi ressemblent les données de nos échantillons, nous allons utiliser ces données. Nous pouvons le prétraiter, bien entendu. Mais finalement, nous utiliserons ces données pour créer des visuels. Bon, commençons donc à utiliser notre commerce pour créer des visuels. 7. Créer le cours de bal: Commençons par dessiner nos visuels en créant Karl Marx. Comme d'habitude, nous obtiendrons l'élément par ID à partir du modèle HTML. Laissez-moi vérifier l' identification de mes couleurs. Copiez-le et collez-le ici juste pour être sûr que les noms des tapis. Créons également CTX, ces méthodes contextuelles. Et nous voulons de la 2D. Enfin, nous pouvons ajuster le poids à la largeur et à la hauteur de la fenêtre. Très bien. Pourquoi les ajustements sont-ils prêts ? Nous pouvons commencer à créer le premier cours. Donc à la fin, ce que nous voulons dans une multitude de boulons, n'est-ce pas ? Ou des raccourcis. Je vais juste les appeler balles parce qu'ils vont sauter. Dans ce projet. C'est pourquoi je crée une classe nommée ball. Et comme d'habitude, nous aurons un constructeur de cette classe. Il obtiendra deux paramètres, x et y. Ces valeurs seront les positions initiales x et y de la balle qui va apparaître. Assignons simplement ce point x point y. Alors pourquoi voulons-nous ici, alors nous allons créer un bol et qui est un cercle complet. Et si vous vous souvenez, nous utilisons le CTX augmenté. Ici, ce que nous devons faire, c'est la valeur du rayon. C'est pourquoi nous avons également besoin d'un rayon. Mais je ne veux pas l' obtenir à partir de paramètres parce que nous voulions juste faire en sorte que tous les rayons des balles disent. Je vais donc utiliser une valeur par défaut de huit. Alors décidons également de sa couleur. Tu peux changer ce que tu veux. Vous pouvez utiliser le bleu, le rouge, le gris. Et je pense également que je vais l' expliquer plus tard, mais je veux juste sauter cette partie. Ajoutons cette propriété. Et donc ce dont j'ai besoin ici, c'est sauter pour SSH et aussi faux. D'accord, parce que les balles tomberont et sauteront selon le son à Detroit. Mais dans la phase initiale, au tout début du projet, les balles tomberont. Ils commenceront donc par haut et tomberont avant tout. C'est pourquoi je ne veux pas faire de la force de chute 0, mais au lieu de cela, je vais simplement la faire 0,1. Ça va ? Là où j'en ai fini avec le constructeur, nous allons simplement ajouter une propriété supplémentaire, mais je l'ajouterai quand le moment sera venu. Comme d'habitude, nous devons également dessiner des méthodes. C'est qu'elle inclut qu'elle prend FillStyle. Je vais l'affecter à cette couleur car lorsque nous voulons changer de couleur, la balle sera également de cette couleur. Donc nous devrions dire begin Pat devrait également dire barre CTX pour dessiner un cercle. Donc ce point x barre, valeur x, je suis désolé, ce point y pour y valeur. C'est ce qu'ils essaieront d'utiliser pour le rayon. L'angle de départ sera de 0 et l'angle sera pi fois deux car nous dessinerons toujours un cercle complet qui ressemblera à un bol. Enfin, nous pouvons parler de la pilule CTX. Bon, tu devrais déjà être familier avec ces lignes. Nous avons déjà fait de nombreuses pratiques à ce sujet. Donc, ce dont nous avons besoin, ce dont nous avons besoin, c'est de deux méthodes supplémentaires. Nous voulons donc juste un formatage et un saut. C'est tout pour le cours de balle. Et nous écrirons le contexte des méthodes de chute et de saut plus tard. 8. Générer des boules: Très bien, nous avons le cours de balle. Allons-y et générons la balle afin que nous puissions les voir sur des colonnes. Pour ce faire, nous avons besoin d'un tableau. Il sera vide au début. Et nous aurons besoin d'une fonction qui générera les balles. Je vais utiliser la fonction flèche ici. Ok ? Donc, dans cette fonction, tout d' abord, laissez-moi simplement supprimer ce journal afin que nous ne le voyions pas. Alors nettoyons. Fermez la console. Ok. Donc en janvier faux, cette fois nous allons faire quelque chose de différent. Je ne veux pas définir statiquement la longueur du tableau de balles. Je ne veux donc pas simplement créer un boss à 100. Disons. Ce que je veux à la place, c'est créer les balles, qui seront réactives pour le pied de Carlos. Donc ce que je veux dire, c'est si le charbon était, pourquoi savez-vous que je devrais être moins de balles à mettre en avant, par exemple, non ? Maintenant, si nous avons un Commonwealth plus important, nous pouvons avoir 100 obligations. Ok ? Donc, finalement, le tableau des terres des balles sera dynamique. Pour ce faire, nous allons simplement assigner. Créons simplement une nouvelle variable, la distance. Cela permettra de clarifier la distance entre chaque grille de balle. Donc je veux juste faire une fête ou commencer. Et nous allons juste calculer combien de balles je dois utiliser. Largeur de Carlos divisée par la distance. Ok ? Ce qui est logique, non ? Parce que B a une largeur de 1 000 sur laquelle nous voulons que je sois fatigué de la distance. Nous devrions donc avoir quelque chose autour de nous. Je suis fatigué des bols à thé, non ? Parce qu'il y aura des instances et le poids de la balle aussi. Mais je vais simplement dire moins deux ici parce que nous voulons de la distance entre le début et la fin également. Le nombre de balles sera calculé comme ceci. Bon, maintenant il est sensible à la Kawasaki. Lorsque nous modifierons la largeur du navigateur, le nombre de balles changera. Et ce dont nous avons besoin, c'est d'une boucle for. Et disons simplement «  I » pour itérateur. Et nous voulons mettre ça en boucle. Nous voulons identifier la quantité de scie Bosch qui exécutera le nombre de moles fois. Et dans la boucle d'automne, je vais juste dire que les balles poussent r1 pour créer une nouvelle balle et la pousser dans les bols, non ? Appelons simplement une nouvelle balle. Et nous avons juste besoin de donner les valeurs x et y ici. Pour les valeurs x et y. Pour y rarement, c' est vraiment simple. Nous pouvons simplement donner une valeur statique. Par exemple, 500. Ok ? Mais quelle valeur x ? Nous devons utiliser à nouveau la distance. Donc, la première balle devrait être la distance, non ? Donc quand je dis un retard, c'est x devrait être en retard. La deuxième balle devrait être plus une distance, non ? Donc 2R2 plus Turquie, l' exposition de la deuxième balle devrait être de 60. Donc si je dis distance plus I fois distance, je crois qu'il y aura un boss l'un à côté de l'autre dans le cosmos. Il y aura donc les deux tout au long de la guerre froide, il y aura des écarts au début et aussi entre chacune des balles. C'est ce que nous voulons. Et quand je sauvegarde ça, rien ne se passe parce que nous n'avons pas encore appelé la fonction générique des balles. Quand je l'appelle comme disons, les boules sont générées mais on ne les voit pas encore parce que notre couleur est quoi ? En fait, je veux juste changer l'arrière-plan en noir, mais vérifions-le d'abord. En changeant la couleur des balles. Avons-nous la chanson du bal, Carlos ? Je ne le suis pas exactement. C'est parce que nous n'avons pas encore tiré les balles. Nous avons donc simplement généré le boss, mais nous n'avons pas appelé la fonction draw. Donc ce que nous devons faire est de dire balle pour chaque balle, je suis simplement en train d'itérer sur chaque balle de ce tableau. Et j'appellerai bold une fonction de dessin. Maintenant, nous avons les balles sur la toile. Ça va ? Notre fonction fonctionne donc. Nous n'avons pas besoin de dessiner les murs ici. Je vais simplement le supprimer. Et je vais également refaire la couleur blanche. Et passons à style.css, très vrai plomb, juste la couleur de fond. Ici, je veux tout sélectionner en utilisant astérix. Faisons simplement correspondre la marge et remplissage 0, le dimensionnement de la boîte, la boîte de bordure. Ce ne sont donc que des valeurs par défaut. Nous faisons presque ce tableau dans chaque projet. Et aussi. Donc pour l'instant, si vous remarquez, nous avons des barres sur la droite. Donc c'est juste, cela rend ces lignes qui rendent Buddy défilable. n'est pas ce que nous voulons. C'est pourquoi je vais simplement dire « débordement ». Voyons voir. Alors les bars partent. Enfin, changeons simplement. La colonne était nue, rectifiée , noire ou éteinte. 9. Boules tombées: Très bien les gars, tirons les balles et faisons-les tomber. Tout d'abord, animer la fonction. Si le microphone est initialisé, je veux tirer les boules. Donc, pour ce faire, on appelle le tableau de balles. Et utilisez pour chaque méthode. Ici, passons simplement une balle qui itère les balles. Et je voulais juste dire « balle tirée ». Quand on fait ça, on peut voir les balles dans le coma. Et remarquez si nous changeons la taille de la colonne, la quantité de balles, chaînes, de sorte que nous ayons les deux essais aux vaches. Et puisque nous allons faire une animation ici, je veux juste effacer les cônes dans un recadrage. Je vais le faire en utilisant la fonction clear rect. Passe x et y à partir de 0 jusqu'à Carl Woese, largeur et hauteur. Vous pouvez donc voir que nous avons de bons liens. Si nous les faisons aussi tomber. Juste avant le tirage. On peut voir les balles tomber. Mais nous devons d' abord rechercher la fonction. Pour ce faire, je vais perdre les formes de chute et changer les balles. Pourquoi ? En fait, je dirai que ce point y plus est égal à ce point pleine force, qui mettra à jour la valeur y de la balle à chaque image et ajoutera toute la force. Donc quand je sauvegarde ça, tu peux voir que les balles tirent lentement. Rendons cela plus naturel. Dans la vraie vie, quand quelque chose tombe, sa force augmente, non ? À cause de la gravité. C'est pourquoi je vais également augmenter toute la force dans chaque image, 0,05. Vous pouvez donc maintenant voir un effet plus naturel. Mais à un moment donné, la balle devrait s'arrêter. Je vais donc simplement ajouter la contrainte. Nous voulons juste que les murs tombent, s'ils le sont. Y est inférieur à la hauteur de Coleman divisée par deux. Donc, si seulement le boss ou un bol, la moitié des couleurs, ils tomberont. Sinon, ils s'arrêteront. Juste comme ça. Permettez-moi de le rafraîchir à nouveau. Ils sont donc partis de la position bifans. Et ils ont commencé à tomber parce que nous appelons la fonction de chute dans chaque image. Et nous n'avons qu'une seule contrainte, qui est que la position y doit être supérieure à la hauteur de Carlos divisée par deux. C'est pour ça qu'il y a du top. Quand ils atteindront ce point. 10. Boules de saut: Lorsque les balles pour chacun à ce point, sorte qu'il y a des frappes, frappant au sol. Nous voulons les faire sauter, non ? Pour ce faire, nous avons besoin d'une autre déclaration if ici. Nous devons vérifier si la balle est en train de tomber. Parce que s'ils ne tombent pas, nous voulons les faire sauter. Et pour vérifier cette valeur, vous suffit d'avoir une autre propriété. Ajoutons. Une propriété est en train de tomber. Et ce sera vrai au début car le boss tombera à l'état initial. Donc, si les balles ne tombent pas, ce qui signifie que les balles tombent, la propriété est fausse. Dans ce cas, nous voulons qu'il saute. Très bien, montons et voici une méthode de saut déclarée. Je vais donc, tout d'abord, ce que nous voulons faire, c'est faire en sorte que la force complète atteigne 0, parce que nous avions une force pleine auparavant. Et cela affectera notre position y dans chaque image. Donc, lorsque la chute et la détention de la propriété sont fausses, première chose que nous voulons faire est de faire à quatre pattes 0. Alors nous pouvons maintenant affecter notre force y. Nous sautons en force. Donc cette fois je vais utiliser moins égal parce que dans le système de coordonnées du commerce, quand la balle monte, c'est pourquoi ReLu diminue. Donc, dans les pays du Commonwealth, 0 est ici en haut et il augmente lorsque les boules baissent. Donc, si vous voulez qu'une balle saute, nous devons diminuer sa valeur y. Je veux donc réduire la raison pour laquelle ReLu sauterait en force. Et pour le rendre plus naturel, je vais reprendre la même logique. Je vais également diminuer la force de saut. Ok ? Nous avons donc également sauté les méthodes maintenant. Mais une chose qu'il ne faut pas oublier quand on saute aux bouts. Quand il revient à l'état de chute. Nous devrions également réinitialiser. Sautez la force à 0, comme nous l'avons fait pour la force de chute ici. Bon, maintenant ils ont l'air identiques. Ils sont simplement symétriques par rapport à l'autre. Très bien, essayons-le. Ça n'a pas marché. Et c'est parce que, c'est parce que notre force de saut est de 0. Changeons ça. Nous avons donc une force de saut. Ballon. Ok, alors peut-être qu' on devrait aussi changer la propriété de la balle qui tombe parce que nous ne la faisons jamais fausse, non ? C'est toujours vrai. Je vais donc ajouter ici une autre déclaration. Et faire en sorte que la balle tombe à faux. Essayons. C'est. Il saute juste pendant un moment. Tu vois ça ? Laisse-moi le refaire. Et puis une chute continue. Ok ? C'est donc parce que cette instruction if en exécute une, bien que sa propriété tombante soit fausse. Nous devons donc également imposer une contrainte ici. La vérification s'il est en train de tomber et de tomber, n'est-ce pas ? Donc si la balle, donc nous appelions à la fonction, si seulement la balle est en état de chute et que sa position y est inférieure au point de coma. Alors sauvegardons ça. Et aussi, peut-être que nous devrions le faire. Peut-être qu'on devrait juste changer le nôtre en « Else-if ». Et ajoutons simplement une contrainte. Si la position y des balles est plus grande que la hauteur de cause divisée par deux. Ça a l'air mieux, non ? Parce que nous voulons juste sauter ne serait-ce que si seulement sa valeur y est supérieure à la hauteur de Carlos divisée par deux. Donc, en d'autres termes, au milieu des colonnes. Très bien, donc nous allons changer la force sautée ici plus tard et ici quand le ballon. Donc, en gros, nous diminuons simplement la force de saut, non ? Quand la balle, Commentons cette ligne. Alors je ne descends pas. Quand j'ai décommenté, ça descend. Nous diminuons donc également la force de saut, et elle commence à 0,1, ce qui sera une valeur négative. Donc au lieu de faire un saut, on les fait juste, tu sais, tomber à nouveau. Donc fixons cette valeur à dix, disons 400. Rien ne change. Commentons simplement cette ligne. C'est juste, est-ce que j'ai fait une faute de frappe ici ? Nous devons donc changer sa position y à chaque image. Passons donc à la console. J'ai raté quelque chose. Donc si la balle tombe, nous devrions le faire, cette bûche devrait se noyer dans notre cadre en ce moment. Et c'est bien ce que nous pouvons voir dans la console, non ? Donc, la méthode jump est appelée maintenant recadrer et pourquoi elle est appelée. Nous allons également nous connecter ici. La force de saut. Supprimons ça. La force de saut est donc de 0. Pourquoi cela se produit-il ? C'est parce que quand on tombe, on fait juste sauter la force 0, non ? Au début, on en a fait dix. Mais à chaque fois qu'il vient de le faire tomber, la force devient 0, donc ils ne sautent pas. Donc, en fait, nous ne devrions pas l' attribuer ici. Nous devrions lui attribuer la fin de l'état d'interrogation, qui est ici, non ? Quand le ballon tire est resté faux. Nous devons également déclarer une force de saut. Je vais juste faire Tanh ici. Maintenant, vous pouvez voir que nos balles ne font que sauter. Mais peut-être que dix, c'est trop. Faisons ça aussi. Ok, super. Mais nous avons un autre problème en ce moment. Ils ne reviennent jamais. Ça va ? Donc pour éviter cela, je vais simplement ajouter une autre contrainte ici et si déclaration. Donc, quand la balle saute, à un moment donné, nous devrions activer l'état épouvantable, droite, pour qu'ils reviennent. Et j'ai juste envie de le faire. Lorsque la force sautée devient 0. Ok, donc c'est dans la vraie vie. Bien que. Quand on saute. Dans la vraie vie, nous entendons une force de saut dans la phase initiale. Et la gravité diminue la force de saut à chaque trait sur deux. Et à un moment donné, ou la force de saut devient 0 et nous commençons à tomber. Bon ? Faisons donc la même logique. Logique ici. Lorsque la force de saut devient 0 ou inférieure à 0, faites retomber les balles. Mais pour ce faire, nous devons activer uncomment, cette ligne qui va diminuer, forcer le saut, recadrer. Et quand il est inférieur à 0 ou égal à 0, nous devons à nouveau activer l'état descendant sur true. Essayons donc ça. OK. Maintenant, nous pouvons voir que nos balles sautent dans n'importe quel saut, à chaque saut, ou que la force de saut et la force de chute augmentent et diminuent comme d'habitude. Et à un moment donné, au point culminant, force de saut devient 0. Quand cela se produit, ils recommencent à tomber. Ok ? C'est ainsi que vous pouvez faire une logique gravitationnelle sans utiliser de moteur de jeu et quoi que ce soit d'autre. Avec du jus de vanille pur. Une autre équipe que nous voulons ajouter ici, qui sera la vraie connexion entre l'audio et nos balles pour changer la force de saut avec les entrées audio. Et nous le ferons dans la prochaine vidéo. 11. Obtenir une entrée audio: Très bien, les gars, est-ce que les éclats sautent ? Et il est temps de passer à la partie la plus excitante, à savoir Jim, de les faire réagir à l'entrée audio. Nous devrions donc modifier cette ligne, évidemment, parce que nous voulons simplement augmenter la force avec le microphone. OK, donc nous avons déjà les données du microphone. Et n'oubliez pas que la zone d'échantillons d'un tableau d'échantillons comprend 256 éléments. Et nous avons aussi quelques balles, mais notre nombre de balles n'est pas spécifique. Cela dépend de Canvas. Nous pourrions donc en avoir plus de 256 ou moins. Je ne vais donc pas les faire correspondre exactement. Mais nous pourrions, si nous pouvions être indexés d'une manière ou d'une autre, impliquer un tableau, n'est-ce pas ? Nous pourrions attribuer chaque échantillon à une balle. Donc, comme le premier échantillon. Ainsi, le premier élément d'une enquête par sondage peut être la force de saut de la première balle. Et le deuxième élément d'une enquête par sondage peut être la force de saut de la deuxième balle, etc. Je pense que ce sera génial. Et pour ce faire, nous devons suivre l'indice des balles dans chacune d'elles. Et si vous recherchez simplement un script ETL sur Google, vous pouvez voir les paramètres de cette fonction. Et le deuxième paramètre est l'index. La première que nous venons d' utiliser est donc la valeur de l'élément actuel. On appelle ça une balle. Si vous passez deuxième, c'est facultatif. Mais tu peux réussir. Et c'est le cas, il renvoie l'index de l'élément actuel, mais nous ne faisons que regarder. Alors allons-y et utilisons-le. Donc, pour utiliser cela, je vais simplement ajouter une parenthèse à côté de la balle. Je dirais indexé. Maintenant, dans ce fourrage, je peux le verrouiller. Suivant. Permettez-moi simplement de supprimer les autres lignes de journal. Nous n'avons donc que celui-ci. Sauvegardons ceci et vérifions la console. Vous voyez donc qu'il part de zéro et augmente à chaque itération. Très bien, nous pouvons donc utiliser cette valeur d'indice. Et ici, je veux appeler Sample, désolée. Essayons simplement l'index des échantillons. Essayons simplement d'utiliser des échantillons pour la force de saut. Mais encore une fois, n'oubliez pas que les échantillons ne sont que de très petites valeurs. Nous allons donc également enregistrer la console, connecter aux exemples de console pour voir. On dirait qu' ils ne sautent pas. Mais si vous regardez de plus près, vous pouvez voir quelques petits mouvements. Et c'est parce que nos échantillons sont très petits. Nous devrions donc le faire, et il existe également des valeurs négatives. Nous ne voulons donc pas que la force de saut soit négative. Nous pouvons donc utiliser fonction mat abs pour obtenir le résumé de la valeur. D'accord ? Lorsque nous faisons cela, nous n'avons plus de valeurs négatives. Et ce que nous voulons également faire, c'est multiplier cette valeur par dix, peut-être parce qu'elles sont trop petites. Rendons-les positifs, multiplions-le par dix et voyons ce qui se passe. Quand je ferme la console. Nous n'avons plus besoin de serrures. Disons ceci. Donc, en ce moment, vous pouvez nous voir parler, les balles ne font que sauter et il semble que multiplier par dix suffit. Vous pouvez bien sûr augmenter cette valeur si vous voulez plus de renards sautés. Ou si tu veux devenir fou, tu peux aussi devenir fou. Mais souvenez-vous que s'ils sautaient trop, ils sortiront de la toile. Je vais donc en garder dix. Et je crois que c'est fait. Essayons donc une autre solution. Ils sont juste en train de bouger à nouveau. Et à ce stade, vous pouvez en fait, c'est vraiment à vous de décider à partir de maintenant. Vous pouvez donc modifier les couleurs, ou vous pouvez également ajouter une méthode ici pour changer les couleurs. Et vous pouvez peut-être créer un paramètre ici, comme une valeur. Et vous pouvez modifier les couleurs en fonction de l'index des échantillons. Ainsi, les balles peuvent changer de couleur avec le son. Et ici, vous pouvez utiliser les valeurs RGB, RGBA et passer des paramètres. Tu peux tout faire. Vous pouvez changer de force si vous voulez des balles plus rapides. Ou ce que tu peux faire. Sinon. Si vous voulez des balles plus hautes ou plus grosses, vous pouvez simplement modifier le rayon comme ceci. Mais n'oubliez pas de modifier également la distance. Juste pour être sûr qu'ils n'entrent pas en collision. Cela les rend à nouveau plus petits. Ou tu pourrais les rendre vraiment plus petits comme ça. C'est à vous de décider. Allez-y, jouez avec les valeurs et ajoutez de nouvelles fonctionnalités pour tous. 12. Visualiseur audio 2: Dans cette section, nous allons créer un autre visualiseur audio que vous pouvez voir à l'écran. Laisse-moi jouer de la musique pour que tu puisses mieux voir l'effet. Job. Si tu aimes l'effet. Je ne pense pas à la prochaine vidéo où nous allons commencer à réaliser ce projet. 13. PRÉPARATION: J'ai créé le projet et tout est identique avec le visualiseur audio précédent Cette fois, changez simplement le titre avec le visualiseur audio en. Nous avons donc également lié le style CSS. Encore une fois, nous avons un commerce avec l'identifiant Mike sans abri. Nous avons un microphone JS et un visualiseur et généreux. Et Apo. Ce fichier HTML avec affichage en direct s'affiche simplement en cliquant avec le bouton droit de la souris et en sélectionnant cette option Ensuite, vous pouvez simplement utiliser le même modèle pour le microphone JS. Parce que, encore une fois, nous n'avons pas besoin de différences et c'est ce dont nous avons besoin dans ce projet. Le style CSS est également le même que le précédent. Utilisez simplement un astérisque pour tout sélectionner afin d'ajuster la marge et le remplissage Il suffit de masquer la propriété de débordement du corps et de rendre l'arrière-plan noir Nous n'avons donc pas encore défini la largeur et la hauteur du commerce. C'est pourquoi nos Cola proposés par défaut avec ces largeurs et hauteurs. Nous allons donc le modifier dans le visualiseur JS. Si vous êtes prêt avec ces deux fichiers, nous pouvons commencer à visualiser un JS. 14. Créer les figures: Comme toujours, commençons à créer des couleurs. Utilisons notre identifiant commercial ici. Créons également du CTX. Ajustons quoi à Window. Et aussi la taille, que nous connaissons dans nos hauteurs. Notre commerce est donc désormais entièrement ajusté et couvre tous les navigateurs de leur écran. Et ce que nous voulons faire ensuite, c'est attribuer le microphone à un nouveau microphone. Et n'oubliez pas que nous appelons cette classe à partir du microphone js. Et on peut le faire comme ça. Nous n'importons rien car Microphone JS n'est qu'un bol de visualiseur JS. Et à la fin, tout le code JavaScript sera transformé en ce fichier HTML. Nous avons donc en fait une classe de microphone dans le visualiseur JS. Et vérifions si tout fonctionne en créant simplement une fonction animée. Demandez l'animation Frame Animate. Et n'oubliez pas que ce blog nous fournit une animation en appelant cette fonction d'animation dans chaque image. Nous voulons donc vérifier ici si le microphone est déjà initialisé. Cette propriété. Donc, si le microphone est initialisé, je veux obtenir les échantillons. Échantillons. Microphone qui extrait des échantillons. Enregistrons-le pour voir si tout fonctionne. Je vais ouvrir la console en utilisant f 12th. Nous n'avons aucun échantillon. Alors laisse-moi juste ouvrir. Ça revit. Il y a peut-être une boîte. Nous n'en avons pas encore. C'est parce que nous n'avons pas appelé la fonction d'animation My bad. OK. Maintenant, nous pouvons voir les échantillons quand je parle. Il obtiendra la bonne entrée audio. Nous pouvons maintenant nous débarrasser de ce journal de console. Nous pouvons maintenant commencer à créer notre classe. Cette fois. Je veux appeler la figure sans parenthèses ici car elle aura des méthodes différentes. Il sera donc ajustable. Il s'agira d'autoroutes, téléportation et de méthodes de dimensionnement de chaînes, etc. Ce n'est donc tout simplement pas une simple balle. C'est pourquoi j'ai décidé de l'appeler figure. Mais comme toujours, nous avons besoin d'un constructeur. Alors cette fois, recommençons par X et Y, mais nous augmenterons le nombre de paramètres plus tard. Donc, ce delta x est égal à x, ce point y est égal à la taille y. Je vais utiliser huit puis quatre tailles initiales. Mais n'oubliez pas que nous allons modifier cette valeur avec l'entrée du microphone. D'accord ? Cela suffit donc pour le moment. Dessinons simplement cette figure. Et c'est tout. Il n'y a rien de nouveau pour nous. Donc, ce point FillStyle est de cette couleur foncée. Dx commence également Pat dx arc parce que, encore une fois, nous voulons dessiner des raccourcis. Je vais donc passer X4 fusains x. Pourquoi ? Et taille. Je n'ai pas appelé Radius cette fois. On pourrait aussi dire taille, la même chose. Donc zéro pour l'angle de départ. Et math.pi multiplié par 24 et angle, ce qui est exactement la même chose avec 260 degrés, mais nous devrions donner quelques radians ici. Nous utilisons donc cette expression. Enfin, nous devons ressentir ce que nous dessinons. Très bien, laisse-moi enregistrer ça. Et en bas, nous devrions attribuer une erreur de doigt, non ? Pour ce faire, j'ai besoin d'une boucle. Remplaçons son index en i. Je veux créer dix chiffres. Je dirais donc que les chiffres se rapprochent des chiffres. Vous devriez donc tous connaître cette syntaxe, n'est-ce pas ? Nous avons fait tout cela à de nombreuses reprises. Donc, nouvelle figure, mais cette fois, au lieu de faire un x et un y spécifiques, je veux faire apparaître ces figures au hasard. D'accord, c'est pourquoi je vais appeler la fonction Math.random. Et je vais le multiplier par une suite de couleurs pour que la valeur x soit comprise entre zéro et la valeur maximale de la colonne. Il peut se trouver n'importe où au Congrès et faire de même pour la valeur Y. Et cette fois, nous parlerons de la hauteur des virgules. Ça va ? Essayons donc de dessiner les chiffres à ce stade. Donc, tout d'abord, je tiens à clarifier directement car nous ferons quelques animations à l'avenir. Mettons donc fin au calme, à toutes les virgules de la cellule. Et maintenant que nous pouvons, essayons de dessiner des chiffres. Pour ça. Je veux itérer sur un tableau de chiffres, non ? Et je vais utiliser pour chacun, je dirais un chiffre. Et pour toutes les figures, vous voulez appeler la méthode de dessin. D'accord ? Nous n'avons donc donné aucune couleur. Faisons simplement une couleur claire pour avoir les chiffres sur les colonnes. Et chaque fois que je rafraîchis ce navigateur, il nous donne un chiffre positionné de manière aléatoire car nos valeurs x et y sont aléatoires. Mais ils devraient être innombrables. Nous devrions donc, dans chaque image avoir dix doigts, exactement. 1 234-567-8910. 15. Mouvement circulaire: La prochaine chose que je veux faire avec ces figurines est de leur donner un mouvement circulaire. Comme les mouvements circulaires, car cela donne aux objets l'apparence d'un vivant. Très bien, implémentons donc des mouvements circulaires pour notre haut-parleur. Dans la classe Figure, je vais créer une nouvelle méthode appelée mouvement circulaire. Donc, en fait, nous pouvons utiliser les fonctions cosinus et sinus. Nous devons donc modifier la valeur x et la valeur y des figures avec certaines valeurs afin tracer une trajectoire circulaire. Hein ? Donc, si nous ne modifions que la valeur x, disons pas le cosinus. Nous avons donc également besoin d'un compteur qui effectuera une boucle de 0 à 360. Donc, tous les degrés partiront les degrés partiront de zéro et iront jusqu'à 360 degrés. Donc, pour ce faire, je vais implémenter le compteur dans cette figure. Cela repartira donc de zéro. Et puis je vais le faire, je vais l'augmenter. Chaque mouvement circulaire à la fin. En fait. Supposons ce contour plus, plus et faisons-le passer supérieure ou égale à 260, je le remettrai à zéro. Hein ? Ce contour augmentera donc le rappel du mouvement circulaire. Et quand il atteindra ces 260 degrés, il reviendra à zéro et repartira de là. Encore une fois. C'est ce dont nous avons réellement besoin. Maintenant, je vais appeler ce compteur ici. Mais n'oubliez pas que la fonction cosinus ne recherche pas de degrés. Il cherche plutôt à lire. Si vous vous en souvenez, les radians sont degrés, formule x divisée par 180 fois la tarte à la boue. D'accord ? Faisons donc cela pour notre compteur divisé par 180 fois pi afin de nous assurer qu'il trace un cercle complet. Permettez-moi de l'enregistrer comme ça et appeler un moment circulaire dans chaque image. Voyons ce qui va se passer. Donc nos balles bougent, non ? Ce qui est génial. Si cosmique, cette fonction de coût renvoie une valeur comprise entre moins un et plus un. Et il s'agit simplement de basculer entre ces valeurs. Et nous mettons à jour x avec ces valeurs afin que nos balles se déplacent continuellement à droite et à gauche. Faisons de même pour Y. Mais cette fois, utilisons nouveau le cosinus pour voir ce qui se passe. Je peux simplement le copier et le coller ici et l'enregistrer. Vous pouvez donc voir, lorsque nous donnons la même fonction pourquoi elle dessine un chemin comme celui-ci, comme une diagonale, parce que nous passons à x et y en même temps, à la même valeur, avec la même valeur. Mais si vous le modifiez pour le signer et l'enregistrer, vous pouvez voir qu'ils dessinent un cercle à un moment donné. C'est la clé pour faire un mouvement circulaire comme celui-ci. 16. Changer de taille avec l'entrée micro: Très bien les gars, continuons à appeler. L'étape suivante consiste à ajouter l'entrée du microphone au mouvement des cercles. En fait, pas le moment, mais la taille des circuits que nous voulons. Agrandissez-les. Quand il y a l'influence d'une grande guerre. Et leur taille dépendra de la saisie vocale. Ils deviendront de plus petits en fonction de l'entrée du microphone. Pour ce faire, je vais ajouter une nouvelle méthode dans la classe figure. Juste ici. Ajoutons une nouvelle méthode et vous êtes un nom de changement de taille. Cette question a donc besoin d'un paramètre. C'est ce que j'appellerai valeur. Et ce paramètre proviendra du réseau d'échantillons, qui est connecté au microphone en mode portrait. Nous allons donc utiliser un paramètre des barres de saisie et modifier la taille de chaque arc. Pour ce faire, vérifions d'abord si la valeur est supérieure à la taille. Nous allons donc ajuster la valeur d'un simple bol. Mais vérifions d'abord si la valeur est supérieure à la taille. Donc, si c'est le cas, nous ferons en sorte que la taille soit égale à la valeur. Dans les autres cas, nous voulons modifier la taille. Cela signifie donc que nous n' avons aucune entrée vocale ou que nous en avons une, mais qu'elle est vraiment très faible, de sorte que nous ne pouvons pas l'entendre, sorte que l'ordinateur ne peut pas l'entendre. Dans ce cas, nous voulons modifier la taille et la diminuer. Disons que je ne connais pas 0,1. Cela sera donc appelé dans chaque image. C'est donc une diminution de taille. Je suis Tom pour cent dans la cellule. Hein ? Appelons donc simplement cette méthode dans la fonction Animate. Juste ici. La saleté, cette taille de chaîne. Mais pour lui donner un paramètre qui proviendra de l'échantillon séparément, nous devons obtenir le taux d'indice des échantillons. Nous n'avons donc pas d' index pour le moment. Mais si vous vous en souvenez, nous pouvons obtenir l'indice en passant simplement un deuxième paramètre pour chaque fonction. Donc, si vous le faites comme ça, la première sera la figure elle-même sur laquelle nous sommes en train de revenir Et le deuxième paramètre sera l'indice de celui-ci. Ainsi, nous pouvons obtenir cet indice dans le tableau d'échantillons et modifier sa taille. J'utilise la saisie vocale. D'accord ? Laissez-moi donc enregistrer ceci et voir le résultat. Très bien, donc on ne peut rien voir. En fait, nous avons vu quelque chose au début, mais ils disparaissent instantanément. Alors pourquoi cela se produit-il ? Parce que notre valeur de décroissance est peut-être trop élevée. Remplacons-le à 1 % et sauvegardons-le à nouveau. C'est donc mieux en ce moment. Ils disparaissent lentement. Mais à la fin, on ne peut plus rien voir. Il semble donc que la valeur soit trop petite, non ? Donc, apparemment, ce n'est que rarement suffisant pour agrandir la taille. Allons, nous pouvons également le vérifier. Je m'y connecte. Voyons voir. Notre valeur est donc nulle. Hum, ce n'est pas ce à quoi je m'attendais. D'accord, essayons donc de multiplier cette valeur. Supposons que je veuille créer une nouvelle variable appelée silent. Et ce sera le résultat d'une valeur multipliée par 200. Et utilisons le son ici et ici, Ezra. Permettez-moi de le répéter. Nous n'avons à nouveau aucune sortie. Je vais donc simplement l'ouvrir dans un nouvel onglet. Il s'agissait d'un bogue pour Google Chrome. Ainsi, lorsque nous l'ouvrons dans un nouvel onglet, il n'y a aucun problème. Vous pouvez donc voir qu'ils grossissent lorsque je parle plus haut ou qu'ils diminuent lorsque je parle fort. Mais voyons également la valeur et le son de la console. Nous allons d'abord vérifier la valeur. Vous pouvez donc voir que c'est quelque chose de très petit. C'est pourquoi nous voulons simplement le multiplier par 200. D'accord ? Est-ce quelque chose que je trouve en essayant, OK, il n'y a pas de formule pour cela. Mais j'ai essayé certaines valeurs. Et 200, c'est bien parce que je veux chiffres pour les agrandir, pour les agrandir. Et 200, c'est très bien pour moi. Vous pouvez essayer différentes valeurs et vous pouvez choisir une autre valeur aléatoire. Mais l'essentiel, c'est qu'à l'heure actuelle, nous avons des cercles et leur taille change en fonction de la saisie vocale. 17. Jouer de la musique: À ce stade, la taille des chiffres devrait changer en fonction de l'entrée de l'épouse. Alors laisse-moi jouer une chanson pour le dire. De toute évidence. 18. Ajouter Teleport: Enfin, je souhaite vous montrer quelques exemples de personnalisation. Parce que je veux que tu personnalises ton propre effet comme tu le souhaites. D'accord ? Par exemple, ajoutons une nouvelle méthode dans la classe Figure. Je souhaite donc ajouter une méthode de téléportation. Parce que quand les figures de théropodes, ça l'est, les faits semblent bien mieux Ajoutons un effet de téléportation et vous pouvez voir le résultat. Je dirais donc téléportez-vous là-bas. Nous devrions modifier sa valeur x et également la valeur y des échecs. Et je veux qu'ils se téléportent au hasard. Disons donc que la colonne perd beaucoup de largeur au hasard, ce qui signifie qu'elle sera téléportée quelque part à l'intérieur du Carlos D'accord ? Et faites la même chose pour y, mais cette fois, tapez ici Hunt. Nous avons donc notre méthode de téléportation. Disons que c'est de l'animation lunaire. Ainsi, pour chaque personnage, si nous appelons fonction de téléportation , son emplacement change à chaque image. On dirait un flic. D'accord, nous ne voulons pas de vaches. Nous ne devrions donc pas appeler téléportation à chaque image. Ou il s'agit d'une véritable approche de soin. Encore une fois, nous pourrions ajouter une contrainte ici. Donc, quand quelque chose arrive, téléportez-vous, pas à chaque image. Vous pouvez donc ajouter n'importe quelle contrainte. C'est à vous de décider. Pour plus de simplicité. Je vais juste ajouter une contrainte aléatoire. Cela peut donc aussi être aléatoire. J'ai trouvé que c'était parfait si vous établissez une routine au hasard. Ainsi, lorsque j'ajoute ici une contrainte comme celle-ci, math random renvoie un nombre 0-1. Et s'il est supérieur à 0,99, ce qui est approximatif pour une personne, non ? Puis téléportez-vous vers la figurine. Laisse-moi te dire ceci. Tu vois, c'est plus rare en ce moment. Nous voyons des téléportations, mais ce n'est pas continu Nous pourrions diminuer sa fréquence en augmentant simplement cette valeur ici. Ils ne soutiennent donc presque plus. Vous pouvez également augmenter sa fréquence en diminuant la valeur de la contrainte. 50 %, c'est encore trop. Peut-être que 90 % seront 95. D'accord ? Mais à mon avis, 99 a l'air vraiment sympa. OK, donc si je voulais vous montrer cela, c'est pour vous montrer que cette figurine, cet effet, sont personnalisables. Vous pouvez ajouter la méthode que vous voulez, jouez avec elle. Vous pouvez voir différents résultats. Enfin, à la fin, je voudrais vous montrer encore une chose, augmenter la vitesse d'animation. D'accord ? Donc, pour l'instant, notre mouvement circulaire est trop lent. À mon avis. Je veux l'augmenter. Vous pouvez donc également le faire en appelant. Mais que faire si vous souhaitez modifier la fréquence d'images ? Si vous souhaitez modifier le FPS, vous pouvez également ajouter différentes bibliothèques , etc. Mais il existe une autre approche délicate pour cela. Je veux te montrer. Nous appelons donc la fonction animée ici et elle se fait appeler elle-même encore et encore, n'est-ce pas ? Et si nous appelions la fonction enumerate maintenant pour moi ? Alors changeons cela à dix ou cinq, peut-être. Il suffit d'appeler Animating a fall. Cela augmentera donc la vitesse d'animation cinq fois car nous appelons fonction animate cinq fois. Laisse-moi enregistrer ça. Vous pouvez donc voir les cercles se déplacent plus rapidement. D'accord ? Il s'agit donc essentiellement d'augmenter la fréquence d'images en une seconde.