首页猿问尝试在 Gatsby 框架中的...

尝试在 Gatsby 框架中的 keydown 事件上播放音频文件时如何修复

JavaScript

慕尼黑8549860 2021-06-30 11:59:49

我正在尝试将我制作的 HTML/Javascript 鼓包添加到我的 Gatsby 站点。当前，按下键时不会播放声音，并且从 audio.play() 返回的承诺挂在“待定”处。我已经让它与基本的 HTML/JS 以及标准的 React 应用程序一起使用。但是当试图将它合并到我的 Gatsby 站点时，我遇到了以下返回的承诺问题，并且没有声音播放。[[PromiseStatus]]: "pending"[[PromiseValue]]: undefined整个 Gatsby 站点的 git repo 在这里（目前只有开发版本）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> );}我希望以已解决状态返回承诺，但目前承诺状态为待定，并且承诺值未定义。

查看完整描述

1 回答

慕无忌1623718

TA贡献1744条经验获得超4个赞

我最终通过以下方式处理这个问题，而不是将所有内容都移到 React 组件，而是保持我原来的 HTML 和 JS 代码原样，并像下面这样包含它们（确保import音频文件并将导入引用为 src）：

import React, { Component } from 'react';

import Helmet from "react-helmet"

import { withPrefix, Link } from "gatsby"

import Clap from "./sounds/clap.wav"

import Hihat from "./sounds/hihat.wav"

import Kick from "./sounds/kick.wav"

import Openhat from "./sounds/openhat.wav"

import Boom from "./sounds/boom.wav"

import Ride from "./sounds/ride.wav"

import Snare from "./sounds/snare.wav"

import Tom from "./sounds/tom.wav"

import Tink from "./sounds/tink.wav"

const Javascript30 = ({location }) => {

if (location.pathname === ("/Projects/DrumKit/Javascript30/")){

require("./style.css")

}

else{

console.log("failed to load css")

}

return (

<html>

<body>

</Helmet>

<div>

<button className="button" id="record">Record</button><br></br>

<button className="button" id="stop">Stop Recording</button><br></br>

<button className="button" id="play">Playback</button><br></br>

</div>

</div>

<span class="sound">hihat</span>

</div>

</div>

<span class="sound">openhat</span>

</div>

</div>

</div>

<span class="sound">snare</span>

</div>

</div>

</div>

</body>

</html>

);

};

export default Javascript30;

反对回复 2021-07-01

1 回答
0 关注
162 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

尝试在 Gatsby 框架中的 keydown 事件上播放音频文件时如何修复

尝试在 Gatsby 框架中的 keydown 事件上播放音频文件时如何修复

1 回答

添加回答