Emission de sons avec les touches du clavier

Version imprimable

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:

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:

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:

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 ;)

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:

1
2
	<h1>DRUM</h1>
	<div id="audio-keyboard"></div>

Code:

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:

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.

04/09/2018, 18h09
d3LTa7

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 :D 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... :traine:

Citation:

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:

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); }, ...
Citation:

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.

04/09/2018, 23h04
Invité

@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)
10/09/2018, 16h12
d3LTa7

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

Bonjour,

Comme ça :
Code:

1 2 3 var keyboard = [ { 'charCode':113,'keyName':'Q','music':'Son/Clap.wav'}, ...
Où est le souci ? 8O

10/09/2018, 17h39
d3LTa7

J'ai pas de son qui sort !!

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

Merci

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 ! :calim2:

Code:

1
2
	<h1>Halloween</h1>
	<div id="audio-keyboard"></div>

Code:

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:

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();
}
// ------------------------

11/09/2018, 11h29
d3LTa7

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 :)
11/09/2018, 11h57
Invité
De quel "music" parles-tu ?

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

1 2 3 // player audio var xxxxx = new Audio(...............); xxxxx.play();
- new Audio()
- .play()
Concernant "music" :
1- on le trouve d'abord ici
Code:

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:

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

2- On peut modifier, sans perturber :
Code:

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

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

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

Code:

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

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

Code:

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

Code:

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
11/09/2018, 17h18
Watilin
Citation:

Envoyé par jreaux62

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

Code:

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

Code:

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.
11/09/2018, 18h29
Invité
@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:

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

1 2 div_touche.dataset.key = key.charCode; div_touche.dataset.music = key.music;
Par contre, on garde :

Code:

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.
13/09/2018, 15h26
d3LTa7

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... ;)
13/09/2018, 15h37
Invité
Bonjour,
Code:

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.