18041 sujets

Questions générales et questions de débutants

Son de fond: contrôle marche arrêt

Bonjour. C'est mon premier post et je suis venu ici dans l'espoire que vous pourriez résoudre mon problème. J'ai essayé de faire un code qui permet de mettre en route et d'arrêter une musique de fond en cliquant sur des images (donc, la musique ne doit pas se mettre en route au chargement de la page, mais seulement quant on appuie sur l'image "play"). Ce code fonctionne sur Firefox et Opéra mais pas sur MS Internet Explorer ni Google Chrome. Comment le faire fonctionner sure chrome?
<html>
<head>



<script LANGUAGE="JavaScript">

<!--



function switchOn(){

  document.all.changetrack.data = "knight.mid";

}

function switchOff(){

  document.all.changetrack.data ="none.mid";

}

//-->

</SCRIPT>

</head>
<body>
<a onclick="switchOn()"><img src="play.gif" border="0"/></a><a onclick="switchOff()"><img src="stop.gif" border="0"/></a>
<br>
<OBJECT name="changetrack" type="audio/x-midi" data="none.mid">
  <PARAM name="autostart" value="true">
  <PARAM name="loop" value="true">
  <PARAM name= "hidden" value="true">
</OBJECT>
<br>
<object data="knight.mid">
  <param name="autostart" value="false">
  <PARAM name= "hidden" value="true">
If you're seeing this, you don't have a MIDI player
on your computer.
</object>
</body>
</html>


Je crois que le problème est dû au fait que sur Chrome et IE le changement d'adresse de la musique se fait mais refuse démarer en autostart.

Notez qu'en "trichant" un peu, j'arrive aussi à faire fonctionner sur explorer la musique, même si je continu à me demander pourquoi de l'html standard ne fonctionne pas sur Explorer (ni sur chrome, d'ailleurs):
<html>
<head>

<BGSOUND SRC="none.mid" ID="changemusic" loop="infinite">

<script LANGUAGE="JavaScript">

<!--



function switchOn(){

  document.all.changemusic.src = "knight.mid"
  document.all.changetrack.data = "knight.mid"

}

function switchOff(){

  document.all.changemusic.src ="none.mid"
  document.all.changetrack.data ="none.mid"

}

//-->

</SCRIPT>

</head>
<body>
<a onclick="switchOn()"><img src="play.gif" border="0"/></a><a onclick="switchOff()"><img src="stop.gif" border="0"/></a>
<br>
<OBJECT name="changetrack" type="audio/x-midi" data="none.mid">
  <PARAM name="autostart" value="true">
  <PARAM name="loop" value="true">
  <PARAM name= "hidden" value="true">
</OBJECT>
<br>
<object data="knight.mid">
  <param name="autostart" value="false">
  <PARAM name= "hidden" value="true">
If you're seeing this, you don't have a MIDI player
on your computer.
</object>
</body>
</html>


Mais toujours rien sur chrome.

Bref, j'aimerais surtout et avant tout n'avoir qu'un seul code qui fonctionne sur tout les browsers.

Merci.
Modifié par leGUIGUI (27 Feb 2011 - 11:19)
Bonjour,

Première chose à faire : ajouter un doctype et corriger le code html.

Ensuite, il serait peut-être préférable d'utiliser un player comme le DewPlayer, qui sera plus simple a implémenter et utiliser.
Je veux à tout prix que ce soit fait en HTML et Javascript.

Et j'ignore malheureusement ce qu'est un doctype.

Que faut-il corriger?
Salut,

Pour le doctype tu as une description de ce que c'est ici : http://www.alsacreations.com/article/lire/560-dtd-doctype-html-xhtml-comment-choisir.html

Le doctype se place avant la balise <html> au tout début de la page.

Pour ton code il y a quelques erreurs, ce qui fait que potentiellement IE ou Chrome ont du mal.
Tu peux utiliser le validator du W3C pour vérifier ton code html et essayé de corriger les erreurs éventuelles.http://validator.w3.org/

Il est important aussi de mettre certaines balise <meta /> et <title> entre tes <head> </head>

Pour le javascript il est préférable de mettre <script type="text/javascript">

En XHTML les balises <param /> doivent être fermés, ainsi que les balises <br />
Je parle de XHTML car dans la correction de ton code j'y ai passé un doctype XHTML.

J'ai corrigé quelques erreurs de ton code, je l'ai testé et il marche sur IE, FF etc.
Par contre je ne sais pas pourquoi il y a 2 balises <object>, apparemment la seconde ne sert a rien (???)

Pense à mettre un attribut alt="nom_img" à tes images, si jamais l'utilisateur ne charge pas les images ou autre, il aura cette description à la place.

L'option onclick peut être présente directement sur une balise image, de ce fait pas besoin de la balise <a></a> qui encadre ton image.

L'option <param name="hidden" ... /> ne fonctionne pas chez moi, tu peux donc mettre dans la balise object au début un : style="display:none;"

et encore 2-3 petites autres choses Smiley smile (au niveau du javascript etc...)
La correction ici :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="en" />
	
	<title>MIDI Player</title>

