ReactJS - How do I play an audio element onKeyPress and onClick?

0
votes

So I am trying to build the Drum Machine project from freeCodeCamp and I have encountered this issue with the audio element. I wrote the code below. I get no errors whatsoever, but the audio still doesn't play when I click the div with the class "drum-pad". I know how to make this work without the audio element, but the challenge requires the use of the element specifically.

I will still try to figure this out for myself and I will update this issue if I found a solution elsewhere.

This is my DrumPad component

import React from 'react';

class DrumPad extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            name: this.props.name,
            audio: this.props.source,
            indexNr: this.props.indexNr,
            keyId: this.props.keyId
        }
        this.clickHandle = this.clickHandle.bind(this);
        this.keyPressHandle = this.keyPressHandle.bind(this);
    }


    clickHandle() {
        document.getElementById(`audio${this.state.indexNr}`).play();
    }

    keyPressHandle(event) {
        if(event.key === this.state.keyId || event.key === this.state.keyId.toLowerCase()){
            document.getElementById(`audio${this.state.indexNr}`).play();
        }
    }

    render(){
        return (
            <div className="drum-pad" id={this.name} onClick={this.clickHandle} onKeyPress={this.keyPressHandle}>
                    <h3>{this.state.keyId}</h3>
                    <audio id={`audio${this.state.indexNr}`} src={this.audio} />
            </div>
        )
    }
}

export default DrumPad;

This is my Keyboard component

import DrumPad from "./DrumpPad";

const Keyboard = (props) => {
    return <div className="column1">
        { 
            soundsArr.map((sound, index) => <DrumPad key={index} indexNr={index} name={sound.name} source={sound.source} keyId={sound.keyId} />) 
        }
    </div>
}

export default Keyboard;


const soundsArr = [
    {
      name: "Drum0", 
      source: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
      keyId: "Q"
    },
    {
      name: "Drum1", 
      source: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
      keyId: "W"
    },
    {
      name: "Drum2", 
      source: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
      keyId: "E"
    },
    {
      name: "Drum3", 
      source: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
      keyId: "A"
    },
    {
      name: "Drum4", 
      source: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
      keyId: "S"
    },
    {
      name: "Drum5", 
      source: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
      keyId: "D"
    },
    {
      name: "Drum6", 
      source: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
      keyId: "Z"
    },
    {
      name: "Drum7", 
      source: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
      keyId: "X"
    },
    {
      name: "Drum8", 
      source: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
      keyId: "C"
    }
  ];
javascriptreactjshtml5-audio