11476 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous
Je cherche à réaliser en js un clavier musical qui fasse entendre une note quand on appuie sur une touche.
Quelle est à votre avis la meilleure façon de faire entendre un son immédiatement sur l’appui de la souris (ou le touch sur un mobile) jusqu’au moment où on relâche la touche du clavier virtuel ?
Merci de vos conseils
Modifié par PapyJP (07 Feb 2024 - 09:18)
Modérateur
Bonjour,
La balise audio et un fichier mp3 devrait convenir avec une pointe de javascript qui lance la lecture en loop tant que la touche ou pression n'est pas relâchée.

Cela me rappelle ma première tentative de page Web avec un clavier musicale en couleur et des partition en couleurs .... 2004, à l'époque c'était js + object + fichier midi. C'était convenable pour un "au clair de la lune" et Firefox en version 1 . Je ne doutais de rien ! Mon fils avait 5ans

Bon développement
Cdt
Modifié par gcyrillus (07 Feb 2024 - 13:03)
J’ai trouvé
 document.getElementById("myAudio").loop = 

Je suppose qu’on fait un court fichier et une balise audio par note, et qu’un démarre/arrête l’audio.
J’essaye ça et je te dis quoi (comme on dit chez moi) Smiley smile
Modifié par PapyJP (07 Feb 2024 - 14:54)
Modérateur
j'avais dans l'idée de mettre le loop comme attribut , et de jouer sur les événements

comme ceci, si cela peut t'inspirer Smiley cligne
for (let e of document.querySelectorAll("div")) {
  e.addEventListener("mousedown", function () {
    joue(e);
  });
  e.addEventListener("mouseup", function () {
    stoppe(e);
  });
  e.addEventListener("touchstart", function () {
    joue(e);
  });
  e.addEventListener("touchend", function () {
    stoppe(e);
  });
}

function joue(e) {
  e.querySelector("audio").play();
}

function stoppe(e) {
  e.querySelector("audio").pause();
}

et
<div tabindex="0"> C
  <audio loop paused>
    <source src="https://cdn.freesound.org/previews/68/68441_871124-lq.mp3" type="audio/mpeg">
  </audio>
</div>

https://codepen.io/gc-nomade/pen/MWxBXZp (c'est du mp3 et ça passe dans FF)
Bonjour,

pas mal la version du CodePen. Hormis qu'il y a une erreur sur la touche G (sol) qui non seulement joue une octave plus bas dans la succession des notes, mais joue aussi un sol# au lieu d'un sol. Et, de même que sur le projet proposé sur le lien de dessous, il n'y a pas les altérations (b et #) des notes. Tout dépend de ce que souhaite faire le visiteur avec ce player. Si c'est un musicien, il sera vite limité, mais il y a peu à faire dans le code pour ajouter les altérations.
Je partirai de préférence sur le CodePen, bien plus simple, en améliorant un peu le clavier, (ajouter les touches noires et les altérations, par exemple).
C'est curieux, quand on modifie le cinquième <source src (68/68447_871124) pour avoir le sol en passant de 47 à 48, ça change l'octave du Si et du Do qui suivent et se positionnent une octave plus bas. Si j'ai le temps, je vais voir ça de plus près.
Qui va s'atteler à nous faire un joli css avec les touches noires ?
Je m'occupe de la valeur des notes.
Modifié par Bongota (07 Feb 2024 - 18:13)
Bongota a écrit :
Qui va s'atteler à nous faire un joli css avec les touches noires ?

Perso, ces temps-ci je suis branché côté backend et je veux rester concentré, mais j'ai farfouillé rapidement parmi les Pens et je suis tombé sur celui-ci qui me semble être pas mal :
Piano.
Modifié par Olivier C (13 Feb 2024 - 21:44)