Mise en forme de boutons en forme de piano.

**bahh66** · 02/10/2018, 15h13

Bonjour,

je souhaiterai mettre en forme la page html créer par jreaux62 (encore merci)

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
 
<!DOCTYPE html><html class=''>
<head>
 
 
<style class="cp-pen-styles">
#audio-keyboard > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
#audio-keyboard > div > div {
  /* touches */
  width: 50px;
  height: 100px;
  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;
}
</style></head><body>
<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 data-ltr="é">é</div>
    <div data-ltr="è">è</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 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>
 
<script src='//static.codepen.io/assets/common/stopExecutionOnTimeout-41c52890748cd7143004e05d3c5f786c66b19939c4500ce446314d1748483e13.js'></script>
<script >// ---------------------
// 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)
    // -----------------
    // 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.chr_syllabe + '.mp3';
      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 ); // à remettre en PROD
    //	audio.play(); // à remettre en PROD
  } };
 
// -------------------
// au chargement de page
window.addEventListener('load', function () {
  audio_keyboard.init();
});
// -------------------
//# sourceURL=pen.js
</script>
</body></html>

J'ai fait quelques modifs pour transformer un peu plus les touches en longueur.
Mais mon soucis est que je souhaiterai doubler les voyelles en haut mais quand j'ajoute un deuxième div voyelle, cela me créé une ligne supplémentaire et non à coté.

Le deuxième soucis, c'est que les touches consonnes sont toutes de couleurs différentes or si je change la couleur du background, je change la couleur de toutes les touches. Est ce que je dois créer une classe par touche?

**bahh66** · 02/10/2018, 16h19

Pour la ligne de voyelles, j'ai fait

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
 
<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="i">y<br />i</div>
    <div data-ltr="o">o</div>
    <div data-ltr="u">u</div>
       <div data-ltr="e">e</div>
        <div data-ltr="é">é</div>
        <div data-ltr="è">è</div>
 
 
         <div data-ltr=""></div>
 
 
        <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 data-ltr="é">é</div>
        <div data-ltr="è">è</div>
  </div>

Mais du coup, j'ai une touche noire entre les deux séries de voyelles j'aimerai juste avoir l'espace sans rien, si c'est possible

Invité · 02/10/2018, 19h48

Bonjour,

1- Il va falloir revoir le code HTML : ajouter des <div>, des classes et/ou id...

2- pour les couleurs des touches, pas besoin de multiplier les classes ni id : voir le pseudo-element :nth-chid()

**bahh66** · 02/10/2018, 22h22

ok, j'ai vu que le nth-child() permettait donc de sélectionner un élément parmi plusieurs "enfants", le problème c'est que dans les explications que je trouve sur internet, je n'arrive pas à trouver s'il faut le mettre dans le css ou dans le html.

Code CSS :

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

1
2
 
<div : nth-child(1) {background= #100};>

Par exemple?

**bahh66** · 02/10/2018, 22h27

C'est bon j'ai réussi en mettant pour les consonnes

Code CSS :

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

1
2
 
#audio-keyboard > div > div:nth-child(1) {background:#f00}

et

Code CSS :

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

1
2
 
#audio-keyboard > div.voyelles > div:nth-child(8) {border: 1px white;}

pour la touche blanche au milieu des touches voyelles noires

C'est surement pas très conventionnel, j'imagine

Invité · 02/10/2018, 23h12

Le mieux est de faire 2 groupes :

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
<div>
 
<div class="group">
  <div class="voyelles">
...
  </div>
  <div class="consonnes">
...
  </div>
</div>
 
<div class="group">
  <div class="voyelles">
...
  </div>
  <div class="consonnes">
...
  </div>
</div>
 
</div>

Avec les group à 50% (avec parent en flex,....)

Du coup, on a un niveau de div en plus. Les touches sont alors en :

Code css :

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

#audio-keyboard > div > div > div { ...}

N.B. dans le fichier JS, il faudra aussi modifier (on a un niveau de div en plus) :
this.touches = document.querySelectorAll('#audio-keyboard > div > div > div');

Invité · 03/10/2018, 00h17

1- Je t'ai fait la mise en page générale : https://codepen.io/jreaux62/pen/zmrqBp ([EDIT] Bon... en fait : tout !)

Quand on réduit la largeur de la fenêtre :

la 2ème série de voyelles disparait
le 2ème série de consonnes passe sous la 1ère.

C'est un des avantages par rapport à une image (fixe) !

2- Reste à styler les touches (couleurs,...)

2-1 forme des touches (border-radius,...) :

Code css :

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

1
2
#audio-keyboard > div:first-child > div.voyelles > div { ... }
#audio-keyboard > div:first-child > div.consonnes > div { ... }

2-2 couleurs des touches (background, color) :
Pour cibler la 1ère série (première = :first-child) de consonnes (chaque touche de différente couleur) :
Et pour chaque touche de différente couleur :

Code css :

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

1
2
3
4
#audio-keyboard > div:first-child > div.consonnes > div:nth-child(1) { ... }
#audio-keyboard > div:first-child > div.consonnes > div:nth-child(2) { ... }
#audio-keyboard > div:first-child > div.consonnes > div:nth-child(3) { ... }
...

Pour cibler la 2ème série (dernière = :last-child) de consonnes (chaque touche de différente couleur) :

Code css :

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

1
2
3
4
#audio-keyboard > div:last-child > div.consonnes > div:nth-child(1) { ... }
#audio-keyboard > div:last-child > div.consonnes > div:nth-child(2) { ... }
#audio-keyboard > div:last-child > div.consonnes > div:nth-child(3) { ... }
...

3- Finalement... il te reste juste à ENREGISTRER CHAQUE SON !!
Tiens-moi au courant, OK ?

4- Ah, j'oubliais...
Pour que ta page soit "responsive", il faut ajouter dans le <head> :

Code html :

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

<meta name="viewport" content="width=device-width, initial-scale=1">

Mise en forme de boutons en forme de piano.

CSS

Discussions similaires

Partager

Partager