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

**bahh66** · 28/09/2018, 19h52

Merci tout d'abord pour cette explication de ce que j'ai à faire, j'ai bien conscience que sur un forum, c'est de l'entraide et non de l'assistanat.
Toutefois avec mes connaissances limité en programmation, j'utilise certains codes et j'essaie d'en comprendre le fonctionnement plus que de suivre un cours classique.

Donc rassure toi je ne souhaite pas que tu me fasses le code, même si cela m'arrangerait évidemment

Pour la partie css, je n'imaginais même pas en faire une, cela me parait un peu hors de mon domaine de compétences.

Pour ton explication, elle est plutôt très bien détaillée même si je ne suis pas sur de tout comprendre, je verrai au fur et à mesure.
Du coup, je comprend beaucoup mieux ton lien avec l'explication que tu en as faite, je ne voyais pas le lien pour tout ce qui était écrit.

Enfin, pour ton point n°2, je te rappelle que c'est toi qui m'a demandé une image plus haut.

J'écris mon code et je reviens vers vous dès que possible.

Merci encore.

Invité · 28/09/2018, 20h14

Ce que j'ai dit, c'est qu'on peut générer, via HTML et CSS, un visuel très similaire à ton images.

Sachant que :

une image a un certain "poids" (donc un temps de chargement)
un clavier généré en HTML/CSS peut être "reponsive" = changer de forme/disposition en fonction de la largeur du média (phone, tablet, desktop)

**bahh66** · 30/09/2018, 17h56

J'ai essayé de coder ce que tu m'as proposé en observant l'exercice que tu as mis en lien au dessus.
Voici ce que ça donne :
le HTML

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
<html>
 
<head>
<title>Piano en Javascript</title> 
 
      <style>
      h1 {
  text-align: center;
}
#audio-keyboard {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 1%;
}
 
#audio-keyboard .touche {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px;
  padding: 0;
  border: 1px black solid;
  cursor:pointer;
}
 
    </style>
 
 
</head>
 
<body>
 
  	<h1>Piano</h1>
	<div id="audio-keyboard"></div>
 
</body>
 
</html>

et le JS

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
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
// 1-Définition des variables
 
var lettre = '';
var syllabe = '';
var o_son_lettres = {
    'a':'a/mp3',
    'l':'l/mp3',
    'm':'m/mp3',
};
var o_son_syllabe = {
    'la':'la/mp3',
    'al':'al/mp3',
    'ma':'ma/mp3',
    'am':'am/mp3',
};
 
 
// 2-Définition des touches du clavier
var keyboard = [
{ 'charCode': 113, 'keyName': 'A', 'music': 'a.mp3' },
{ 'charCode': 102, 'keyName': 'L', 'music': 'l.mp3' },
{ 'charCode': 100, 'keyName': 'M', 'music': 'm.mp3' },
 
];
 
 
// 3- construction du code HTML des TOUCHES
var div_audio_keyboard = document.getElementById('audio-keyboard');
keyboard.forEach(function (key) {
	// audio-keyboard
	var div_touche = document.createElement('div');
	div_touche.className = 'touche';
	div_touche.setAttribute('id', 'touche-' + key.charCode);
	div_touche.dataset.key = key.charCode;
	div_touche.dataset.music = key.music;
	div_touche.textContent = key.keyName;
	div_audio_keyboard.appendChild(div_touche);
 
 
 
    div_touche.datalettre = key.keyName;
 
 
});
 
 
 
 
 
 
// 4-Définition de la fonction click_touche
 
function clickTouche() {
    lettre = dataset.lettre;
    checkLettre( lettre );
    syllabe += lettre;
    checkSyllabe( syllabe );
}
 
 
// 5-Définition des fonctions check_lettre et check_syllabe
 
function checkLettre(lettre) {
    var son = o_son_lettres (lettre);
    playSound( son );
}
 
function checkSyllabe(syllabe) {
      if (syllabe.length==1) {};
      if (syllabe.length==2) {
          if ((o_son_syllabes(syllabe)) {
              var son = o_son_syllabes(syllabe);
          playSound(son);
          syllabe ='';
              })
      }
}
 
// 6-Définition de la fonction playSound
 
