Affichage d'une variable

4 juillet 2019 à 11:26:44

Bonjour,

Je suis en train de regarder pour un piano en javascript, et j'ai trouvé un script qui me convient.

Il y a juste une petite chose que j'aimerai rajouter, mais n'y connaissant pas grand chose, je ne vois pas trop comment faire.

Lors d'un appui sur une touche, le son est généré sur la base d'une fréquence rentrée dans le code html via une class "data-frequency".

Ce que je voudrai, c'est lors d'un appui, en plus de jouer le son, c'est afficher la fréquence!

Voici le code

<body>

  <span id="rest" data-frequency="0"></div>

<div class="piano">
	<div class="key">
		<div class="major" id="c3" data-frequency="130.81"></div>
		<div class="minor" id="cs3" data-frequency="138.59"></div>
	</div>
	<div class="key">
		<div class="major" id="d3" data-frequency="146.83"></div>
		<div class="minor" id="ds3" data-frequency="155.56"></div>
	</div>
	<div class="key">
		<div class="major" id="e3" data-frequency="164.81"></div>
	</div>
	<div class="key">
		<div class="major" id="f3" data-frequency="174.61"></div>
		<div class="minor" id="fs3" data-frequency="185"></div>
	</div>
	<div class="key">
		<div class="major" id="g3" data-frequency="196"></div>
		<div class="minor" id="gs3" data-frequency="207.65"></div>
	</div>
	<div class="key">
		<div class="major" id="a3" data-frequency="220"></div>
		<div class="minor" id="as3" data-frequency="233.08"></div>
	</div>
	<div class="key">
		<div class="major" id="b3" data-frequency="246.94"></div>
	</div>
	<div class="key">
		<div class="major" id="c4" data-frequency="261.63"></div>
		<div class="minor" id="cs4" data-frequency="277.18"></div>
	</div>
	<div class="key">
		<div class="major" id="d4" data-frequency="293.66"></div>
		<div class="minor" id="ds4" data-frequency="311.13"></div>
	</div>
	<div class="key">
		<div class="major" id="e4" data-frequency="329.63"></div>
	</div>
	<div class="key">
		<div class="major" id="f4" data-frequency="349.23"></div>
		<div class="minor" id="fs4" data-frequency="369.99"></div>
	</div>
	<div class="key">
		<div class="major" id="g4" data-frequency="392"></div>
		<div class="minor" id="gs4" data-frequency="415.30"></div>
	</div>
	<div class="key">
		<div class="major" id="a4" data-frequency="440"></div>
		<div class="minor" id="as4" data-frequency="466.16"></div>
	</div>
	<div class="key">
		<div class="major" id="b4" data-frequency="493.88"></div>
	</div>
	
</div>







  

    <script  src="./script.js"></script>




</body>

et le js

function playSound(note, beat) {
  const AudioContext = window.AudioContext || window.webkitAudioContext,
    audioCtx = new AudioContext(),
    oscillator = audioCtx.createOscillator(),
    gainNode = audioCtx.createGain();

  oscillator.frequency.value = $('#' + note).data('frequency');
  oscillator.type = 'sine';
  oscillator.connect(gainNode);
  gainNode.gain.value = $('#volume-slider').val();
  gainNode.connect(audioCtx.destination);

  // Start the sound and lower the gain before stopping to prevent audio pops/clicks
  oscillator.start(0);
  gainNode.gain.setTargetAtTime(0, audioCtx.currentTime, (beat - .05) || 0.185);
  oscillator.stop(audioCtx.currentTime + (beat + 0.5 || 0.5));
  oscillator.onended = () => audioCtx.close();
  
  $(window).blur(() => oscillator.pause())
  $(window).focus(() => oscillator.resume())
}

// Song playback function - build a 2d array of [[note, beat-length]]
// Pass to this function as 2dArray.map((note, i, arr) => playSong(note, i, arr));
function playSong(note, i, arr) {
  $('button').prop('disabled', true); // disable the button while playing the song  
  (index => setTimeout(() => {
    const selectors = $('#' + note[0]).add($('#' + note[0]).parent());
    if (note[0] !== 'rest') {
      selectors.addClass('active')
        .delay(100)
        .queue(() => selectors.removeClass('active')
          .dequeue());
    }
    playSound(note[0], note[1]);
    if (index === arr.length - 1) {
      $('button').prop('disabled', false);
      $('#notice').empty();
    }
  }, i * 300))(i);
}



function initializeApp() {
  $('.major, .minor').on('mousedown', e => playSound(e.currentTarget.id));

  $('.fa-volume-off').on('click', () => $('#volume-slider').val($('#volume-slider').attr('min')));
  $('.fa-volume-up').on('click', () => $('#volume-slider').val($('#volume-slider').attr('max')));
  $('#ohSusanna').on('click', playOhSusanna);
  $('#hallelujah').on('click', playHallelujah);

  //prevent accidental zooming with a double-tap on touch screens
  $('.volume-control, .major, .minor').on('click', e => e.preventDefault());

  // Song playback doesn't work on mobile yet, hide the "Play Me A Song" button.
  if (typeof window.orientation !== 'undefined') $('button').hide();
}

$(initializeApp);

Merci d'avance pour votre aide!

Antoine

Orion-

4 juillet 2019 à 13:31:44

Salut !

Avant tout, une petite précision (ça aura son importance pour la suite) ce que tu appelles la classe "data-frequency" n'est pas une classe. C'est un attribut !

