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

[hector33]

J'ai modifié donc voici le resultat :

undefined
[object HTMLAudioElement] undefined

Bien une précision en fait après test sous Firefox Chrome I.E11 cela fonctionne mais pas sous Opéra une idée ?

[Darkaurora]

les undefined et le object HTMLAudioElement confirme ce que pensais.

Il suffit de repérer les éléments différents éléments audio ayant une méthode pause et play et un attribut paused.

Une fois que tu y seras arrivé tu n'auras aucun problème pour la suite.

[hector33]

Bonjour,

Merci Darkaurora pour tes réponses mais pour être honnête je ne vois pas comment repérer (j'ai fais pas mal de tests cette nuit mais résultat négatif) les différents élements ayant une méthode pause, play...

A moins que cela revienne à gérer la chose comme la gestion du bouton Play/Pause ? if ($("").pause()){...} ? enfin dans le style mais alors dans ce cas ce qui me bloque je ne vois pas la logique général afin d'imbriquer tout les élément.

Je ne te demande pas le codage mais si tu as de plus ample informations, un exemple, je suis preneur. Sinon merci pour ton aide et tes conseils

[Darkaurora]

Assez obscure...

Après réécriture et test (chrome & firefox only) j'ai trouvé une solution qui fonctionne mais effectivement c'est étrange.

Tu peux passer la property autoplay a true et ça fonctionne ou alors faire comme ça et ça fonctionne aussi:

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<!Doctype html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="navigateur.css" />
		<link rel="stylesheet" href="playlistcss.css" />
 
		<style type="text/css">
			.active {
				border: 1px solid red;
			}
		</style>
 
		<title>Test lecteur audio Playlist</title>
 
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 
		<script>
 
			$( function ( ) {
 
				$( document ).ready( function ( ) {
 
					var $ap 	= $( '.audioplayer' ),
						$ap0 	= $( '.audioplayer' ).get( 0 );
 
					$( document )
						.on( 'click', '#Play', function ( ) { 
 
							$ap0.paused ? $ap0.play( ) : $ap0.pause( )
						} )
 
						.on( 'click', '#playlist li > a', function ( ) {
 
							$( '.active' ).removeClass( 'active' )
 
							$( this ).parent( ).addClass( 'active' )
 
							$ap.find( '#prems' ).prop( 'src', $( this ).data( ).scrone )
 
							$ap.find( '#deums' ).prop( 'src', $( this ).data( ).altsrc )
 
							$ap0.load( )
 
							$( '#Play' ).trigger( 'click' )
 
						} )
 
						.on ( 'click', '#Next', function ( ) { 
 
							$( '#playlist li.active' ).next( 'li' ).find( 'a' ).trigger( 'click' )
 
						} )
 
					$ap.on( 'timeupdate', function ( ) { 
 
						var tpstotal 	= $ap0.duration,
							tpsactuel	= $ap0.currentTime;
 
						$( '#tpsreel' ).css( 'width', Math.ceil( ( tpsactuel / tpstotal ) * 250 ) )
					} )
 
				} )
 
			} );
 
		</script>
 
	<body>
 
		<div id="englobe">
 
			<audio class="audioplayer">
				<source id="deums" src="1.mp3"></source>
			</audio>
 
			<button id="Play">Play/Pause</button>
			<button id="Next">Next</button>
 
 
			<ul id="playlist">
				<li class="active"><a href="#"  data-srcone="zic/Joris Delacroix - Feelings (original mix).ogg" data-altsrc="1.mp3"> M1</a></li>
				<li><a href="#"  data-srcone="zic/M - Le Complexe Du Corn Flakes.ogg" data-altsrc="2.mp3"> M2</a></li>
				<li><a href="#"  data-srcone="zic/Butch Cassidy - So Gangsta.ogg" data-altsrc="3.mp3"> M3</a></li>
			</ul>
 
 
			<div id="progression">
				<div id="tpsreel"></div>
			</div>
		</div>
 
 
	</body>
 
</html>

[hector33]

Merci effectivement l'autoplay=true; marche parfaitement et règle mon problème sous Opera.

Si un jour un novice comme moi tombe sur le post juste un conseil : une fois établit par la suite un événement timeupdate, une erreur Nan pendant le load() (la reinit du lecteur sur les autres gestionnaires) s'affichera.
Afin de régler se problème rajouter un load() au debut des autres gestionnaire ex dans notre cas :

Code :

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

1
2
3
4
5
6
7
 
$("li>a").on("click", function(){
$(".audioplayer")[0].load(); // je reinit l'élément audio (pour effacer les valeurs de mes variables) afin d'éviter l'affichage de NaN lorsque je le reinitialise pour changer les src
// autre instruction à réaliser...
$(".audioplayer")[0].autoplay=true; 
$(".audioplayer")[0].load();
});

Voila je suis un amateur donc la dernière solution s'apparente peut-être a un bidouillage ou a un contresens mais le load fais bien ce que j’attends de lui.

Un grand merci à Darkaurora.