React Drum Machine 键不播放声音

Question

I'm working on a drum machine project. It plays sounds when you click on the buttons. However, when I pressed the keys such as "Q", "C", etc, it didn't play sounds and display the names at all. I looked over the code for errors but I can't find what I'm missing.... Please help.

Here's my code at Codepen: https://codepen.io/kikibres/pen/oNbqboj

const sounds = [
  { id: 'snare', letter: 'Q', src: 'https://www.myinstants.com/media/sounds/snare.mp3' },
  { id: 'bass 1', letter: 'W', src: 'https://www.myinstants.com/media/sounds/bass-drum.mp3' },
  { id: 'bongo', letter: 'E', src: 'https://res.cloudinary.com/kikibres/video/upload/v1594348175/FCC%20Drum%20Machine/bongo.wav' },
  { id: 'tom tom', letter: 'A', src: 'https://res.cloudinary.com/kikibres/video/upload/v1594348038/FCC%20Drum%20Machine/tom_tom.wav' },
  { id: 'bass 3', letter: 'S', src: 'https://res.cloudinary.com/kikibres/video/upload/v1594347930/FCC%20Drum%20Machine/bass3.wav' },
  { id: 'shotgun', letter: 'D', src: 'https://res.cloudinary.com/kikibres/video/upload/v1594353262/FCC%20Drum%20Machine/shotgun.wav' },
  { id: 'high hat', letter: 'Z', src: 'https://res.cloudinary.com/kikibres/video/upload/v1594348111/FCC%20Drum%20Machine/high_hat.wav' },
  { id: 'drum hit', letter: 'X', src: 'http://www.masterbits.de/sc_docu/sounds1/1TM00013.MP3' },
  { id: 'laser', letter: 'C', src: 'http://www.sa-matra.net/sounds/starcontrol/Umgah-Backzip.wav'  }
]

class DrumPad extends React.Component {
  
  componenetDidMount() {
    // console.log(this.audio);
    document.addEventListener('keydown', this.handleKeydown);
    window.focus();
  }
  
  componenetWillUnmount() {
    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} >
        <h2>{this.props.letter}</h2>
        <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 Key"
    }
  }
  
  handleDisplay = display => this.setState({display});

  render() { 
    return (
      <div id="drum-machine" className="inner-container">
        <div className="keypad">
          {sounds.map(s => (
            <DrumPad 
              key={s.id}
              id={s.id} 
              letter={s.letter} 
              src={s.src} 
              // onClick={this.handleClick} 
              handleDisplay={this.handleDisplay}
              />
          ))}
        </div>
        <div className="display_pad">
          <h2>Drum Machine</h2>
          <div className="display_box">
            <h3 id="display">{this.state.display}</h3>
              
            </div>
        </div>
      </div>
    )
  }
}


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

Answer 1

I'm working on a drum machine project. It plays sounds when you click on the buttons. However, when I pressed the keys such as "Q", "C", etc, it didn't play sounds and display the names at all. I looked over the code for errors but I can't find what I'm missing.... Please help.

Here's my code at Codepen: https://codepen.io/kikibres/pen/oNbqboj

const sounds = [
  { id: 'snare', letter: 'Q', src: 'https://www.myinstants.com/media/sounds/snare.mp3' },
  { id: 'bass 1', letter: 'W', src: 'https://www.myinstants.com/media/sounds/bass-drum.mp3' },
  { id: 'bongo', letter: 'E', src: 'https://res.cloudinary.com/kikibres/video/upload/v1594348175/FCC%20Drum%20Machine/bongo.wav' },
  { id: 'tom tom', letter: 'A', src: 'https://res.cloudinary.com/kikibres/video/upload/v1594348038/FCC%20Drum%20Machine/tom_tom.wav' },
  { id: 'bass 3', letter: 'S', src: 'https://res.cloudinary.com/kikibres/video/upload/v1594347930/FCC%20Drum%20Machine/bass3.wav' },
  { id: 'shotgun', letter: 'D', src: 'https://res.cloudinary.com/kikibres/video/upload/v1594353262/FCC%20Drum%20Machine/shotgun.wav' },
  { id: 'high hat', letter: 'Z', src: 'https://res.cloudinary.com/kikibres/video/upload/v1594348111/FCC%20Drum%20Machine/high_hat.wav' },
  { id: 'drum hit', letter: 'X', src: 'http://www.masterbits.de/sc_docu/sounds1/1TM00013.MP3' },
  { id: 'laser', letter: 'C', src: 'http://www.sa-matra.net/sounds/starcontrol/Umgah-Backzip.wav'  }
]

class DrumPad extends React.Component {
  
  componenetDidMount() {
    // console.log(this.audio);
    document.addEventListener('keydown', this.handleKeydown);
    window.focus();
  }
  
  componenetWillUnmount() {
    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} >
        <h2>{this.props.letter}</h2>
        <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 Key"
    }
  }
  
  handleDisplay = display => this.setState({display});

  render() { 
    return (
      <div id="drum-machine" className="inner-container">
        <div className="keypad">
          {sounds.map(s => (
            <DrumPad 
              key={s.id}
              id={s.id} 
              letter={s.letter} 
              src={s.src} 
              // onClick={this.handleClick} 
              handleDisplay={this.handleDisplay}
              />
          ))}
        </div>
        <div className="display_pad">
          <h2>Drum Machine</h2>
          <div className="display_box">
            <h3 id="display">{this.state.display}</h3>
              
            </div>
        </div>
      </div>
    )
  }
}


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