Exécuter un son au click sur image

Version imprimable

Bonjour j'aimerais pouvoir executer un son quand je clique sur une zone cliquable j'ai donc ce code ci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <img src="image2.jpg" id="page_internet_1" align="center" usemap="#Secret" /> <map name="Secret" > <area shape="rect" coords="0,0,500,500" onclick="JouerSon()" /> </map> <audio id="beep" src="1936.mp3"> </audio> <script> function JouerSon() { var sound = document.getElementById("beep"); sound.play(); } </script>
Mon code marche bien la mais le probleme c'est que si je viens a rajouter un lien dans ma balise area le son ne marche plus

Code:

<area shape="rect" coords="0,0,500,500" onclick="JouerSon()" href="xd.php" />

qq aurait-il une solution à ce problème ?

:salut:

Mon code de test fonctionne bien :

Code:

1
2
3
4
5
<img src="https://danielhagnoul.developpez.com/images/mstile-150x150.png" id="page_internet_1" align="center" usemap="#Secret" />
<map name="Secret">
    <area shape="rect" coords="0,0,150,150">
</map>
<audio id="beep" src="https://www.soundjay.com/button/beep-01a.mp3"></audio>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    document.querySelector('map[name="Secret"] > area').addEventListener('click', ev => {
        document.querySelector('#beep').play();
    });
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

24/03/2019, 18h16
ouranos88
Ok ton code marche bien mais dés que je rajouter une balise qui redirige vers un lien le son n'est plus produit et c'est justement çà que j'aimerai bien régler comme problème
Code:

1 2 3 <map name="Secret"> <area shape="rect" coords="0,0,150,150"> </map>
===>
Code:

1 2 3 <map name="Secret"> <area shape="rect" coords="0,0,150,150" href="nomsite.php"> </map>
24/03/2019, 20h40
danielhagnoul

Le comportement est logique, au clic le suivi du lien est prioritaire.
25/03/2019, 17h00
ouranos88

je sais que c'est logique que le lien ai priorité mais justement j'aimerais bien avoir une zone cliquable qui puisse rediriger vers une autre page et en même temps pouvoir produire un son mais c'est soit l'un soit l'autre et je n'arrive pas à allier les 2

Bonjour,

Code:

1
2
3
4
5
6
7
    document.querySelector('map[name="Secret"] > area').addEventListener("click", function(ev) {
        ev.preventDefault(); // désactive l'action par défaut (lien href)
        document.querySelector("#beep").play();
        window.setInterval(function() {
          window.location.href = ev.target.getAttribute("href"); // active l'action (lien href)
        }, 1000); // 1 seconde (à ADAPTER à la durée du son)
      });

Merci pour ton code mais je n'y arrive pas ça fait 2h que j'essaie et ca ne marche tjr pas voci le code:

Code:

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
<!DOCTYPE html>
<html>
<body style="background-color:#190C00;">
<head>
<link rel="stylesheet" href="escape_room.css">
<meta charset="UTF-8"/>
<title> Escape Room </title>
</head>
<img src="main_room.jpg" id="main_room" alt="Plan"   usemap="#Secret"   />
 <map name="Secret" >
 <area shape="rect" coords="0,0,500,500" onclick="ev()" href="Lumiere.php"/>
  <area shape="rect" coords="500,500,1000,1000" onclick="ev()" href="code.php"  />
   <area shape="rect" coords="105,170,135,115" href="Potion1.html" />
    <area shape="rect" coords="105,40,135,90" href="Potion2.html"  />
	<area shape="rect" coords="1,0,10,915" href="Escape ordi.html"  />
<script>
document.querySelector('map[name="Secret"] > area').addEventListener("click", function(ev) {
        ev.preventDefault(); // désactive l'action par défaut (lien href)
        document.querySelector("#beep").play();
        window.setInterval(function() {
          window.location.href = ev.target.getAttribute("href"); // active l'action (lien href)
        }, 1000); // 1 seconde (à ADAPTER à la durée du son)
      });
          </script>
 </map>
 </body>
</html>

29/03/2019, 10h20
NoSmoking

Bonjour,
sur ce coup là tu as perdu ta balise <audio id="beep" src="1936.mp3">.

Note très personelle :
Je navigue sans le son, la plupart du temps cela me saoule, alors imagine que, ayant été sur ton site, je clique sur le lien et ... rien ... il me faut attendre pour voir la suite ?? je fulmine après avoir cliqué « qu'est ce que c'est cette m...e ! » me dit une petite voie intérieure ... alors bye bye !

Bonjour,

SANS balise <audio> :

Code:

1
2
3
4
5
6
7
8
<img src="https://www.wonderplugin.com/videos/demo-image0.jpg" id="main_room" alt="Plan" usemap="#Secret" />
<map name="Secret">
  <area shape="rect" coords="0,0,500,500" href="Lumiere.php"/>
  <area shape="rect" coords="500,500,1000,1000" href="code.php"  />
  <area shape="rect" coords="105,170,135,115" href="Potion1.html" />
  <area shape="rect" coords="105,40,135,90" href="Potion2.html"  />
  <area shape="rect" coords="1,0,10,915" href="Escape ordi.html"  />
 </map>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"use strict";
const areas = document.querySelectorAll('map[name="Secret"] > area');
const sound = "http://s1download-universal-soundbank.com/mp3/sounds/2051.mp3";
 
areas.forEach(function(area) {
  area.addEventListener("click", function(ev) {
    ev.preventDefault(); // désactive l'action par défaut (lien href)
    play_sound(sound);
    let url = ev.target.getAttribute("href");
    goto_page(url);
  });
});
function goto_page(url) {
  console.log(url);
  window.setInterval(function() {
//    window.location.href = url;
  }, 1000); // 1 seconde (à ADAPTER à la durée du son)
}
function play_sound(sound) {
  let audio = new Audio(sound);
  audio.play();
  audio.loop = false; // ne boucle pas
}

29/03/2019, 13h09
Watilin

Citation:

Envoyé par jreaux62

Code:

}, 1000); // 1 seconde (à ADAPTER à la durée du son)

Sinon on peut ajouter un écouteur d’évènement ended, pour ne pas avoir à coder en dur la durée du son.