How can I play my audio clip with a click? drum machine

1

Everything is working but the click and I cant figure out why! Please tell me what I am doing wrong.

https://codepen.io/bhintz/pen/GRJOzMZ

2

[quote=“alina1, post:2, topic:357091, full:true”]
I did it this way:

  1. in the App component:
    pads are DrumPad components:
 <DrumPad key = {item.keyCode} // key code, like 81 for 'Q'
                 clip = {item.url} // the clip that plays when pressing the pad
                 id = {item.id}  // id of this pad
                 />);
  1. in the DrumPad component:
    …
  handleClick(){
    let sound = document.getElementById(this.props.keyTrigger); // get the audio component
    sound.currentTime = 0;
    sound.volume = 0.5;
    sound.play();
  }

  render(){
    return (
      <button className = 'drum-pad'
              key = {this.props.keyCode} 
              id = {this.props.id}
              onClick = {this.handleClick}
              >
            <audio className='clip' id={this.props.keyTrigger} src={this.props.clip}></audio>
            {this.props.keyName}
      </button> 
    )
  }

You may look here for the complete project: https://codepen.io/alina-lozhnikova/pen/zYxqPPX

3

Thank you for the tip. I like how you used map() to render all the buttons. I tried to use the same method, simplifying my code to see how it would work, but I can’t get it to render.

https://codepen.io/bhintz/pen/xxGPvXp

4

This has been driving me around the bend, will try this to see if I can get a sound to play.