Emission de sons avec les touches du clavier

**d3LTa7** · 04/09/2018, 13h58

Bonjour les gens =)

J'ai attaqué un petit projet perso depuis hier suite à mon apprentissage de JS (débutant), faire des sons de batterie avec les touches du clavier ou en cliquant sur les touches dessinées sur l'écran !!

mon projet avance pas trop mal mais je me heurte à pas mal de souci et c'est là que j'aurais besoin de vos conseils

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
 
<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="drum.css" />
        <title>Drum</title>
    </head>
    <body>
        <h1>DRUM</h1>
        <div id='keyboard'>
            <div id="link1">Q</div>
            <div id="link2">S</div>
            <div id="link3">D</div>
            <div id="link4">F</div>
            <div id="link5">G</div>
            <div id="link6">H</div>
            <div id="link7">J</div>
            <div id="link8">K</div>
        </div>
        <audio autoplay='false' id="monSon1" src="Son/Clap.wav"></audio>
        <audio autoplay='false' id="monSon2" src="Son/Cymbal.wav"></audio>
        <audio autoplay='false' id="monSon3" src="Son/Hat.wav"></audio>
        <audio autoplay='false' id="monSon4" src="Son/Hhat.wav"></audio>
        <audio autoplay='false' id="monSon5" src="Son/Kick.wav"></audio>
        <audio autoplay='false' id="monSon6" src="Son/Snare.wav"></audio>
        <audio autoplay='false' id="monSon7" src="Son/Tom1.wav"></audio>
        <audio autoplay='false' id="monSon8" src="Son/Tom2.wav"></audio>
    </body>
    <script src="drum.js"></script>
</html>

CSS :

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
 
#keyboard{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 10%;
    padding: 0px;
}
 
#link1, #link2, #link3, #link4, #link5, #link6, #link7, #link8{
    margin: 3px;
    padding: 3px;
    border: 1px black solid;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
h1{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10%;
    font-size: 60px;
}

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
 
document.addEventListener('keypress',touche);        
 
function touche(){
    if(keyCode == 113){
        var son1 = document.getElementById('monSon1');
        son1.play();
    }else if(keyCode == 115){
        var son2 = document.getElementById('monSon2');
        son2.play();
    }else if(keyCode == 100){
        var son3 = document.getElementById('monSon3');
        son3.play();
    }else if(keyCode == 102){
        var son4 = document.getElementById('monSon4');
        son4.play();
    }else if(keyCode == 103){
        var son5 = document.getElementById('monSon5');
        son5.play();
    }else if(keyCode == 104){
        var son6 = document.getElementById('monSon6');
        son6.play();
    }else if(keyCode == 106){
        var son7 = document.getElementById('monSon7');
        son7.play();
    }else if(keyCode == 107){
        var son8 = document.getElementById('monSon8');
        son8.play();
    }
}
 
// ici c'est une partie test !
 
var clik = document.getElementById('link1');
clik.addEventListener('click',clique);
 
function clique(){
    if(onclick('link1')){
        var son1 = document.getElementById('monSon1');
        son1.play();
    }else if(onclick('link2')){
        var son2 = document.getElementById('monSon2');
        son2.play();}
}
 
// dans cette partie je voulais creer un tableau pour pouvoir changer le style css avec chaque div
 
var q = document.getElementById('link1');
var s = document.getElementById('link2');
var d = document.getElementById('link3');
var f = document.getElementById('link4');
var g = document.getElementById('link5');
var h = document.getElementById('link6');
var j = document.getElementById('link7');
var k = document.getElementById('link8');
var link = [q,s,d,f,g,h,j,k];
 
document.addEventListener('keydown',enable);
function enable(){
   for(var i=0;i<link.length;i++){
        link[i].style.backgroundColor = 'black';
        link[i].style.color = 'white';
        console.log(link[i])
    }
  }  
document.addEventListener('keyup',disable);
function disable(){
    for(var i=0;i<link.length;i++){
        link[i].style.backgroundColor = 'transparent';
        link[i].style.color = 'black';
    }
}

Donc vous verrez que c'est loin d'être au point... Dans la méthode, j'avais pensé à une variable qui puisse cibler la div de la touche + jouer le son quand on appuis sur la touche + jouer le son quand on clique dessus (et donc sur la div) et qui change aussi le style css... et du coup mettre cette variable dans un tableau et du coup faire quelques chose de plus générique !!

