Clavier musical

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)

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)
Modifié par PapyJP (07 Feb 2024 - 14:54)

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

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)

Je viens de voir ceci https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Simple_synth qui devrait t'interesser.

cdt

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

@bongota , voici une idée simple en reprenant des notes plus adéquates https://codepen.io/gc-nomade/pen/NWJeXaR