Tutoriel graphique HTML5 sur la création d'un plug-in de lecteur audio sympa_html5 compétences du didacticiel

Cependant, en raison des différents effets de rendu des balises audio sous différents navigateurs, cette méthode simple ne convient pas à une utilisation sous plusieurs navigateurs et les fonctions fournies par le contrôle de lecteur par défaut du navigateur sont vraiment trop limitées. . Par conséquent, nous masquons généralement les commandes de lecture par défaut du navigateur en ne définissant pas cet attribut et ajoutons manuellement des balises et des styles supplémentaires pour personnaliser l'interface utilisateur du lecteur.

Une fois l'interface utilisateur du lecteur dessinée, la première chose que nous devons faire est d'ajouter les écouteurs d'événements correspondants pour les trois boutons de contrôle principaux : lecture, chanson précédente et chanson suivante.

Dans la surveillance des événements de clic sur le bouton ci-dessus, nous contrôlons la lecture et la pause de l'audio en appelant les méthodes play() et pause() de l'élément audio d'origine. De plus, l'élément audio fournit l'attribut currentSrc, qui représente la source du fichier en cours de lecture. Nous contrôlons la piste de la chanson en cours de lecture en définissant cet attribut.

Ensuite, ajoutons la surveillance des événements aux deux petits haut-parleurs de chaque côté de la barre de volume, afin que le volume de la lecture en cours puisse être réduit et augmenté en cliquant sur les deux petits haut-parleurs à gauche et à droite. Pour régler le volume du lecteur, nous pouvons appeler l'attribut volume fourni dans l'élément audio. La valeur maximale du volume est 1 et la valeur minimale est 0. Ici, nous contrôlons le volume en augmentant ou en diminuant le volume de 0,1 à chaque fois que nous cliquons sur le haut-parleur. Bien entendu, vous pouvez également utiliser d’autres valeurs. Mais il convient de noter que le langage JavaScript ne peut pas fournir un contrôle précis sur les décimales, donc à chaque fois que le volume est réduit de 0,1, le volume réellement réduit est légèrement supérieur à 0,1, ce qui fait qu'il reste 0,09 lorsque le bouton de réduction de volume est cliqué 9 fois. d'affilée. volume xxxx, et vous découvrirez alors pourquoi le lecteur ne peut pas être mis en sourdine. . . Bien entendu, ce problème est facile à résoudre (illustré ci-dessous), juste un petit rappel.

De plus, nous devons également implémenter la fonction consistant à utiliser le curseur ou à cliquer sur une certaine position de la barre de volume pour contrôler le volume avec. la fondation ci-dessus, c'est facile à réaliser. Tout d'abord, jetons un coup d'œil à la fonction consistant à cliquer sur une certaine position de la barre de volume pour contrôler le volume : cliquez sur une certaine position de la barre de volume, calculez la valeur de longueur depuis le point de départ de la barre de volume jusqu'à cette position, puis divisez cette valeur par la longueur totale de la barre de volume. (Ici, c'est 100). Obtenez la valeur en pourcentage, puis multipliez la valeur en pourcentage par la valeur de volume maximale 1 pour obtenir la valeur de volume à laquelle vous souhaitez accéder, puis attribuez-la à. volume. La méthode de contrôle du volume via un curseur est similaire à celle-ci. L'essentiel est de savoir comment calculer la valeur de position du curseur sur la barre de volume. Je ne l'expliquerai pas en détail ici. Si vous avez des questions, veuillez laisser un message ci-dessous.

Contrôle du temps

D'accord, maintenant le lecteur fonctionne essentiellement, mais nous voulons également pouvoir sauter directement une partie de l'audio à un moment précis. Alors comment y parvenir ? ? ! Les membres du comité qui formulent la norme ne sont pas des imbéciles. De telles fonctions couramment utilisées ne peuvent être omises. Parcourez donc rapidement l'API et vous constaterez que l'élément audio fournit un attribut appelé currentTime, qui est un nom très concis et facile à comprendre. (En fait, la plupart des attributs sont faciles à comprendre). La définition de cet attribut peut définir le moment de lecture actuel.

Ici, nous devons également utiliser un autre attribut audio, la durée, qui fait référence à la durée totale du fichier en cours de lecture. Ainsi, en fonction de la mise en œuvre du contrôle du volume, nous pouvons faire ceci :

1. Cliquez sur une certaine position de la barre de progression et calculez la valeur en pourcentage de la longueur depuis le point de départ de la barre de progression jusqu'à cette position jusqu'à la longueur totale de la barre de progression (par exemple, cliquez sur la position centrale de la barre de progression, alors la longueur depuis le point de départ de la barre de progression jusqu'à cette position sera la longueur de la position représentant 50 % de la longueur totale de la barre de progression), enregistrée sous forme de pourcentage.

2. Multipliez ensuite le pourcentage par la durée totale du fichier pour obtenir la valeur du point temporel auquel vous souhaitez accéder, puis attribuez la valeur à currentTime pour terminer la fonction à implémenter.

À ce stade, le lecteur a essentiellement pris forme. Il reste quelques implémentations insignifiantes d'interaction avec l'interface utilisateur (en fait, elles sont les plus importantes pour moi, haha). Si vous êtes intéressé, vous pouvez les consulter dans le code source. Si vous avez des questions, vous pouvez laisser un commentaire ci-dessous. J'espère que nous pourrons communiquer et en apprendre davantage.