Работаю над проектом реактивной драм-машины. Мой прослушиватель событий keydown воспроизводит звук, но не отображает свое имя на экране

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

https://fccprojectdrummachine.netlify.app/

  function playSound(selector, id) {
    const audio = document.getElementById(selector);
    audio.play();
    setDisplayKey(id);
    console.info(audio);
  }

  useEffect(() => {
    const myListener = (event) => {
      playSound(event.key.toUpperCase());
      console.info(playSound(event.key.toUpperCase()));
    };

    if (enabled) {
      document.addEventListener("keydown", myListener);
    }
    if (!enabled) {
      document.removeEventListener("keydown", myListener);
    }
    return () => {
      document.removeEventListener("keydown", myListener);
    };
    // eslint-disable-next-line
  }, [enabled]);


  const sounds = [
    {
      keyCode: 81,
      key: "Q",
      id: "Heater-1",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
    },
    {
      keyCode: 87,
      key: "W",
      id: "Heater-2",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
    },
    {
      keyCode: 69,
      key: "E",
      id: "Heater-3",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",
    },
    {
      keyCode: 65,
      key: "A",
      id: "Heater-4",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3",
    },
    {
      keyCode: 83,
      key: "S",
      id: "Clap",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
    },
    {
      keyCode: 68,
      key: "D",
      id: "Open-HH",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3",
    },
    {
      keyCode: 90,
      key: "Z",
      id: "Kick-n'-Hat",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3",
    },
    {
      keyCode: 88,
      key: "X",
      id: "Kick",
      url: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3",
    },
    {
      keyCode: 67,
      key: "C",
      id: "Closed-HH",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",
    },
  ];
function Buttons({ playSound, sounds, enabled }) {
  return (
    <div className = "btn-con">
      <div className = "btns">
        {sounds.map((drumPad) => (
          <button
            disabled = {!enabled}
            key = {drumPad.id}
            onClick = {() => {
              playSound(drumPad.key, drumPad.id);
            }}
            className = "drum-pad"
            id = {drumPad.id}
          >
            {drumPad.key}
            <audio
              className = "clip"
              id = {drumPad.key}
              src = {drumPad.url}
              name = {drumPad.id}
            ></audio>
          </button>
        ))}
      </div>
    </div>
  );
}

Если я передам селектор как свойство, он отобразит букву нажатой клавиши, например Q, W, E. Я хочу, чтобы он отображал название звука, например HEATER-1, HEATER-2 или CLIP.

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

playSound принимает два параметра. Вы проходите один.
Dave Newton 11.02.2023 19:47

Извините, я не упомянул об этом в своей проблеме. Если я передам селектор setdisplaykey, он отобразит букву нажатия клавиши, например Q, W, E и т. д. Я хотел бы, чтобы он произносил название звука, например HEATER-1 или CLIP, как это происходит, когда вы нажимаете его вручную.

GameSeven 11.02.2023 19:54

Как он это делает, когда вы нажимаете его вручную?

Dave Newton 11.02.2023 20:05

Он должен отображать Heater-1 или любое другое название звука, по которому щелкают мышью.

GameSeven 11.02.2023 20:20

... Вы сказали "как это происходит, когда вы нажимаете ее вручную". Что заставляет его работать, когда вы «нажимаете его вручную»?

Dave Newton 11.02.2023 20:21

Функция воспроизведения звука

GameSeven 11.02.2023 20:28

Я также добавил код кнопок в вопрос.

GameSeven 11.02.2023 20:35

Вам нужно либо связать ключ с идентификатором и найти его в прослушивателе ключей, либо добавить прослушиватель ключей одновременно с сопоставлением; существует ряд компонентов обработчиков клавиатуры React-y.

Dave Newton 11.02.2023 21:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
58
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не передаете id своей функции playSound в event listeners, вот в чем проблема. Если вы обновите свою функцию myListener таким образом, она должна работать так, как вы хотите.

const myListener = (event) => {
      let song = sounds.find(
        (sound) => sound.key === event.key.toUpperCase()
      );
      playSound(event.key.toUpperCase(), song.id);
};

Вот его рабочая версия codesandbox https://codesandbox.io/embed/happy-ride-xjqfyu

Пожалуйста! Не могли бы вы выбрать мой ответ как принятый ответ, поскольку он решил вашу проблему? @GameSeven

Evren 12.02.2023 20:19

Другие вопросы по теме