Мой прослушиватель событий нажатия клавиш воспроизводит звуки, но не отображает название звука, как если бы вы нажимали его вручную с помощью мыши.
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
ловушку в прослушиватель и передавать различные свойства безрезультатно. И когда я записываю его в консоль, он просто возвращается неопределенным.
Извините, я не упомянул об этом в своей проблеме. Если я передам селектор setdisplaykey, он отобразит букву нажатия клавиши, например Q, W, E и т. д. Я хотел бы, чтобы он произносил название звука, например HEATER-1 или CLIP, как это происходит, когда вы нажимаете его вручную.
Как он это делает, когда вы нажимаете его вручную?
Он должен отображать Heater-1 или любое другое название звука, по которому щелкают мышью.
... Вы сказали "как это происходит, когда вы нажимаете ее вручную". Что заставляет его работать, когда вы «нажимаете его вручную»?
Функция воспроизведения звука
Я также добавил код кнопок в вопрос.
Вам нужно либо связать ключ с идентификатором и найти его в прослушивателе ключей, либо добавить прослушиватель ключей одновременно с сопоставлением; существует ряд компонентов обработчиков клавиатуры React-y.
Вы не передаете 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
playSound
принимает два параметра. Вы проходите один.