猿问

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

我正在尝试将我制作的 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>

  );

}

我希望以已解决状态返回承诺，但目前承诺状态为待定，并且承诺值未定义。


慕尼黑8549860
浏览 163回答 1
1回答

慕无忌1623718

我最终通过以下方式处理这个问题，而不是将所有内容都移到 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 }) => {&nbsp; &nbsp; if (location.pathname === ("/Projects/DrumKit/Javascript30/")){&nbsp; &nbsp; &nbsp; &nbsp; require("./style.css")&nbsp; &nbsp; }&nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; console.log("failed to load css")&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <html>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Helmet>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <script src={withPrefix('script.js')} type="text/javascript"></script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Helmet>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="button" id="record">Record</button><br></br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="button" id="stop">Stop Recording</button><br></br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="button" id="play">Playback</button><br></br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="keys">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div data-key="65" class="key">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <kbd>A</kbd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sound">clap</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div data-key="83" class="key">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <kbd>S</kbd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sound">hihat</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div data-key="68" class="key">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <kbd>D</kbd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sound">kick</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div data-key="70" class="key">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <kbd>F</kbd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sound">openhat</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div data-key="71" class="key">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <kbd>G</kbd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sound">boom</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div data-key="72" class="key">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <kbd>H</kbd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sound">ride</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div data-key="74" class="key">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <kbd>J</kbd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sound">snare</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div data-key="75" class="key">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <kbd>K</kbd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sound">tom</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div data-key="76" class="key">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <kbd>L</kbd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sound">tink</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <audio data-key="65" src={Clap} preload="auto" crossOrigin="anonymous"></audio>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <audio data-key="83" src={Hihat} preload="auto" crossOrigin="anonymous"></audio>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <audio data-key="68" src={Kick} preload="auto" crossOrigin="anonymous"></audio>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <audio data-key="70" src={Openhat} preload="auto" crossOrigin="anonymous"></audio>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <audio data-key="71" src={Boom} preload="auto" crossOrigin="anonymous"></audio>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <audio data-key="72" src={Ride} preload="auto" crossOrigin="anonymous"></audio>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <audio data-key="74" src={Snare} preload="auto" crossOrigin="anonymous"></audio>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <audio data-key="75" src={Tom} preload="auto" crossOrigin="anonymous"></audio>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <audio data-key="76" src={Tink} preload="auto" crossOrigin="anonymous"></audio>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </body>&nbsp; &nbsp; &nbsp; &nbsp; </html>&nbsp; &nbsp; );};export default Javascript30;
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答