Création de zones de clics sur une image pour jouer plusieurs sons

**bahh66** · 24/09/2018, 22h13

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.

Invité · 24/09/2018, 23h00

bj,

tu peux commencer par sortir ton js du html c'est une plaie à gérer

Code :

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

1
2
3
4
5
6
 
[...document.getElementsByTagName('area')].forEach(el=>{
    el.onclick = function(){
        var letter = this.alt;//better to use an id
    }
})

une fois que t'as bindé tes elements correctement.
au lieu d'écrire ton

Code :

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

1
2
3
4
 
if ((m===1) && (a===2)) {
    playSound(ma.mp3)
}

plutot considère ecrire

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
 
var sequence = ['ignore','ignoreAsWell'];
 
function handleLetter(letter){
    //tu ajoutes la derniere lettre à la fin
    sequence.push(letter); 
    //lavant derniere lettre est supprimée
    sequence.shift(); 
 
    //ici sequence contient les lettres correspondant à tes "deux derniers clicks"
    var str = sequence.join('');
 
    var strToSound = {
        la: 'la.mp3',
        ma: 'ma.mp3',
        al: 'al.mp3',
    }
    if(str in strToSound){
        playSound(strToSound[str])
    }
}

**bahh66** · 26/09/2018, 09h47

Bonjour,
je ne comprend pas cette partie, elle sert à définir les différentes zones de clics? ou à savoir comment les utiliser?

tu peux commencer par sortir ton js du html c'est une plaie à gérer

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

[...document.getElementsByTagName('area')].forEach(el=>{
el.onclick = function(){
var letter = this.alt;//better to use an id
}
})
une fois que t'as bindé tes elements correctement.

Pour la deuxième partie,
comment la séquence sait si j'ai cliqué sur la zone a ou la zone l en premier?

Je ne suis pas un expert et j'avoue que là je m'y perd un peu.

Merci de ton aide.

Invité · 26/09/2018, 12h59

ex du click avec div au lieu de area (quesako?)
http://jsfiddle.net/3g02er8u/

considere la suite de click
al am al am ma
premier mot: al am
deuxieme mot: am al
troisieme mot: al am
quatrieme mot: am ma
....

cque fait le code, c'est de déplacer un tableau de taille deux suivant ta séquence de mots (une convolution pour faire peur)
ex:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
[ignore, ignoreMe]
arrive al
[ignoreMe, al]
arrive am
[al, am]
arrive al
[am, al]
arrive am
[al, am]
arrive ma
[am, ma]

**bahh66** · 26/09/2018, 21h06

J'ai bien regardé ton exemple mais ce que je n'arrive pas à transformer c'est le fait que chez toi je clique sur une zone dans laquelle est inclus le texte puis le texte s'incrémente de ! à chaque clic.

Chez moi j'ai une seule image dans laquelle il y a des zones correspondant à des sons. Prenons 3 sons pour commencer a, l et f.
Quand je note mon div comment lui dire que c'est dans une image et ensuite comment transformer ton js pour qu'il joue le son associé à la bonne zone.

Je vais d'abord me concentrer sur ce point avant de passer à la phase d'après que tu m'as expliqué avec la fonction strToSound.
Chaque chose en son temps.

J'ai donc défini la fonction

Code :

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

1
2
3
4
5
6
7
8
[...document.getElementsByTagName('div')].forEach(el=>{
console.log('ff')
el.onclick = function(){
 
document.getElementById(this.id).innerHTML += '!';
 
}
})

dans <head> et je me doute qu'il faut changer le += '!' pour faire jouer la fonction playSound

Invité · 26/09/2018, 21h21

Bonjour,

peux-tu joindre ton image, qu'on ait une base de travail ?

**danielhagnoul** · 27/09/2018, 10h10

Je pense que l'on pourrait commencer par mettre au point le regroupement des événements clics !

Ce n'est pas évident, car cela impose le déroulement de l'action à l'utilisateur et ne conviendra peut-être pas.

