Hello,
I am working on the Drum Machine project and I have it working, when I presss the keys they trigger sounds, however 7th test fails for some reason!
test: '## 6. When I press the trigger key associated with each .drum-pad, the audio clip contained in its child audio element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string “Q”, pressing the W key should trigger the drum pad which contains the string “W”, etc.).
returns: ’ No audio plays when the Q key is pressed : expected true to be false’
my code:
UPDATE: I figured it out!
For those who have the same issue: I used checks for ‘keypress’ as it ignores stuff like enter, but the test sensor must check for keydown code (81) where my keypress sent (131)
basically use keydown not keypress!
class DrumPad extends React.Component {
constructor(props){
super(props);
this.state = {
url: this.props.url,
key: this.props.keyPress,
keyCode: this.props.keyCode,
clipID: this.props.clipID
}
this.handleKeyPress = this.handleKeyPress.bind(this);
this.playSound = this.playSound.bind(this);
}
componentDidMount() {
document.addEventListener('keypress', this.handleKeyPress);
}
componentWillUnmount() {
document.removeEventListener('keypress', this.handleKeyPress);
}
handleKeyPress(event){
//alert(event.keyCode);
if(event.keyCode == this.state.keyCode){
this.playSound();
}
}//handlekeyPress
playSound(){
const audio = document.getElementById(this.state.key);
audio.currentTime = 0;
audio.play();
}//end playSound()
render(){
return (
<div>
<button className='drum-pad' id={this.state.clipID} onClick={this.playSound}><audio id={this.state.key} className='clip' src={this.state.url}></audio>{this.state.key}</button>
</div>
);
}
}
class App extends React.Component {
constructor(props){
super(props);
this.state = {
};
}//end constructor
render(){
return (
<div id='drum-machine'>
<div id='drum-pad-container'>
<DrumPad clipID='homer-doh' keyCode={113} keyPress='Q' url='https://springfieldfiles.com/sounds/homer/doh.mp3'/>
<DrumPad clipID='bard-eat-shorts' keyCode={119} keyPress='W' url='https://springfieldfiles.com/sounds/bart/eatmyshorts.mp3' />
<DrumPad clipID='nelson-haha' keyCode={101} keyPress='E' url='https://springfieldfiles.com/sounds/nelson/haha.wav'/>
<DrumPad clipID='apu-hello-gents' keyCode={97} keyPress='A' url='https://springfieldfiles.com/sounds/apu/apuhello.mp3' />
<DrumPad clipID='flanders-dilly-pickle' keyCode={115} keyPress='S' url='https://springfieldfiles.com/sounds/flanders/dillypickle.mp3'/>
<DrumPad clipID='berns-undead-bitch' keyCode={100} keyPress='D' url='https://springfieldfiles.com/sounds/burns/bitch.mp3' />
<DrumPad clipID='comic-book-dispense' keyCode={122} keyPress='Z' url='https://springfieldfiles.com/sounds/cbg/insults.mp3'/>
<DrumPad clipID='lisa-fox-new-low' keyCode={120} keyPress='X' url='https://springfieldfiles.com/sounds/lisa/fox.mp3' />
<DrumPad clipID='marge-whoop-tooshie' keyCode={99} keyPress='C' url='https://springfieldfiles.com/sounds/marge/whuptushie.mp3'/>
</div>
<p id='display'></p>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
//