Lecteur audio avec jPlayer

**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 ...

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

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

Lecteur audio avec jPlayer

jQuery

Vue hybride

Discussions similaires

Partager

Partager