Discussion :

[Stalk3R]

Salut les amis,
J'ai un code en javascript d'un player en HTML5 que je veut adapté à tout les liens pour qu'il puissent lire les fichiers audios ... sans répéter tout le code plusieurs fois sur une seul page ...

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
<script type="text/javascript">
<!--
$(document).ready(function(){
 
	// Stores the value of percentage of track loaded
	var global_lp = 0;
 
	$("#jquery_jplayer").jPlayer({
		ready: function () {
			this.element.jPlayer("setFile", "6b13ec667c83a4917443a929cce9152a.mp3").jPlayer("play");
 
			// Draw the control bar
 
			var ctrlBar = "";
 
			for (i=0; i < 100; i++){
 				ctrlBar = ctrlBar + "<a href='#' id='lb-"+i+"'>|</a>";
			}
 
			$('#player_progress_ctrl_bar').html(ctrlBar);
		},
		customCssIds: true
	})
	.jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {
 		var lpInt = parseInt(lp);
 		var ppaInt = parseInt(ppa);
 
 		global_lp = lpInt;
 
 		var loadBar = "";
 		for (l=0; l < lpInt; l++){
 			loadBar = loadBar + "|";
 		}
 
 		var playBar = "";
 		for (i=0; i < ppaInt; i++){
 			playBar = playBar + "|";
 		}
 
 		$('#player_progress_play_bar').text(playBar);
 		$('#player_progress_load_bar').text(loadBar);
	})
	.jPlayer("onSoundComplete", function() {
		this.element.jPlayer("play");
	});
 
	$("#player_play").click( function() {
		$('#jquery_jplayer').jPlayer("play");
		$(this).blur();
		return false;
	});
 
	$("#player_pause").click( function() {
		$('#jquery_jplayer').jPlayer("pause");
		$(this).blur();
		return false;
	});
 
	$("#player_stop").click( function() {
		$('#jquery_jplayer').jPlayer("stop");
		$(this).blur();
		return false;
	});
 
	$("#player_volume_min").click( function() {
		$('#jquery_jplayer').jPlayer("volume", 0);
		$(this).blur();
		return false;
	});
 
	$("#player_volume_max").click( function() {
		$('#jquery_jplayer').jPlayer("volume", 100);
		$(this).blur();
		return false;
	});
 
	$("#player_progress_ctrl_bar a").live( "click", function() {
		$("#jquery_jplayer").jPlayer("playHead", this.id.substring(3)*(100.0/global_lp));
		$(this).blur();
		return false;
	});
 
});
-->
</script>

Et l'html:

Code :

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

1
2
3
4
<div id="player_container">
	<p><a href="#" id="player_play" title="play">play</a> | <a href="#" id="player_pause" title="pause">pause</a> | <a href="#" id="player_stop" title="stop">stop</a></p>
 
</div>

Merci pour votre aide.

[SpaceFrog]

remplace l'id par une classe

Code :

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

$(".jquery_jplayer").jPlayer({

[Stalk3R]

C'est tout ??? Et je met ou mon fichier MP3 pour la lecture ??? je veut que mon fichier soit dans un code HTML !! Et à quoi ça sert de remplacer un ID par une classe !

[SpaceFrog]

in id doit être uniqiue sur la page ...

le sélecteur par classe permet d'impacter plusieurs objets en même temps; plusieurs objets pouvant porter le même classname

sinon tu peux cumuler les ids dans le selecteur

Code :

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

$("#id1, #id2, #id3")

[Stalk3R]

Bonjour,
Merci pour votre aide, mais je pense que vous m'avez pas bien compris.

Je veut faire ça:

Code :

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

1
2
3
4
5
6
7
8
9
10
<div id="player_container">
<p><a href="fichier_mp3_1.mp3" id="player_play" title="play">play</a> | <a href="#" id="player_pause" title="pause">pause</a> | <a href="#" id="player_stop" title="stop">stop</a></p>
 
</div>
 
 
<div id="player_container">
<p><a href="fichier_mp3_2.mp3" id="player_play" title="play">play</a> | <a href="#" id="player_pause" title="pause">pause</a> | <a href="#" id="player_stop" title="stop">stop</a></p>
 
</div>

Et quand je clique sur le premier je lit le fichier_mp3_1.mp3
et le deuxième fichier_mp3_2.mp3

Et tout ça avec un seul code javascript qui est posté en haut !
C'est pas qu'une histoire de id mais de ça aussi:

Code :

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

this.element.jPlayer("setFile", "6b13ec667c83a4917443a929cce9152a.mp3").jPlayer("play");

puis que là y a que le fichier mp3 (6b13ec667c83a4917443a929cce9152a.mp3) que je peut lire ! même si je change le id ...

Merci encore.

[SpaceFrog]

Je crois que tu ne m'as pas bien lu ....

Un id doit être unique sur la page ...