[HTML 5] Mettre du son sur une image ? [Résolu]

kurtbosh · 08/01/2012, 12h22

Bonjour,

Je désirerais qu'on son soit joué quand on clique sur une image mais sans changer de fenêtre et sans que l'on voie de pavé concernant la gestion du son.

J'ai essayé ici sur la photo du bas : http://www.grenault.net/mob_voxy1.htm mais cela ouvre une fenêtre.

Merci pour votre aide.

Meilleurs vœux !

Guy

Bouffe · 08/01/2012, 13h30

Tu peux passer par du Javascript.

Un son présent dans une div cachée. Et lorsque tu fais un onClick sur l'image, le son est lancé.

Là pour le moment tu as mis un lien vers ton fichier mp3. Donc il est normal que celui-ci soit ouvert soit dans un autre onglet, soit dans l'onglet actuel.

Regarde par ici :

http://jannaud.fr/javascript-play-so...?id=35&maxi=10

NoSmoking · 08/01/2012, 16h17

Bonjour,

Citation:

J'ai essayé ici sur la photo du bas : http://www.grenault.net/mob_voxy1.htm mais cela ouvre une fenêtre.

un peu normal compte tenu du code HTML et de la présence de target="_blank".

Code :

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

1
2
3
<a title="WAF WAF WAF WAF WAF WAF !!!" target="_blank" href="voxi_aboiements.mp3">
<img class="image" alt="Cavalier King Charles" src="tout_62_500px.jpg">
</a>

kurtbosh · 08/01/2012, 16h46

Citation:

Envoyé par NoSmoking

Bonjour,

un peu normal compte tenu du code HTML et de la présence de target="_blank".

Code :

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

1
2
3
<a title="WAF WAF WAF WAF WAF WAF !!!" target="_blank" href="voxi_aboiements.mp3">
<img class="image" alt="Cavalier King Charles" src="tout_62_500px.jpg">
</a>

Bien sur mais comment faire pour éviter cela ? Sans le target cela remplace la page en cours, c'est pire encore...

NoSmoking · 08/01/2012, 19h54

dans ce cas une solution consiste à mettre une IFRAME comme target

Code :

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

1
2
3
4
5
6
7
<a href="voxi_aboiements.mp3" target="id_iframe" title="WAF WAF WAF WAF WAF WAF !!!">
  <img src="tout_62_500px.jpg" alt="Cavalier King Charles" class="image">
</a><br>
<!-- DIV n'apparaissant pas -->
<div style="width:1px;height:0px;overflow:hidden;">
  <iframe id="id_iframe" name="id_iframe" src=""></iframe>
</div>

kurtbosh · 08/01/2012, 20h12

Je vais essayer demain. Cela me semble une bonne solution !

Je te tiens au courant.

Merci.

Eric2a · 08/01/2012, 20h24

Salut,

On peux aussi contrôler (à l'aide de Javascript) un player MP3 développé en Flash.

Par exemple avec

Flash mp3 Player JS

Code xhtml :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Lecteur MP3</title>
	<script type="text/javascript">//<![CDATA[
		var player={
			onInit:function(){return},
			onUpdate:function(){return},
			play:function(){
				var obj=document.getElementById('playerFlash');				
				obj.SetVariable('method:setPosition',0);
				obj.SetVariable('method:play','');
			}
		}
	//]]>
	</script>
</head>
<body>
	<div>
		<object id="playerFlash" type="application/x-shockwave-flash" data="player_mp3_js.swf" width="1" height="1">
			<param name="movie" value="player_mp3_js.swf" />
			<param name="AllowScriptAccess" value="always" />
			<param name="FlashVars" value="listener=player&amp;enabled=0&amp;volume=100&amp;mp3=voxi_aboiements.mp3" />
		</object>
		<a href="voxi_aboiements.mp3" title="WAF WAF WAF WAF WAF WAF !!!" onclick="player.play();return false;">
			<img src="tout_62_500px.jpg" alt="Cavalier King Charles" class="image" />
		</a>
	</div>
</body>
</html>

kurtbosh · 09/01/2012, 17h44

Citation:

Envoyé par kurtbosh

Je vais essayer demain. Cela me semble une bonne solution !

Je te tiens au courant.

Merci.

Voilà, je l'ai mis sur mon site. Génial sur la version WEB !!!

Ne fonctionne pas sur la version mobile, probablement à cause de l'iframe. Je vais essayer en utilisant la balise audio. La version mobile de cette page est en HTML5.

Comment te remercier ? Un lien vers ton site, par exemple ?

Guy

08/01/2012, 12h22	#1
kurtbosh Invité régulier Inscription : mars 2009 Messages : 55 Détails du profil Informations forums : Inscription : mars 2009 Messages : 55 Points : 9 Points : 9	Mettre du son sur une image ? Bonjour, Je désirerais qu'on son soit joué quand on clique sur une image mais sans changer de fenêtre et sans que l'on voie de pavé concernant la gestion du son. J'ai essayé ici sur la photo du bas : http://www.grenault.net/mob_voxy1.htm mais cela ouvre une fenêtre. Merci pour votre aide. Meilleurs vœux ! Guy
	00

08/01/2012, 13h30	#2
Bouffe Futur Membre du Club Inscription : mars 2009 Messages : 19 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : mars 2009 Messages : 19 Points : 16 Points : 16	Tu peux passer par du Javascript. Un son présent dans une div cachée. Et lorsque tu fais un onClick sur l'image, le son est lancé. Là pour le moment tu as mis un lien vers ton fichier mp3. Donc il est normal que celui-ci soit ouvert soit dans un autre onglet, soit dans l'onglet actuel. Regarde par ici : http://jannaud.fr/javascript-play-so...?id=35&maxi=10
	00

08/01/2012, 20h12	#6
kurtbosh Invité régulier Inscription : mars 2009 Messages : 55 Détails du profil Informations forums : Inscription : mars 2009 Messages : 55 Points : 9 Points : 9	Je vais essayer demain. Cela me semble une bonne solution ! Je te tiens au courant. Merci.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email