Il te suffit donc, lorsque tu cliques sur une touche, récupérer la valeur de l'attributdata-frequency avec la méthodegetAttributesur tone.currentTargetpuis de l'afficher. Dans ton cas, tu nous a mâché le travail en utilisant JQuery, donc c'est vraiment très simple à implémenter.

Il te suffit de modifier un tout petit peu la première instruction de ta fonctioninitializeAppcomme cela :

$('.major, .minor').on('mousedown', e => {
  playSound(e.currentTarget.id);
  // ici le mode d'affichage (console ou sur la page etc...)
})

Je te mets ci-dessous un codepen dans lequel tu pourras tester ce que je te propose. Ici j'ai choisis d'afficher la fréquence sous les boutons.

itoine

4 juillet 2019 à 13:52:21

Hello,

Merci pour ta réponse!

Alors j'ai essayé avec le peu de connaissances que j'ai.

Dans mon fichier html, j'ai rajouté

<div id="debugger">Fréquence:</div>

Mais j'ai pas trop pigé le truc avec le

.info Fréquence :

span#debugger

Pour ma fonction js, j'ai modifié comme ça:

function initializeApp() {
  $('.major, .minor').on('mousedown', e => playSound(e.currentTarget.id));
  let frequence = e.currentTarget.getAttribute("data-frequency")

  $('.fa-volume-off').on('click', () => $('#volume-slider').val($('#volume-slider').attr('min')));
  $('.fa-volume-up').on('click', () => $('#volume-slider').val($('#volume-slider').attr('max')));

  //prevent accidental zooming with a double-tap on touch screens
  $('.volume-control, .major, .minor').on('click', e => e.preventDefault());

  // Song playback doesn't work on mobile yet, hide the "Play Me A Song" button.
  if (typeof window.orientation !== 'undefined') $('button').hide();
}

mais au final, la fréquence ne s'affiche pas!

Orion-

4 juillet 2019 à 14:11:49

Pour ce qui est du :

.info Fréquence
  span#debugger

C'est juste une façon d'écrire du html (pour en savoir plus pug) c'est strictement la même chose que ça :

<div class="info"> 
  Fréquence : <span id="debugger"></span>
</div>

Ensuite, pour ce qui est du problème, tu dis que ça ne fonctionne pas chez toi. C'est normal, tu as mal appliqué ce que je t'ai donné.

Regarde la première instruction de ta fonction initializeApp. Si on lit en français, on voit :Lorsqu'on clique sur un touche major ou minor, effectue ceci ....

Sauf que la seule chose que tu fais, c'est d’exécuter playSound. Il faut que tu envoie ton event e dans un fonction, qui elle va exécuté playSound ET afficher la fréquence. Comme ceci :

$('.major, .minor').on('mousedown', e => {
  playSound(e.currentTarget.id));
  let frequence = e.currentTarget.getAttribute("data-frequency");
  $("#debugger").html(frequence);
})

itoine

4 juillet 2019 à 17:03:03

Alors le mot "Fréquence" s'affiche bien, le réglage du son se fait bien, mais la valeur de la fréquence ne s'affiche pas!

Pour le js, ma fonction est

function initializeApp() {
  $('.major, .minor').on('mousedown', e => playSound(e.currentTarget.id));
  let frequence = e.currentTarget.getAttribute("data-frequency");
 $("#debugger").html(frequence);

  $('.fa-volume-off').on('click', () => $('#volume-slider').val($('#volume-slider').attr('min')));
  $('.fa-volume-up').on('click', () => $('#volume-slider').val($('#volume-slider').attr('max')));

  //prevent accidental zooming with a double-tap on touch screens
  $('.volume-control, .major, .minor').on('click', e => e.preventDefault());

  // Song playback doesn't work on mobile yet, hide the "Play Me A Song" button.
  if (typeof window.orientation !== 'undefined') $('button').hide();
}

Orion-

4 juillet 2019 à 17:16:20

Tu as encore mal copié le code. après le "=> il y a une accolade !!!

Et après cette accolade tu mets playSound, la variable frequence etc... comme ceci :

$('.major, .minor').on('mousedown', e => {
  playSound(e.currentTarget.id);
  let frequence = e.currentTarget.getAttribute("data-frequency");
  $("#debugger").html(frequence);
}):

Lartak

4 juillet 2019 à 19:54:17

Bonjour.

Orion- a écrit:

Tu as encore mal copié le code. après le "=> il y a une accolade !!!

@itoine : Il ne suffit pas de copier/coller du code, il faut essayer de comprendre ce qu'il fait et poser des questions si tu ne comprends pas.

La syntaxe utilisée dans le code, c'est celle qui s'appelle fonction fléchée (arrow function en anglais).

Je te conseille fortement de consulter cette documentation, qui te permettra de savoir comment l'utiliser et pour connaître ses particularités.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

itoine

5 juillet 2019 à 0:22:30

Super ça marche mieux! Effectivement j'ai regardé un peu à l'arrache sans me poser vraiment.

Je continue de regarder pour améliorer et adapter le code, et j'aimerai que lors du click sur une touche le son soit lu pendant 4 seconde par exemple. Mais je ne vois pas où paramétrer ce temps. Tu as une idée?

Lartak

5 juillet 2019 à 0:28:17

Bonsoir.

Par exemple avec WindowOrWorkerGlobalScope.setTimeout() - Référence Web API | MDN.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.