Par contre il m'est difficile de partager via ce forum ma banque de son, mais j'imagine que cela ne sera pas important

Invité · 04/09/2018, 16h49

Bonjour,

Tes scripts manquent... de réflexion !
Du coup, ça devient vite fastidieux...

1- AVANT de coder, il faut RÉFLÉCHIR :

Pourquoi appeler les touches id="link1", id="link2",....
alors que les touches du clavier associées sont "113", "115",... ?
Ensuite, tu crées des variables q, s,....

Autant mettre les même numéros : ce sera bien plus pratique, et on pourra s'en servir directement pour identifier :

les touches,
les touches du clavier,
les musiques à jouer,... !

2- On peut générer les touches HTML à partir d'un objet JavaScript, avec les bons indices (charCode, txt, music).
C'est plus facile à gérer, et on peut ajouter facilement d'autres touches par la suite.

3-on n'est pas obligé d'avoir des balises <audio> pour jouer du son en JavaScript.
Il existe HTMLAudioElement, et play().

Bref, voici ce que ça donne (petit exercice perso) : https://codepen.io/jreaux62/pen/ZMyBvp

Code html :

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

1
2
	<h1>DRUM</h1>
	<div id="audio-keyboard"></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
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;
}

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
// ------------------------
// 1- définition des touches et des fichiers musiques associées
var keyboard = [
	{ 'charCode':113,'keyName':'Q','music':'https://www.memoclic.com/medias/sons-wav/2/729.wav'},
	{ 'charCode':115,'keyName':'S','music':'https://www.memoclic.com/medias/sons-wav/2/728.wav'},
	{ 'charCode':100,'keyName':'D','music':'https://www.memoclic.com/medias/sons-wav/2/727.wav'},
	{ 'charCode':102,'keyName':'F','music':'https://www.memoclic.com/medias/sons-wav/2/726.wav'},
	{ 'charCode':103,'keyName':'G','music':'https://www.memoclic.com/medias/sons-wav/2/725.mp3'},
	{ 'charCode':104,'keyName':'H','music':'https://www.memoclic.com/medias/sons-wav/2/724.mp3'},
	{ 'charCode':106,'keyName':'J','music':'https://www.memoclic.com/medias/sons-wav/2/723.mp3'},
	{ 'charCode':107,'keyName':'K','music':'https://www.memoclic.com/medias/sons-wav/2/722.mp3'},
];
//  console.log( keyboard );
// ------------------------
// 2- 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.setAttribute('data-key',key.charCode);
	div_touche.setAttribute('data-music',key.music);
	div_touche.textContent = key.keyName;
	div_audio_keyboard.appendChild(div_touche);
  // de la forme : <div class="touche" id="touche-113" data-key="113" data-music="xxxxxxxxxx.mp3">Q</div>
});
// ------------------------
// 3- click sur une TOUCHE (ECRAN)
var touches = document.querySelectorAll('.touche');
touches.forEach( function(touche){
	touche.addEventListener('click',function(){
//		console.log('play : '+touche.dataset.key );
		playSound(touche);
	});
});
// ------------------------
// 4- click au CLAVIER
document.addEventListener('keypress', function(event){
//	console.log(event);
  var touche = document.getElementById('touche-'+event.charCode);
	if( touche ) { playSound(touche); }
});
// ------------------------
// 5- play
function playSound(touche){
	// touche
	touche.style.backgroundColor = "grey";
	setTimeout(function(){ touche.style.backgroundColor = ""; }, 200);
	// player audio
	var audio = new Audio(touche.dataset.music);
	audio.play();
}
// ------------------------

N.B. J'ai aussi trouvé ce site : https://papiermusique.fr/piano-virtuel.php
(par contre, le code JS est minifié, et donc difficile à déchiffrer...)

Au fait : il faut que tu convertisses tes fichiers musique en .mp3.

le MP3 est le format musical ~~standard~~ le plus répandu sur Internet.

**d3LTa7** · 04/09/2018, 18h09

Merci beaucoup pour ta réponse rapide Jreaux !

En faite j'essaye de faire des choses en fonction de ce que j'ai déjà vu avant et en cherchant sur internet... du coup j'essaye de rassembler des morceaux de puzzle par ci par la mais bon... Des fois sur le net je trouve pas vraiment ce que je veux et j'essaye des fois de faire le rapprochement avec mon sujet tant bien que mal... Mais des fois le résultat n’est pas celui voulu...

