Question

我正在为 FreeCodeCamp 制作鼓机，但在单击特定键时我很难播放音频。我最近的尝试可以在 handleKeyDown 中看到。该函数正在接收事件，并且我能够呈现被击中的键，但不确定如何使 src 播放。我不确定如何使 if 语句或 if 语句中的代码起作用。我删除了一些我认为与问题无关的代码。我应该如何处理这个问题？非常感谢。

    const sounds = [
  {
    key: 'Q',
    keyCode: 81,
    id: 'Heater-1',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  },
  {
    key: 'W',
    keyCode: 87,
    id: 'Heater-2',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  }
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.audio = React.createRef()
  }

  componentDidMount() {
    document.addEventListener('keydown', this.handleKeydown);
  }

  componenetWillUnmount() {
    document.removeEventListener('keydown', this.handleKeydown);
  }
  
  handleKeydown = (e) => {
    if (e.keyCode === this.props.keyCode) {
      
      const audio = document.getElementById(this.props.key);
      audio.currentTime = 0;
      audio.play();
    }
  }
  


  render() {
  return (
    <div id="drum-machine">
      <div id="drumpad">
      {sounds.map(i => (
            <button
              className="drum-pad"
              id={i.key}
              key={i.key}
              onClick={this.handleClick}
              value={i.key}
            >{i.key}
            <audio 
            className="clip" 
            id={i.key}
            src={i.url}
            ref={this.audio}
            /></button>
          ))}
      </div>
    </div>
  );
}
}

Answer 1

//file for export, comm.js
export const AudioPlay = (file) => {
  new Audio(`/static/sounds/${file}`).play();    //under folder public
};

//file import
import {AudioPlay} from './comm';

//in your event function
AudioPlay('stockin-ok.mp3');

使用 React Keydown 播放音频

1 个答案: