Bonjour,

j'ai créé une page sur laquelle j'ai une image avec des lettres. En cliquant sur une lettre je peux entendre son son.

Maintenant j'aimerai que lorsque je clique sur une lettre puis sur une autre, j'entende d'abord la première lettre puis la seconde et enfin la syllabe créée.

Mon problème est donc de pouvoir exécuter un son à partir de 2 clics précédents. Bien évidemment l'ordre des clics est important.

l et a font la

a et la font al.


Après avoir fait plusieurs cours, j'en arrive à cette idée de programmation.

J'ai d'abord crée un fichier test.js dans lequel je définis mes fonctions utilisées dans le fichier html

Code : 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
 
// définition des variables pour connaitre l'ordre dans lequel les zones de l'image sont cliquées
 
var l ;
var a ;
var m ;
 
// création de la fonction permettant de compter le nombre de clics fait sur la page.
function compteurClics ();
 
// création de la fonction playSound permettant de jouer un son
  function playSound(soundfile) {
    var audio = new Audio(soundfile);
    audio.play();
  }
 
 
// création des conditions pour jouer le son adapté à l'ordre des clics
function combinatoire () {
 
if ((l===1) && (a===2)) {
    playSound(la.mp3);
}
if ((a===1) && (l===2)) {
    playSound(al.mp3);
}
if ((m===1) && (a===2)) {
    playSound(ma.mp3)
}
 
}
Mon problème est que je n'arrive pas à créer une fonction qui permette de compter le nombre de clics sur la page.

Puis j'ai créé le fichier html qui utilise les fonctions

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
 
<html>
<head>
    <script src="Test.js"></script>
  <title>Piano</title>
</head>
 
<body>
 
<img src="piano_1.jpeg" alt="keyboard" usemap="#keyMap">
 
<map name="keyMap">
 
<area shape="rect" coords="68,108,112,247" alt="a" href="JavaScript: playSound('a.mp3');" (a===compteurClics); (combinatoire);>
 
<area shape="rect" coords="134,108,174,247" alt="l" href="#" onclick="playSound('l.mp3')" (l===compteurClics); combinatoire;>
 
<area shape="rect" coords="195,108,240,247" alt="m" href="#" onclick="playSound('m.mp3')" (m===compteurClics); (combinatoire);>
 
</map>
</body>
</html>
Je définis donc 3 zones dans lesquelles je peux cliquer.

Lorsque je clique sur une zone, le son correspondant est joué avec la fonction playSound, puis j'associe la variable correspondant à la zone (a, l ou m) au nombre de clics.

Cela me permet de savoir si j'ai cliqué sur le a avant ou après le l

Et enfin je fais appel à ma fonction combinatoire qui joue la bonne combinaison en fonction des clics effectués.

Je sais que je ne peux pas mettre d'affectation de variable dans la partie [body], mais je ne sais pas où le mettre pour qu'au clic cela engendre

- jouer le son associé

- associer compteurClics à la variable

- utiliser la fonction combinatoire() pour faire jouer avec playSound la combinaison des deux premiers sons.

Merci par avance.