Au niveau réflexion, je sais pas trop, et c'est vrai que c'est pas facile de retranscrire à l'écrit ce que j'ai en tête dans la démarche de la réalisation du projet... Un vrai brainstorming

Par contre la ou je suis content c'est que j'arrive de mieux en mieux a lire les code et à faire certaines choses très basique par moi même...

Bref je vais bien y arriver à force...

Mais il faut que je continu ce genre de petit travaux qui met en place les bases de JS avec des array des conditions et des events !! C'est super interessant en tout cas =)

PS: Je viens de bien relire ton code... Ca reste encore bien complexe...

**Watilin** · 04/09/2018, 22h24

Envoyé par jreaux62

3-on n'est pas obligé d'avoir des balises <audio> pour jouer du son en JavaScript.

J’irais même plus loin sur cette affirmation, il faut utiliser l’API Web Audio dès lors qu’on a besoin d’un minimum de précision. C’est un problème que j’ai rencontré récemment dans un projet personnel (pour les curieux et curieuses il s’agit de Mean Bean : démo – dépôt de source). Cet article du studio de jeux vidéo Radical Fish Games m’a beaucoup aidé.

Les parties intéressantes :

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
// AssetManager //////////////////////////////////////////////////
    ...
 
    loadAudio: function loadAudio(resource) {
      let req = new XMLHttpRequest();
      req.responseType = 'arraybuffer';
 
      req.onerror = () => {
        console.warn(`audio asset "${resource.name}" failed to load`);
        this.errorCount++;
        this.checkCompletion();
      };
 
      req.onload = () => {
        this.audioContext.decodeAudioData(req.response, (decodedData) => {
          this.assets[resource.name] = {
            url: resource.url,
            buffer: decodedData,
          };
          this.loadCount++;
          this.checkCompletion();
        }, (error) => {
          console.warn(`could not decode audio data for "${resource.name}"`);
          this.errorCount++;
          this.checkCompletion();
        });
      };
 
      req.open('GET', resource.url);
      req.send();
    },
 
    ...
 
// AudioPlayer /////////////////////////////////////////////////////////
 
    ...
 
    playClip: function playClip(clipName) {
      let buffer = this.assetManager.getAsset(clipName).buffer;
      let node = this.audioContext.createBufferSource();
      node.buffer = buffer;
      node.connect(this.audioContext.destination);
      node.start(0);
    },
 
    ...

Envoyé par jreaux62

Au fait : il faut que tu convertisses tes fichiers musique en .mp3.
le MP3 est le format musical standard sur Internet.

Bon. J’ai essayé de te contredire là-dessus, mais après quelques recherches, je ne trouve rien qui confirme mon intuition selon laquelle le Web est basé sur des formats libres. Si tu as un document pour appuyer tes propos, je te serais reconnaissant de le partager

Il faut noter que le mp3 n’est pas un format libre : les éditeurs de logiciel payent des royalties dessus quand ils offrent la possibilité de créer un fichier dans ce format.
C’est la raison pour laquelle il faut inclure à la main la dll lame_enc dans Audacity sous Windows, et pour laquelle certaines distributions Linux n’en incluent pas les codecs à l’installation.

Mozilla et Google mettent en avant les formats ouverts Vorbis et Opus, dans un conteneur Ogg ou WebM.

Pour plus d’infos voir Formats pris en charge par <audio> et <video>.

Le Wav a l’avantage d’être un format non compressé, qui demande donc peu de puissance de calcul. En contrepartie, il est volumineux et va donc consommer beaucoup de bande passante. Intéressant si utilisé conjointement à une bonne gestion du cache, ou à une application en mode hors-ligne.

Invité · 04/09/2018, 23h04

@Watilin

Je ne suis pas un spécialiste, mais il suffit de regarder, dans le lien que tu donnes, le tableau de "compatibilité des navigateurs".

Que ce soit en audio ou vidéo, on trouve 10000 formats !... C'est un vrai casse-tête.
L'inconvénient en audio et en vidéo, c'est qu'on doit fournir plusieurs formats* si on veut couvrir tous les navigateurs.
Ce qui est très pénible et contraignant.

