Discussion :

[hector33]

Bonjour,

je tente de créer un lecteur audio avec playlist mais je suis confronté à un problème avec la gestion de ma barre de progression :

J'ai un bouton play/pause, trois liens et un événement click sur les liens (quand je clique sur un lien je veux qu'il change de morceau mais surtout que la barre de progression se réactualise).
Quand je clique sur Play le premier morceau se lance ainsi que la barre de progression.
Quand je clique par la suite sur un lien le morceau se relance mais la barre de progression elle, reste figée sur le temps de morceau précédent.
en revanche si sur le lien cliqué je le met en pause puis le relance avec Play la barre de progression s'actualise et se relance.

Voici le codage version short :

Html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<audio class="audioplayer">
	<source id="prems" src="zic/Joris Delacroix - Feelings (original mix).ogg"></source>
	<source id="deums" src="zic/Joris Delacroix - Feelings (original mix).mp3"></source>
</audio>
<button id="Play">Play/Pause</button>
<ul id="playlist">
	<li><a href="#"  data-srcone="zic/Joris Delacroix - Feelings (original mix).ogg" data-altsrc="zic/Joris Delacroix - Feelings (original mix).mp3"> M1</a></li>
	<li><a href="#"  data-srcone="zic/Joris Delacroix - Feelings (original mix).ogg" data-altsrc="zic/Joris Delacroix - Feelings (original mix).mp3"> M2</a></li>
	<li><a href="#"  data-srcone="zic/Joris Delacroix - Feelings (original mix).ogg" data-altsrc="zic/Joris Delacroix - Feelings (original mix).mp3"> M3</a></li>
</ul>
<div id="progression">
	<div id="tpsreel"></div>
</div>

Le jquery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function (){
	var audio = $(".audioplayer")[0];
	$("#Play").click( function(){
		if($(".audioplayer")[0].paused){
			$(".audioplayer")[0].play();
		}
		else{
			$(".audioplayer")[0].pause();
		}
	});
	$("li>a").on("click", function(){
		audio.load();
		audio.play();
	});
	$(".audioplayer").on("timeupdate", function(){
		var tpstotal = $(".audioplayer")[0].duration;
		var tpsactuel = $(".audioplayer")[0].currentTime;
		var fraction = tpsactuel / tpstotal
		var percent = Math.ceil(fraction * 250);
		$(".audioplayer").nextAll("#progression").children().css({width : percent});
	});
});

Ici on voit que lorsque je clique sur un lien le morceau se relance et pas la barre de progression. Le problème vient de de la methode load(). Elle réinitialise l’élément audio pour me permettre de changer de morceaux (en validant les nouveaux src des balise source) mais elle ne reiniatile pas l’événement "timeupdate" (là ou je penser que le play() qui relance la lecture apres le load() s'en chargé. Je n'ai pas mis tout le codage mais juste une partie afin de montrer le problème lié à load() si besoin du reste demandé.

Une idée, un axe de reflexion, un conseil ? pour résoudre ce problème. Merci d'avance

[Darkaurora]

Normal qu'il y ait ce genre de problème tu déclares uniquement le premier élément var audio = $(".audioplayer")[0];le "[0]" signifie que tu sélectionne le premier élément qui a la classe "audio"

il faut donc sélectionner le bon élément au click du lien

[hector33]

Ok merci de ta réponse alors je suis plutôt une espèce de novice en jquery.

Je ne comprend pas pourquoi le fait que [0] pose un problème car je n'ai qu'une balise audio donc c'est toujours elle qui est ciblé non ?

[Darkaurora]

a ce moment là tu dois avoir une balise audio et plusieurs balise source.

Essaye de voir ce que te renvois $( '.audio' )[0], $( '.audio' )[1] avec

console.log( $( '.audio' )[0], $( '.audio' )[1] )je pense toujours qu'il s'agit d'une mauvaise initialisation sur une sélection hasardeuse

[hector33]

Je viens de rentrer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log( $( '.audio' )[0], $( '.audio' )[1] )

dans la console de Firefox et que cela soit avant, après lecture ou clique lien le résultat est : undefined
undefined undefined

Voilà...

[Darkaurora]

autant pour moi ta classe c'est audioplayer et pas audio