function playSound(touche) {
	var audio = new Audio(touche.dataset.music);
	audio.play();
}
 
// 7- click sur une TOUCHE (ECRAN)
var touches = document.querySelectorAll('.touche');
touches.forEach(function (touche) {
	touche.addEventListener('click', function () {
		//		console.log('play : '+touche.dataset.key );
        lettre = document.getElementById('touche_'+key.keyname);
        check_lettre( lettre );
        syllabe += lettre;
        chek-syllabe( syllabe);
		playSound(touche);
	});
});

Mais plusieurs questions m'arrivent :
- est ce que dans les attributs de touches je peux enlever la partie 'charCode' vu que je ne veux pas utiliser le clavier?
- pour quelle raison on note la/mp3 et non la.mp3 dans la définition des variables?
- pourquoi le script est dans la partie body du html, alors qu'en général on me dit de séparer les 2?

Et j'ai enfin compris ce dont tu me parlais pour le fichier image et le CSS, il n’empêche qu'en copiant ton code d'exercice et en le lançant avec des fichiers locaux, la page met pas mal de temps à se lancer. Est ce que cela vient de mon ordi ou du code?

Invité · 30/09/2018, 18h04

Bonjour,

Envoyé par bahh66

- est ce que dans les attributs de touches je peux enlever la partie 'charCode' vu que je ne veux pas utiliser le clavier?

~~Oui~~ NON !
Car ça sert aussi à identifier les touches à l'écran.

Il faut que tu comprennes le code, sinon, inutile de l'utiliser, ou espérer le modifier.
D'ailleurs, tu n'as PAS besoin de le reprendre.

Le "mode d'emploi" que j'ai fourni devrait te suffire à écrire ton propre code.

- pour quelle raison on note la/mp3 et non la.mp3 dans la définition des variables?

LOL, parce que.... je me suis trompé de touche !
Il faut effectivement mettre la.mp3.

- pourquoi le script est dans la partie body du html, alors qu'en général on me dit de séparer les 2?

Rien ne t'empêche pas la suite de mettre le JS dans un fichier séparé.

...en le lancant avec des fichiers locaux, la page met pas mal de temps à se lancer....

Là, je ne vois pas...
A moins qu'il s'agisse des fichiers mp3, qui eux sont hébergés sur LEUR propre site : il vont forcément mettre du temps à charger.

Invité · 30/09/2018, 18h25

Concernant le code HTML :
Dans l'exercice que j'ai montré, le code HTML des touches est généré via le JavaScript.
Tu n'es PAS obligé !
Tu peux l'écrire... en HTML !! (

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
  <h1>Lettres et syllabes</h1>
  <div id="audio-keyboard">
    <div class="voyelles">
      <div data-ltr="a">a</div>
      <div data-ltr="e">e</div>
      <div data-ltr="i">y<br />i</div>
      <div data-ltr="o">o</div>
      <div data-ltr="u">u</div>
    </div>
    <div class="consonnes">
      <div data-ltr="l">l</div>
      <div data-ltr="f">f</div>
      <div data-ltr="ch">ch</div>
      <div data-ltr="s">s</div>
      <div data-ltr="m">m</div>
      <div data-ltr="r">r</div>
      <div data-ltr="n">n</div>
      <div data-ltr="v">v</div>
    </div>
    <div class="consonnes">
      <div data-ltr="j">j</div>
      <div data-ltr="z">z</div>
      <div data-ltr="p">p</div>
      <div data-ltr="t">t</div>
      <div data-ltr="c">c</div>
      <div data-ltr="b">b</div>
      <div data-ltr="d">d</div>
      <div data-ltr="g">g</div>
    </div>
  </div>

Code css :

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
 
#audio-keyboard > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
#audio-keyboard > div > div {
  /* touches */
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px;
  padding: 0;
  border: 1px black solid;
  cursor: pointer;
  background: #eee;
  border-radius:5px;
  font-size:120%;
  font-family:Arial,sans-serif;
}
#audio-keyboard > div.voyelles > div {
  background:#000; 
  color:#fff;
}
/* ---- */
/* deco */
#audio-keyboard {
  margin: 1%;
}
h1 {
  text-align: center;
}

