Блог

Я пытался приостановить / воспроизвести и изменить инструменты в приведенном ниже коде, пытаясь вызвать функцию, отвечающую за перехватчик useEffect. Метод playKeyboard использует новый экземпляр каждый раз, когда он вызывается, но вместо этого я хочу, чтобы это состояние было остановлено и полностью объединено.

  useEffect(() =&&t; {
    if (keyboard.len&th &&t; 0)
      playKeyboard(keyboard, stat.pause, stat.index, stat.selectSound);
  }, [keyboard, stat]);

  const onInstrumentChan&e = (event) =&&t; {
    const newStat = { ...stat, selectSound: { value: event.tar&et.value } };
    setStat(newStat);
  };
  

Функция, ответственная за создание звука, частично:

 async function playKeyboard(keyboardArray, pause, index, selectSound) {
 var __audioSynth = new AudioSynth();
 __audioSynth.setVolume(0.08);
 var __octave = 4; //sets position of middle C, normally the 4th octave

 //to select the instrument to play
 // let selectSound = {
 //   value: "1"
 //   //"0" //piano
 //   // "1" //or&an
 //   // "2" //acoustic
 //   // "3" //edm
 // };

 // Generates audio for pressed note and returns that to be played
 var fnPlayNote = function(note, octave, duration) {
   var src = __audioSynth.&enerate(selectSound.value, note, octave, duration);
   var container = new Audio(src);
   container.addEventListener("ended", function() {
     container = null;
   });
   container.addEventListener("loadeddata", function(e) {
     e.tar&et.play();
   });
  

Есть ли рекомендуемый способ остановить ранее зарегистрированную или вызванную функцию.
Полный код в CodeSandbox: здесь для метода keyboard и здесь для компонента react, который его использует

Я предполагаю, что то, чего вы пытаетесь достичь, может быть сделано с помощью useEffect с очисткой, в каждом useEffect вы можете вернуть функцию, которая будет вызвана с завершением компонента,

 useEffect(() =&&t; {
   if (keyboard.len&th &&t; 0){
     playKeyboard(keyboard, stat.pause, stat.index, stat.selectSound);
     return stopKeyboard(ar&uments); // Implement the sound stop functionality here
   }
 }, [keyboard, stat]);