Hello!
I’m trying to finish this project using react hooks but I got stuck.
I can’t figure it out how to click a button and play the corresponding audio.
I guess I should use useRef but I can’t find a solution yet.
Here’s my code, thanks!
const dataset = [{
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 ComicContext = React.createContext()
function App(){
const [ display, setDisplay ] = React.useState('')
const [ data, setData ] = React.useState(dataset)
return (
<ComicContext.Provider value={{ data:data }}>
<div id="drum-machine">
<div id="display">{ display }</div>
<div id="drumpads">
<Drumpad/>
</div>
</div>
</ComicContext.Provider>
)
}
function Drumpad(){
const {data} = React.useContext(ComicContext)
const inputRef = React.useRef()
{ return( data.map(d => (
<div
className="drum-pad"
id={d.id}
onClick={() => console.log(inputRef.current)}>
<p>{d.keyTrigger}</p>
<audio ref={ inputRef }
className='clip'
src={d.url}
id={d.keyTrigger}>
</audio>
</div>)))
}
}
The original snippets:
onClick={handleClick}>
<p>{letter}</p>
<audio ref={ref => this.audio = ref}
className='clip'
src={url}
id={letter}>
</audio>
and the function handleClick:
handleClick = () => {
this.audio.play()
this.audio.currentTime = 0
this.props.handleDisplay(this.props.id)
}