Я пытаюсь добавить ударную установку HTML / Javascript, которую я сделал, на мой сайт Gatsby. В настоящее время при нажатии клавиш звуки не воспроизводятся, а обещание, возвращаемое функцией audio.play (), висит на «ожидающий».
Я получил это для работы с базовым HTML / JS, а также со стандартным приложением React. Но, пытаясь включить его в свой сайт Gatsby, я сталкиваюсь с приведенными ниже проблемами с возвращенными обещаниями, и не воспроизводится звук.
[[PromiseStatus]]: "pending"
[[PromiseValue]]: undefined
Здесь находится репозиторий git для всего сайта Gatsby (в настоящее время только сборка для разработчиков) https://github.com/mfuller22/FullerStackProgramming
Каталог для конкретной страницы, с которой у меня проблемы, находится здесь https://github.com/mfuller22/FullerStackProgramming/tree/master/src/pages/Projects/DrumKit
Я добавлю свой код React через несколько часов. У меня его сейчас нет со мной.
componentDidMount() {
document.addEventListener("keydown", this.handleKeyDown.bind(this));
}
handleKeyDown = (event) => {
if (event.keyCode === parseInt(this.props.id, 10))
this.playSound()
}
playSound = () => {
const audio = document.getElementById('sound'+this.props.id);
const key = document.querySelector(`div[data-key="${this.props.id}"]`);
audio.currentTime = 0;
console.log(audio)
var playPromise = audio.play();
console.log(playPromise)
playPromise.catch(error => {
audio.play();
});
key.classList.add('playing');
};
render() {
const { id, letter, sound } = this.props
return (
<div
id={'key'+id}
data-key={id}
onClick={() => this._playSound}
onKeyDown={() => this._playSound}
onTransitionEnd={() => this._onTransitionEnd}
className="key">
<kbd>{letter}</kbd>
<span className="sound">{sound}</span>
<audio id={'sound'+id}>
<source src={sound} type="audio/wav" />
</audio>
</div>
);
}
Я ожидаю, что обещание будет возвращено со статусом разрешено, но в настоящее время статус обещания находится в состоянии ожидания, а значение обещания не определено.