[Sans soluce] HTML5 balise audio qui ne fonctionne pas en multi source

Hello,

À vérifier:
- DOM généré correct dans les deux cas.
- Type MIME des fichiers renvoyé par le serveur.

À ajouter éventuellement:
- Attribut type sur les éléments SOURCE, pour indiquer le type MIME (voire les codecs en sus) et permettre au navigateur de choisir quel fichier source il va récupérer.

Mark Pilgrim a un chapitre très complet sur la vidéo en HTML5:
http://diveintohtml5.org/video.html (traite aussi de l'audio)

Salut Florent,

J'avais testé en ajoutant type="..." et en ne mettant que ce format, soit :

function Son_Ajout(dossier,son,fichier) 
{ 
    document.getElementById('DivSons').innerHTML += '<audio id="'+son+'" preload="auto"><source src="./includes/'+dossier+'/ogg/'+fichier+'.ogg" type="audio/ogg" /></audio>'; 
}

Mais cette solution ne donne pas de sons non plus. J'ai test avec :
type="audio/ogg"
type="audio/ogg codecs=vorbis"
type="audio/ogg; codecs=vorbis" <== solution affichée sur w3.org
type="audio/ogg codecs=\'vorbis\'"
type="audio/ogg; codecs=\'vorbis\'"

Voir la réponse de Patidou pour commencer.
Si ça bloque toujours après avoir vérifié ou corriger ça, peut-on voir la page?

Pas de changement avec le htaccess

Voila pour la source qui ne fonctionne pas :
http://www.hironic.fr/test.php

Et pour celui qui fonctionne (donc sans balise < source >)
http://www.hironic.fr/test2.php

*** Edit ****
Au fait le js est un peu changé, finalement je ne déclare plus sur quel div ajouter le son, ce sera toujours le même que je placerai dans mon haut de page, mais bon le problème reste le même
Modifié par Rohacan (20 Nov 2010 - 21:14)

Arf, je comprends ce que tu veux dire, pourquoi j'ai pas vu ça avant, merci beaucoup.

Par contre je ne vois pas du tout comment y remédier là de suite Si seulement les navigateurs étaient fichus de se mettre d'accord sur un format unique

*** Edit ***

Bonjour bonjour, j'ai cherché un peu hier soir encore, et là cet aprèm. J'ai fini par trouver une solution (cloneNode) ici que j'ai combiné avec la première (venant d'ici). Le résultat :

var MesSons = new Array();

function Son_Ajout(dossier,son,fichier,duree)
{
	MesSons.push(son,dossier,fichier,duree);
	document.getElementById('DivSons').innerHTML += '<audio id="JS_'+son+'" preload="auto"><source src="./fr/includes/jeux/'+dossier+'/ogg/'+fichier+'.ogg" type="audio/ogg; codecs=vorbis"><source src="./fr/includes/jeux/'+dossier+'/mp3/'+fichier+'.mp3" type="audio/mpeg"><source src="./fr/includes/jeux/'+dossier+'/wav/'+fichier+'.wav" type="audio/x-wav"></audio>';
}

var channel_max = 10;
audiochannels = new Array();
for(a=0;a<channel_max;a++)
{
	audiochannels[a] = new Array();
	audiochannels[a]['channel'] = "";
	audiochannels[a]['finished'] = -1;
}

function Son_Jouer(son)
{
	var i = MesSons.indexOf(son);
	for(a=0;a<audiochannels.length;a++)
	{
		thistime = new Date();
		if(audiochannels[a]['finished'] < thistime.getTime())
		{
			//audiochannels[a]['finished'] = thistime.getTime() + document.getElementById('JS_'+son).duration*1000;
			audiochannels[a]['finished'] = thistime.getTime() + MesSons[i+3];
			audiochannels[a]['channel'] = document.getElementById('JS_'+son).cloneNode(true);
			audiochannels[a]['channel'].load();
			audiochannels[a]['channel'].play();
			break;
		}
	}
}

Et dans la page pour charger les sons :

<script langage="javascript">
	Son_Ajout('greeds','Coche','coche',500);
	Son_Ajout('greeds','Erreur','erreur',1000);
	Son_Ajout('greeds','Valid','valid',500);
</script>

<a href="javascript:Son_Jouer('Valid');">Jouer le son "Valid"</a><br/>
<a href="javascript:Son_Jouer('Erreur');">Jouer le son "Erreur"</a><br/>
<a href="javascript:Son_Jouer('Coche');">Jouer le son "Coche"</a><br/>

(La variable dossier on peut s'en passer biensûr, je l'ai ajouté pour mon besoin perso)


