Des clicks et des sons

**d3LTa7** · 20/03/2019, 17h53

Bonsoir !

Voilà j'ai commencé à faire une interaction sympa avec du JS mais je bloque sur certaines possibilitées qui pourrait rendre la chose plus agréable.
Pour info, j'ai repris les bases sur un autre exercice d'avant et donc je pense qu'il doit y avoir des choses inutile.
En gros, pour le moment quand je clic sur les 2 éléments créés par JS (music1 et music2), ça me joue bien les musiques qui correspondent. Mais j'aimerais rajouter quelques options comme par exemple stopper la musique de music1 si je clique sur music2 (et qui lancera pour le coup la musique lié à music2 et vice versa) et aussi pouvoir stoper ou mettre en pause la musique si je reclique dessus.
Du coup je me demande s'il serait pas plus simple d'intégrer un petit lecteur pour chaque élément.
Voilà !! Merci d'avance pour votre aide

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="drum.css" />
        <title>Sound Project</title>
    </head>
    <body>
        <h1>Break</h1>
            <div id="audio"></div>
    </body>
    <script src="soundproject.js"></script>
</html>

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
var keyboard = [
    { 'charCode':113, 'keyName':'music1', 'music':'Sound/music1.wav'},
 
    { 'charCode':115, 'keyName':'music2', 'music':'Sound/music2.wav'},
];
 
var audio = document.getElementById('audio'); 
keyboard.forEach(function(key){ 
    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;
    audio.appendChild(div_touche); 
});
var clik = document.querySelectorAll('.touche');
clik.forEach(function(clic){ 
    clic.addEventListener('click',function(){ 
        playSound(clic);
    });
});
function playSound(clic){ 
    clic.style.backgroundColor = "red";
    setTimeout(function(){
        clic.style.backgroundColor = ''; 
    }, 200);
    var son = new Audio(clic.dataset.music);
    son.play();
}

**ProgElecT** · 20/03/2019, 18h09

Salut

Peut être que, ligne 4, il te manque un ' devant music2

**d3LTa7** · 20/03/2019, 19h05

Ha oui !! Haha mais ça c'est juste que j'ai changé mon exemple

Dans mon code il n'y a pas ccette faute

**DMC** · 20/03/2019, 19h39

Bonjour d3LTa7,

J'avais fait un petit projet juste pour le fun, pour tester un peu l'audio
on peut surement mieux faire mais les bases sont là

https://codepen.io/Zonecss/pen/jpKQPg

**d3LTa7** · 21/03/2019, 09h46

Ha ouai sympa !! Merci DMC mais j'avoue que j'ai un peu de mal à comprendre ce code !! Enfin pour moi c'est assez complexe !!
En faite je voulais vraiment "compléter" mon code actuel sans trop le changer !! Le truc c'est de comprendre un peu ce que je fais sans trop copié coller bêtement =D car je suis toujours dans le cursus de l'apprentissage !!
Ceci dit, je met ton code de coté, car il y a des choses assez intéressante

En faite le souci avec ce code c'est que je si j’appuie plusieurs fois sur 'music1' par exemple il me lancera plusieurs fois le morceau (ce qui sera complètement inaudible) et donc pouvoir empêcher de faire cela dans un premier temps...

Je pensais a un système de condition... Si j'appuie une fois ==> lancement de la musique, si je rappuie ==> stop de la musique, si j'appuie sur un autre ==> stop de la musique en cours et lecture de celui ci... Est ce possible ?

Des clicks et des sons

JavaScript

Discussions similaires

Partager

Partager