Hi All,
I working on drum machine project,I used sound from react-sound which is not working in codepen can someone help me to rectify the error.
class App extends React.Component {
constructor() {
super();
this.state ={
sound: “‘https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3’”,
value: “Songs”
}
this.handlebuttonclick = this.handlebuttonclick.bind(this);
}
handlebuttonclick(e){
let soundfile = “”
switch(e.target.value){
case ‘Q’:
soundfile = ‘https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3’
break;
case ‘W’:
soundfile = ‘https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3’
break;
case ‘E’:
soundfile = ‘https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3’
break;
case ‘A’:
soundfile = ‘https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3’
break;
case ‘S’:
soundfile = ‘https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3’
break;
case ‘D’:
soundfile = ‘https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3’
break;
case ‘Z’:
soundfile = ‘https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3’
break;
case ‘X’:
soundfile = ‘https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3’
break;
case ‘C’:
soundfile = ‘https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3’
break;
}
this.setState(
{
sound: soundfile,
value: soundfile
}
)
}
render(){
return(
<div id="drum-machine">
<div id="display">
<input className = "drum-pad" type = "button" id = 'Q' value = "Q" onClick = {this.handlebuttonclick} />
<input className = "drum-pad" type = "button" id = 'W' value = "W" onClick = {this.handlebuttonclick} />
<input className = "drum-pad" type = "button" id = 'E' value = "E" onClick = {this.handlebuttonclick} />
<input className = "drum-pad" type = "button" id = 'A' value = "A" onClick = {this.handlebuttonclick} />
<input className = "drum-pad" type = "button" id = 'S' value = "S" onClick = {this.handlebuttonclick} />
<input className = "drum-pad" type = "button" id = 'D' value = "D" onClick = {this.handlebuttonclick} />
<input className = "drum-pad" type = "button" id = 'Z' value = "Z" onClick = {this.handlebuttonclick} />
<input className = "drum-pad" type = "button" id = 'X' value = "X" onClick = {this.handlebuttonclick} />
<input className = "drum-pad" type = "button" id = 'C' value = "C" onClick = {this.handlebuttonclick} />
<input id = "inputText" type = "text" value = {this.state.value}/>
</div>
<Sound
url={'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3'}
playStatus={Sound.status.PLAYING}
/>
</div>
);
}
}
ReactDOM.render(, document.getElementById(‘root’));
I think the issue must be ,I tried to run the code without the tab,the code works fine.