Code JevaScript :

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
// -----------------
// Définition des variables
var lettre = '';
var syllabe = []; // array (à cause du "ch", qui va donner une syllabe de plus de 2 lettres)
var o_son_syllabe = {
  'la':'la.mp3',
  'al':'al.mp3',
  'ma':'ma.mp3',
  'am':'am.mp3',
};
var rep_music = 'music/'; // pour indiquer le dossier des musiques (ne pas oublier le / à la fin)
// -----------------
// click sur une TOUCHE (ECRAN)
var touches = document.querySelectorAll('#audio-keyboard > div > div');
touches.forEach(function (touche) {
  touche.addEventListener('click', function () {
    lettre = touche.dataset.ltr; // on récupère la lettre dans data-let="x"
    play_lettre( lettre );
    syllabe.push(lettre);
    console.log( syllabe );
    if( syllabe.length==2 ) 
    {
      play_syllabe( syllabe.join('') );
      syllabe = [];
    }
  });
});
// -----------------
function play_lettre( lettre ) 
{
  var son = lettre+'.mp3';
  playSound( son );
}
// -----------------
function play_syllabe( syllabe ) 
{
  if( o_son_syllabe[syllabe] )
  {
    var son = o_son_syllabe[syllabe];
    setTimeout(function()
               {
      playSound(son);
    }, 1500); // on décale 1.5 secondes (à adapter)
  }
}
// -----------------
function playSound( son ) 
{
  var audio = new Audio( rep_music+son );
  audio.play();
//  console.log( son ); // pour TEST
}
// -----------------

Comme je le disais : j'ai mis moins de temps à écrire le code qu'à écrire le "mode d'emploi" !

Démo : https://codepen.io/jreaux62/pen/GYJKJo

**bahh66** · 30/09/2018, 20h59

C'est juste énorme, merci beaucoup beaucoup.

Maintenant, il faut quand même que je comprenne ce code pour pouvoir le modifier si besoin est.

Et puis je vais essayer de modifier les touches avec le css pour me rapprocher au plus de l'image.

Encore un énorme merci pour ~~ton aide~~ avoir écrit le code.

Invité · 01/10/2018, 10h27

Tiens,

voici une version plus évoluée : https://codepen.io/jreaux62/pen/ePNRma

c'est un objet JS
affichage de la lettre ou de la syllabe "à l'écoute"

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
<h1>Lettres et syllabes</h1>
<div id="affiche-son"></div>
<div id="audio-keyboard">
  <div class="voyelles">
    <div data-ltr="a">a</div>
    <div data-ltr="e">e</div>
    <div data-ltr="i">y<br />i</div>
    <div data-ltr="o">o</div>
    <div data-ltr="u">u</div>
  </div>
  <div class="consonnes">
    <div data-ltr="l">l</div>
    <div data-ltr="f">f</div>
    <div data-ltr="ch">ch</div>
    <div data-ltr="s">s</div>
    <div data-ltr="m">m</div>
    <div data-ltr="r">r</div>
    <div data-ltr="n">n</div>
    <div data-ltr="v">v</div>
  </div>
  <div class="consonnes">
    <div data-ltr="j">j</div>
    <div data-ltr="z">z</div>
    <div data-ltr="p">p</div>
    <div data-ltr="t">t</div>
    <div data-ltr="c">c</div>
    <div data-ltr="b">b</div>
    <div data-ltr="d">d</div>
    <div data-ltr="g">g</div>
  </div>
</div>

Code css :

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
 