<script type="text/javascript">
<!--
function switchOn(){
	document.getElementById('changetrack').data = "knight.mid";
	document.getElementById('changetrack').play();
}
function switchOff(){
	document.getElementById('changetrack').stop();
}
//-->
</script>

</head>
<body>

	<img src="play.gif" alt="play" border="0" onclick="switchOn()" /><img src="stop.gif" alt="stop" onclick="switchOff()" />

		<br />

	<object id="changetrack" type="audio/x-midi" data="none.mid" style="display:none;">
	
		<param name="autostart" value="false" />
		<param name="loop" value="true" />
		
	</object>

</body>
</html>
Bon, 1er point, merci d'avoir normalisé mon code. étant un peu nouveau dans tout ça, je n'était jamais sûr de tout les détails nécessaire, ni comment exactement les régler.

2nd point, malheureusement, ce nouveau code ne fonctionne pas. Smiley bawling
Ni sur IE, ni sur Chrome, ni sur non plus maintenant sur FF ou Opéra.

Donc je ne suis pas plus avancé.
Tu devrais peut-être essayer le Dewplayer comme le dit Laurie-Anne !
http://www.alsacreations.fr/dewplayer.html

Pour le reste je ne vois pas d'où vient le problème...si on met le autostart="true", la musique se lance dès qu'on arrive sur la page, sinon rien ne marche, enfin... sur IE chez moi ca marche, mais pas sur les autres, ca a fonctionné sur FF mais la ce ne marche plus Smiley biggol . J'avais dû rajouter quelque chose qui le faisait fonctionner mais je ne sais plus quoi !
Non, pas de lecteur supplémentaire, je veux seulement du HTML, du javascript et du CSS.
Au risque de surprendre, il s'agit là plus d'un choix "artistique" qu'autre chose mais j'en n'en démordrai pas. Considère que je fait une sorte de "rétro-programing", aussi curieux que cela puisse paraître.

Il semblerait que ton code ne fonctionne pas car aucun navigateur navigateur ne reconnais la fonction "play()" ou "stop()"
Misterflo, j'ai un peu retravaillé ton code. Maintenant, il fonctionne sur Firefox et Opéra, mais toujours pas sur IE ni sur chrome

<!DOCTYPE html>
<html>
<head>

    <title>MIDI Player</title>

<script type="text/javascript">
<!--
function switchOn(){
    document.changetrack.data = "knight.mid";
}
function switchOff(){
    document.changetrack.data = "none.mid";
}
//--> 
</script>

</head>
<body>

    <img src="play.gif" alt="play" border="0" onclick="switchOn()" /><img src="stop.gif" alt="stop" onclick="switchOff()" />

        <br />

    <object name="changetrack" type="audio/x-midi" data="none.mid">
    
        <param name="autostart" value="true" />
        <param name="loop" value="true" />
        
    </object>

</body>
</html>

Aucune idée sur la manière de le faire fonctionner sur IE et Chrome.
Modifié par leGUIGUI (28 Feb 2011 - 19:08)
Bonjour,

Un élément OBJECT qui référence un fichier de type "audio/x-midi", ya rien à faire, ça ne va jamais marcher dans tous les navigateurs. Aucun standard ne demande aux navigateurs d'être des lecteurs de fichiers MIDI, ou de fournir une API JavaScript pour lire les fichiers MIDI ainsi référencés via un élément OBJECT. Tu peux abandonner cette solution.

Il y a deux solutions viables:

1. Passer par le plugin Flash. L'animation Flash peut être conçue pour proposer une interface JavaScript pour jouer/arrêter un son (et plus).
2. Utiliser l'élément AUDIO en HTML5, et l'API JavaScript liée.

La première solution est assez largement compatible, mais demande de passer par un plugin (non supporté sur iOS et, dans les faits, sur les autres OS mobiles actuels) et n'est pas standard. La deuxième solution est standard mais les implémentations sont récentes (de mémoire et en me plantant sans doute: Chrome, Firefox 3.5, Safari 5, et le futur IE9).

Il y a aussi des libs JS qui permettent de faire l'un ou l'autre. Sound Manager 2, dans ses versions récentes, gère les deux solutions.
Malheureusement, Je crois que ton Soundmanager ne supporte pas les MIDI. etla balise <audio> de html5 non plus, d'ailleurs.

Juste deux chose: dans la balise <param> quels sont les name qui peuvent affecter un objet midi? Est-ce qu'ils en existent du genre play ou stop?

Et quel différence y a-t-il entre autoplay et autostart?
Sinon il y a une méthode en javascript avec des innerHTML, par contre il ne faut pas que la balise object soit en x-midi, mais cela ne fonctionne pas sur IE de toute façon (que ce soit en x-midi ou autre) Smiley bawling
leGUIGUI a écrit :
Malheureusement, Je crois que ton Soundmanager ne supporte pas les MIDI. etla balise <audio> de html5 non plus, d'ailleurs.

Non mais les MIDI sur le Web c'est mort, hein. Smiley smile
Sujet clos
Aller à