Exemple :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="fr" dir="ltr">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="author" content="Daniel Hagnoul">
    <title>Exemple</title>
    <style>
        *,
        *:after,
        *:before {
            box-sizing: border-box;
        }
 
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 1rem;
            display: grid;
            grid-template-columns: minmax(20rem, 60rem) 20rem;
            grid-template-rows: repeat(min-content, 4);
            grid-column-gap: 0.6rem;
            grid-row-gap: 0.6rem;
        }
 
        header {
            grid-column: 1 / span 2;
            grid-row: 1;
            text-align: center;
        }
 
        main {
            grid-column: 1;
            grid-row: 2;
        }
 
        aside {
            grid-column: 2;
            grid-row: 2;
        }
 
        aside>h3 {
            text-align: center;
        }
 
        footer {
            grid-column: 1 / span 2;
            grid-row: 3;
            text-align: center;
        }
 
        footer>* {
            margin-left: 2rem;
        }
 
        #son [id^='div'] {
            margin: 0.3rem;
            width: 2rem;
            height: 2rem;
            border: 1pt solid grey;
        }
          
        #cacher {
            display: none;
        }
 
        #btnJoue {
            margin: 0.3rem;
        }
    </style>
    <script defer>
        document.addEventListener('DOMContentLoaded', ev => {
            // le DOM est construit, la page web n'est pas visible
            // début code du test
 
 
            // fin code du test
        }, {
            capture: false,
            passive: true,
            once: false
        });
 
        window.addEventListener('load', ev => {
            // le DOM est construit et la page web est visible
            // début code du test
 
            let mot = '';
 
            const
                elemBtnJoue = document.querySelector('#btnJoue'),
                elemOutputJoue = document.querySelector('#joue'),
                elemSon = document.querySelector('#son'),
                elemsDiv = Array.from(elemSon.querySelectorAll('div')),
                elemCacher = document.querySelector('#cacher'),
                elemsMot = elemCacher.querySelectorAll('div'),
                joue = function () {
                    if (mot.length == 2) {
                        mot = '#' + mot;
 
                        try {
                            if (document.querySelector(mot)) {
                                document.querySelector(mot).dispatchEvent(new Event('click'));
                            } else {
                               elemOutputJoue.value = `${ mot.slice(-2) } n'est pas un son valable !`;
                            }
                        } catch (er) {
                            // rien
                        }
 
                        mot = '';
                    } else {
                        mot = '';
                        elemOutputJoue.value = `Vous devez cliquer sur deux sons avant de cliquer sur le bouton "Joue" !`;
                    }
                };
 
            for (const elemDiv of elemsDiv) {
                elemDiv.addEventListener('click', ev => {
                    mot += ev.target.textContent;
                }, {
                    capture: false,
                    passive: true,
                    once: false
                });
            }
 
            for (const elemMot of elemsMot) {
                elemMot.addEventListener('click', ev => {
                    console.log(`joue = ${ ev.target.textContent }`);
                    elemOutputJoue.value = ev.target.textContent;
                }, {
                    capture: false,
                    passive: true,
                    once: false
                });
            }
 
            elemBtnJoue.addEventListener('click', ev => {
                joue();
            }, {
                capture: false,
                passive: true,
                once: false
            });
 
            // fin code du test
 
        }, {
            capture: false,
            passive: true,
            once: false
        });
    </script>
</head>
 
<body>
    <header>
        <h1>Exemple</h1>
    </header>
    <aside>
        <h3>Commentaires</h3>
        <p>Salut !</p>
        <br>
        <p>J'utilise uniquement le JS d'aujourd'hui, ES2015+.</p>
    </aside>
    <main>
        <!-- code du test -->
 
        <div>
            <p>Vous devez cliquer sur deux sons avant de cliquer sur le bouton "Joue" !</p>
        </div>
 
        <section id="son">
            <div id="divA">A</div>
            <div id="divB">B</div>
            <div id="divC">C</div>
            <div id="divD">D</div>
            <div id="divE">E</div>
            <div id="divF">F</div>
        </section>
 
        <section id="cacher">
            <div id="BA">BA</div>
            <div id="CA">CA</div>
            <div id="DA">DA</div>
            <div id="FA">FA</div>
        </section>
 
        <div>
            <button type="button" id="btnJoue">Jouer</button> <output id="joue"></output>
        </div>
 
        <!-- fin code du test -->
    </main>
    <footer class="h-entry">
        <time class="dt-published" datetime="2018-09-27">2018-09-27</time>
        <a rel="license" href="http://creativecommons.org/licenses/by/2.0/be/">
            <img alt="Licence Creative Commons" src="https://i.creativecommons.org/l/by/2.0/be/80x15.png">
        </a>
        <a rel="license" href="http://creativecommons.org/licenses/by/2.0/be/">Licence Creative Commons Attribution 2.0
            Belgique</a>.
    </footer>