Pour l'audio, MP3 est encore celui qui fournit la couverture la plus large.
Faute d'être "standard", c'est le format le plus commun et le plus utilisé.

A quand un véritable "format web standard", compatible tous navigateurs ?

* Pour la vidéo, c'est tout l'intérêt des YouTube, dailymotion ou Vimeo, qui font le travail à notre place.
(avec leurs avantages et inconvénients)

**d3LTa7** · 10/09/2018, 16h12

Bonjour

J'essaye de refaire le code en suivant l'exemple de Jreaux62, mais je ne vois pas comment remplacer les liens internet de son par des liens d'un dossier ou il y a déjà une banque de son !

Merci

Invité · 10/09/2018, 17h06

Bonjour,

Comme ça :

Code JavaScript :

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

1
2
3
var keyboard = [
	{ 'charCode':113,'keyName':'Q','music':'Son/Clap.wav'},
...

Où est le souci ?

**d3LTa7** · 10/09/2018, 17h39

J'ai pas de son qui sort !!

Le problème vient d'ailleurs alors !! Je vais cherché !!

Merci

Invité · 10/09/2018, 18h02

Je vient de tester : https://codepen.io/jreaux62/pen/ZMyBvp

Ça fonctionne avec des .mp3 : sur Firefox, Opera, Google Chrome, tablette Android (Chrome) ET Edge !
Ça fonctionne avec des .wav : sur Firefox, Opera, Google Chrome, tablette Android (Chrome), MAIS PAS sur Edge !

Code html :

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

1
2
	<h1>Halloween</h1>
	<div id="audio-keyboard"></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
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;
}

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
'use strict';
// ------------------------
// 1- définition des touches et des fichiers musiques associées
var keyboard = [
	{ 'charCode':113,'keyName':'Q','music':'https://www.memoclic.com/medias/sons-wav/2/729.wav'},
	{ 'charCode':115,'keyName':'S','music':'https://www.memoclic.com/medias/sons-wav/2/728.wav'},
	{ 'charCode':100,'keyName':'D','music':'https://www.memoclic.com/medias/sons-wav/2/727.wav'},
	{ 'charCode':102,'keyName':'F','music':'https://www.memoclic.com/medias/sons-wav/2/726.wav'},
	{ 'charCode':103,'keyName':'G','music':'https://www.memoclic.com/medias/sons-wav/2/725.mp3'},
	{ 'charCode':104,'keyName':'H','music':'https://www.memoclic.com/medias/sons-wav/2/724.mp3'},
	{ 'charCode':106,'keyName':'J','music':'https://www.memoclic.com/medias/sons-wav/2/723.mp3'},
	{ 'charCode':107,'keyName':'K','music':'https://www.memoclic.com/medias/sons-wav/2/722.mp3'},
];
//  console.log( keyboard );
// ------------------------
// 2- 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);
  // de la forme : <div class="touche" id="touche-113" data-key="113" data-music="xxxxxxxxxx.mp3">Q</div>
});
// ------------------------
// 3- click sur une TOUCHE (ECRAN)
var touches = document.querySelectorAll('.touche');
touches.forEach( function(touche){
	touche.addEventListener('click',function(){
//		console.log('play : '+touche.dataset.key );
		playSound(touche);
	});
});
// ------------------------
// 4- click au CLAVIER
document.addEventListener('keypress', function(event){
//	console.log(event);
  var touche = document.getElementById('touche-'+event.charCode);
	if( touche ) { playSound(touche); }
});
// ------------------------
// 5- play
function playSound(touche){
	// touche
	touche.style.backgroundColor = "grey";
	setTimeout(function(){ touche.style.backgroundColor = ""; }, 200);
	// player audio
	var audio = new Audio(touche.dataset.music);
	audio.play();
}
// ------------------------

**d3LTa7** · 11/09/2018, 11h29

Ok c'est bon j'ai trouvé =)

En faite j'ai recopié ton code en essayant de comprendre chaque ligne et pour bien faire j'ai changé certains noms !! sauf que le "music" est apparemment natif dans JS et que le changer perturbe le fonctionnement du code

Invité · 11/09/2018, 11h57

De quel "music" parles-tu ?

Les seuls éléments à ne pas changer sont :

Code JavaScript :

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

1
2
3
	// player audio
	var xxxxx = new Audio(...............);
	xxxxx.play();