#audio-keyboard > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
#audio-keyboard > div > div {
  /* touches */
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px;
  padding: 0;
  border: 1px black solid;
  cursor: pointer;
  background: #eee;
  border-radius:5px;
  font-size:120%;
  font-family:Arial,sans-serif;
}
#audio-keyboard > div.voyelles > div {
  background:#000; 
  color:#fff;
}
/* ---- */
#affiche-son {
  width: 80px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px auto;;
  padding: 0;
  border: 1px green solid;
  color:green;
  cursor: pointer;
  background: #eee;
  border-radius:5px;
  font-size:150%;
  font-family:Arial,sans-serif;
}
/* ---- */
/* deco */
#audio-keyboard {
  margin: 1%;
}
h1 {
  text-align: center;
}

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
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
// ---------------------
// audio-keyboard
// Lettres et syllabes
// ---------------------
'use strict';
// Définition de l objet
var audio_keyboard = {
  init:function()
  {
    // -----------------
    // fichier mp3
    // Les fichiers mp3 ont le meme nom que la lettre/syllabe à jouer
    // lettres : a.mp3, l.mp3, ch.mp3,...
    // syllabes : al.mp3, la.mp3, cha.mp3,...
     this.rep_music = 'musics/'; // dossier des musiques (ne pas oublier le / à la fin) : A ADAPTER
   // -----------------
    // Définition des variables
    this.lettre = '';
    this.arr_syllabe = [];	// array (à cause du "ch", qui va donner une syllabe de plus de 2 lettres)
    this.chr_syllabe = '';	// chaine (ex. : 'la', 'cha',...)
    // ----
    // faire ici la liste de tous les sons de syllabes (qui ont un fichier mp3)
    this.o_son_syllabe = [  // array
      'la','al',
      'fa','af',
      'ma','am',
      // .....
    ];
    // ----
    this.son = '';
    // ----
	// affichage à l'écran
    this.affiche_son = document.querySelector('#affiche-son');
    // -----------------
    // click sur une TOUCHE (ECRAN)
    var ceci = this;
    this.touches = document.querySelectorAll('#audio-keyboard > div > div');
    this.touches.forEach(function (touche) {
      touche.addEventListener('click', function () {
        ceci.lettre = touche.dataset.ltr; // on récupère la lettre dans data-let="x"
        ceci.play_lettre();
        ceci.arr_syllabe.push(ceci.lettre); // ajoute la lettre à arr_syllabe
        if( ceci.arr_syllabe.length==2 ) 
        {
          ceci.play_syllabe();
          ceci.arr_syllabe = [];
        }
      });
    });
  },
  // -----------------
  play_lettre:function() 
  {
    this.son = this.lettre+'.mp3';
    this.playSound( this.son );
    this.affiche_son.textContent = this.lettre; // affiche à l'écran
  },
  // -----------------
  play_syllabe:function() 
  {
    var ceci = this;
    this.chr_syllabe = this.arr_syllabe.join(''); // on concatène
    if( this.o_son_syllabe.includes(this.chr_syllabe) )
    {
      this.son = this.o_son_syllabe[this.chr_syllabe];
      setTimeout(function()
      {
        ceci.playSound(ceci.son);
        ceci.affiche_son.textContent = ceci.chr_syllabe;
      }, 1500); // on décale 1.5 secondes (le temps d'entendre la LETTRE précédente) : A ADAPTER
    }
  },
  // -----------------
  playSound:function()
  {
    var audio = new Audio( this.rep_music+this.son );
    audio.play();
  }
};
	// -------------------
	// au chargement de page
	window.addEventListener('load', function(){
		audio_keyboard.init();
	});
	// -------------------

**bahh66** · 01/10/2018, 19h15

Décidément tu anticipes mes idées maintenant.

En revanche, je n'ai plus le son de la syllabe qui se joue et là, déjà que j'étais un peu dépassé, je comprends plus les différences.

Invité · 01/10/2018, 19h25

Bonjour,

1- J'ai défini un dossier pour les fichiers mp3 :

Code :

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

this.rep_music = 'musics/';

Si ils sont à un autre endroit, il te faut adapter.
ex. : "au même endroit" (que le fichier HTML):

Code :

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

this.rep_music = '/';

ou

Code :

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

this.rep_music = '';

2- et comme je l'ai précisé :

Code JavaScript :

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

1
2
3
4
5
    // -----------------
    // fichier mp3
    // Les fichiers mp3 ont le meme nom que la lettre/syllabe à jouer
    // lettres : a.mp3, l.mp3, ch.mp3,...
    // syllabes : al.mp3, la.mp3, cha.mp3,...

3- J'ai aussi modifié :

Code html :

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

    <div data-ltr="a">a</div>

data-ltr, au lieu de data-let, pour ne pas confondre avec let, qui est un mot réservé en JavaScript : version récente de "l'ancien" var.

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

JavaScript

Discussions similaires

Partager

Partager