Un seul code pour tous

**Stalk3R** · 02/04/2012, 11h24

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** · 02/04/2012, 13h45

remplace l'id par une classe

Code :

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

$(".jquery_jplayer").jPlayer({

**Stalk3R** · 03/04/2012, 06h49

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** · 03/04/2012, 08h46

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** · 03/04/2012, 10h27

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** · 03/04/2012, 10h59

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

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

**Stalk3R** · 05/04/2012, 20h02

D'accord, donc si je change le ID par une classe, je change quoi dans le code javascript + dans le code html ?

**Stalk3R** · 07/04/2012, 19h04

J'ai fait ça:

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
<head>
<!-- Website Design By: www.happyworm.com -->
<title>Demo (jPlayer 1.1.1) : Text Based player with progress bar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
 
	// Stores the value of percentage of track loaded
	var global_lp = 0;
 
	$("#jquery_jplayer").jPlayer({
		ready: function () {
		    var target = $("#player_play").attr("class");
 
			this.element.jPlayer("setFile", target+".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>
 
<style>
<!--
 
#player_container {
	border: 1px solid #009BE3;
	padding:0 20px;
}
 
#player_container p {
	font-family: "Myriad Pro Regular","Trebuchet MS";
	font-weight: normal;
	line-height: 36px;
}
 
#player_container .blue {
	color: #009BE3;
}
 
#player_container .magenta {
	color: #CC0090;
}
 
#player_container .green {
	color: #A0A600;
}
 
#player_container .darkblue {
	color: #002869;
}
 
#player_progress_ctrl_bar,
#player_progress_play_bar,
#player_progress_load_bar {
	font-size:0.8em;
	height:1.2em;
}
 
-->
</style>
 
</head>
<body>
 
<div id="jquery_jplayer"></div>
 
<div id="player_container">
	<p><a href="#" id="player_play" class="12" 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="#" id="player_play" class="13" title="play">play</a> | <a href="#" id="player_pause" title="pause">pause</a> | <a href="#" id="player_stop" title="stop">stop</a></p>
 
</div>
 
</body>
</html>

Mais y a que le premier qui marche, le deuxième il se lance pas !!!
Vous avez une idée ?

**SpaceFrog** · 08/04/2012, 09h42

Code :

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

1
2
<div id="player_container">
<div id="player_container">

Code :

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

1
2
<a href="fichier_mp3_2.mp3" id="player_play"
<a href="fichier_mp3_2.mp3" id="player_play"

Un conseil : Ouvre ton dictionnaire et lis la définition de "unique"

puis relis mon post

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

et reflechois ensuite sur cette phrase

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

Un seul code pour tous

jQuery

Discussions similaires

Partager

Partager