En Javascript modification attributs de la balise <param&

HPz · Message par **HPz** » 04 août 2005, 11:42

Peut-on modifier la valeur des attributs des balise <param> affectées à une balise <object>?
Voici le code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/transitional.dtd">

<html>
<head>
<title>Sonnerie</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<script type="text/JavaScript" language="JavaScript">
function EmmSon(Rang)
{
switch(Rang)
{
case 0:
document.getElementById("Obj").setAttribute("data","Sonnette-0.au");
document.getElementById("Obj").setAttribute("filename","Sonnette-0.au");
break;
case 1:
document.getElementById("Obj").data="Sonnette-1.au";
document.getElementById("Obj").filename="Sonnette-1.au";
break;
}
}
</script>
</head>
<body>

<map name="Sonnette">
<area shape="circle" coords="16, 22,8" href="JavaScript:EmmSon(1)" alt="">
<area shape="circle" coords="16, 54,8" href="JavaScript:EmmSon(0)" alt="">
</map>
<table width="100%">
<tr>
<td>

<center>
<img border="0" width="172" height="77" src="Sonnette.gif" usemap="#Sonnette" alt="">
</center>

<object id="Obj" type="audio/basic" width="0" height="0" data="Oiseau.au">
<param name="filename" value="Oiseau.au">
<param name="loop" value="false">
<param name="autostart" value="true">
</object>
</td>
</tr>
</table>
</body>
</html>

Il présente deux types de modifications:
Le premier avec setAttribute(...,...)
Le second avec directement une affectation ...data="...."
Les deux fonctionnent sans problème sous IE mais pas sous Mozilla ni Netscape...
Quelqu'un peut-il m'aider?
Ce code est visible et audible en:
http://perso.wanadoo.fr/henri.pouzoullic/s-son/

HP

jv2759 · Message par **jv2759** » 04 août 2005, 12:01

pour affecter directement une aleur à la balise param, moi ce que je ferais c'est je met un id à ta balise puis :

document.getElementById("filename").value="Sonnette-1.au";

pour la valeur dans objetct je ne sait pas trop... Mais eentuelement tu devrait essayer d'aprendre à utiliser le dom inspector, tu verais que tu as tout les relation qui existe entre balise, ainsi que tout ce que tu peux faire en javascrip, peut-être que cela pourais t'aider...

HPz · Message par **HPz** » 04 août 2005, 16:01