Concernant "music" :
1- on le trouve d'abord ici

Code :

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

1
2
3
var keyboard = [
	{ 'charCode':113,'keyName':'Q','music':'https://www.memoclic.com/medias/sons-wav/2/729.wav'},
...

Celui-ci est repris ici, pour créer l'attribut "data-music" :

Code :

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

	div_touche.setAttribute('data-music',key.music);

2- On peut modifier, sans perturber :

Code :

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

1
2
3
var keyboard = [
	{ 'charCode':113,'keyName':'Q','keyMusic':'https://www.memoclic.com/medias/sons-wav/2/729.wav'},
...

Code :

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

	div_touche.setAttribute('data-music',key.keyMusic);

Mais on ne modifie pas l'attribut "data-music", car il est repris ici :

Code :

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

	var audio = new Audio(touche.dataset.music);

3- ou alors, en modifiant aussi l'attribut :

Code :

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

	div_touche.setAttribute('data-urlMusic',key.keyMusic);

Code :

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

	var audio = new Audio(touche.dataset.urlMusic);

Comme tu vois, il faut savoir ce qui fait quoi, où et comment.

Si tu as besoin d'autres explications :
1- fais d'abord une recherche sur l'attribut/fonction que tu ne comprends pas (.dataset ? .setAttribute() ? ... ?)
2- sinon, demande-le, on t'expliquera

**Watilin** · 11/09/2018, 17h18

Envoyé par jreaux62

3- ou alors, en modifiant aussi l'attribut :

Code :

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

	div_touche.setAttribute('data-urlMusic',key.keyMusic);

Code :

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

	var audio = new Audio(touche.dataset.urlMusic);

Attention à la casse :

Les attributs html y sont insensibles et data-urlMusic est équivalent à data-urlmusic ;
Les propriétés dataset y sont sensibles et sont « dé-camelcase-isées » de la même façon que les propriétés de style :
- dataset.urlmusic est converti en l’attribut data-urlmusic
- dataset.urlMusic est converti en l’attribut data-url-music

Mon interprétation personnelle, c’est que dataset est prévu justement pour qu’on n’ait pas besoin d’appeler setAttribute.

Invité · 11/09/2018, 18h29

@Watilin
Oui, tu as raison.

1- le "urlMusic" était juste pour l'exemple (montrer quelles variables on peut changer dans mon code initial)
2- j'ai mis setAttribute, parce que... j'ai été trop vite, et j'ai mal lu la doc dataset !! (j'ai cru lire que c'était en lecture seule !)

Du coup, on peut effectivement remplacer :

Code JavaScript :

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

1
2
	div_touche.setAttribute('data-key',key.charCode);
	div_touche.setAttribute('data-music',key.music);

par :

Code JavaScript :

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

1
2
	div_touche.dataset.key = key.charCode;
	div_touche.dataset.music = key.music;

Par contre, on garde :

Code JavaScript :

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

	div_touche.setAttribute('id','touche-'+key.charCode);

N.B. En fait, j'ai plus l'habitude avec la syntaxe jQuery.
Mais je "me force" à coder en JavaScript, justement pour apprendre/ne pas perdre la syntaxe JS.

**d3LTa7** · 13/09/2018, 15h26

Hummmm ok je vois... Je pense ne pas avoir remplacer le mot music partout et donc ce qui aurait causé le problème !!

Après dans l'ensemble du code, en l'étudiant et en le décortiquant je pense ( et espère) le comprendre, mais c'est vrai que là ça commence un peu à piquer ^^

Ceci dit, la dernière fonction est un peu super complexe... Peut on la simplifier ? Il y a une fonction dans une fonction avec un 'setTimeout' , j'ai du mal à comprendre cette partie au final... Je vois ce qu'elle fait mais c'est plus dans la manière de créer et du coup de penser...

Et sinon des questions j'en ai plein et j'en aurais plein mais pas forcément sur cet exercices...

Invité · 13/09/2018, 15h37

Bonjour,

Code :

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

1
2
	touche.style.backgroundColor = "grey";
	setTimeout(function(){ touche.style.backgroundColor = ""; }, 200);

1- On applique un fond gris à la touche.
2- après 200 millisecondes, on l'enlève.

Emission de sons avec les touches du clavier

JavaScript

Discussions similaires

Partager

Partager