Javascript Fun : créer une application de lecteur de musique !

1. Bienvenue dans le cours !: Hé, bienvenue dans ce cours. Si vous êtes un débutant en développement web et que vous voulez simplement sauter et construire des projets amusants, vous êtes arrivé au bon endroit. L' idée derrière cette série est de vous montrer ce que vous pouvez faire avec HTML, CSS et JavaScript standard. Je n'utiliserai aucun framework, aucun standard, aucune bibliothèque ou aucun modèle. Au lieu de cela, nous allons tout construire complètement à partir de zéro étape par étape pour vous montrer comment ces technologies libres fonctionnent toutes ensemble. Au cours de ce cours, nous allons télécharger diverses chansons que nous allons inclure dans notre application. Ensuite, nous allons les énumérer en bas. Une fois que l'utilisateur clique sur l'une de ces chansons, nous avons alors accès à tous les contrôles en haut ici, nous allons cliquer sur le bouton de lecture, nous pouvons faire une pause, nous pouvons ajuster le volume. Nous voyons exactement quelle chanson est actuellement en cours de lecture et nous avons également cette barre de progression qui est mise à jour sur la durée de la chanson. C' est ce que nous allons créer. Nous allons créer cela complètement à partir de zéro en utilisant HTML, CSS, et le rendre entièrement interactif en utilisant JavaScript. Nous allons également ajouter de belles animations lorsque nous cliquons sur une chanson, faire ces écouteurs rebondir aussi. Cette application vous enseignera un large éventail de compétences, y compris l'audio HTML, travailler avec le style CSS et les animations. Bien sûr, il y aura beaucoup de JavaScript aussi. Nous aurons des tableaux de chansons qui vont passer en boucle puis s'afficher dans le navigateur. Nous allons ajouter des écouteurs d'événement, sorte que cette chanson est activée lorsque l'utilisateur clique dessus. Nous allons travailler avec des contrôles audio pour la lecture, la pause, rechargement, les curseurs de volume, travailler avec le timing et la durée de la chanson, et beaucoup plus de fondamentaux JavaScript tels que les chaînes de modèles, travailler avec des fonctions, des instructions conditionnelles, constantes, et bien plus encore. Cette classe est conçue pour les débutants JavaScript. Cependant, gardez à l'esprit que c'est le sixième projet de cette série JavaScript Fun, donc si vous êtes un débutant JavaScript, je vous recommande de passer par les premiers projets pour commencer, vous donner une bonne base pour atteindre cette étape. Bien que si vous avez une expérience JavaScript vous pouvez simplement sauter directement dans ce projet. Merci de vous intéresser. J' espère que ce cours est agréable et je te verrai à l'intérieur de la première leçon. 2. Partagez votre travail sur Skillshare !: Lorsque vous suivez un cours, il est très important de ne pas prendre l'habitude de suivre un cours juste pour le plaisir de cocher une autre conférence. Prenez le temps de lire chaque leçon, revoir le code que vous écrivez et de réfléchir à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets et vous donne l'opportunité de vraiment créer quelque chose de personnel et d'unique. Vous n'avez pas besoin de trop vous perdre et de vous éloigner de la classe. Vous pouvez même prendre du recul après avoir terminé le cours et revenir et apporter des modifications au projet par la suite. Cela vous donnera vraiment une bonne chance de mettre en pratique ce que vous avez appris en classe. Pensez également à partager votre projet 2 ici sur Skillshare. Non seulement je vais y jeter un coup d'œil, mais cela inspirera également les autres étudiants. Pour plus d'informations sur le projet de classe, rendez-vous dans l'onglet Projet et ressources où vous pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. Dans cet esprit, j'ai hâte de voir ce que vous créerez et téléchargerez ici sur Skillshare. 3. Où trouver de l'audio pour votre application: Avant de commencer avec notre application de lecteur de musique, nous devons également trouver quelques chansons pour pouvoir jouer dans notre application. Donc, si vous avez des fichiers MP3 ou des fichiers audio que vous voulez utiliser, vous pouvez bien sûr utiliser ces fichiers existants et les placer dans un dossier appelé chansons. Ici, j'ai six chansons prêtes, que je vais utiliser cette application. Tout ce que vous avez à faire est de faire glisser tous les fichiers musicaux existants que vous pouvez avoir et de les placer dans un dossier de chansons. Sinon, si vous n'avez pas de chansons disponibles, il existe de nombreux sites pour télécharger certains fichiers. Je vais utiliser les fichiers audio de bensound.com, et bensound.com est un moyen de télécharger de la musique libre de droits à utiliser dans notre application. Nous pouvons sélectionner la musique par différents genres. Nous pouvons tout sélectionner. Nous avons également toutes les différentes étiquettes au-dessus du haut ici, nous pouvons faire défiler les pages. Ensuite, une fois que vous trouverez quelques chansons que nous aimons, nous pouvons cliquer sur le téléchargement. Nous voyons que nous avons quelques options pour le téléchargement. Nous pouvons l'utiliser avec une licence gratuite si nous fournissons certaines attributions à l'offre. Tout ce que nous devons faire est d'écrire un lien dans notre projet vers le site. Si vous aimez n'importe quel audio qui se trouve sur ce site, allez-y et téléchargez certains d'entre eux et placez-les dans le dossier des chansons. Il y a aussi une licence Pro disponible à l'achat. C' est si nous ne voulons pas fournir d'attribution. Allez-y et téléchargez de la musique que vous souhaitez utiliser. Mettez-les dans le dossier des chansons, et nous commencerons à le créer dans la vidéo suivante. 4. Structure HTML et lecture de l'audio: Vous devriez maintenant avoir le dossier d'une chanson prêt avec de la musique que vous voulez lire dans cette application. Pour commencer, ce sera le projet que nous allons construire. Ce sera une application de lecteur de musique, ce qui nous permettra d'ajouter des fichiers audio à notre projet, puis de les lire à l'intérieur de cette application. Nous allons parcourir toutes les chansons à l'intérieur de notre dossier de projet, qui est affiché en bas en bas. Nous pouvons ensuite cliquer sur l'une de ces chansons. Nous allons voir une petite animation d'impulsion avec l'en-tête, et notre chanson est en cours de lecture. Nous avons également des contrôles audio personnalisés, nous avons le bouton « Play ». Nous avons le bouton « Pause », et nous pouvons également contrôler le volume vers le bas. Cela va avoir une barre de progression audio aussi, afin que nous puissions voir jusqu'à quel point cette chanson nous sommes réellement. Je suis sûr que vous êtes impatient de commencer avec ce projet. Créons un nouveau dossier sur le bureau. On va appeler ça le lecteur de musique. Faites glisser sur notre dossier de chansons. Ensuite, nous pouvons ouvrir cela dans Visual Studio Code. La première chose que nous devons faire est de créer une page d'index à l'intérieur de notre lecteur de musique. Cliquez sur un nouveau fichier, et c'est le index.html. Vous avez également la possibilité d'utiliser la même image que celle que j'ai utilisée ici. Ou vous pouvez également télécharger le vôtre aussi. Si vous voulez utiliser exactement la même tête sur le même dépôt GitHub que nous avons utilisé tout au long de ce cours, allez dans l'application lecteur de musique, puis nous verrons un headphones.svg. Si nous cliquons dessus, nous pouvons alors cliquer sur l'icône « Code », qui nous donnera alors tout le code SVG que nous devons ajouter à notre projet. Prenons tout ce code, puis créons un nouveau fichier dans la barre latérale. Je veux appeler mon nouveau headphones.svg. Collez notre contenu et enregistrez ce fichier. Nous reviendrons à cela dans un moment seulement quand nous arriverons à ce stade dans notre HTML. Mais pour l'instant, nous devons créer notre structure HTML avec le raccourci Emmet, qui est HTML5. Appuyez sur « Entrée ». Ensuite, nous pouvons changer le titre de notre document pour être « Lecteur de musique ». L' interface utilisateur de ce projet est relativement simple. Nous allons juste commencer par créer notre image sur le dessus, à l'intérieur d'un conteneur principal. Puis ci-dessous cela aura notre lecteur audio. Je vais énumérer les chansons. Nous allons également utiliser les commandes audio par défaut juste pour l'instant, puis nous les remplacerons dans la vidéo à venir. Tout d'abord, à l'intérieur de la section du corps, nous allons créer un div, qui est le wrapper pour notre projet complet. Cette div va avoir la classe de joueur. C' est juste pour que nous puissions ajouter du style CSS dans une vidéo à venir. L' image sera l'image que vous venez de télécharger depuis GitHub, ou vous pouvez utiliser la vôtre si vous préférez. À la source, le mien est le « headphones.svg », seulement le texte alt aussi. Laissez-nous vérifier que c'est le travail en ouvrant notre page d'index à l'intérieur du navigateur. Copiez le chemin d'accès. Collez ceci et il y a notre SVG à l'écran. La prochaine chose à faire est toujours à l'intérieur de cette section principale div, est de créer réellement notre lecteur audio, qui va jouer nos chansons. HTML a un éléments audio. Ajoutons ceci. Ceci a l'ouverture et la balise de fermeture. Donnez-nous une idée des joueurs afin que nous puissions utiliser cela à l'intérieur de JavaScript plus tard. Ensuite, nous devons fournir une source audio avec laquelle le lecteur audio va travailler. Nous l'utilisons avec l'élément source. Ceci est un élément auto-fermant, donc nous n'avons pas besoin d'avoir une balise de fermeture. Aussi pour les besoins de JavaScript, plus tard, nous allons nous donner une idée de la source, afin que nous puissions définir cela dynamiquement à partir de notre script. Cela nécessite également un attribut source. De là, nous pouvons passer n'importe laquelle de nos chansons, qui se trouve à l'intérieur de notre dossier de chansons. Nous pouvons sélectionner n'importe lequel d'entre eux. Cela n'a pas vraiment d'importance pour l'instant, juste pour nos fins de test. Nous avons notre lecteur audio et aussi une source. Ensuite, juste après cela, nous allons ajouter du texte, qui va être audio non pris en charge. Maintenant, le lecteur audio est là depuis un petit moment maintenant, mais s'ils l'utilisent, il utilise un très vieux navigateur ou un navigateur qui ne supporte pas l'audio. Ce texte sera affiché sur l'écran en place. Après le lecteur audio, nous pouvons ensuite travailler avec la création notre liste de chansons avec un titre de niveau 2 de mes chansons. Notre liste de chansons va être enveloppée dans un div, avec un ID de liste de chansons. Pour l'instant, nous allons afficher une liste plus ancienne qui est allé à la sortie. Les noms de toutes les chansons à l'intérieur de notre dossier de chansons. Notre premier élément de liste va être la première chanson qui se trouve à l'intérieur de notre dossier de chansons. Ouvrons ça. Ensuite, nous devons taper une chanson exactement comme elle apparaît à l'intérieur d'ici. Le premier provient de l'extension « bensounds-clapandyell.mp3". J' utilise six chansons différentes ici, qui commencent toutes par Bensound. Je vais dupliquer ça cinq fois de plus. Le second est « Dance ». Le troisième, « Funky Element ». Puis « Bonheur ». « Happy Rock. » Le dernier est « The Lounge ». Nous pouvons soit rafraîchir le navigateur ou nous pouvons également utiliser le serveur en direct. Je vais aller à la commande « View » et entrer dans la palette de commandes, puis faire une recherche pour le serveur en direct. Ensuite, ouvrez ceci avec le serveur en direct. Maintenant, à l'intérieur du navigateur, nous avons l'image de notre casque. Nous avons également notre liste de chansons, mais actuellement, nous ne voyons rien en rapport avec notre lecteur audio. C' est parce que pour que cela apparaisse à l'écran, nous devons également ajouter les contrôles. Ceci est un attribut et cela fera en sorte que notre lecteur audio s'affiche dans le navigateur et inclut tous les contrôles nécessaires dont nous avons besoin pour contrôler nos chansons, qui est la lecture, un curseur de volume, ainsi que la durée de la chanson. Comme nous avons déjà défini la source pour être l'une de nos chansons, nous pouvons maintenant appuyer sur « Play » dans le navigateur. Notre chanson va maintenant commencer la pièce. C' est les bases de notre HTML et aussi un lecteur audio HTML 5 standard par défaut. Cependant, nous n'allons pas utiliser ce lecteur audio pour notre projet. Nous allons maintenant passer à la prochaine vidéo, où nous allons créer un lecteur audio personnalisé. 5. Commandes audio personnalisées: Comme nous l'avons vu dans la vidéo précédente, nous avons maintenant des contrôles qui sont les contrôles audio par défaut fournis avec le lecteur audio HTML5. Nous allons maintenant créer nos propres contrôles pour ce projet qui inclut le bouton de lecture, le bouton de pause, ainsi que la barre de volume et de progression. Comme nous l'avons vu dans la dernière vidéo, supprimer ceci est de supprimer notre attribut controls qui est à l'intérieur du lecteur audio. Si nous enregistrons cela, nous voyons que notre lecteur audio est maintenant retiré du navigateur. De notre élément source juste en dessous, nous pouvons également supprimer l'attribut source, puisque nous allons l'ajouter dynamiquement en utilisant JavaScript. Maintenant que nous avons supprimé ces contrôles, nous devons maintenant aller de l'avant et créer les nôtres. Pour ce faire, passons juste en dessous de notre lecteur audio et nous créons un nouveau div qui va avoir l'ID des contrôles. Cette section de contrôle, si nous allons à la version finale va avoir le texte en haut avec la chanson en cours de lecture. Nous aurons un bouton de lecture, et une pause, ainsi qu'un curseur de volume vers le bas. Il y a une section de contrôle. Si nous passons à la version finale, cela va avoir le texte de maintenant en cours de lecture, puis la chanson en cours de lecture. Nous aurons nos icônes pour jouer et faire une pause. Ensuite, notre curseur de volume vers le bas. Commençons par notre élément p, qui va être pour notre texte pour la chanson en cours de lecture. Ces éléments p seront vides pour l'instant puisque nous allons définir ceci via JavaScript, mais nous pouvons définir ceci pour l'instant avec un ID de chanson en cours. Juste après cela, nous pouvons créer un div qui est un wrapper pour tous les jeux sur nos boutons de pause. La classe pour ce wrapper va être des contrôles wrapper, c'est pour notre CSS. Ensuite, à l'intérieur, nous allons ajouter nos deux éléments de span et cela va avoir une entité HTML. Le premier code d'entité HTML que nous allons utiliser sera pour notre bouton de lecture. Ceci a la valeur des esperluettes, le hachage, 9658, suivi du point-virgule. La seconde sera pour notre pause et pour ce faire, nous allons créer deux barres verticales comme nous le voyons sur la version finale juste ici. Le code dont nous avons besoin pour cela est que les esperluettes, le dur, 10074, et le point-virgule. Nous voyons que nous avons juste une de ces barres verticales pour le moment, mais nous pouvons copier ceci et la coller juste à côté pour nous donner le symbole de pause. Nous avons alors aussi besoin d'une section de volume juste souffler cette div, donc les éléments div p détecteront le volume. Un div avec la classe de volume et cela va être un wrapper pour notre positif, nos symboles négatifs et aussi l'entrée qui va avoir le type de plage. abord le symbole négatif à l'intérieur de nos éléments de span, qui est simplement un tiret suivi de nos entrées avec le type de plage. Nous pouvons contrôler cela à partir de notre JavaScript en lui donnant un ID de curseur de volume. Pour notre volume, nous devons définir la plage entre zéro et un et nous pouvons le faire avec min égal à zéro et l'attribut max est égal à un. L' attribut final de cette étape, je vais définir ceci sur 0.01, et cela signifie que notre curseur de plage quand nous allons de gauche à droite, montera par étapes de 0.01. Cela nous donnera un curseur assez lisse que nous allons de gauche à droite et puis juste après cela, nous allons devoir parcourir un bizarre à l'icône plus. Il s'agit maintenant de la section visuelle ou HTML prise en charge pour nos contrôles personnalisés. Comme ce sont simplement des éléments HTML, ils ne joueront pas de musique pour le moment à l'intérieur du navigateur, mais nous allons corriger cela très bientôt en utilisant JavaScript. 6. Style de CSS: Passons au style. Passons à la barre latérale et créons nos feuilles de style, que je suis gong d'appeler le styles.css. Nous pouvons ensuite lier ceci à l'intérieur de notre index, à l'intérieur de la section de tête avec l'élément de lien. La relation est une feuille de style, et c'est la nouvelle racine de notre projet. Nous pouvons lier cela avec styles.css. Ouvrez ceci, et comme toujours, nous allons commencer par notre section HTML en définissant la taille de la police racine. C' est juste la façon dont je fais les choses en définissant cela sur 10 pixels. Pour rendre les calculs vraiment faciles lors de la conversion avec un REM. Mais comme toujours, vous pouvez aborder cela de n'importe quelle manière différente que vous préférez. Votre section de corps pour cela va avoir un arrière-plan qui sera un dégradé linéaire. Ensuite, nous pouvons ajouter à l'intérieur de nos deux valeurs pour se fondre entre. Le premier, une valeur hexadécimale de 3b3b. La seconde va être assez similaire. Ça va être 2b2b2b. Si vous utilisez le serveur en direct, vous pouvez simplement enregistrer le fichier et cela mettra à jour le navigateur immédiatement. Si ce n'est pas le cas, allez simplement dans le navigateur et appuyez sur Actualiser. Après l'arrière-plan, nous pouvons également définir la hauteur de ceci à 100 pour cent. Cela va étirer l'arrière-plan au fur et à mesure que nous obtenons plus de contenu. La couleur actuellement sur le texte est un peu trop sombre pour l'arrière-plan. Donc je vais changer ça pour être une valeur de la fumée blanche. Également une taille de police plus grande de 1,4 reMS. Nous pouvons également centrer cela avec marge. Je vais aller pour deux REM, qui seront en haut et en bas, puis zéro à gauche et à droite. Un peu de rembourrage, qui va nous donner un peu d'espace à l'intérieur de cette section de corps gris, aussi de deux REM. Nous pouvons centrer le texte avec le centre d'alignement du texte. Ensuite, nous passerons à la page d'index. Nous pouvons voir qu'à l'intérieur du corps nous avons cette div avec la classe de joueur. Cela va entourer à peu près tout le contenu à l'intérieur. Tout comme nous ne voyons que la version finale, nous allons lui donner une couleur de fond, qui est cette couleur pourpre, et il a également un dégradé radial. Nous avons la couleur plus foncée au centre, puis elle se propage pour être une couleur plus claire à l'extérieur. Notre cible est la classe des joueurs dans notre feuille de style. Réglons notre arrière-plan et le gradient radial. Les deux valeurs que je vais chercher vont être 211e24. Le second, encore une fois, une valeur hexadécimale vous ceci est 4f3341. Nous voyons maintenant notre gradient radial, qui vient du centre de l'arrière-plan et se fond sur le bord extérieur. Après cela, un rembourrage pour donner à cela un peu d'espacement à l'intérieur de l'élément de deux REM, puis nous pouvons arrondir les coins de cette section violette avec notre rayon de bordure. Maintenant, le wrapper est pris en charge, et nous devons maintenant nous déplacer à l'intérieur de cette section de lecteur, puis commencer à travailler avec notre contenu. En haut, nous avons cette image et l'image est un peu trop grande pour notre projet. Si nous passons dans notre feuille de style, nous pouvons cibler ça. Ensuite, nous pouvons limiter la largeur à 50 pour cent de l'espace disponible. Après notre image, nous n'avons pas besoin de faire quoi que ce soit avec cette section audio parce que nous utilisons nos propres contrôles personnalisés, qui sont répertoriés juste ci-dessous. Cette section de contrôle a l'ID des contrôles. Nous allons utiliser est d'ajouter une bordure et aussi un remplissage à la section, tout comme nous le voyons dans la version finale. L' idée de contrôles, nous ciblons ceci avec le hachage. La bordure, ça va être un pixel de large, une couleur de gris ardoise clair. Cela va aussi être une ligne solide. Pour arrondir les coins, nous pouvons ajouter notre rayon de bordure de 10 pixels ou nous pouvons également faire un REM. Aussi un peu de rembourrage à l'intérieur de la section pour lui donner un peu d'espacement par rapport à nos contrôles. Actuellement, nous voyons moins de contenu à l'écran puisque nous avons rendu l'image un peu plus petite. Nous pouvons maintenant voir que la couleur de fond gris que nous avions pour la section du corps ne couvre maintenant pas toute la hauteur de la page. Pour résoudre ce problème, nous pouvons changer la hauteur pour être à 100 pour cent de la hauteur de la carte de vue actuelle, qui est la hauteur du navigateur. Nous pouvons également nous assurer que c'est le minimum aussi. Passez à notre HTML et puis à l'intérieur ici, nous avons cette classe de wrapper de contrôles. À l'intérieur, il contient nos deux travées qui ont nos icônes pour les contrôles de lecture et de pause. Nous pouvons cibler tous ces éléments amusants qui sont à l'intérieur de notre emballage de contrôle. Revenons à nos feuilles de style. Nous pouvons alors cibler le controls_wrapper. Ensuite, nous pouvons sélectionner tous les éléments span qui sont immédiatement suivre cette div. A l'intérieur d'ici, nous voulons nous assurer que le curseur de la souris est un pointeur. Cela changera notre pointeur chaque fois que nous survolons l'une de ces icônes. La couleur, ça va correspondre à la bordure, donc ça va être gris ardoise clair. Nous pouvons les agrandir avec la taille de police de six REM. Un rembourrage pour lui donner un peu d'espacement. Ensuite, nous allons passer à nos chansons. Tout d'abord, à l'intérieur de ce wrapper, nous avons aussi cet élément p avec l'ID de CurrentSong. Chaque fois que l'utilisateur clique sur l'une de ces chansons, nous allons ensuite saisir le nom de la chanson, puis placer le tout en haut. Nous devons également gérer ce qu'il faut faire si un titre de chanson est vraiment long, car nous ne voulons pas que cela se répande sur le bord de l'écran. La façon de le faire, si nous saisissons notre ID, qui est CurrentSong, et nous utilisons le hachage. Tout ce que nous allons faire pour éviter cela est de définir la propriété overflow et de définir ceci pour être caché. Cela va essentiellement cacher le reste du titre, qui est trop large pour tenir à l'intérieur du conteneur. Si notre titre était juste en travers de la page, dès qu'il arriva au bord de notre div, le reste du texte serait alors caché. Nous pouvons aussi faire la même chose dans notre liste de chansons. Donc nous faisons défiler vers le bas. La section chanson a cet ID de SongList. Nous ferons de même, nous allons définir le débordement pour être caché. Nous pouvons également aligner tous les textes sur la gauche de notre section. Chacune de nos chansons est un élément de liste. Retour à notre HTML, nous avons notre liste d'éléments qui enveloppent chacune de ces chansons. Nous pouvons également changer le curseur pour être un pointeur chaque fois que l'utilisateur passe la souris sur l'une de ces chansons, comme nous l'avons fait avec nos icônes. Notre article de liste. Le curseur va être un pointeur. Aussi 1,5 REM de rembourrage pour nous donner un peu d'espacement entre chacune de nos chansons. Nous avons notre espacement, et nous pouvons également voir que le curseur change en un pointeur lorsque nous survolons chacun d'entre eux. Nous pouvons également nous assurer que la couleur de fond change pour être une couleur rouge correspondant à ces écouteurs. Faisons cela quand nous survolons l'un de ces éléments de liste, donc li. Nous pouvons sélectionner l'état du survol. Tout ce que nous allons faire est de définir la couleur d'arrière-plan comme une valeur rouge, qui est f3644b. C' est maintenant la base du style pour notre application, et il semble également assez bon sur le petit écran. Cependant, si nous rendons cela beaucoup plus large, nous pouvons vouloir introduire une requête média pour restreindre la largeur maximale de cette section du corps. Ajoutons cela tout en bas au niveau des médias, puis nous sélectionnerons tous nos écrans avec une largeur minimale de 800 pixels. Sélectionnez notre section de corps, puis nous pouvons définir la largeur maximale à 60 pour cent de la largeur de la barre de vue. Aussi la taille de la police, augmentons cela pour être 1.8 reMS. La section du corps est maintenant restreinte, mais nous devons aussi le placer au centre. Faisons ça. Si nous revenons à notre section de corps d'origine et à l'intérieur de la marge, nous définissons deux REM en marge en haut et en bas. Mettez zéro sur la gauche et la droite. Nous pouvons corriger cela en définissant cela comme auto, et cela divisera toutes les marges restantes à gauche et à droite également. C' est le style maintenant fait pour notre application. Ensuite, nous allons passer à l'ajout de JavaScript pour lister toutes nos chansons. 7. Lister nos chansons avec JavaScript: L' étape suivante de ce projet consiste à ajouter notre script. Ouvrez la barre latérale été créer notre nouveau script.ks. À l'intérieur de la page d'index, vous pouvez ensuite lier ceci juste au-dessus de la balise de corps de fermeture. Les scripts ont la source à l'intérieur de notre racine. C' est simplement le script.js. Pour commencer, nous allons saisir tous nos éléments de liste, les placer à l'intérieur d'un tableau, puis créer une boucle FOR qui va les placer à l'intérieur de cette section. Prenez chacun de nos articles de liste. Je vais les copier dans nos scripts. Pour le moment, ce n'est pas un JavaScript valide. On va passer ça à notre tableau. Notre tableau va s'appeler des chansons. Ensuite, nous allons passer sur chacun de nos éléments de liste et les placer à l'intérieur des citations. Le premier, séparé par une virgule, saisit notre deuxième, placez-les dans les guillemets, je vais ajouter une virgule entre chacun de ces éléments du tableau, placez-les à l'intérieur du tableau. Nous pouvons également supprimer chacun de ces éléments de liste aussi. Maintenant que chacune de nos chansons est à l'intérieur de notre JavaScript, nous pouvons alors retourner à notre page d'index et supprimer cette liste complète ordonnée. C' est parce que nous allons créer une fonction qui va sélectionner notre liste de chansons, puis placer dans une nouvelle liste de commandes qui a été créée à partir de JavaScript. Pour ce faire, créons une fonction appelée créer une liste de chansons. La première chose que nous devons faire à l'intérieur de cette fonction est de créer une nouvelle liste ordonnée. Nous le faisons avec Document.CreateElements, c'est dans notre liste ordonnée. Nous devons également installer cela à l'intérieur d'une constante afin que nous puissions ajouter chaque élément de liste. Mais comment faire pour créer six nouveaux éléments de liste ? Eh bien, nous pourrions ajouter chacun de ceux-ci individuellement, mais il est beaucoup plus efficace de créer une boucle pour le faire six fois. Créons une boucle FOR. Nous voulons que cette boucle s'exécute six fois ou autant de fois que les éléments du tableau. La façon dont nous pouvons faire cette exécution six fois est de créer une variable. Je vais appeler le mien i, et d'abord définir ceci sur une valeur de 0. La deuxième déclaration est combien de fois nous voulons que cette boucle s'exécute. Pour le moment, nous avons six chansons distinctes, mais nous ne voulons pas ajouter de valeur codée en dur. Au lieu de cela, nous pouvons accéder à notre tableau de chansons et utiliser la propriété foncière. Nous continuerons à fonctionner tant que la valeur de i est inférieure à une chanson.length. Ensuite, chaque fois que cette boucle FOR s'exécute, nous allons ensuite incrémenter la valeur de i d'un. Juste pour résumer, vont créer six éléments de liste. Pour ce faire, nous allons utiliser une boucle FOR. Pour nous assurer que cela fonctionne six fois, nous allons utiliser une variable appelée i. La toute première fois que cette boucle s'exécute, je serai égal à 0. Il continuera alors à fonctionner tant que i est inférieur à songs.length, ce qui est égal à six. Je vais ensuite l'incrémenter pour être une valeur de un. La prochaine fois que cette boucle s'exécute, je serai égal à un, ce qui est inférieur à la longueur de notre tableau de chansons. Cela continuera à fonctionner jusqu'à la toute dernière boucle, où je serai égal à six, ce qui n'est plus inférieur à songs.length, provoquant la fin de notre boucle. Pour commencer, nous allons créer notre nouvel élément de liste avec Document.CreateElements. L' élément que nous voulons créer est un élément de liste et le stocker à l'intérieur d'une constante appelée élément. Cela nous mènera ensuite avec un élément HTML comme celui-ci. Ensuite, nous devons créer notre contenu qui est à l'intérieur. Par exemple, sur notre première boucle, nous voulons passer les premiers éléments à l'intérieur de notre tableau. La façon dont nous pouvons créer ceci est en utilisant créer un nœud de texte. Comment faire pour créer ce contenu ? Ce que nous pouvons faire avec Document.CreateTextNode. Le nœud de texte que nous voulons créer est à partir de notre tableau de chansons et la valeur de i. Sur la toute première boucle, i est à 0. Ce sera la chanson 0, qui est notre tout premier. Sur la deuxième boucle, chansons sont égales à 1, ce sera notre deuxième. Puisque vous vous souvenez des tableaux commencent à un index de 0, cela nous donnera notre titre de chanson. Nous pouvons ensuite ajouter ceci à notre article. Retirez ceci. Nous pouvons attraper notre élément, appeler la méthode appelée append enfant. Ensuite, nous pouvons coller dans notre noeud de texte. Après cela, nous voulons saisir je vais modifier la liste, qui est stockée à l'intérieur de cette variable de liste. Nous pouvons ensuite appeler append enfant et ajouter notre élément de liste individuelle. À la fin de notre fonction, nous pouvons alors retourner notre liste ordonnée nouvellement construite. Ensuite, nous pouvons ajouter ceci au DOM si nous allons à notre page d'index. Rappelez-vous, nous avons cette div avec l'identifiant de la liste des chansons. Nous allons ensuite placer notre liste de commandes à l'intérieur de cette section. Donc, revenons à notre script et nous pouvons saisir ceci où nous obtenons élément par ID, où nous voulons passer dans notre liste de chansons. Nous allons ajouter la méthode enfant. Ensuite, nous pouvons passer dans la liste retournée de notre fonction « Créer une liste de chansons ». Cela ajoute maintenant toutes nos chansons dans notre lecteur. Actuellement, nous ne pouvons cliquer sur aucune de ces chansons pour jouer. Ça va être quelque chose que nous allons corriger dans la prochaine vidéo. 8. Jouer des chansons de façon dynamique: Bien, donc nous avons maintenant nos chansons répertoriées dans le navigateur, et la prochaine chose que nous allons faire est de permettre à l'utilisateur de cliquer sur de ces titres de chanson et de le charger dans le lecteur. La façon dont nous allons le faire est, encore une fois, faire usage de notre liste de chansons, et ensuite nous allons déclencher une fonction à chaque fois et cela est cliqué sur. Plutôt que de dupliquer cette section ici, nous allons résoudre cette référence à l'intérieur d'une constante appelée SongList. Nous pouvons ensuite saisir notre section AppendChild que nous avons créée dans la dernière vidéo, supprimer ceci, et ensuite nous pouvons ajouter ceci directement à notre constante. Maintenant, nous allons avoir la liste des chansons stockée à l'intérieur d'une constante. Nous pouvons également utiliser cela et écouter tous les clics à la section. Nous pouvons le faire avec une propriété appelée onclick, et cela va déclencher une fonction. Cette fonction va prendre les informations de l'événement, et nous allons examiner exactement quelles informations sont incluses avec cet événement en enregistrant ceci sur la console. Maintenant, nous nous dirigeons vers notre console à l'intérieur du navigateur. Cliquez sur l'une de ces chansons, puis nous verrons beaucoup d'informations est affiché à l'intérieur de la console. Nous voyons qu'il s'agit d'un événement de souris, car il est cliqué dessus avec la souris. En particulier, l'information qui nous intéresse est cette cible juste ici. À l'intérieur de la cible, nous devons faire défiler vers le bas et jeter un oeil à notre InnerText. Nous pouvons voir que le texte InnerText contient le nom de notre chanson. Si nous essayons également de cliquer sur n'importe quel élément différent, tel que le numéro 4, nous pouvons alors retourner à la console, ouvrir ceci, et à l'intérieur de nos cibles et revenir à notre InnerText. Nous voyons que nous avons accès à notre titre de chanson une fois de plus, donc ce que nous devons faire si nous allons à notre page d'index et défilons jusqu'à notre lecteur audio, rappelez-vous à partir des éléments source, nous avons déplacé cet attribut source tôt. Ce que nous devons maintenant faire est de saisir notre texte intérieur, puis de le remplacer comme notre nouvel attribut. La façon de le faire : tout d'abord, si nous saisissons une référence à notre source, et nous pouvons le faire avec un document.getElementById. L' ID de cet élément est également source, et maintenant nous pouvons accéder à notre variable source, définir l'attribut source, et l'attribut va être le chemin du fichier vers notre chanson, donc toutes nos chansons sont stockées dans ces chansons dossier. Nous devons ajouter des chansons, barre oblique avant, puis, comme nous l'avons vu dans la console, pour obtenir la valeur de notre nom de chanson, nous devons accéder à notre variable d'événement, la cible, puis aussi à InnerText. Ensuite, il y a deux autres petites choses que nous devons faire. Ces deux choses est de charger réellement l'audio, puis l'appel à jouer fonction. Pour ce faire, nous avons besoin d'une référence à notre joueur. Si nous revenons à notre HTML, notre élément audio contient l'ID du lecteur. Prenons notre référence, stocker ceci à l'intérieur d'une constante, Ici joueur const. Ce const est égal à document.getElementById, l'ID est lecteur. Ensuite, nous pouvons utiliser cette variable de lecteur pour, tout d' abord, charger l'appel, qui va précharger l'audio que nous avons mis juste au-dessus sans réellement le lire dans le navigateur. Il supprimera ou réinitialisera également toutes les chansons précédemment chargées. Après cela, nous accédons à nouveau à notre variable de joueur. Mais cette fois, nous appelons le jeu, qui va commencer à jouer notre piste audio. Essayons ça. Si nous allons sur le navigateur, cliquez sur l'une de nos chansons, vous devriez maintenant voir que les chansons sont immédiatement en lecture. Bien, maintenant c'est en place. Je vais juste retourner à notre index.html. Si vous utilisez également des pistes audio, tout comme moi, qui a besoin d'une certaine attribution, vous pouvez trier cela à l'intérieur du HTML, et ce qui est sur la mienne juste en dessous de la liste des chansons. Je veux ajouter ceci en tant que texte, donc la musique, la mienne est bensound.com. Nous allons l'imbriquer à l'intérieur, je vais ajouter un lien avec l'élément a. Le lien était https, c'était bensound.com. Nous pouvons également saisir ce lien et le coller dans le texte du lien. Le texte du lien est un peu difficile à voir, donc nous pouvons apporter un petit changement à notre CSS. Tout en bas, attrape notre élément. Nous pouvons également définir une couleur assortie pour être de la fumée blanche laissant notre lien beaucoup plus visible. Avec nos chansons en cours de lecture, la prochaine chose que nous allons faire dans la vidéo à venir est également de saisir le titre de la chanson et de l'afficher juste au-dessus de nos icônes. 9. Définir la chanson en cours de lecture: Ce sera une vidéo assez simple. Tout ce que nous allons faire est de saisir ce titre de chanson et de l'afficher dans le navigateur. Nous allons le faire est de sélectionner notre élément p que nous avons créé au début de la page d'index. Cet élément p a l'ID de « CurrentSong » et est actuellement défini pour être vide. Essayons ceci avec l'ID, et nous pouvons définir le texte interne. Nous pouvons le faire lorsque nous sélectionnons notre nouvelle chanson à l'intérieur de cette fonction « onclick ». Je vais le faire juste avant de charger notre audio. Tout d'abord, attrapons nos éléments. Nous pouvons utiliser n'importe quoi tel que « getElementById » ou nous pouvons utiliser « QuerySelector ». Comme nous l'avons vu précédemment, « QuerySelector » nous permettra de sélectionner l'un de nos éléments avec un sélecteur de type CSS. Donc, nous pouvons sélectionner comme « div » ou dans notre cas, nous avons un ID, donc nous le sélectionnons avec le hachage, tout comme nous le ferions dans notre CSS. L' ID de celui-ci est le CurrentSong. Nous pouvons ensuite définir le texte interne de nos éléments pour être égal à une chaîne. Si nous voulions juste afficher du texte normal, nous pourrions l'ajouter comme une chaîne à l'intérieur des guillemets. Mais parce que nous voulons ajouter ceci comme une chaîne dynamique qui va prendre dans le titre actuel de la chanson, nous devons insérer quelques variables afin de pouvoir l'ajouter comme une chaîne de modèle. Alors, ouvrez les ticks. Nous pouvons commencer par le texte de En cours de lecture, un deux-points, puis nous insérons une variable avec le symbole $ et les accolades. De la dernière vidéo, nous savons déjà comment obtenir le titre de la chanson, et cela est stocké dans notre « e.target », puis nous sélectionnons le « InnerText ». On fait exactement la même chose à l'intérieur. Sélectionnez le « e.target.innerText » enregistrer ce fichier, puis sur le navigateur. Cliquez sur une chanson, et celle-ci est maintenant affichée à l'intérieur de notre lecteur audio. 10. Commandes de lecture et d'interruption: Dans cette vidéo, nous allons brancher notre jeu et aussi nos boutons de pause pour notre lecteur audio. De retour dans notre page d'index, dans notre wrapper de contrôles, nous avons nos deux éléments de span. Le premier est pour notre bouton de lecture afin que nous puissions ajouter un gestionnaire d'événements onclick, qui va déclencher une fonction appelée PlayAudio. En dessous de cela, nous avons notre bouton pause, et cela va avoir un gestionnaire de clic à. La fonction de celui-ci va se déclencher, va être appelée pause audio. Sauvegardez ce fichier et maintenant sur notre script, nous pouvons configurer nos deux fonctions. Tout en bas, le premier était PlayAudio. A l'intérieur de notre jeu et aussi de nos fonctions de pause, nous avons besoin d'accéder à notre lecteur audio. Ci-dessus dans cette section onclick, nous avons déjà une référence à notre joueur. Cependant, parce que cela a été déclaré à l'intérieur de cette fonction, nous ne pouvons y accéder dans aucune autre partie de notre programme. Pour accéder à ce jeu à partir de toutes nos sections ou pour le rendre global, nous allons couper cette ligne de code, et nous pouvons placer cela en haut. Maintenant, cette variable de lecture n'est pas déclarée à l'intérieur d'une fonction. Ceci est maintenant dans une portée globale afin que nous puissions y accéder dans n'importe quelle fonction. Juste avant de passer à autre chose, va enregistrer cela, et aussi vérifier que nos chansons sont toujours en cours de lecture lorsque nous cliquons sur chacun d'entre eux. C'est très bien. Nous pouvons maintenant passer à notre fonction PlayAudio. À l'intérieur, nous allons créer une instruction if, et cette instruction if va vérifier si l'audio a terminé le chargement. Nous pouvons le faire en accédant à notre lecteur sur une propriété appelée ReadyState, donc ReadyState retournera une valeur vraie ou fausse. Si l'état prêt retourne true, cela signifie que notre audio a terminé le chargement, et par conséquent, nous pouvons appeler player.play. Après cela, notre deuxième fonction est de mettre en pause notre audio, et tout ce que nous avons à faire ici est appeler player.pause, donner à ce fichier une sauvegarde et maintenant nous pouvons tester cela dans le navigateur, donner à ce fichier une actualisation. Tout d'abord, cliquez sur l'une de nos chansons, commencez à jouer. Une fois que cela commence, nous pouvons tester notre fonction pause en cliquant sur cette icône, notre audio s'arrête maintenant, et si nous cliquons sur lire l'audio recommence une fois de plus. Donc, notre jeu et aussi nos fonctions de pause fonctionnent maintenant pleinement. Dans la vidéo suivante, nous allons passer au curseur de volume pour contrôler le volume de notre lecteur. 11. Le curseur de volume: Nous allons maintenant créer la fonctionnalité pour contrôler le volume à l'intérieur de notre lecteur audio. Ceci est créé à l'intérieur de notre page d'index en tant que curseur de plage. Par conséquent, nous devons accéder à cet élément avec notre ID. Dans notre script et tout en bas, nous pouvons créer une constante qui va stocker une référence à notre curseur. Nous pouvons sélectionner ceci avec get element par ID. L' ID que nous venons de voir est le curseur de volume, accédez à nos constantes. Ensuite, nous pouvons ajouter le gestionnaire d'événement on input qui va déclencher une fonction chacun sur la valeur de notre curseur de plage a changé. Cela va également prendre dans les informations de l'événement. Faisons un journal de console et voyons quelles informations sont stockées dans cet événement. Dans les outils de développement, nous ferions un clic droit et inspecterions, cliquez sur la console. Ensuite, si nous ajustons notre curseur de plage, nous voyons que chaque fois que le curseur a changé, cela déclenchera un nouvel événement. Allons élargir ça. Tout comme nous l'avons regardé plus tôt pour accéder à notre élément, nous sélectionnons la propriété cible. Si nous faisons défiler vers le bas, nous pouvons trouver la valeur de notre élément. Notre curseur a la plage de 0-1 et actuellement nous avons un réglage ou une valeur de 0,43. Nous pouvons maintenant utiliser cette valeur, stocker à l'intérieur d'une constante, puis définir notre volume de jeu. Tout d'abord, nous allons créer notre constante pour stocker cette valeur appelée volume et définir cette valeur égale à notre événement qui est stocké dans e. Nous allons sélectionner notre cible, puis la valeur comme nous l'avons vu à l'intérieur de la console. Accédez à notre variable de jeu. Maintenant, nous pouvons définir le player.volume pour être égal à notre variable de volume. Essayons cela à l'intérieur du navigateur. Choisissez n'importe quelle chanson. Il devrait commencer à jouer. Testez notre curseur en revenant à zéro et l'audio a disparu, poussez cela jusqu'au volume complet. Nous pouvons maintenant ici notre audio à son réglage le plus fort. Maintenant que nos contrôles sont pris en charge, passons maintenant à la vidéo suivante et nous allons créer notre barre de progression. 12. Mise à jour de la barre de progression: Nous allons maintenant créer une barre de progression à l'intérieur de notre projet, qui sera mise à jour au fur et à mesure que la chanson est jouée. Donc, cette barre de progression sera juste au début une fois que la chanson aura commencé, et la durée sera mise à jour au fur et à mesure que la chanson progresse. La première étape est d'aller à notre « Page Index » et nous pouvons créer un élément de progression. Mais encore cela juste après notre section audio et nous pouvons profiter des éléments de progression HTML. Nous pouvons mettre à jour ceci, nous allons avoir un identifiant, et cet identifiant sera égal à la progression. Le deuxième attribut va être la valeur que nous allons initialement définir à zéro. Cela définira notre barre de progression au tout début, puis nous mettrons à jour ceci avec JavaScript. Ensuite, nous pouvons ajouter un max, qui va être égal à 100, donc notre valeur de barre de progression peut être comprise entre zéro et 100. La deuxième étape consiste à aller à notre lecteur audio, puis nous allons ajouter un nouvel attribut appelé ontimeupdate. Ontimeupdate est un événement qui s'exécute lorsque la position de l'audio a changé. Donc, c'est-à-dire que cela va fonctionner pendant que l'audio est en cours de lecture. Ce que nous devons faire ici est de passer n'importe quelle fonction que nous voulons exécuter sur chaque mise à jour. Je vais appeler cette fonction UpdateProgress, et ensuite nous pouvons créer cela dans notre script. Donc, tout en bas, le nom de la fonction était UpdateProgress. Lorsque nous avons créé notre barre de progression, nous lui donnons un ID de progression. Nous pouvons stocker cela à l'intérieur d'une constante appelée ProgressBar et définir cela égal aux documents, getElementById et l'ID était progression. Aussi dans cette barre de progression, nous avons défini une valeur initiale de zéro, et nous devons maintenant mettre à jour ceci avec JavaScript. Nous pouvons le faire en sélectionnant notre constante ProgressBar, puis définissant notre valeur pour être égale à un pourcentage compris entre zéro et 100. La façon dont nous allons le faire est de créer un calcul. Ce calcul va accéder à la fois à l'heure actuelle et aussi à la durée qui est disponible sur notre constante joueur. Pour voir cela, nous pouvons commenter cela et juste faire un console.log. Tout d'abord, si nous console.log la valeur du joueur, puis à l'heure actuelle, nous allons dupliquer ceci. Nous pouvons également enregistrer la durée de la piste audio. heure actuelle est le temps réel qui s'est écoulé pendant que nous jouons la chanson. La durée juste en dessous est la longueur totale de la piste audio ou de la console. Pour voir cela, nous pouvons cliquer sur l'une de nos chansons pour commencer la lecture. La première valeur, que nous verrons juste ici, arrêtons ceci. C' est la durée actuelle de notre piste, puis nous verrons notre longueur de piste est de 176 secondes. Cette valeur sera toujours la même puisque la longueur ne change pas. Nous devons maintenant utiliser nos deux valeurs pour créer un pourcentage entre zéro et 100. La façon dont nous pouvons le faire est de saisir notre CurrentTime sur la scène et ensuite nous pouvons diviser cela par le player.duration. Pour transformer cela en pourcentage, nous multiplions ensuite cela par la valeur de 100. Nous pouvons ensuite supprimer nos journaux de console et vérifier cela dans le navigateur. Sélectionnez n'importe quelle chanson. Celui-ci, je vais commencer à jouer et notre barre de progression est en cours de mise à jour. Juste pour terminer cette section, nous allons également ajouter un peu de style CSS dans notre barre de progression. Aussi, notre feuille de style, sélectionnez nos éléments de progression. Je vais commencer par définir la largeur à 100 pour cent de l'espace disponible. La hauteur de notre barre de progression est de trois rems, puis un peu d'espacement sur le fond, qui est une marge inférieure. Donc ce fichier aura maintenant un joli style pour notre barre de progression. À première vue, tout semble fonctionner complètement bien, cependant, si nous allons à l'intérieur des outils de développement, puis à l'intérieur de la console, sélectionnez l'une de nos chansons. Si nous ouvrons ceci, et si nous développons ceci, nous pouvons voir que nous avons un message de « Impossible de définir la propriété « valeur » sur notre barre de progression. Cela peut sembler un peu étrange au début parce que notre barre de progression est entièrement mise à jour à l'intérieur du navigateur. Cependant, cette erreur est provoquée dès que notre chanson a été jouée. C' est juste au tout début à cause de notre player.duration. Revenons à notre UpdateProgress et nous pouvons faire un console.log pour la valeur de player.duration. Revenons dans la console, actualisons. Dès que vous faites cela, nous voyons la valeur de pas un nombre. Dès qu'il se charge, nous n'avons pas de données de durée dès le début. C' est parce que nous appelons notre fonction avant que la durée n'ait été définie. Pour surmonter cela, nous allons appeler cette fonction seulement une fois que la chanson a commencé à jouer. Supprimons le console.log et aussi ces deux lignes de code à l'intérieur de notre fonction. Nous pouvons alors créer une instruction if, qui va vérifier si le player.CurrentTime est supérieur zéro et cette section ne fonctionnera qu'une fois que le lecteur audio a commencé. Par conséquent, nous pouvons passer nos deux lignes de code que nous venons couper et nous pouvons essayer cela dans le navigateur. Ouvrez les outils de développement, sélectionnez n'importe quel arc nos chansons. Cette zone disparaît maintenant. Nous avons presque terminé avec notre projet et dans la prochaine vidéo, nous allons ajouter quelques touches finales à ce projet. 13. Touches de finition: Finissons maintenant ce projet en ajoutant quelques touches de finition. Nous allons ajouter des polices Google. Nous allons également ajouter une petite animation à nos écouteurs chaque fois qu'une piste audio a été sélectionnée. Nous allons également résoudre un petit problème lors de la sélection d'une de nos chansons. Tout d'abord, passons à Google Fonts. Je vais prendre une police pour ce projet. La police que je vais sélectionner pour ce projet va s'appeler Permanent Marker. Je regarde cela comme dans les projets précédents. Tout ce que nous avons à faire est de sélectionner notre style, cliquer sur « Intégrer », puis apporter notre lien vers notre page Index. Après cela, nous avons également besoin de nos règles CSS, alors copiez cette section, en haut de nos feuilles de style, nous pouvons ensuite coller ceci dans notre HTML, enregistrer ceci, et rafraîchir le lecteur de musique, et notre police prend maintenant effet. Par défaut, l'espacement des lettres pour cette police est assez écrasé ensemble. Pour donner à cela un peu plus d'espacement, je vais ajouter une propriété appelée espacement des lettres, puis lui donner un espacement de quatre pixels. Ensuite, je vais ajouter une petite animation d'impulsion à nos écouteurs, chaque fois que l'utilisateur clique sur l'une de ces chansons. Pour le faire dans notre script, nous allons ajouter une nouvelle classe à l'image de notre casque, puis nous pouvons définir cette animation dans notre feuille de style. Pour saisir l'image de notre casque, nous pouvons ajouter un ID à cet élément, donc ID du casque. Ensuite, nous pouvons aller à notre script, et ajouter un nouveau nom de classe à ces éléments, chaque fois qu'un utilisateur clique sur l'une de ces chansons, droite à la fin de cette fonction. Sélectionnons les documents, puis nous pouvons utiliser getElementByID, ou aussi un QuerySelector, tout comme nous l'avons utilisé plus tôt. L' ID était casque, prenez notre ClassList, puis nous pouvons ajouter une nouvelle propriété appelée pulse. Ça saisit l'image de notre casque. Nous ajoutons ensuite une nouvelle ClassList de pulsations, que nous pouvons maintenant utiliser dans nos feuilles de style. En bas tout en bas, le nom de l'animation, qui va s'appeler pulse ; je vais créer ceci en seulement une seconde. Ensuite, la durée de cette animation sera de plus de 0,4 seconde. Pour que cela fonctionne, nous devons également créer nos images clés, c' est-à-dire l'animation d'impulsions. Nous utilisons la section de, et c'est pour le début de notre animation. Tout ce que nous allons faire ici ici est de définir la transformation et la propriété scale, pour être une valeur d'un. Pour commencer, ce sera exactement la même taille qu'à l'origine, à mi-chemin, qui sera de 50 pour cent. Nous définirons ensuite la transformation sur une valeur d'échelle de 0,9. Pour mettre fin à notre transition, nous allons définir la valeur à, et cela va transformer notre échelle à notre valeur initiale d'un. Ce n'est qu'un changement subtil. Nous allons passer de la taille d'origine à 90 pour cent, puis revenir à la taille d'origine. Cela se produira sur une durée de 0,4 seconde. Donnez ceci une sauvegarde, et nous pouvons essayer cela dans le navigateur. Cliquez sur notre première chanson, et nous voyons pouls. Mais maintenant, si nous cliquons sur une autre chanson, nous ne voyons pas l'animation se dérouler. C' est parce que de retour dans notre script, nous ajoutons une classe, mais chaque fois que nous sélectionnons une nouvelle chanson, nous devons également supprimer cette classe l'un des éléments. Cela va être très similaire, donc nous pouvons copier cette toute dernière ligne, coller ceci à la fonction démarrée. Mais cette fois, plutôt que d'ajouter notre classe, nous allons supprimer. Essayons ceci ; cliquez sur n'importe quelle chanson, notre animation pulsée fonctionne. Essayons le deuxième, et cela fonctionne pour chaque élément sur lequel nous cliquons. La toute dernière chose que nous allons faire est de résoudre un problème lors de la sélection de nos chansons. Cela peut, ou non, être un problème que vous venez de découvrir. Mais si nous cliquons sur l'une de nos chansons, cela définira alors le texte en cours de lecture. Cependant, pour certaines parties de la section, si nous cliquons juste au-dessus de notre élément de liste, nous obtenons le contenu de toutes nos chansons. C' est parce que de retour dans notre JavaScript, nous ajoutons ce gestionnaire de clics à notre section complète de la liste de chansons. La liste des chansons est notre rappeur, et elle contient tous les éléments de notre liste. Tout fonctionne parfaitement bien si nous devions cliquer sur ces éléments de liste. Mais si nous devions cliquer sur juste en dehors des éléments de la liste comme nous venons de voir, cela sélectionnera le contenu complet de notre liste de chansons. Pour résoudre ce problème, nous allons réorganiser cette fonction pour n' écouter que les clics sur nos éléments de liste. La façon de le faire est de sélectionner nos documents complets, puis nous pouvons utiliser QuerySelectorAll plus dans nos éléments « li ». Cela va saisir tous nos articles de liste sur la page. Nous pouvons installer cela à l'intérieur d'une constante appelée liens, et définir cela égal à notre valeur. Cette valeur de liens sera maintenant nos six chansons. Nous devons parcourir ces six valeurs en boucle, puis ajouter notre écouteur d'événement à chacun de ces éléments de liste. Pour ce faire, nous allons utiliser une boucle for of, et cela ressemble à ceci. Donc, nous disons pour, puis créer une constante appelée lien de liens. Cela va parcourir tous nos six liens, puis stocker la valeur individuelle à l'intérieur d'une constante appelée lien. Pour chaque lien, nous allons ensuite ajouter un écouteur d'événement, et l'événement que nous voulons écouter est 'click', qui va alors déclencher une fonction appelée setSong, ce qui signifie maintenant que nous n'avons plus besoin de parcourir notre chanson complète afin que nous puissions supprimer cela. Maintenant, nous pouvons transformer notre fonction en setSong. Nous pouvons ensuite déplacer cela vers le bas à côté de notre fonction. Donnez ceci une sauvegarde, et maintenant vous pouvez essayer cela dans le navigateur. Cliquez sur une chanson, et il joue toujours bien. Nous pouvons changer de chansons, et enfin, si nous cliquons juste en dehors de nos éléments de liste, cette fonction ne fonctionnera plus. Avec ce problème maintenant résolu, c'est maintenant la fin de notre application de lecteur de musique. Merci d'avoir regardé, et j'espère que vous avez apprécié. 14. Suivez-moi sur Skillshare !: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare et suivez-moi pour toute mise à jour. Aussi être informé de toute nouvelle classe au fur et à mesure qu'ils deviennent disponibles. Alors merci encore une fois. Bonne chance. Espérons que je te reverrai dans un futur cours.