Drum machine failing on test case #06 and clicking on "RunTest" from FCC widget plays a sound from key 'Q' for some unknown reason!

JavaScript
1

hello everybody, trying to pass this test case#06 error for days now, but no luck, as i mentioned in topic statement, clicking on “Run Tests” from FCC widget keeps playing a sound from sound associated to “q”, each time!!

here is my codepen links to that, see if you can spot that issue, thanks :slight_smile: https://codepen.io/bappyasif/pen/dyWLNmv

2

Hi @bappyasif ,

The test says, ’ When I press the trigger key associated with each .drum-pad, the audio clip contained in its child <audio> element should be triggered ’

You are doing this on click, where you are querying for the audio element identified by the clicked key id.
But on key press, you are simply creating a new audio element and taking the audio source from the list of audio files and playing it.

Inside the playSoundsOnPress(evt), apply the same code for playing the audio as you are using inside the playSoundsOnClick(evt), as below:

let audioElem = document
				.querySelector(`#${key}`)   <-- query by the key variable
				.querySelector("audio");

Hope this helps.

1 Like
3

it sure did help!! thanks :slight_smile:
i wasnt aware that “key” needs to be available in “press” events!! but let me see if i can make this to work!! thanks again, much appreciated :slight_smile:

4 
playSoundsOnPress(evt) {
		let keypadTokens = list.split(",");

		let key = evt.key.toLowerCase();
		let idx = keypadTokens.indexOf(key);
		
		let keyPressed = evt.target.querySelector(`#${key}`);
		
		if (keyPressed) {
			this.setState({ play: drumSounds[idx].name });
			// let audio = document.createElement("audio");
			// audio.src = drumSounds[idx].sound;
			let audio = keyPressed.querySelector('audio');
			audio.volume = this.state.volume;
			audio.play();
		} else {
			console.log(key, "ignore!!");
		}
	}

i made that change and targeting “audio” element from that “pressed” key, but still getting that error!! :frowning:

5

Hey @bappyasif ,

Making a small change as below passes the test for me:

let keyPressed = document.querySelector(#${key}); ← key instead of keyId

But I am not really sure why document.querySelector(#${keyId}) isn’t working ?

6

i initially tried it, i suppose, but now i got it to pass!! thanks for your help, much appreciated :slight_smile:

happy coding :slight_smile:

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.