Discussion :

[bahh66]

J'ai bien vérifié tous les éléments, les fichiers sont bien nommés et dans le bon dossier, mais rien n'y fait.

Le son a.mp3 se lit puis le l.mp3 mais le son al.mp3 non.
En revanche, j'ai bien tous les affichages dans le rectangle vert.

Tu as réussi à le lire chez toi, j'ai du faire une erreur mais j'ai juste copié le code que tu as donné et enlevé le \\ dans la fonction playSound

Je suis encore en mode boulet désolé

[Invité]

Peux-tu m'envoyer les fichiers mp3 (en MP : je peux te donner mon email perso)
Afin que je TESTE ?

[Invité]

Bonjour,

Arghh. Mea culpa

• Corrigé : https://codepen.io/jreaux62/pen/ePNRma

Il faut juste remplacer la ligne :

Code JavaScript :

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

      this.son = this.o_son_syllabe[this.chr_syllabe];

par :

Code JavaScript :

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

      this.son = this.chr_syllabe+'.mp3';

Par contre, le fichier la.mp3 que tu m'as envoyé fait : "Ouille" !

[bahh66]

oui je sais mais avant d'enregistrer toutes les syllabes, je voulais faire un test donc j'ai pris un autre son au hasard

[bahh66]

Je pensais est ce que je peux déplacer la ligne

Code :

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

1
2
 
          ceci.arr_syllabe = [];

dans un autre bouton "reset", comme ça je pourrai rajouter une autre ligne

Code :

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

