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