Lecteur audio avec jPlayer

**Vanessa48** · 23/09/2011, 00h42

Bonjour

J'essaie de créer un simple lecteur audio avec jPlayer avec ce code :

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
<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
<meta charset="Cp1252">
<title>Document sans nom</title>
<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
	<script src="jquery/jquery.mobile-1.0a4.1.js"></script> 
	<script src="jquery/jquery.mobile-1.0a4.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">  
	</script>  
	<script type="text/javascript" src="/jPlayer/js/jquery.jplayer.min.js">  
	</script>
 
</head>
 
<script type="text/javascript">
 
	$(document).ready(function(){   
		$("#jquery_jplayer").jPlayer({ // Instantiate the plugin   
		ready: function () { // Executed when the plugin is ready   
		this.element.jPlayer("setFile", "luce1.mp3", "luce1.ogg").jPlayer("play"); // Auto-play the audio   
		},   
		oggSupport: true,   
		customCssIds: true  
		});   
 
		$("#jquery_jplayer").jPlayer("cssId", "play", "play_button"); // Associates play   
		$("#jquery_jplayer").jPlayer("cssId", "pause", "pause_button"); // Associates pause   
		$("#jquery_jplayer").jPlayer("cssId", "stop", "stop_button"); // Associates stop   
 
		$("#jquery_jplayer").jPlayer("onSoundComplete", function() { // Executed when the mp3 ends   
		this.element.jPlayer("play"); // Auto-repeat   
		});   
		});   
 
 
</script>
 
 
<body>   
<div id="jquery_jplayer"> </div>   
<ul>   
<li id="play_button"> play </li>   
<li id="pause_button"> pause </li>   
<li id="stop_button"> stop </li>   
</ul>   
</body>

Quand je lance l'appli, j'ai rien à l'écran
Pouvez-vous me guider, car je ne trouve rien sur le web
Merci pour vos réponses

**SpaceFrog** · 23/09/2011, 12h51

La coloration synhtaxique aurait du te mettre sur la piste ...

Code :

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

<script type="text/javascript" ">

y'a rien qui te choque là ?

**Vanessa48** · 23/09/2011, 15h20

Merci pour ta réponse, effectivement c'était trop evident, néanmoins apres cette correction

Code :

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

<script type="text/javascript">

Je n'ai toujours rien d'affiché

**danielhagnoul** · 24/09/2011, 12h34

Bonjour

Code :

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

1
2
3
4
5
6
7
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
	<script src="jquery/jquery.mobile-1.0a4.1.js"></script> 
	<script src="jquery/jquery.mobile-1.0a4.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">  
	</script>

Quelle horreur ! Vous chargez deux fois une version alpha obsolète de UI Mobile et deux versions différentes de jQuery. Je vous suggère de tester en remplaçant ce bloc d'instructions par :

Code :

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

1
2
3
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

Je ne connais pas jPlayer mais je m'étonne de ne pas voir une instruction link pour charger une feuille de style CSS.

Le contenu de votre body ne ressemble pas à un code UI Mobile : http://jquerymobile.com/demos/1.0b3/

Pour UI Mobile, je ne sais pas si l'instruction suivante est pertinente, je vous suggère d'essayer avec et sans :

<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>.

**Vanessa48** · 26/09/2011, 10h44

Merci pour ta réponse
Mais j'ai téléchargé cela sur ce lien http://www.jplayer.org/
et il n'y a pas de css

**SpaceFrog** · 26/09/2011, 11h24

je vois 3 fichiers css dans le source ...

**Vanessa48** · 26/09/2011, 12h09

Ou cela ?
moi j'ai dans le module téléchargé :
jplayer.playlist.min
jquery.jplayer.inspector
Jplayer (fichier flash)
jquery.jplayer.min

**Bovino** · 26/09/2011, 12h15

Envoyé par Vanessa48

Code :

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

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />

Envoyé par Vanessa48

Mais j'ai téléchargé cela sur ce lien http://www.jplayer.org/
et il n'y a pas de css

**Vanessa48** · 26/09/2011, 12h52

Oui mais ce CSS c'est celui de ma page jQuery
pas celui de jPlayer

**Vanessa48** · 27/09/2011, 10h52

J'ai enfin réglée la problème avec ce code :

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
<!DOCTYPE html>
<html lang="fr-FR">	
<head>		
<meta charset="Cp1252">		
<meta name="viewport" content="width=device-width; initial-scale=1.5; user-scalable=no;">	
	<title>jPlayer - Circle Player</title>	
		<link rel="stylesheet" href="css/not.the.skin.css">	
		<link rel="stylesheet" href="circle.skin/circle.player.css">		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>		<script type="text/javascript" src="js/jquery.transform.js"></script>	
		<script type="text/javascript" src="js/jquery.grab.js"></script>		
		<script type="text/javascript" src="js/jquery.jplayer.js"></script>		
		<script type="text/javascript" src="js/mod.csstransforms.min.js"></script>		
		<script type="text/javascript" src="js/circle.player.js"></script>		
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->		
		<script type="text/javascript">		
		$(document).ready(function(){			
			var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",			
			{				
				m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",				
				oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"			
			}, {				
				cssSelectorAncestor: "#cp_container_1"			
			});			
 
			});		
			</script>	
			</head>	
			<body>		
			<div id="jquery_jplayer_1" class="cp-jplayer"></div>		
			<div class="prototype-wrapper"> 
			<div id="cp_container_1" class="cp-container">				
			<div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->					
			<div class="cp-buffer-1"></div>					
			</div>				
			<div class="cp-progress-holder"> 
			<div class="cp-progress-1"></div>					
			</div>				
			<div class="cp-circle-control"></div>				
			<ul class="cp-controls">					
			<li><a href="#" class="cp-play" tabindex="1">play</a></li>					
			<li><a href="#" class="cp-pause" style="display:none;" tabindex="1">pause</a></li> 
			</ul>			
			</div>
			</div>			
 
	</body>
</html>

Néanmoins j'ai un autre problème quand je remplace le fichier son de l'exemple :

Code :

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

1
2
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",				
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"

par mes fichiers :

Code :

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

1
2
m4a: "luce1.mp4a",				
oga: "luce1.ogg"

Cela fonctionne sur Safari mais pas sur IE8, alors que cela marche sur les2 naviguateurs avec les fichiers de l'exemple.

D'autre part, je voudrais remplacer le nom du fichier par une variable $bande issue d'une requete en php, est-ce possible ?
si oui comment je modifie mon code ?

Merci pour votre aide

Lecteur audio avec jPlayer

jQuery

Discussions similaires

Partager

Partager