Désolé, je viens d'essayer en identifiant la balise <param> concernée par "filename".
<param id="Id_param" name="filename" value="Oiseau.au">
Et avec une affectation de remplacement sous JavaScript du type:
document.getElementById("Id_param").value="Sonnette-0.au";
Résultat: cela ne fonctionne pas ni sous Mozella ni sous Netscape ni sous IE. (même pas sous IE, c'est tout dire).
Merci de ton idée...
HP

jv2759 · Message par **jv2759** » 04 août 2005, 16:12

La je ne sait pas, je ne pas en dire plus, je ne connais pas sufisament la balise object pour cela...

Par contre juste un conseil, si c'est possible evite d'utiliser au comme format audio, je n'en connais pas la qualiter mes ce n'est pas un format des plus répandut (ils proviendrait de sun???)... Ce qui fait que par exemple chez moi il ne eux pas le lire et me demande de télécharger quick time... Chose qui franchement ne m'embale pas dutout...

A mon avie le mieux c'est encore le mp3, car tout les lecteur le reconnaise

PsyDk · Message par **PsyDk** » 04 août 2005, 18:29

Malheureusement on rentre dans l'univers des plugins, et il y a peu de plugins qui agissent en fonction d'un changement de paramètre dans l'arbre DOM. Le plugin Quicktime en est un exemple, j'avais dû passer par un infâme document.write pour avoir une page plus ou moins dynamique. Adieu donc le XHTML Strict.

Certains plugins en revanche permettent d'être scriptés, dans ce cas il faut se référer à la documentation de l'auteur du plugin.

HPz · Message par **HPz** » 04 août 2005, 19:22

Voila, le grand mot est laché, plugins, et là, je suis complétement perdu. Je n'ai jamais compris leur fonctionnement et j'ai bien l'impression que ce n'est pas cette fois-ci que je vais y arriver.
Coment se fait-il qu'une chose aussi simple que ce petit bout de code ne fonctionne pas sous Mozilla ou Netscape alors qu'il ne pose aucun problème à IE.
Je vais essayer avec des fichiers mp3, sait-on jamais?
HP

jv2759 · Message par **jv2759** » 04 août 2005, 20:12

La balise object permet d'aller executer un programme externe... Car par defaut firefox et capable de lire tout ce qui est txt, html, image courante... Mais un naviguateur ne sait pas lire des video, musique, falsh...

Donc on doit passer par un logiciel tier :

type="audio/basic" indique que l'on as utiliser un logiciel qui c'est lire les type de fichier audio/basic

Donc à priorie le probléme et qu'une fois appeller le logiciel ne s'occupe plus de contenut html et donc tu peux changer le logiciel de musique ne s'en rendras pas compte... Donc soit on peux forcer ce dernier à ce recharger, soit ils faut recharger la pages, ou un bout de la pages, même si ce n'est pas propre on pourais imaginer mettre la musique dans une iframe...

calimo · Message par **calimo** » 04 août 2005, 20:56

Ou alors carrément créer l'élément object en javascript lors du clic ? Possible ou ça a les même limitations ?

PS : dans IE c'est pas des plugins mais des contrôles ActiveX...

HPz · Message par **HPz** » 05 août 2005, 16:31

J'ai essayé d'incorporer l'élément "object" et ses "param" dans le script de JavaScript. Toujours les mêmes résultats, ok pour IE et rien, pas un son, pour Mozilla ni Netscape.
J'ai essayé aussi de travailler avec des fichiers "mp3", ici aussi, ça fonctionne pour IE mais pas pour les deux autres.
Vraiment, j'ai l'impression d'être tombé sur un os.
Existe-t-il une instance chez Netscape ou Mozilla où je pourrais leur signaler ce cas?
J'ai tenté ma chance sur d'autres forums, mais c'est le grand silence...
Merci pour le petit topo sur les plugins.
HP

Bobe · Message par **Bobe** » 05 août 2005, 16:38

et ces fameux plugins, ils sont bien installés dans Mozilla ?
Tape about:plugins dans la barre d'adresse de Mozilla pour en avoir la liste.

HPz · Message par **HPz** » 06 août 2005, 16:11

Il y a 15 plugins installés sous Mozilla et autant sous Netscape.
Pour plus ample info en voici la liste:

Mozilla default...
Window Media Player...
RealJukebos NS...
RealPlayer G2 LiveConnect-Enabled...
RealPlayer version...
Java Plug-in (il y en a 7)
Adobe Acrobat...
Microsoft DRM...
Microsoft Windows Media Service...

Question : Que signifie l'astérique (*) dans les colonnes Type Mime et Suffixes ?

D'autre part, j'ai essayé une autre possibilité au niveau du code.
J'ai identifié un élément 'div' vide:

<div id="Insert"></div>

Et dans le script j'ai inséré les cinq lignes ayant trait à l'élément <object...> et à ses <param...> avec :

document.getElementById("Insert").innerHTML = 'le texte correspondant aux cinq lignes en questions....';

Encore une fois, aucun problème avec IE et toujours rien avec Mozilla et NS.

HP

martin · Message par **martin** » 07 août 2005, 15:11

Bon premièrement réinstalle quicktime, car il n'est pas installé sous mozilla (puisque pas listé par about:plugins).
http://plugindoc.mozdev.org/fr-FR/windo ... #QuickTime

Ensuite, aprés avoir fait des essais, je te propose une solution (testée sur firefox 1.0.6, mozilla 1.7.7, IE6, opéra 8.01).

Le code (aprés je commente) :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>sonnerie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
  function sonne(monObjet, sourceSon) {
    var monObjetSon;
    if (document.getElementById(monObjet + "IE")) {
      monObjetSon = document.getElementById(monObjet + "IE");
      monObjetSon.filename = sourceSon;
    } else {
      monObjetSon = document.getElementById(monObjet);
      monObjetSon.filename = sourceSon;
    };
    monObjetSon.SetURL(sourceSon);
    monObjetSon.Play();
  }
</script>

</head>

<body>
<p>
  oiseau :
  <img src="maSonnette.gif" alt="oiseau" title="oiseau" height="32" width="32" onClick="sonne('monSon1', 'Oiseau.au')">
</p>
<p>
  sonnette 0 :
  <img src="maSonnette.gif" alt="sonnette0" title="sonnette0" height="32" width="32" onClick="sonne('monSon1', 'Sonnette-0.au')">
</p>
<p>
  sonnette 1 :
  <img src="maSonnette.gif" alt="sonnette1" title="sonnette1" height="32" width="32" onClick="sonne('monSon1', 'Sonnette-1.au')">
</p>

<object 
  id="monSon1"
  type="audio/basic"
  data="Oiseau.au"
  height="1" width="1"
  class="son"
>
  <param name="filename" value="Oiseau.au">
  <param name="loop" value="false">
  <param name="autostart" value="false">

  <!--[if IE]>
  <object
    classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
    id="monSon1IE" 
    width="1" height="1"
    >
    <param name="filename" value="Oiseau.au">
    <param name="loop" value="false">
    <param name="autostart" value="false">
    <param name="src" value="Oiseau.au">
  </object>
  <![endif]-->

</object>
</div>

</body>
</html>

Tu peux essayer ce code là :
http://joliclic.free.fr/essais/maSonnerieALL.html

C'est effectivement assez pénible à bidouiller, du fait que çà fait appel à des extensions (plugins), en l'occurence quicktime.
La solution pour firefox, mozilla, et opéra, c'est la première balise OBJECT, qui a une propriété TYPE, qui définit un mime type, et le navigateur renvoie au plugin associé.
Mais çà ne marche pas sous IE, qui passe par activeX, et a donc besoin d'une propriété CLASSID. Mais si on rajoute cette propriété, mozilla ne renvoie plus l'objet à quicktime ! La solution c'est donc d'imbriquer un deuxième OBJECT dans le premier, qui plait bien à IE. Ce deuxième n'est interprété que si le premier ne l'est pas, conformément aux standards (ouf!, çà passe). Pour plus de sureté, (et surtout pour que le javascript proposé fonctionne), il est inclus dans des commentaires conditionnels compréhensibles uniquement par IE (les autres voient un commentaire).

Ensuite, on utilise des commandes javascript spécifiques à quicktime pour piloter ce son. Attention ce sont bien des commandes de quicktime, et non pas des commandes javascript normalisées. C'est important, car rien n'oblige firefox à renvoyer un document de type audio/basic à quicktime, il faut qu'il soient associés à quicktime ; dans l'absolu un autre plugin pourrait être associé, et les commandes ne serait pas forcément valables.
La doc js quicktime (attention, les exemples ne semblent pas fonctionner correctement !)

Des précisions sur ce que fait le js : il verifie que l'objet spécifique à IE existe (il doit porté le même ID avec les lettres "IE" en plus à la fin). Sinon il prend le premier. Puis il traite.
Des précisions sur ces commandes js/quicktime, modifier l'url de la source du fichier son via le dom habituel NE fonctionne PAS. Il faut utiliser la commande setURL fourni par quicktime.

Autre précision, même si ce que je te propose fonctionne (c'était ta demande), il serait beaucoup plus efficace de créer autant d'OBJECT que de sons sur la page, puis de déclencher les différents sons. Ainsi les sons serait préchargés par le navigateur, là il y a une latence à chaque fois, et avec un modem 56K il faut cliquer 2 fois sur une image pour avoir un son. De plus d'autre format de son sont plus légers (mp3 par exemple), mais du coup attention, il feront peut être appel à d'autres plugins.

Une dernière précision, si l'OBJECT à les propriétés width et height à 0, çà ne fonctionne plus, quicktime n'est pas chargé ! De même en passant par les CSS avec display:none . C'est pour çà que je les ai fixés à 1, pour que çà reste discret.

Enfin un dernier petit commentaire gratuit. J'aurai préférer que mozilla accepte la propriété classid, tout en n'en tenant pas compte (visiblement c'est d'ailleurs ce que fais opéra), çà serait beaucoup plus simple. Mais une recherche sur bugzilla m'a montré que c'est bien volontaire de la part des developpeurs (https://bugzilla.mozilla.org/show_bug.cgi?id=46569, en bas de page).

Pour finir, il faut penser à vérifier aussi sous safari, et éventuellement à améliorer pour des versions plus basse de IE (avec peut être un EMBED imbriqué en plus, eventuellement de nouveau avec des commentaires conditionnels IE, et vérifier l'existence de l'objet avec document.all[]).

HPz · Message par **HPz** » 07 août 2005, 18:30

Génial, ton code, c'est la première fois que j'entend Netscape, Mozilla et Firefox émettre des sons tant en local qu'en ligne.
Je vais essayer de comprendre car, effectivement, ça n'a pas l'air simple. En fait, j'ai compris que deux types d'object sont nécessaires, l'un typique à Quicktime et l'autre typique à ActiveX. Je vais donc essayer d'adapter ton code à mon image de boutons de sonnette.
Par contre, ce qui m'étonne, c'est que mes différents essais précedents ne fonctionnent plus sous IE ni en local ni en ligne, ce qui semblerait vouloir dire que Quicktime a plus ou moins bousculer ActiveX.
Merci, je te tiens au courant.

HPz · Message par **HPz** » 08 août 2005, 16:51

Salut Martin, grâce à toi, je pense tenir le bon bout. En effet. mes boutons de sonnettes fonctionnent maintenant sous IE, Netscape, Mozilla et Firefox.

Voci le code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/transitional.dtd">


<html>
<head>
<title>Index_0</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<script language="JavaScript" type="text/JavaScript">

// Il pourra y avoir de multiples boutons de sonnette avec des sonorités différentes

var sourceSon = new Array("Sonnette-0.au","Sonnette-1.au");

// Il y aura un code typique pour IE et un autre commun à Netscape, Mozilla et Firefox

var CodIE = new Array();
var CodNS = new Array();

// Préparation des lignes de codes qui seront incorporées par un 'innerHTML' dans leur 'div' réservé

// Le début de code de la 1ière ligne est différent pour IE et NS

var DebCodIE = '<object id="ObjIE" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" height="1" width="1">';
var DebCodNS = '<object id="ObjNS" type="audio/basic" height="1" width="1" class="son" ';

// La suite est ici aussi fonction du navigateur d'une part et d'autre part du son appelé.
// Elle sera concatanée en fonction du navigateur et du bouton de sonnette activée

// Les trois derniéres lignes de codes sont identiques

CodFin = '<param name="loop" value="false"><param name="autostart" value="true"><\/object>';

// Ecriture de la balise HTML dans le document avec la propriété JavaScript innerHTML

function EmmSon(Rang)
{
if(navigator.appName == "Microsoft Internet Explorer")
{
CodIE[Rang] = DebCodIE+'<param name="filename" value="'+sourceSon[Rang]+'">';
CodIE[Rang] = CodIE[Rang]+'<param name="src" value="'+sourceSon[Rang]+'">';
document.getElementById("Insert").innerHTML = CodIE[Rang]+CodFin;
}
else
{
CodNS[Rang] = DebCodNS+'data="'+sourceSon[Rang]+'">';
document.getElementById("Insert").innerHTML = CodNS[Rang]+CodFin;
}
}
</script>
</head>
<body>



<map name="Sonnette">
<area shape="circle" coords="16,22,8" href="JavaScript:EmmSon(1)" alt="">
<area shape="circle" coords="16,54,8" href="JavaScript:EmmSon(0)" alt="">
</map>
<table width="100%">
<tr>
<td>



<center>
<img height="77" width="172" border="0" src="Sonnette.gif" usemap="#Sonnette" alt="">
</center>



<div id="Insert"></div>
</td>
</tr>
</table>
</body>
</html>

Comme tu vois j'ai récupéré tes deux objets caractéristiques d' IE et de Mozilla et après les avoir rédigés, je les incorporent , l'un ou l'autre, en fonction du navigateur détecté.

Et... Ca marche tant en local qu'en ligne. Le w3.org le valide sans problème. Qu'en penses-tu?
Le code est en ligne, toujours à la même adresse:

http://perso.wanadoo.fr/henri.pouzoullic/s-son/

Je vais essayer de transformer mes fichiers-son en mp3 et voir ce que cela donne.

Merci

HP

martin · Message par **martin** » 09 août 2005, 11:33

Ravi que tu aies réglé ton problème

Comme tu me demandes ce que j'en pense, j'y vais

:

Premièrement la detection de navigateurs est en général une fausse bonne idée. Cà conduit souvent à exclure des navigateurs (par exemple firefox) sur des sites qu'ils pourraient voir. De plus qui te dit que leurs comportements ne va pas évoluer, par exemple le futur ie7, ou autre exemple ie6 sait utiliser des objets standardisés que ie5 ne connait pas. Comment être sûr, de plus, que tu as bien détecté le bon, et pas un autre qui se ferait passé pour ie par exemple.
Donc habituellement, on ne detecte pas les différents navigateurs, mais plutôt on vérifie si les objets ou méthodes existent (par exemple if (document.getElementById) permet de s'assurer que cette fonction est disponible, firefox et ie6 renverront true, ie4 renverra false).

Deuxièmement, pourquoi ici faire créer par javascript des éléments html, alors qu'ils pourraient directement être écrits en html ! L'imbrication d'OBJECT que je t'ai proposé est valide, pas besoin d'écrire seulement l'un ou l'autre suivant le navigateur.

Troisièmement, une vrai amélioration (comme je te l'ai déjà précisé), serait de charger tous les sons dans la page, sinon avec un modem 56K il y a une latence lors du déclenchement (au moins les premières fois où ils sont joués). Donc, pour préciser, çà signifie un OBJECT avec id son1, un autre avec id son2, et on déclenche l'un ou l'autre via js, plutôt qu'un unique OBJECT dont on change le fichier son puis exécute.
Evidement cette proposition serait stupide dans le cas de beaucoup de sons, un jukebox par exemple, mais ici ce n'est pas le cas.

Une petite précision, quand je vois "validé par w3.org le 08.08.05", les validateurs n'interprètent évidement pas le javascript, donc les objets crées ne sont absoluement pas vérifiés dans ce document.

J'espère ne pas t'avoir refroidi

, ce n'est pas le but, juste mon avis.

Geckozone