Drum Machine audio issue

JavaScript
1

Tell us what’s happening:
I tried to use the audio URLs for the drums and sounds in the audio tags, but on clicking, the audio does not play. Have I written the tags in the wrong order, or is there something else I need to be doing?

Your code so far

      class App extends React.Component {
        constructor(props) {
              super(props);
 }
render() {
return (
  <div>
    <Presentable />
  </div>
   );
 }
 }

const Presentable = (props) => {
 return (
<div id="main">
  <div id="drum-machine">
    <h1>Drum Machine</h1>
    <div id="display">
      <button className="drum-pad">
        Q
        <audio
          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
          id="Q"
        ></audio>
      </button>
      <button className="drum-pad">
        W
        <audio
          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
          id="W"
        ></audio>
      </button>
      <button className="drum-pad">
        E
        <audio
          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
          id="W"
        ></audio>
      </button>
      <button className="drum-pad">
        A
        <audio
          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
          id="A"
        ></audio>
      </button>
      <button className="drum-pad">
        S
        <audio
          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
          id="S"
        ></audio>
      </button>
      <button className="drum-pad">
        D
        <audio
          src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
          id="D"
        ></audio>
      </button>
      <button className="drum-pad">
        Z
        <audio
          src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
          id="Z"
        ></audio>
      </button>
      <button className="drum-pad">
        X
        <audio
          src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
          id="X"
        ></audio>
      </button>
      <button className="drum-pad">
        C
        <audio
          src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"
          id="C"
        ></audio>
      </button>
      <div id="console">
        <div id="contain">
          <button
            style={{
              backgroundColor: "grey",
              border: "1px dotted blue",
              borderRadius: "3px"
            }}
          >
            Turn On
          </button>
          <button
            style={{
              backgroundColor: "grey",
              border: "1px dotted blue",
              borderRadius: "3px"
            }}
          >
            Turn Off
          </button>
          <textarea></textarea>
        </div>
      </div>
    </div>
  </div>
</div>
 );
 };
 ReactDOM.render(<App />, document.getElementById("root"));

Your browser information:

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

Challenge: Build a Drum Machine

Link to the challenge:

2

Hey @skar07!

It will be great, if you give a link to your project.

3

I don’t see any code calling .play() on the audio element. Look at the methods on the HTMLMediaElement interface.

3 Likes