[jQuery] progressbar.click

Bonjour à tous,

Je réalise actuellement un lecteur audio en HTML5/jQuery (à l'aide de la balise <audio>) et pour le moment, j'ai les fonctionnalités de lecture/pause/volume et la progressbar qui se remplie bien en fonction de l'avancement de la musique.

Maintenant ce que je souhaiterais, c'est que lorsque l'utilisateur clique à un endroit sur la barre, pouvoir récupérer une valeur afin d'avancer la musique ainsi que la progressbar.

Je précise que je débute en jQuery, donc s'il vous plaît ne me conseillez pas un lecteur audio déjà fait (le but étant d'apprendre).

Bien entendu avant de poster, j'ai fait une recherche sur le forum ainsi que sur Google, sans trouver de résultat à ma convenance.

L'une des solutions (que je ne trouve pas très évolutive) que j'ai trouvé consiste à calculer la distance entre le bord de la fenêtre du navigateur et la position du curseur de la souris (si j'ai bien compris, cela signifie que si plus tard je souhaite changer le design de mon lecteur, cette solution ne fonctionnera plus...).

Voilà, j'espère avoir été assez clair, merci d'avance pour votre aide !
Modifié par j0r (27 May 2013 - 09:21)

Salut,

J'ai jamais essayé de faire un lecteur audio, donc je n'ai bien-sûr pas testé cette solution, mais c'est l'idée qui m'est venue à l'esprit :
Tu peux récupérer les coordonnées de ta barre de progression bpX et bpY (ce qui est différent de ce que tu proposais et te laisse la liberté de modifier le design du lecteur !), et également les coordonnées au clic de la souris mX et mY. Tu divises ensuite mX par bpX, ça te donne un nombre décimal qui, s'il est multiplié par 100, te donne le pourcentage de remplissage de ta barre. Tu peux après récupérer la durée de ta musique et la multiplier par ce quotient afin d'obtenir la durée théoriquement écoulée si la barre de progression arrivait jusqu'au clic de la souris.
Tu vois ce que je veux dire ? Si oui, ça te paraît faisable ?
Modifié par Barudar (27 May 2013 - 13:08)

Barudar a écrit :
Salut,

J'ai jamais essayé de faire un lecteur audio, donc je n'ai bien-sûr pas testé cette solution, mais c'est l'idée qui m'est venue à l'esprit :
Tu peux récupérer les coordonnées de ta barre de progression bpX et bpY (ce qui est différent de ce que tu proposais et te laisse la liberté de modifier le design du lecteur !), et également les coordonnées au clic de la souris mX et mY. Tu divises ensuite mX par bpX, ça te donne un nombre décimal qui, s'il est multiplié par 100, te donne le pourcentage de remplissage de ta barre. Tu peux après récupérer la durée de ta musique et la multiplier par ce quotient afin d'obtenir la durée théoriquement écoulée si la barre de progression arrivait jusqu'au clic de la souris.
Tu vois ce que je veux dire ? Si oui, ça te paraît faisable ?

Hello Barudar, merci beaucoup de ta réponse.

Je vois tout à fait ce que tu veux dire, cependant, avant de voir ton message, j'ai trouvé une solution qui correspond à peu près à ce que tu m'as dit.

// Suppression du "px" de la valeur CSS
var maxWidth = $(this).css("width").slice(0, -2);

// Récupération de l'endroit cliqué sur la barre de progression
var clickPos = e.pageX - this.offsetLeft;

// On convertit en pourcentage
var percentage = clickPos / maxWidth * 100;

// On affecte la nouvelle valeur à la barre de progression
$(".barreProgression").progressbar("option","value", percentage);

A priori, j'obtiens ainsi le résultat que je souhaitais, à savoir que lorsque je clique sur la barre de progression, ça l'a remplie bien jusqu'à l'endroit où j'ai cliqué.

Maintenant, il faut que je trouve le calcul (et Dieu sait que je suis nul en Maths...) à faire pour envoyer la musique au bon endroit lors du clic car à priori la seule possibilité que j'ai, c'est la méthode currentTime qui me permet d'avancer ou de reculer le temps que je veux en seconde.

// Avance la musique de 30 secondes
musique.currentTime += 30

Modifié par j0r (27 May 2013 - 14:30)

Pour la largeur de l'élément, tu peux aussi faire :

$('#idElement').width();

Ça a l'avantage de ne pas nécessiter l'utilisation de slice() car ça te renvoie un nombre décimal.
Tu peux utiliser currentTime.

music.currentTime = music.duration * percentage;

La longueur de ta barre de progression (celle qui se remplit) représente la durée déjà lue de ta musique. En cliquant, tu modifies cette valeur, donc si tu peux utiliser le pourcentage pour modifier la longueur de ta barre, tu devrais pouvoir faire de même pour ta musique.
Modifié par Barudar (08 Jul 2013 - 23:30)

Barudar a écrit :

music.currentTime = music.duration * percentage;

La longueur de ta barre de progression (celle qui se remplit) représente la durée déjà lue de ta musique. En cliquant, tu modifies cette valeur, donc si tu peux utiliser le pourcentage pour modifier la longueur de ta barre, tu devrais pouvoir faire de même pour ta musique.

Ca marche nikel, merci !

Tu as juste fait une petite erreur dans ton calcul, à savoir que tu as oublié qu'il faut diviser le tout par 100, mais je te pardonne !

Maintenant si je veux faire en sorte que l'on puisse se balader dans la musique en maintenant le clic de la souris, c'est beaucoup plus compliqué ?

Salut,

Ravi d'avoir pu t'aider.
En fait, j'ai juste continué mon raisonnement initial et dans celui-ci, percentage n'a pas été multiplié par 100, voilà pourquoi je me suis trompé ^^".

Sinon, pour déplacer la musique en même temps que le curseur de la souris lors d'un clic maintenu, non, ce ne devrait pas être beaucoup plus compliqué :

Il faut créer un écouteur qui vérifie si le clic de la souris est maintenu, et modifie un booléen en conséquence : mouseLeftPressed = true/false. Dans une boucle (un interval par exemple), tu ajoutes une condition qui vérifie si ce booléen est à true. Si c'est le cas, on récupère les coordonnées de la souris (d'ailleurs tu devrais faire une fonction pour ça) et on modifie la barre de progression et la position de lecture de la musique.

