Button which plays audio for my drum machine does not work

Hello,

I just started working on the drum machine project and decided to use react for it.
I can’t seem to make an audio button which works after clicking it.
Can anyone please explain to me why my audio button does not work?

I’m stuck on this for almost 2 hours.

class App extends React.Component{
  constructor(props){
    super(props);
   }

 render(){ 
 const audioPlay = () =>{
  var sound = document.getElementById("Q")
  sound.play()
}
    return(
    <div className="container" id="drum-machine">
      <div id="display"></div>
        
      <div className="drum-pad" id="drum1">  
         <button type="button" onClick={audioPlay}>Q</button>
      <audio id="Q" className="clip" src="https://freesound.org/people/InspectorJ/sounds/410516/download/410516__inspectorj__snare-drum-multi-hits-a-h1.wav"></audio>
        </div>    
    </div>
      )
  }
}


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

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36.

Challenge: Build a Drum Machine

Link to the challenge:

Where is the part responsible for activating audioPlay function?
I can’t see any ‘onClick’ or anything similar.

It is a long time since i used react, so I may be asking a wrong question here, don’t mind me then.

Okay, i forget that in my code (i edited my post now). But i already tested it with onClick but it still does not work then.

Got curious why that didn’t work.

Syntax in your <audio> is wrong.

Keep me updated. :slight_smile:

Alright so i got the solution!
There is nothing wrong with the code but the link.
I tested it with another mp3 link which i created myself on a wix domain of mine:
https://static.wixstatic.com/mp3/9f0000_170c2fbef1444076a04e6c36775ffd9b.mp3

And that works! So i’m glad it was not the code itself that was wrong :slight_smile:

1 Like