1
2
3
4
 
        if (ceci.arr_syllabe.length == 3)
        {
          ceci.play_syllabe();

pour pouvoir jouer des syllabes commre bra ou encore bal?

[Invité]

Tu veux dire des sons de 3 "lettres" (sachant que la touche "ch" compte pour 1 "lettre").

Oui, j'y avais pensé.
Mais alors, il faut pour voir aussi gérer les décalages.

ex. :

• "b" -> b.mp3
• "a" -> a.mp3
• -> ba.mp3 APRES 1.2 secondes de délai (pour ne pas jouer en même temps que a.mp3)

Jusque là, ça va.

Maintenant, si après "b" et "a", je clique sur "l", il se passe quoi ?

• "b" -> b.mp3
• "a" -> a.mp3
• -> ba.mp3 APRES 1.2 secondes de délai (pour ne pas jouer en même temps que a.mp3)
• "l" -> l.mp3
• Là, ça se corse : on peut jouer al.mp3 ET bal.mp3 ! -> il faut prévoir un délai supplémentaire, pour ne pas que les 2 sons se mélangent à l'écoute.

De plus, il faudrait attendre le clic sur la 3ème lettre pour vérifier s'il faut effacer ou non la syllabe.

Tu constates que c'est bien plus complexe que de "déplacer la ligne" !!


En fait, il faut :

• renommer "syllabe" en "syllabe_2" (pour 2 "lettres" - ex. : b+a, ch+a,...)
  et renommer o_son_syllabe en o_son_syllabe_2
• ET définir une nouvelle variable, qu'on appellera "syllabe_3" (pour 3 "lettres" - ex. : b+a+l, ch+a+r,...)
  et définir o_son_syllabe_3, pour lister les sons de 3 "lettres"

Ensuite :

• vérifier qu'on a une syllabe_2 dans o_son_syllabe_2
  - Oui : -> on la joue avec un délai de 1.2s.
  - Non : on initialise syllabe_2 = [];
• vérifier qu'on a une syllabe_3 dans o_son_syllabe_3
  - Oui :
  -- SI on avait une syllabe_2 -> on la joue avec un délai de 2.4s.
  -- SI on N'avait PAS de syllabe_2 -> on la joue avec un délai de 1.2s.
  - Non : on initialise syllabe_3 = [];

Ca va aller ?
Tu vas t'en sortir ??

Sinon, renvoie-moi quelques sons mp3 (mais des vrais ! Pas un "la" qui fait "ouille" !)

[Invité]

Sinon.....

.... il existe une solution plus simple :

Ajouter un champ/<input> pour définir le nombre de "lettres" que doit comporter une syllabe !
Auquel cas, on ne mélange pas les sons de 2 lettres avec ceux de 3 lettres.

C'est quand même plus simple à gérer.


[EDIT] Voici le code "qui fait la farce" : https://codepen.io/jreaux62/pen/jebXWj

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
<h1>Lettres et syllabes</h1>
<h2>(syllabes de <input type="number" id="input-nbr" min="2" max="3" value="2" /> lettres)</h2>
 
<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
52
53
54
55
56
57
58
59
60
61
62
 
#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: 200px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px auto;;
  padding: 0;
  border: 1px green solid;
  color:green;
  background: #eee;
  border-radius:5px;
  font-size:150%;
  font-family:Arial,sans-serif;
}
/* ---- */
/* deco */
#audio-keyboard {
  margin: 1%;
}
h1 {
  font-size:180%;
  text-align: center;
  margin-bottom:0;
}
h2 {
  font-size:120%;
  font-weight:normal;
  text-align:center;
}
h2 > input {
  display:inline-block;
  padding:2px;
  width:40px;
}

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
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
// ---------------------
// audio-keyboard
// Lettres et syllabes
// ---------------------
'use strict';
// Définition de l objet
var audio_keyboard = {
  init:function()
  {
    // -----------------
    // fichier mp3
    // IMPORTANT :Les fichiers mp3 doivent avoir le meme nom que la lettre/syllabe à jouer
    // lettres : a.mp3, l.mp3, ch.mp3,...
    // syllabes : al.mp3, la.mp3, cha.mp3,...
    // ----
    // dossier des musiques (ne pas oublier le / à la fin)
    this.rep_music = 'musics/'; 
    // -----------------
    // 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',...)
    // ----
    this.nbr = 2;	// nombre de lettre par syllabe (2 par défaut)
    // ----
    // faire ici la liste de tous les sons de syllabes (qui ont un fichier mp3)
    this.o_son_syllabe = [];  // array
    // syllabes de 2 "lettres" (ex.: 'l+a', 'ch+a',...)
    this.o_son_syllabe[2] = [  
      'la','al',
      'fa','af',
      'ma','am',
      'cha','ach', // 'ch'+'a'
      // .....
    ];
    // ----
    // syllabes de 3 "lettres" (ex.: 'l+a+c', 'ch+a+r',...)
    this.o_son_syllabe[3] = [  
      'lac','bal',
      'far','baf',
      'mar','ram',
      'char','arch', // 'ch'+'a'+'r'
      // .....
    ];
    // ----
    this.son = '';
    // ----
    // affichage à l'écran
    this.affiche_son = document.querySelector('#affiche-son');
    // -----------------
    // changer le nombre de lettres
    var ceci = this;
    this.input_nbr = document.querySelector('#input-nbr');
    this.input_nbr.addEventListener('change', function () {
      ceci.nbr = this.value; // attention : this fait ici référence à l'input !
    });
    // -----------------
    // 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.arr_syllabe.push(ceci.lettre); // ajoute la lettre à arr_syllabe
        // ------
        // lettre
        ceci.play_lettre();
        // syllabe
        if( ceci.arr_syllabe.length==ceci.nbr ) 
        {
          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
    var chr_syllabe_sum = this.arr_syllabe.join('+'); // on concatène
    this.affiche_son.textContent = chr_syllabe_sum;
  },
  // -----------------
  play_syllabe:function() 
  {
    var ceci = this;
    this.chr_syllabe = this.arr_syllabe.join(''); // on concatène
    var chr_syllabe_sum = this.arr_syllabe.join('+'); // on concatène
    if( this.o_son_syllabe[this.nbr].includes(this.chr_syllabe) )
    {
      this.son = this.chr_syllabe+'.mp3';
      setTimeout(function()
      {
        //     ceci.affiche_son.textContent = ceci.chr_syllabe;
        ceci.affiche_son.textContent = chr_syllabe_sum+' = '+ceci.chr_syllabe;
        ceci.playSound(ceci.son);
      }, 1200); // on décale 1.2 secondes (le temps d'entendre la LETTRE précédente) : A ADAPTER
    }
  },
  // -----------------
  playSound:function()
  {
    //	var audio = new Audio( this.rep_music+this.son ); // à remettre en PROD
    //	audio.play(); // à remettre en PROD
    console.log( this.son );
  }
};
// -------------------
// au chargement de page
window.addEventListener('load', function(){
  audio_keyboard.init();
});
// -------------------

[bahh66]

ah ouais c'est si compliqué que ça...
je pensais qu'en fait cela jouerai
- d'abord la 1ère lettre,
- puis au deuxième clic la deuxième lettre et la syllabe 2 lettres avec un décalage de 1.2s
- et au 3ème clic la 3ème lettre et la syllabe 3 lettres avec un décalage de 1.2s par rapport au dernier clic

donc pour moi il n'y avait pas de chevauchement possible dans les sons, mais bon je te crois sur paroles.

et j'ai créé un autre topic pour le css.

merci pour tout

[Invité]

Exemple : b+a+l

Au moment où on clique sur le "l" :
3 sons sont possibles :

• "l"
• "al" -> tempo 1,2s
• "bal" -> tempo 2,4s

Sans tempo, ils seraient joués en même temps.

[bahh66]

De toutes façons c'est pas grave, c'est génial comme tu as fait.

Mis à part que tu es un farceur, quand j'ai testé, les sons ne se jouaient pas, en allant voir le code, j'ai vu que tu avais modifié music en musicS