Teste et dis-moi si ça fonctionne =)

Barudar a écrit :
Salut,

Ravi d'avoir pu t'aider.
En fait, j'ai juste continué mon raisonnement initial et dans celui-ci, percentage n'a pas été multiplié par 100, voilà pourquoi je me suis trompé ^^&quot;.

Sinon, pour déplacer la musique en même temps que le curseur de la souris lors d'un clic maintenu, non, ce ne devrait pas être beaucoup plus compliqué :

Il faut créer un écouteur qui vérifie si le clic de la souris est maintenu, et modifie un booléen en conséquence : mouseLeftPressed = true/false. Dans une boucle (un interval par exemple), tu ajoutes une condition qui vérifie si ce booléen est à true. Si c'est le cas, on récupère les coordonnées de la souris (d'ailleurs tu devrais faire une fonction pour ça) et on modifie la barre de progression et la position de lecture de la musique.

Teste et dis-moi si ça fonctionne =)

Hello,

Je ne connais pas ce système "d'écouteur" donc je vais me renseigner et essayer de faire ça, merci à toi !

EDIT : Après réflexion (si si, un minimum !), je suppose que le système "d'écouteur" ce sont les .click, etc. ?
Si oui, je vais regarder car je suppose qu'il y en a un pour détecter le maintien du clic.

EDIT 2 : L'évènement mouseDown pourrait convenir à priori.
Modifié par j0r (28 May 2013 - 15:29)

Pour les écouteurs, tu peux utiliser les événements comme mousedown effectivement, sinon il y a aussi d'autres manières de faire que j'utilise assez souvent qui consistent à créer un écouteur qui surveille un événement et déclenche, le cas échéant, une fonction, fonction qui ici modifiera la valeur du booléen dont je t'ai parlé avant.
Mais essaye avec .mouseDown, peut-être que ça va marcher.

Salut,

Tu as réussi ?

Barudar a écrit :
Salut,

Tu as réussi ?

Hello,

En ce moment, je n'ai pas trop le temps (pas mal de travail) mais si tu veux, je reviendrai te tenir au courant.

Salut,

Pas de problème, prends ton temps n_n