Tell us what’s happening:
Describe your issue in detail here.
Hello,
I am unable to figure out how to display the current sound being played in the drum machine. I can return the current sound as a console.log in the PlaySound component, I can get the default state to feed into the DisplayBar components.
Any assistance is appreciated!
Thanks!
E
Edit: Here is a code pen link https://codepen.io/MoxElliot/pen/yLpOYQb?editors=1010
Your code so far
import React from 'react';
const soundBank = [
{
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'
}
]
class App extends React.Component {
constructor (props) {
super(props)
this.state ={
soundDisplay: "Sound Display Bar"
};
this.updateSound = this.updateSound.bind(this);
}
updateSound() {
this.setState({
soundDisplay: this.state.soundDisplay
})
}
render(){
return (
<div id="drum-machine" className='app-container'>
<div className="header" style={{backgroundColor: "green"}}>
header
</div>
<div className='control-container'>
<div id="display" className='pad-container'>
{soundBank.map ((sound) => (
<DrumPad sound={sound} soundDisplay={this.state.soundDisplay} key={sound.keyCode} className="drum-pad"/>
))}
</div>
<DisplayBar soundDisplay={this.state.soundDisplay} />
</div>
</div>
)
}
};
const DrumPad = ({ sound, soundDisplay }) => {
const handleKeyDown = (e) => {
if (e.keyCode === sound.keyCode) {
PlaySound();
};
};
React.useEffect(() => {
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown',handleKeyDown)
}
})
const PlaySound = () => {
const playAudio = document.getElementById(sound.keyTrigger);
playAudio.currentTime = 0;
playAudio.play();
soundDisplay = sound.id
console.log(soundDisplay)
}
return (
<div onClick={PlaySound} id={sound.keyCode} class="drum-pad">
<audio id={sound.keyTrigger} className="clip" src={sound.url}/>
{sound.keyTrigger}
</div>)
}
const DisplayBar = ({soundDisplay}) => {
console.log(soundDisplay)
return (
<div className="display-bar" id="display-bar">
<p>{soundDisplay}</p>
</div>
)
}
export default App;
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36
Challenge: Build a Random Quote Machine
Link to the challenge: