反应鼓机按键不播放声音

问题描述

我正在为Freecodecamp项目开发FCC鼓机项目。到目前为止，这是本课程中最困难的部分。我的问题是，我阅读/观看了有关该项目特别工作的视频系列，并试图实现它。它会通过所有测试，但不会播放声音。

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const data = [
 {
   id: "heater-1",letter: "Q",src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
 },{
   id: "heater-2",letter: "W",src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
 },{
   id: "heater-3",letter: "E",src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
 },{
   id: "Heater-4_1",letter: "A",src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
 },{
   id: "heater-6",letter: "S",src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
 },{
   id: "disco",letter: "D",src: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
 },{
   id: "kick_n_hat",letter: "Z",src: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
 },{
   id: "rp4_kick_1",letter: "X",src: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
 },{
   id: "cev_h2",letter: "C",src: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"
 }
];

class DrumPad extends React.Component {
 componentDidMount() {
   console.log(this.audio);
   document.addEventListener("keydown",this.handleKeydown);
   window.focus();
 }

 componentwillUnmount() {
   document.removeEventListener("keydown",this.handleKeydown);
 }

 handleKeydown = (e) => {
   if (e.keyCode === this.props.letter.charCodeAt()) {
     this.audio.play();
     this.audio.currentTime = 0;
     this.props.handledisplay(this.props.id);
   }
 };

 handleClick = () => {
   this.audio.play();
   this.audio.currentTime = 0;
   this.props.handledisplay(this.props.id);
 };

 render() {
   return (
     <div className="drum-pad" id={this.props.id} onClick={this.handleClick}>
       <h1>{this.props.letter}</h1>
       <audio
         id={this.props.letter}
         className="clip"
         src={this.props.src}
         ref={(ref) => (this.audio = ref)}
       ></audio>
     </div>
   );
 }
}

class App extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     display: "Click or Press a Key"
   };
 }

 handledisplay = (display) => this.setState({ display });

 render() {
   return (
     <div id="drum-machine">
       <div id="display">{this.state.display}</div>
       <div id="drum-pads">
         {data.map((d) => (
           <DrumPad
             key={d.id}
             id={d.id}
             letter={d.letter}
             src={d.src}
             handledisplay={this.handledisplay}
           />
         ))}
       </div>
     </div>
   );
 }
}

ReactDOM.render(<App />,document.getElementById("root"));

我将不胜感激。第一次尝试这个论坛。我已经为此进行了很长时间的研究，并且很接近使它们起作用。希望有人仍然可以教这只老狗新的花样。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）