Hey, i quickly built this challenge in vs code and functionally it works, but i am hopelessly stuck on passing the tests, simply playing the audio is not enough. Tried ref, tried pointing to children, the biggest problem i have no idea why and what to even begin to do. I looked around online and people featured projects that fail just like mine.
I had to remove the sound file links, because i am a new user.
+++JS
import React, { Component } from “react”;
import ReactDOM from “react-dom”;
import “./drumMachine.css”;
// import $ from “jquery”;
/////TEST
import ReactFCCtest from “react-fcctest”;
class App extends Component {
render() {
return (
);
}
}
/////
const notes = [
{
keyCode: 81,
keyTrigger: “Q”,
id: “Chord-1”,
url:
},
{
keyCode: 87,
keyTrigger: “W”,
id: “Chord-2”,
url:
},
{
keyCode: 69,
keyTrigger: “E”,
id: “Chord-3”,
url:
},
{
keyCode: 65,
keyTrigger: “A”,
id: “Shaker”,
url:
},
{
keyCode: 83,
keyTrigger: “S”,
id: “Open-HH”,
url:
},
{
keyCode: 68,
keyTrigger: “D”,
id: “Closed-HH”,
url:
},
{
keyCode: 90,
keyTrigger: “Z”,
id: “Punchy-Kick”,
url:
},
{
keyCode: 88,
keyTrigger: “X”,
id: “Side-Stick”,
url:
},
{
keyCode: 67,
keyTrigger: “C”,
id: “Snare”,
url:
}
];
class DrumMachine extends Component {
state = {};
playMusic = sound => {
new Audio(sound).play();
// console.log(document.getElementById(sound));
// new Audio(document.getElementById(sound).src).play();
};
buttons = notes.map(e => (
<button
id={e.keyCode}
className=“drum-pad”
onClick={() => this.playMusic(e.url)}
// onClick={() => this.playMusic(e.keyTrigger)}
// onClick={() => this.playMusic(this[e.keyTrigger].children[0].src)}
ref={ref => {
this[e.keyTrigger] = ref;
}}
>
{e.keyTrigger}
));
render() {
return (
Drum Machine
);
}
}
ReactDOM.render(, document.getElementById(“root”));