Mais je me pose une question quand même, pourquoi dans la première méthode le gars n'a pas utilisé cloneNode directement comme je l'ai fait là :
- juste parce qu'à aucun moment il s'est dit qu'il faudrait mettre plus qu'un format ?
- cloneNode peut poser problème ?

Et j'en viens à une autre question, les clone créés par cloneNode, quand un temps est écoulé et que ce script fait un nouveau clone par dessus le précédent... qu'advient le premier ? Il en reste des traces ? Ca risque de "bouffer" de la mémoire ou faire autre chose de désagréable à force ?

Vous pouvez tester cette soluce pour le moment ici (je ne sais pas quand je retirerai ces fichiers de test)

*** Edit encore et encore lol ***
J'ai modifié le code ci dessus pour ajouter le format mp3 car IE9 bêta contrairement à ce qui est dit sur certains sites ne gère pas le wav (en plus de ne pas gérer l'ogg) sauf si c'est moi qui ai pas la bonne version (9.0.7930.16406IC)
Mes tests, en cliquant rapidement et sans m'arrêter sur les liens (je sais pas moi, 5 à 10 par seconde) :
- FireFox : Excellent
- IE : capable de jouer les sons, plusieurs sons à la fois... mais refuse de démarrer un nouveau son avant un certain délais, ce qui peut être très contraignant pour les jeux)
- Chrome : .. démarre très bien mais l'onglet ne répond plus après même pas 10 secondes, plus aucune réaction, je suis obligé de fermer l'onglet. La même chose survient même si je clique tranquillement, et toujours 45 clics, le 46ème ça plante

Bilan perso :
- FireFox... plus je m'en sers plus je comprends pourquoi je l'apprécie
- IE :.... que faire contre ce délais ?
- Chrome : huuuummm.. un bug due au cloneNode ? (d'où ma question de tout à l'heure) Si oui comment y remédier ? Je ne sais absolument pas ce qu'engendre la méthode cloneNode, tout ce que je sais c'est qu'elle me permet de dupliquer un élément mais rien sur où il "s'enregistre/s'efface"... je vais chercher

*** Encore un édit ***
J'ai trouvé pour Chrome, en fait quelque chose (trop compliqué pour moi) fait que Chrome plante quand on a créé un certain nombre d'objets audio, du coup Google a une super solution.... "Ben suffit de limiter !".. pfff Du coup "Leopard" est limité à 15 objets et les autres OS à 50 objets (source) et d'ailleurs cette limitation ne suffit pas toujours puisque pendant mes test l'onglet plantait complet une fois sur deux.

Bilan des courses entre des cons qui veulent pas d'un format (bon.. ok ils ont leur raison, qu'elle soit noble ou non), des délais entre deux sons pour d'autres, et une limitation pour un autre, et je ne sais sur quelle autre problème je pourrai encore tomber si je continue de chercher, j'opte finalement pour la méthode "Ca marche tant mieux, ça marche pas ? Change de navigateur !" (même si c'est pas appréciable pour tout le monde)

Je rappel l'url pour ceux que cette méthode intéresse : ici

Voila, encore merci pour les pistes et suggestions qui m'ont aidé à trouver ce qui n'allait pas.
Modifié par Rohacan (23 Nov 2010 - 12:40)

Mwee ... bon ...

Je crois que tu as trois répertoires contenant dans chacun d'eux le même fichier dans les trois formats différents (sauf carte.wav qui est absent).

Mais si tu supprimes les répertoires ogg, les sons ne sortent plus dans tous les navigateurs que tu veux.
Et donc ton code n'y arrive pas pour les mp3. (et peut-être aussi pour les wav).

Tu as sûrement dû t'inspirer du titre "Sans soluce", avec un brin d'Hironie ...

Quant à IE , on applique pas MesSons.indexOf

Bref, je pense qu'on aurait dû en rester au 20 novembre.

Merci pour ce vain !

Mwee Bon, je m'excuse ...

Les mp3 ne marchent pas pour FireFox et Opera.
Par contre bonne surprise pour les wav !!!

Et pas mal Google Chrome !!! Le seul à prendre en charge les mp3 pour ton code.
Effectivement quand il bug c'est pas du chiqué, mais c'est comme un cheval .
C'est nerveux, ça demande un peu de douceur.
(Revenir en arrièrre dans son code et repartir doucement.
Et en s'aidant des bug d'IE qui, corrigés, permettent à tout le monde de se sentir mieux).

A ce propos ... IndexOf pas trouvé ... Bah !

Merci pour tout . A plus.