Bienvenue dans cette leçon, nous allons nous concentrer sur l'ajout de l'audio afin d'ajouter dans les échantillons de musique que nous allons jouer lorsque nous frappons chaque clé et aussi se concentrer sur donner chaque touche de sa propre couleur afin que nous ne recevons pas toujours ces orange Décoloration au jaune et puis vert, mais nous aurons certains qui sont violet certains qui sont bleus comme vous pouvez le voir ici toutes les couleurs différentes.
Mais il est toujours la même couleur pour chaque clé donnée comme H a toujours cette cue orange est toujours ce qui est T Y et ainsi de suite.
D'ACCORD.
Donc, pour commencer, nous allons juste comprendre comment nous pouvons jouer un son du tout.
Alors, comment on déclenche un son avec Hallard.
Oui dans le Hausler est fondamentalement l'opposé de Paperchase en ce qui concerne sa complexité, il est vraiment très simple qui le rend vraiment agréable.
Encore une fois, vous pouvez jouer de l'audio sans bibliothèque, mais c'est un peu.
C'est un peu douloureux lorsque vous voulez faire quelque chose comme ce que nous voulons faire là où nous ne sommes pas seulement jouer un son une fois, mais je veux être capable de déclencher un son dix fois de suite comme disons que je fais ça Merde ici, je veux être capable de faire quelque chose comme il ya un peu de travail impliqué pour faire que se comportent réellement la façon dont nous voulons qu'il.
Il est vraiment facile de jouer un son comme jouer une chanson qui est vraiment ennuyeux, mais si vous allez sur un site Web et il ya certains que vous savez une sorte de son ou de la chanson, il joue en arrière-plan qui est vraiment simple à faire avec h tim owl et javascript .
Mais pour faire quelque chose comme ça où nous pouvons avoir un tas de sons simultanés allant et nous pouvons répéter des choses et ce serait beaucoup plus facile à utiliser quelque chose comme Hallard J nous.
Encore une fois, impossible.
Comme n'importe quelle bibliothèque, vous pouvez le faire vous-même.
Mais nous ne voudrions pas vraiment.
Donc, si nous regardons comment cela fonctionne, c'est tout ce dont nous aurons besoin pour utiliser ce petit code ici où nous créons une nouvelle façon.
Alors, comment est la chose que nous sommes initialisation et savait comment.
Ensuite, nous lui donnons une liste de quelques URL des fichiers que nous voulons jouer.
Donc, la raison pour laquelle nous lui donnons un tableau de ces différentes vous sont des fichiers différents, même si elles ressemblent à ce qu'ils sont les mêmes types de fichiers différents et l'ordre que vous les mettre dans est l'ordre que howler va essayer de charger Les.
Donc, fondamentalement, il existe certains types de fichiers qui fonctionnent dans chaque navigateur certains d'entre eux qui ne fonctionnent pas dans tous les navigateurs.
Vous pouvez donc spécifier certaines sauvegardes.
Nous ne le ferons pas.
Nous aurons un seul fichier.
Mais si vous vouliez avoir des sauvegardes fondamentalement la façon dont cela fonctionne autant que je sache au moins vous pouvez lire à ce sujet ici, je suis sûr.
Ici, nous allons vous ou bien la source que vous êtes autre à la piste ou des pistes à charger pour le son.
Ceux-ci devraient être un ordre de préférence.
Howard Jasc chargera automatiquement le premier qui est compatible avec le navigateur actuel.
Donc voilà.
Nous pourrions ajouter dans d'autres versions de la même chanson.
Dans notre cas le même échantillon et holler chargeront automatiquement le premier qui est compatible.
D'ACCORD.
Donc, le code dont nous avons besoin, c'est Howell nouveau.
Et puis vous allez et c'est tout.
Et quand on est prêt à jouer, on appelle juste des pièces de théâtre.
Vous pouvez le voir ici et nous ne l'arrêterons pas.
Nous ne nous arrêterons pas.
Nous ne bouclerons pas parce que nos sons sont vraiment courts.
Alors nous voulons juste qu'ils jouent et laissez-les finir.
Chacune se situe entre une demi-seconde et une seconde.
Donc, si vous ne l'avez pas fait déjà aller de l'avant et de télécharger ce fichier zip qui a tous les sons et glissé dans le même répertoire où vous écrivez votre code.
Donc, au lieu de sons, nous avons tous ces fichiers.
D'accord.
Et la prochaine chose que nous devons faire est d'installer HAUSLER afin de l'utiliser.
Vous pouvez donc le télécharger.
Mais juste pour le sake de variété je vais utiliser un CDN.
Donc j'ai juste fait une recherche pour la copie de CD de hurleur ceci d'abord.
Vous êtes tous ici pourrait toujours le tester pour voir si elle est valide.
Et c'est parti.
Voici le code qui est pour howler.
Parfait.
Revenons à notre application, puis nous allons simplement ajouter un script.
Donc, après le papier peut dupliquer cela et juste changer la source pour être le hurleur que vous savez, assurez-vous qu'il charge OK sans aucun problème.
Parfait.
Ensuite, nous allons faire notre premier hurlement.
Alors copions ce code de nouveau à partir de hower.
Il suffit de prendre cette première ici et nous allons le faire au début.
Nous allons donc le faire juste ici et nous dirons que les sonorités de VAR savaient comment et ensuite nous allons simplement mettre dans un fichier et nous allons faire le premier que nous voyons.
Ainsi Bubbles a obtenu MP 3 de sorte que soit dans le son annuaire slash bulles stud MP 3.
Si bien
Slash bulle.
J'ai déjà oublié d'utiliser des bulles.
Voilà.
Est pluralized.
Donc, son comme vous Bubbles.
MP 3 et c'est tout ce dont nous avons besoin.
Et ne jouons pas tout de suite.
Il suffit de créer cela.
C'est tout ce que nous devons faire.
Et puis, pour jouer, jouons.
Lorsque vous appuyez sur une touche vers le bas de sorte que son jeu de points sonores vraiment agréable et simple allons jeter un coup d'oeil l'essayer.
Voilà.
Donc, chaque touche appuyant un tas de différentes touches déclenche maintenant que le son ok.
J'espère que ce n'était pas trop ennuyeux.
Alors, à présent, nous allons nous concentrer sur l'ajout d'un autre son.
Nous allons faire deux pour commencer.
Nous avons donc des bulles.
Nous allons faire Clay MP3 afin que nous puissions faire est tout simplement dupliquer ce et faire un son deux égaux Howell nouvelle et nous allons faire slash argile et P3.
Et puis ce que nous allons faire ici est d'avoir une déclaration if.
Concentrons-nous donc sur deux clés.
Faisons a et s.
Donc, si vous appuyez sur une touche si est un, alors nous allons jouer du son et nous allons appeler son un juste pour le rendre plus clair si la clé est s vous mettre des citations autour de cela aussi.
Ensuite, nous jouerons le son aussi.
Donc pour dire quelle touche a été pressée, c'est vraiment facile avec Paperchase, nous avons cet objet d'événement ici et nous devons faire est la clé d'événement.
Ainsi, nous allons simplement lire une instruction if si l'événement que la clé est égal à a.
Ensuite, nous ferons juste un son de jeu.
Donc c'est un jeu sain et ensuite faire la même chose.
Si la touche point de l'événement est égale à X, alors le son sera joué.
Tellement sonore pour jouer comme ça.
Nous pouvons donc essayer cela.
Donc, seules les touches et S devraient déclencher des choses.
Alors je vais vous dire maintenant que je frappe q ressemble à nous avons une erreur.
Que faisons-nous ici?
Le son n'est pas défini.
Ignorer ces avertissements ici pour le moment nous allons les fixer à la fin.
C'est un problème plus complexe, mais il ne sera effectivement pas entrer dans la manière de notre code de travail pour commencer.
Mais ce sera une erreur si stupide.
Je faisais référence au son ici.
Nous n'avons plus de son.
D'ACCORD.
Donc maintenant rien ne devrait jouer.
Lorsque je touche la plupart des touches, mais je vais frapper un K autres touches et maintenant avait s.
Donc nous avons un n s.
Parfait.
Et ce que nous pourrions faire aussi bien est maintenant assigner une couleur à chacun afin que nous puissions faire quelque chose comme ceci.
Déplacez-vous vers le bas de la même touche vers le bas, mais juste avant de pousser, nous pourrions avoir quelque chose comme ceci si l'événement, il a une pièce de théâtre que le son et nous pouvons définir la couleur du nouveau cercle de remplissage de points égal et puis nous pouvons lui donner un La couleur aiment voir 3 5 0 et puis faire la même chose.
Si nous appuyons sur S, mais avec une couleur différente comme font 16 a 0 8 5 et puis nous pouvons avoir un autre et espérons que vous pensez à vous-même Ce n'est probablement pas la meilleure façon de le faire.
Il pourrait être bon pour deux et nous, mais qu'en est-il 20 30 ou 50 touches.
Nous utilisons le clavier entier et tous les différents caractères.
Ce serait beaucoup de code.
Mais permettez-moi de vous montrer tout de suite.
Donc cue la plupart des couleurs ou la plupart des touches ne jouent pas le son.
Ils nous donnent la même couleur.
Maintenant, si j'ai eu un UPS, j'ai frappé deux touches a nous donne une couleur légèrement différente que nous donne un bleu.
Donc, bien sûr, la couleur que j'ai choisi ici est difficile.
Il est difficile de voir me laisser changer les changements pour être violet.
Et techniquement, nous devrions faire un autre.
Si oui, nous allons vérifier si la clé est un LCF et sinon si nous avons deux déclarations if.
Celui-ci sera exécuté et puis nous avons un autre si et si ce n'est pas vrai, alors l'elso être vrai, mais il ne prendra pas en compte celui-ci apparaissent.
Donc, si nous voulons seulement un de ceux-ci pour être vrai qui est nous voulons seulement une couleur pourpre bleu ou orange.
Ensuite, nous voulons qu'ils fassent partie d'une déclaration if, mais cela n'a pas d'importance parce que nous allons changer cela en une seconde.
Maintenant, notre rafraîchissement ici est normal clés.
J'ai frappé un bien que nous obtenons violet hit que nous obtenons bleu et deux sons différents.
D'ACCORD.
Voilà comment nous utilisons Hausler.
Maintenant, nous voulons faire cela pour chaque clé unique et il ya une bien meilleure façon que ce que nous avons ici.
Je vais donc me débarrasser de tout cela parce que nous pourrions le faire.
Comme je l'ai mentionné précédemment ont une déclaration if pour chaque clé unique si la clé est un faire ceci si la clé est B et pour chaque simple clé.
Mais ce n'est vraiment pas une bonne pratique.
Donc ce que nous allons faire à la place est de définir un objet et nous allons simplement appeler les données clés et c'est un objet.
Et c'est ce que cela ressemblera.
Nous aurons donc une clé comme.
Et puis quand a est pressé, nous dirons que la couleur doit être violet et que le son devrait être.
Et mettons tout cela là-dedans.
Je vais donc passer en revue une seconde.
Permettez-moi d'abord de mettre ceci en premier et ensuite nous pouvons faire exactement la même chose encore pour nous.
Ainsi quand est pressé la couleur devrait être verte et le bruit devrait être nouveau.
Comment sera.
Même chose que vous êtes ou bien et nous allons faire son slash Clay pensé MP3 et puis nous pourrions faire cela pour chaque clé unique.
Et oui, c'est beaucoup de syntaxe ici, mais l'avantage est que nous avons une place pour toutes nos données est définie et nous n'avons pas besoin d'une déclaration if ou dans un conditionnel séparé pour chaque clé unique.
Tout ce que nous avons à faire est de prendre où êtes-vous événement clé point qui s'est effectivement débarrassé.
Prenez ceci ici.
Event clé point qui est la touche qui a été pressée.
Et disons que c'est la lettre J.
Si c'est le cas, nous le prenons et le brancher dans les données clés et qui nous donnera le son de couleur pourpre.
Est ce son.
Alors je vais vous montrer ce que je veux dire.
Allons-y simplement avec ces deux exemples et pour le rendre plus évident ajoutons dans un duplicata plus ce que nous avons.
Donc, nous avons un n s let's aussi faire D.
Et la couleur peut être elle est trop jaune et puis sonore.
Qu'avons-nous d'autre?
Faisons des confettis.
Parfait.
Débarrassez-vous de cette virgule.
Nous pouvons nous débarrasser de cela maintenant et nous devrons changer ceci autour d'un peu et la prochaine chose qui fera est de prendre cette clé de canard d'événement et le brancher à nos données de clef.
Nous pourrions faire quelque chose comme ça.
Key data bracket événement clé et qui nous donnerait pour si si s était événement il nous donne toute cette chose ici et puis nous pouvons faire la couleur afin que nous puissions commencer là.
Donc, ce que nous allons faire, c'est avant de pousser nouveau cercle et nous allons simplement dire nouvelle couleur de remplissage de cercle égale clé de données clé de couleur événement.
Donc, juste pour répéter la touche sombre est une lettre.
Eh bien, dans notre cas, nous allons nous assurer qu'il s'agit d'une lettre.
Techniquement, il pourrait s'agir d'un onglet numéroté ou décalé, mais c'est la touche qui a été pressée.
Ensuite, nous prenons cela et le brancher dans les données clés.
Nous avons tout cela.
Si la touche eventime est a si l'utilisateur a pressé un alors nous faisons la couleur foncée qui nous donne pourpre.
Alors nous mettons le nouveau cercle mais remplissons la couleur pour qu'elle soit pourpre.
Si l'événement Duck Key est un avis mais nous n'avons pas besoin d'avoir une déclaration if pour le faire.
Donc, nous n'avons pas à dire si la Turquie a un faire cela si l'événement que la clé est demandé de le faire.
C'est la même ligne quoi qu'il arrive.
Parce que nous avons ce dictionnaire ou cette source unique de nos données définies il ya un problème bien sûr.
Cela ne fonctionnera que pour un S et D en ce moment.
Donc, je vais vous montrer l'actualisation assurez-vous que nous n'avons pas d'erreurs de syntaxe.
Nous ne pouvons pas lire la couleur ou ne peut pas lire correctement coloré indéfini et ce n'est pas une erreur de syntaxe.
C'est l'erreur que j'attends.
Alors je vais vous montrer.
Je vais presser une bonne presse a ou s sont aussi bonnes et D.
Mais maintenant, j'appuie sur Q Et nous avons un problème.
Et c'est parce que ce n'est pas défini les données clés de Q n'existe pas.
Nous avons un S et D.
C'est donc un problème.
La façon de corriger cela est simple.
Tout ce que nous allons faire est de vérifier si vous faites cela ici.
En haut à l'intérieur de cette touche appuyez sur si l'événement de support de données clés Docky.
Donc, n'oubliez pas si c'est vrai. Fondamentalement, si elle existe, nous allons faire tout cela.
Sinon, si elle n'existe pas, nous ne ferons rien pour commencer.
En fait, je ne ferai rien du tout.
Donc, à l'heure actuelle, notre Apple fonctionne uniquement, il fera quelque chose ou seulement faire quelque chose quand vous appuyez sur un S et D.
Donc, juste pour revenir, nous allons nous assurer que cela fonctionne maintenant.
Q Rien ne se passe.
Je presse un tas de clés.
Maintenant, je frappe un.
Et il fonctionne.
S et D, mais aucune autre clé ne fait rien.
Génial.
Donc, maintenant, nous allons obtenir le son à jouer.
Donc, c'est aussi agréable et simple.
Nous avons juste besoin d'un son de clé d'événement clé de données et je ne sais pas pourquoi j'ai nommé ces deux sons qui auraient dû être sonores.
Là-bas nous allons ce jeu de points sonores.
Rappelez-vous les plots Venki dans cette presse Savey D.
Nous obtenons cet objet.
Nous faisons ce bruit là-dessus.
Nous obtenons ce que nous avons ensuite exécuter jouer sur comme avant.
OK, allons-y.
A Comme le.
Et les autres touches ne font rien.
Parfait.
Donc tout ce que nous avons à faire ici est vraiment juste ajouter dans toutes ses autres clés et ce serait vraiment douloureux pour vous de me regarder le type à partir de zéro.
J'ai ce pré-fait je vous ai donné le fichier dans le téléchargement.
Je l'ai appelé jour après jour.
Oui.
Donc, si nous ouvrons cela, c'est juste un objet géant qui a toutes les clés de la lettre.
Donc nous avons q w e r.
Ils ne sont pas vraiment dans un ordre quelconque.
Eh bien, ils sont mais aucun ordre particulier en ce qui concerne les couleurs et les sons.
Je viens de choisir aléatoire ones et ils ont chacun une couleur.
Donc, si nous copions cela et de remplacer ce que nous avons ici, assurez-vous que nous appelons les données clés parfait.
Nous avons maintenant fourni ce dictionnaire de couleurs sonores pour chaque simple clé de chaque simple alphabet clé au moins.
Et nous pouvons utiliser cela.
Nous n'avons pas à changer notre code du tout.
Donc, c'est vraiment bien si nous voulons ajouter des touches numériques où nous voulons ajouter dans l'onglet et le changement et l'échappement et tout ce que nous avons juste ajouter une propriété supplémentaire sur cet objet.
Alors essayons de le fermer et de le rafraîchir.
Parfait.
D'accord.
Alors ne vous laissez pas emporter ici.
Joli amusement cependant.
D'ACCORD.
D'accord, c'est assez.
Donc, nous avons beaucoup couvert, mais à la fin de la journée, tout ce que nous avons fait, c'était de prendre un code que nous avons trouvé pour faire un cercle.
Nous avons pris un code que nous avons trouvé pour animer un cercle pour changer la couleur.
Nous avons trouvé du code pour faire des événements.
Donc quand vous appuyez sur une touche.
Et puis nous combinons cela avec un autre code, nous avons trouvé de jouer de la musique.
Et quand vous le mettez ensemble vous pouvez faire des choses fraîches et il ya beaucoup plus que vous pouvez faire ici.
Et nous ne sommes pas 100 pour cent fait.
Nous avons terminé avec la fonctionnalité de sorte que nous n'ajoutons aucune nouvelle fonctionnalité et ne sera pas différent.
Mais si vous ouvrez la console, vous verrez que nous obtenons tous ceux-ci ne peut pas charger les fichiers SML HTP demande croix d'origine.
Bla bla bla
Je vais couvrir cela dans la prochaine vidéo.
Expliquez pourquoi cela se produit et comment nous pouvons y remédier.
Et puis l'autre chose que nous allons faire est de parler d'une petite façon de refactoriser cela parce que maintenant, chaque fois que j'appuie, j'ajoute un nouveau cercle au tableau du cercle et je ne les retire jamais de ce tableau.
Donc je pourrais avoir 10000 en ce moment.
Eh bien, je ne peux pas, mais je pourrais avoir une centaine et il ya 200 et nous sommes en boucle sur toute cette chose.
Même si nous ne voyons pas les cercles parce qu'ils sont si petits.
Nous ferons donc un petit changement pour nous débarrasser de ceux de la prochaine vidéo.
Mais encore une fois nous avons terminé avec la fonctionnalité si vous ne vous souciez pas de voir que vous avez juste aimé faire cela et que vous voulez passer à autre chose.
Allez-y et passez à l'unité suivante.