Lecteur audio avec jPlayer [Résolu]

Vanessa48 · 22/09/2011, 23h42

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, 11h51

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, 14h20

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, 11h34

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, 09h44

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, 10h24

je vois 3 fichiers css dans le source ...

Vanessa48 · 26/09/2011, 11h09

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, 11h15

Citation:

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" />

Citation:

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, 11h52

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

Vanessa48 · 27/09/2011, 09h52

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

23/09/2011, 11h51	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	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à ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

23/09/2011, 14h20	#3
Vanessa48 Membre à l'essai Vanessa RIGOULT Inscription : février 2011 Messages : 191 Détails du profil Informations personnelles : Nom : Vanessa RIGOULT Informations forums : Inscription : février 2011 Messages : 191 Points : 22 Points : 22	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é
	00

26/09/2011, 09h44	#5
Vanessa48 Membre à l'essai Vanessa RIGOULT Inscription : février 2011 Messages : 191 Détails du profil Informations personnelles : Nom : Vanessa RIGOULT Informations forums : Inscription : février 2011 Messages : 191 Points : 22 Points : 22	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
	00

26/09/2011, 10h24	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	je vois 3 fichiers css dans le source ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

26/09/2011, 11h09	#7
Vanessa48 Membre à l'essai Vanessa RIGOULT Inscription : février 2011 Messages : 191 Détails du profil Informations personnelles : Nom : Vanessa RIGOULT Informations forums : Inscription : février 2011 Messages : 191 Points : 22 Points : 22	Ou cela ? moi j'ai dans le module téléchargé : jplayer.playlist.min jquery.jplayer.inspector Jplayer (fichier flash) jquery.jplayer.min
	00

26/09/2011, 11h52	#9
Vanessa48 Membre à l'essai Vanessa RIGOULT Inscription : février 2011 Messages : 191 Détails du profil Informations personnelles : Nom : Vanessa RIGOULT Informations forums : Inscription : février 2011 Messages : 191 Points : 22 Points : 22	Oui mais ce CSS c'est celui de ma page jQuery pas celui de jPlayer
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email