Des clicks et des sons

Version imprimable

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:

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:

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

20/03/2019, 18h09
ProgElecT

Salut

Peut être que, ligne 4, il te manque un ' devant music2
20/03/2019, 19h05
d3LTa7

Ha oui !! Haha mais ça c'est juste que j'ai changé mon exemple ;) Dans mon code il n'y a pas ccette faute ;)
20/03/2019, 19h39
DMC

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
21/03/2019, 09h46
d3LTa7

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 ?