</body>
 
</html>

Invité · 27/09/2018, 10h46

Bonjour,

une discussion récente pouvant t’intéresser : Emission de sons avec les touches du clavier (notamment cette réponse)

**melka one** · 27/09/2018, 16h15

jour

insere l'image dans un balise map afin de definir des zones cliquable

**bahh66** · 27/09/2018, 21h44

@jreaux62 : c'est sur cette image que je travaille

et le lien que tu me donnes travailles avec des boutons qui jouent des sons les uns après les autres pour ma part, je veux qu'il joue le premier son au premier clic, le deuxième au deuxième clic et un troisième à la suite ou après un 3ème clic.

@danielhagnoul : J'ai testé ton code mais il ne me permet pas de faire jouer des sons, j'ai du rater quelque chose.

@melka one : au début j'ai utilisé une balise map plutot que des div mais je n'arrive pas à combiner en faisant cela les 3 actions nécessaires au jeu de mes sons.

Invité · 28/09/2018, 12h00

Bonjour,

1- Je me trompe, ou tu attends qu'on t'écrive tout le code ?

HTML : le beurre
CSS : l'argent du beurre
JS : la crémière en prime

2- J'ai un scoop pour toi : on n'a pas besoin d'image !
TOUT peut être généré en HTML/CSS : les touches, leur position, les couleurs, les arrondis,...

3- Comme, théoriquement, on n'est pas là pour tout écrire à ta place, voici la méthode à suivre :

HTML :

chaque touche est un <div>.
on va attribuer à toutes les touches une classe "touche", qui servira en JS pour l'évèenment "click".
pour identifier le son à jouer (lettre), on va lui donner un attribut "data-lettre", contenant : "a", "b", "c",... (le nom de la lettre)

CSS :
C'est ce qui va permettre de mettre en forme le clavier (on n'en parle pas ici, ce n'est pas le propos)
JS :

on cible les touches, avec : document.querySelectorAll('touche')
pour chacune (forEach), on écoute le click : addEventListener('click, function(){...}
au click, on réalise les actions

JS - Les variables :
on va d'abord déclarer plusieurs variables globales (globales = avec var, en dehors des fonctions ):

var lettre = ''; // lettre récupérée au click ('a', 'b', 'c',...)
var syllabe = ''; // celle-ci servira à concaténer les 2 lettres formant ainsi une syllabe
var o_son_lettres; // il s'agit d'un objet, associant chaque lettre au fichier .mp3 à jouer
var o_son_syllabes; // là, on associe chaque syllabe au fichier mp3 à jouer

Comme ce n'est pas évident ici, voici un exemple :

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
var o_son_lettres = { // accolade : c'est un objet
   'a':'a.mp3',
   'b':'b.mp3',
   'c':'c.mp3',
...
};
var o_son_syllabes = { // accolade : c'est un objet
   'ba':'ba.mp3',
   'be':'be.mp3',
   'bi':'bi.mp3',
...
};

JS - Les actions (fonction) :
function click_touche( ) :

au clic sur une touche, on récupère le contenu de l'attribut "data-lettre" sus-mentionné : dataset.lettre
on l'affecte à la variable lettre
on lance la fonction check_lettre( lettre )
on la concatène à la variable syllabe
syllabe += lettre;
on lance la fonction check_syllabe( lettre )

function check_lettre( lettre )

on récupère le nom du fichier musique (mp3) dans une variable :
var son = o_son_lettres( lettre ) (si on a bien rempli o_son_lettres, inutile de faire une vérification)
on lance directement jouer_son( son ).

function check_syllabe( syllabe )

si la longueur de syllabe fait 1 lettre (syllabe.length==1), on ne fait rien.
si la longueur de syllabe fait 2 lettres (syllabe.length==2) :
on vérifie que cette syllabe existe dans o_son_syllabes : if( o_son_syllabes(syllabe) )
si c'est le cas :
alors var son = o_son_syllabes(syllabe)
on lance jouer_son( son )
on efface la variable : syllabe = ''; (pour la préparer à récupérer de nouvelles données)

function jouer_son( son )

on joue le son (mp3)

Et c'est là que je me dis que j'ai passé PLUS de temps à rédiger ce "mode d'emploi" qu'à écrire le code.........

Création de zones de clics sur une image pour jouer plusieurs sons

JavaScript

Vue hybride

Discussions similaires

Partager

Partager