[solved] (Drum Machine Help) last missing test: `The play() request was interrupted by a call to pause()`

#1

Hi all,

Struggling to pass test #6 (only one missing) for the Drum machine project.

The code is working (does what I expect it to do), but I can’t pass this one test.

I get The play() request was interrupted by a call to pause() on the console. Pointers on how to fix whatever is stopping the test are more than welcome!

My code:

const soundLibrary = [
	{
		idDivKey: 'Heater-1',
		idAudioKey: "Q" ,
		url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',
		key: 'q'
	},
	{
		idDivKey: 'Heater-2',
		idAudioKey: "W" ,
		url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3',
		key: 'w'
	},
	{
		idDivKey: 'Heater-3',
		idAudioKey: "E" ,
		url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3',
		key: 'e'
	},
	{
		idDivKey: 'Dsc_Oh',
		idAudioKey: "A" ,
		url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3',
		key: 'a'
	},
	{
		idDivKey: 'RP4_KICK_1',
		idAudioKey: "S" ,
		url: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3',
		key: 's'
	},
	{
		idDivKey: 'Cev_H2',
		idAudioKey: "D" ,
		url: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3',
		key: 'd'
	},
	{
		idDivKey: 'Chord_3',
		idAudioKey: "Z" ,
		url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3',
		key: 'z'
	},
		{
		idDivKey: 'Dry_ohh',
		idAudioKey: "X" ,
		url: 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3',
		key: 'x'
	},
	{
		idDivKey: 'Brk_Snr',
		idAudioKey: "C" ,
		url: 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3',
		key: 'c'
	},
]

const App = () => {  
  
  const [display, setDisplay] = React.useState(
    'Drum Name'
  );
	
	React.useEffect(() => {
		document.addEventListener('keydown', PressedKey);
	})
	
	const Play = (element) => {
		const audioElement = document.getElementById(element.idAudioKey);
		audioElement.currentTime = 0; //allows user to click continuously on element without having to wait for sound to die off;
		audioElement.play(); //play the current audio
		setDisplay(element.idDivKey) //set state with the name of the drum
	}
	
	const PressedKey = (e) => {
		soundLibrary.forEach(sound => {
			// console.log(e.key);
			// console.log(sound.key);
			if(e.key === sound.key)  {
							// console.log(sound.key);
							// console.log(e.key);
				document.getElementById(sound.idAudioKey).currentTime = 0;
				document.getElementById(sound.idAudioKey).play();
				setDisplay(sound.idDivKey);				
			}
		})
	}
  
  return (
		
		<React.Fragment>
			<div id="drum-machine">
      <div className="container">
      	<div id="display">{display}
					{soundLibrary.map(sound => {
						return (
							<div className="drum-pad" id={sound.idDivKey} onClick={() => Play(sound)}><audio src={sound.url} className="clip" id={sound.idAudioKey}></audio>{sound.idAudioKey}
							</div>
						)
					})}
				</div>	
      <footer>
		<ul className="footer-options">
      <li className="footer-link"><a href="#" className="footer-linktext">Legal</a></li>
      <li className="footer-link"><a href="#" className="footer-linktext">Contact Us</a></li>
    </ul>
<span>© 2019 Developed by Pat. All Rights Reserved.</span>
	   </footer>
				</div>
			</div>
		</React.Fragment>
      )  
}

ReactDOM.render(<App />, document.getElementById('app'));
#2

Hello pat.

The tests are very specific. If you change all of your lowercase keys to uppercase, the test will pass.

Example:

const soundLibrary = [
	{
		idDivKey: 'Heater-1',
		idAudioKey: "Q" ,
		url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',
		key: 'Q' //Changed from 'q'
	},

Hope this helps.

1 Like
#3

Thanks @Sky020 that indeed helps me pass the test. but the machine then no longer works (the machine does not work when I press keyboard keys).

Guess this is the issue: if(e.key === sound.key)

Acc. to MDN e.key seems to be lowercase, so that equality no longer works and pressing keys do not make the machine drum

So, then I’ve tried the opposite and made it all lowercase. Now the machine also works (it drums in all cases) but now both test 3 and 6 do not pass.

Any other pointers? :slight_smile:

#4

You’ve changed first key to X (it should be Q).

#5

ok, massive hack:

(for others in the future) This passes tests and works:

if(e.key.toUpperCase() === sound.key)

#6

thanks, yes, that was a momentary typo (that complicated debugging). I’ve fixed that now.

Still, making all keys uppercase or lowercase do not allow me to make the machine drum and pass the tests. My hack (my answer above) made the code work and pass tests. It ain’t pretty though. Should any additional solution cross your mind, please let me know :slight_smile:

#7

Just changing the code I suggested above works just fine. All it means is that you need to hold the shift key when you press the buttons. However, putting them to uppercase as you have is a suitable work-around, if you want specific functionality.

1 Like
#8

Oh I see. Guess shift brings equality to equality test.

Thanks for all the help @Sky020!

1 Like
#9