Exécuter un son au click sur image

**ouranos88** · 24/03/2019, 01h00

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

Code html :

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

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 html :

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

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

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

**danielhagnoul** · 24/03/2019, 10h00

Mon code de test fonctionne bien :

Code HTML :

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

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 JavaScript :

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
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
});

**ouranos88** · 24/03/2019, 18h16

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 HTML :

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

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

===>

Code HTML :

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

1
2
3
 <map name="Secret">
    <area shape="rect" coords="0,0,150,150" href="nomsite.php">
</map>

**danielhagnoul** · 24/03/2019, 20h40

Le comportement est logique, au clic le suivi du lien est prioritaire.

**ouranos88** · 25/03/2019, 17h00

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

Invité · 25/03/2019, 17h51

Bonjour,

Code :

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

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)
      });

**ouranos88** · 28/03/2019, 19h51

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 HTML :

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
<!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>

**NoSmoking** · 29/03/2019, 10h20

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 !

Invité · 29/03/2019, 11h02

Bonjour,

SANS balise <audio> :

Code html :

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

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 JavaScript :

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
"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
}

**Watilin** · 29/03/2019, 13h09

Envoyé par jreaux62

Code :

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

  }, 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.

Exécuter un son au click sur image

JavaScript

Discussions similaires

Partager

Partager