# Help: Drum Machine project test failing

**URL:** <https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086>\
**Category:** General\
**Created:** [April 10, 2020, 7:00pm UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086 "2020-04-10T19:00:42Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![pruthvi.ashok](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pruthvi.ashok/32/138797_2.png) [@pruthvi.ashok](https://forum.freecodecamp.org/u/pruthvi.ashok)\
**Post date:** [April 10, 2020, 7:00pm UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086/1 "2020-04-10T19:00:42Z")

</div>

Hi,

So here’s my code that I am working on. This is for the drum machine project. I have successfully created the buttons and the audio file is played when I click them. I am not able to pass test no 5 in the compiler which says:

1. When I click on a .drum-pad element, the audio clip contained in its child element should be triggered.

Here’s the code:

```auto
import React from "react";
import ReactDom from "react-dom";
import ReactPlayer from "react-player";

const sounds = [
  {
    idnum: "1",
    id: "Q",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
  },
  {
    idnum: "2",
    id: "W",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
  },
  {
    idnum: "3",
    id: "E",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",
  },
  {
    idnum: "4",
    id: "A",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3",
  },
  {
    idnum: "5",
    id: "S",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
  },
  {
    idnum: "6",
    id: "D",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3",
  },
  {
    idnum: "7",
    id: "Z",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3",
  },
  {
    idnum: "8",
    id: "X",
    src: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3",
  },
  {
    idnum: "9",
    id: "C",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",
  },
];

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      audioSource: "not clicked",
    };

    this.soundOn = this.soundOn.bind(this);
  }
  soundOn = (info) => {
    var audio = new Audio(info.src);
    audio.play();
  };

  
  render() {
    const buttonData = sounds.map((info) => (
      <button
        className="drum-pad"
        id={info["idnum"]}
        onClick={() => this.soundOn(info)}
      >
        {info["id"]}
        <audio
          src={info.src}
          className="clip"
          id={info.id}
          type="audio/mp3"
        ></audio>
      </button>
    ));
    return buttonData;
  }
}

export default Button;

```

Any help would be appreciated.

Thanks!

---

<div class="post-metadata">

**Author:** ![ninjasun](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ninjasun/32/141985_2.png) [@ninjasun](https://forum.freecodecamp.org/u/ninjasun)\
**Post date:** [April 10, 2020, 8:29pm UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086/2 "2020-04-10T20:29:37Z")

</div>

I think the ‘child’ in the user story is a DOM node, so you have to use the html5 audio tag. Also when write here your code try to use the specific markdown to get text properly formatted. Good luck

---

<div class="post-metadata">

**Author:** ![pruthvi.ashok](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pruthvi.ashok/32/138797_2.png) [@pruthvi.ashok](https://forum.freecodecamp.org/u/pruthvi.ashok)\
**Post date:** [April 10, 2020, 8:32pm UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086/3 "2020-04-10T20:32:15Z")

</div>

Hi,

Thanks for the input. I shall format it properly next time.  
But, by the looks of it, I have used the HTML5 audio tag.

Its there inside the element.

---

<div class="post-metadata">

**Author:** ![ninjasun](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ninjasun/32/141985_2.png) [@ninjasun](https://forum.freecodecamp.org/u/ninjasun)\
**Post date:** [April 10, 2020, 8:39pm UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086/4 "2020-04-10T20:39:31Z")

</div>

I think you do not play that one, you play the another one created inside the fn soundOn

---

<div class="post-metadata">

**Author:** ![pruthvi.ashok](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pruthvi.ashok/32/138797_2.png) [@pruthvi.ashok](https://forum.freecodecamp.org/u/pruthvi.ashok)\
**Post date:** [April 10, 2020, 8:41pm UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086/5 "2020-04-10T20:41:08Z")

</div>

Yes, looking at it, I am activating the button onClick method which is activating the audio file.  
Can you please help me in figuring out how to play the audio element.  
I am pretty stuck up here.

---

<div class="post-metadata">

**Author:** ![ninjasun](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ninjasun/32/141985_2.png) [@ninjasun](https://forum.freecodecamp.org/u/ninjasun)\
**Post date:** [April 10, 2020, 8:43pm UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086/6 "2020-04-10T20:43:33Z")

</div>

Have a look to the react documentation about ref

---

<div class="post-metadata">

**Author:** ![pruthvi.ashok](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pruthvi.ashok/32/138797_2.png) [@pruthvi.ashok](https://forum.freecodecamp.org/u/pruthvi.ashok)\
**Post date:** [April 10, 2020, 8:46pm UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086/7 "2020-04-10T20:46:10Z")

</div>

Been searching for hours.  
Any reference links?

---

<div class="post-metadata">

**Author:** ![ninjasun](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ninjasun/32/141985_2.png) [@ninjasun](https://forum.freecodecamp.org/u/ninjasun)\
**Post date:** [April 10, 2020, 8:52pm UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086/8 "2020-04-10T20:52:18Z")

</div>

> **[Refs and the DOM – React](https://reactjs.org/docs/refs-and-the-dom.html)**
>
> A JavaScript library for building user interfaces

---

<div class="post-metadata">

**Author:** ![pruthvi.ashok](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pruthvi.ashok/32/138797_2.png) [@pruthvi.ashok](https://forum.freecodecamp.org/u/pruthvi.ashok)\
**Post date:** [April 10, 2020, 8:58pm UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086/9 "2020-04-10T20:58:53Z")

</div>

No idea as to how to do it. It would be great if you can help me with the code.

---

<div class="post-metadata">

**Author:** ![ninjasun](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ninjasun/32/141985_2.png) [@ninjasun](https://forum.freecodecamp.org/u/ninjasun)\
**Post date:** [April 10, 2020, 9:05pm UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086/10 "2020-04-10T21:05:19Z")

</div>

I think it should be 2 or 3 lines of code.  
You have to create a ref, attach it to the html audio, and use the ref to play it inside the onSound fn. Very simple

---

<div class="post-metadata">

**Author:** ![pruthvi.ashok](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pruthvi.ashok/32/138797_2.png) [@pruthvi.ashok](https://forum.freecodecamp.org/u/pruthvi.ashok)\
**Post date:** [April 10, 2020, 9:18pm UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086/11 "2020-04-10T21:18:04Z")

</div>

This is what I’ve done now.  
Am I even on the correct path?

```auto
inputAudio = React.createRef(sounds.src)
  
render() {
    const buttonData = sounds.map((info) => (
      <button
        className="drum-pad"
        id={info["idnum"]}
        onClick={() => this.soundOn(info)}
      >
        {info["id"]}
        <audio
        ref={this.inputAudio}
          src={info.src}
          className="clip"
          id={info.id}
          type="audio/mp3"
        ></audio>
      </button>
    ));

```

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [April 11, 2020, 1:44am UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086/12 "2020-04-11T01:44:03Z")

</div>

I don’t believe you can use ref for this. Then it will always play the last audio file in the array. But just to cover it. you would use React.createRef() in the constructor. Add the `ref` attribute to the element and get to it using the `current` property.

Condensed pseudo example:

```auto
constructor(props) {
  this.audio = React.createRef();
}

handlerFn () => {
  this.audio.current.play();
}

<audio
  ref={this.audio}
/>

```

You can use the event and get to the child element and call play on it.

Function:

```auto
soundOn = event => {
  console.log(event.target.firstElementChild);
  const audioElement = event.target.firstElementChild;
  audioElement.play();
};

```

Function call:

```auto
onClick={this.soundOn}

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:59pm UTC](https://forum.freecodecamp.org/t/help-drum-machine-project-test-failing/371086/14 "2021-06-01T18:59:49Z")

</div>

Closed on June 1, 2021, 6:59pm UTC