Drum Machine project


Im trying to finish my project, first I tried doing everything so I can do what its being asked, but I didnt pay attention to the “indications” FCC gives, and now I believe Im stuck, before I erase most of it I want to know if this can still be fixed…

This is my code below on JS, html and css files are correct now, but Im only trying to fix the JS,

FCC is asking the following:
User Story #3: Within #drum-machine I can see 9 clickable drum pad elements, each with a class name of drum-pad , a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q , W , E , A , S , D , Z , X , C . The drum pads MUST be in this order.

The bad thing is that I created a Pad element, but I dont know how to show the 9 clickable drum pad inside the drum machine as they request, since pad wont let me place the unique id on each, please let me know if I can proceed with pad, or if I need to change everything on the pad.

function App(){

    const audioClips = [
            keyCode: 81,
            keyTrigger: "Q",
            id: "Heater-1",
            url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
            keyCode: 87,
            keyTrigger: "W",
            id: "Heater-2",
            url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
            keyCode: 69,
            keyTrigger: "E",
            id: "Heater-3",
            url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
            keyCode: 65,
            keyTrigger: "A",
            id: "Heater-4",
            url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
            keyCode: 83,
            keyTrigger: "S",
            id: "Clap",
            url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
            keyCode: 68,
            keyTrigger: "D",
            id: "Open-HH",
            url: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
            keyCode: 90,
            keyTrigger: "Z",
            id: "Kick-n-Hat",
            url: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
            keyCode: 88,
            keyTrigger: "X",
            id: "Kick",
            url: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
            keyCode: 67,
            keyTrigger: "C",
            id: "Closed-HH",
            url: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"

    const [volume, setVolume] = React.useState(1);
    const [recording, setRecording] = React.useState("");
    const [speed, setSpeed] = React.useState(0.5);

    const playRecording = () => {
    let index = 0;
    let recordArray = recording.split(" ");
    const interval = setInterval(() => {
        const audioTag = document.getElementById(recordArray[index]);
        audioTag.volume = volume;
        audioTag.currentTime = 0;
    }, speed * 600);
        () => clearInterval(interval),
        600 * speed * recordArray.length -1
   return  (<div id="drum-machine" className="bg-info min-vh-100 text-white">
            <div className="text-center">
                <h2>Drum Machine</h2>
                {audioClips.map(clip => (
                    <Pad className="drum-pad" id={clip.text} key={clip.id} clip={clip} volume={volume} setRecording={setRecording}/>
                <input type="range" step="0.01" onChange={(e) => setVolume(e.target.value)} value={volume} max="1.3" min="0" className="w-50" />
                <h3 id="display">{recording}</h3>
                {recording && (
                    <button onClick={playRecording} className="btn btn-success">Play</button>
                    <button onClick={() => setRecording("")} className="btn btn-danger">Clear</button>
                    <br />
                    <input type="range" step="0.01" onChange={(e) => setSpeed(e.target.value)} value={speed} max="1.3" min="0.1" className="w-50" />


function Pad({ clip, volume, setRecording }){

    const [active, setActive] = React.useState(false);

    React.useEffect(() => {
        document.addEventListener("keydown", handleKeyPress);
        return () => {
            document.removeEventListener("keydown", handleKeyPress);
    }, []);

   const handleKeyPress = (e) => {
    if(e.keyCode === clip.keyCode) {

const playSound = () => {
    const audioTag = document.getElementById(clip.keyTrigger)
    setTimeout(() => setActive(false), 300);
    audioTag.volume = volume;
    audioTag.currentTime = 0;
    setRecording(prev => prev + clip.keyTrigger + " ");

    return (
<div onClick={playSound} className={`btn btn-secondary p-4 m-3 ${active && "btn-warning"}`}>
    <audio className="clip" id={clip.keyTrigger} src={clip.url}/>

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

hello and welcome back to fcc forum :slight_smile:

  • have you reflected that in your attempted code?
  • what wont let you “place” unique id on each?

also do you have this live somewhere as well? perhaps in “codepen” maybe? share that link, its helpful that way, happy learning :slight_smile:

Hello, thank you for your quick response!

I believe i reflected it by placing on the constant audioClips at keyTrigger: “Q”, so audioClips is being placed at h2 Drum machine, {audioClips.map}, and inside it I included a Pad element, which is what I believe is being made reference to

Thats actually my question, I dont know where to place the unique id that describes the audio clip the drum pad is set up to as the instructions asks me to do.

I have it on Visual studio, let me know if link works,


className and id on a component are just props. You want the HTML attributes on the actual element. You can pass them down as props and use them as such. For the class, it would be easier to just move it to the element inside the Pad component.

id={clip.text} where are you getting the .text property from?

Please do not use divs for the buttons, use button elements.


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.