[JS + HTML 5 + Firefox] balise <audio>

**yakiniku** · 25/04/2010, 00h47

Bonsoir,

j'essaie de créer un petit player audio qui diffuserait une playlist chargée en AJAX.
Ma page marche bien sur google chrome, mais quand j'essaie sur firefox, le player disparait au chargement de la première chanson mais continue de diffuser la musique, et à la fin de la chanson au lieu de passer à la suivante, j'ai le droit à l'erreur "next is not a function"...

Bref, je sais pas si il y a un problème avec mon code javascript ou si firefox n'est pas trop au point avec la balise <audio>, mais si quelqu'un a une solution au problème, il est la bienvenue ^^.

Mon 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
	<head>
		<title>Zik player</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
		<script type="text/javascript" src="jquery/jquery.ui.core.js"></script>
		<script type="text/javascript" src="jquery/jquery.ui.widget.js"></script>
		<script type="text/javascript" src="jquery/jquery.ui.position.js"></script>
		<script type="text/javascript" src="jquery/jquery.ui.autocomplete.js"></script>
 
		<link type="text/css" href="style.css" rel="stylesheet" />
		<link rel="shortcut icon" href="img/icone.ico">
 
		<script type='text/javascript'>
			function next()
			{
				changeTitre(playlist[n]);
				player.attr("src", playlist[n]);
				player.load();
				n++;
			}
 
			function changeTitre(url)
			{
				var track = url.split('/');
				document.title = track[track.length-2]+" : "+track[track.length-1].split(".ogg")[0];
			}
		</script>
 
	</head>
	<body>
		<audio id="player" src="" autobuffer controls autoplay onended="next();">Your browser does not support the audio element.</audio>
 
		<script type='text/javascript'>
			//chargement de la playlist du lecteur
			var playlist = new Array();
			var player = $("#player");
			var n = 0;
 
			$.ajax(
			{
				url: "playlist.php",
				dataType: "xml",
				success: function(xmlResponse) 
						{
							var items = xmlResponse.getElementsByTagName("item");
							var i;
							for(i=0; i<items.length; i++)
							{
								playlist.push(items.item(i).firstChild.nodeValue);
								if(i==0)
								{
									var track = playlist[0].split("/");
									document.title = track[track.length-2]+" : "+track[track.length-1].split(".ogg")[0];
 
									player.attr("src", playlist[0]);
									player.load();
									n++;
								}
							}
						}
			});
		</script>
	</body>
</html>

**danielhagnoul** · 25/04/2010, 02h04

Bonsoir.

https://developer.mozilla.org/En/HTML/Element/Audio
https://developer.mozilla.org/En/Med...video_elements

Currently, Gecko supports only Vorbis, in Ogg containers, as well as WAV format. Also, the server must serve the file using the correct MIME type in order for Gecko to play it correctly.

Après une courte recherche firefox audio - Google Search il semble que ce n'est pas encore bien au point. Plusieurs personnes ont des problèmes.

Invité · 25/04/2010, 11h19

perso je pense pas que se soit firefox qui soit mis en cause la preuve en est que l'audio fonctionne mais que c'est plutot l'affichage du player qui foire j'ai pas mal utiliser la balise video qui utilise les meme api que pour l'audio et je n'ai jamais rencontre de probleme pour mois le probleme vient des bibliotheques utilisé qui doivent etre optimisé pour chrome

**yakiniku** · 25/04/2010, 18h00

J'ai résolu le problème en créant la balise audio via javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
player = document.createElement('audio');
player.src = playlist[n];
player.autobuffer = true;
player.controls = true;
player.autoplay = true;
player.id = "player_audio"; 
player.addEventListener("ended",function(){next();},false);
 
$("#audio").append(player);

Mais le lecteur bug encore pas mal, je pense qu'il va falloir attendre encore un peu pour utiliser cette balise pour lire des playlist, pour firefox du moins (ca reste stable sur chrome).

[JS + HTML 5 + Firefox] balise <audio>

JavaScript

Discussions similaires

Partager

Partager