My drum machine plays the same sound regardless of the button pressed, how do i change that?
const keys = [{
name: 'Q',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3',
description: 'Heater-4_1',
},{
name: 'W',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',
description: 'Heater-1',
},{
name: 'E',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3',
description: 'Kick_n_Hat',
},{
name: 'A',
url: 'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3',
description: 'Chord_1',
},{
name: 'S',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3',
description: 'punchy_kick_1',
},{
name: 'D',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3',
description: 'Brk_Snr',
},{
name: 'Z',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3',
description: 'Dry_Ohh',
},{
name: 'X',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3',
description: 'Heater-3',
},{
name: 'C',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3',
description: 'Dsc_Oh',
},
];
class App extends React.Component{
constructor(props){
super(props);
this.state = {
play:false,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this.audio);
this.setState({
play:!this.state.play,
});
this.audio.play();
this.audio.currentTime = 0;
}
render(){
let drumpad = keys.map(item => <div id={item.description}>
<div id='display'>
<button className='drum-pad' id={item.name} onClick={this.handleClick}>{item.name}
<audio className='clip' id={item.name} src={item.url} ref={ref => this.audio = ref}/>
</button>
</div>
</div>);
return (
<div id='drum-machine'>
{drumpad}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));