JavaScript implémente la barre de progression du contrôle audio

Avant-propos : je viens d'apprendre à utiliser HTML5, CSS et JavaScript pour faire certaines choses, comme les devoirs emmmm, mais comme je ne suis qu'au niveau vitesse rapide, j'ai quand même rencontré beaucoup de problèmes, j'ai donc décidé d'utiliser Internet pour trouver et comprendre les usages difficiles à trouver ou à comprendre. Enregistrez-le et conservez-le pour référence future. J'espère également qu'il pourra servir de référence pour les personnes rencontrant le même problème.

Ce blog parle principalement de l'utilisation de JS pour implémenter une simple barre de progression faite maison pour l'audio, ainsi que des sauts de lecture et des changements dans le temps de lecture. La raison en est que j'ai l'impression que les contrôles intégrés du navigateur (j'utilise Firefox) ne correspondent pas au style de ma page.

Dans Firefox, cela ressemble à ceci :

Une fois terminé, cela ressemblait à ceci :

En fait, l'idée de​​la barre de progression est très simple, il faut d'abord qu'il y ait une longueur totale, puis placer quelque chose qui soit le même sauf pour la couleur et la largeur (. largeur) à la même position de départ de la longueur totale (par exemple, I Voici deux rectangles minces), puis lorsque l'audio est en cours de lecture, utilisez la fonction setInterval, qui peut appeler la fonction ou calculer l'expression en fonction de la période spécifiée (en millisecondes), toutes les secondes (ou moins, bien sûr si ce n'est pas une seconde, pensez à la modifier dans les calculs ultérieurs) Augmentez la longueur de la barre de progression un peu proportionnellement, de sorte que de 0 au début à la longueur totale à la fin, la simple barre de progression est complétée.

Pour la méthode setInterval, veuillez vous référer ici

Afin de modifier la lecture audio en cliquant avec la souris sur la barre de progression, vous devez connaître les coordonnées de la souris. L'idée générale est d'obtenir les coordonnées de la souris uniquement lorsque la souris clique sur la zone p de la barre de progression. Par conséquent, la coordonnée x obtenue moins la coordonnée x de départ de la barre de progression spécifiée en CSS (le côté le plus à gauche de). la barre de progression) est la position du clic de la souris. La longueur depuis le début de la barre de progression est divisée par la longueur totale de la barre de progression et multipliée par la durée totale de l'audio. qui doit être joué correspondant à la position cliquée par la souris. Utilisez ensuite la fonction fastSeek de audio. Passez simplement à ce moment-là.

Ce qui suit répertorie les codes CSS&HTML&JS pertinents. La position et la couleur peuvent être déterminées à volonté. L'utilisation de JS est uniquement à titre de référence. À certains endroits, les appels sont très détaillés pour une compréhension claire.

Ce qui est mentionné dans le code, c'est qu'il suffit d'obtenir la coordonnée x de la souris car : la barre de progression implémentée ici est très simple, elle s'étend juste horizontalement, elle ne doit donc être calculée que dans le Direction x. En même temps, logiquement parlant, s'il s'agit d'une barre de progression verticale, vous ne devriez avoir besoin que de la coordonnée y. S'il s'agit d'une barre de progression circulaire, vous aurez peut-être besoin des deux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!