Drum Machine project - Failing tests 5 & 6 (using typescript)

Hi there,

I have been working on completing the drum machine project, However it’s not passing tests 5 & 6. I wanted to include typescript with this project to gain experience using the language for my portfolio.

While tests 5 & 6 fail, the audio clips play with each button click. However, upon running the tests for the project, I believe all of the clips play at the same time (headphone warning).

I wanted to be more efficent with my code and code dynamically instead of hardcoding each button and assigning the apporiate values.

Within my Display component I store a JSX element that maps over the array of objects (audioClips) and for each object a button is created that uses those property values for the Button component.

I use React’s useRef() hook instead of getElementById() as it’s react-friendly. btnRef.current holds a reference to the actual DOM node of the <button> element.

Here is my codepen https://codepen.io/tom-williams/pen/NWEoJQo

Hope I explained this okay. Any questions please ask away.

Thank you


You can’t use the Audio constructor. It has to be using audio elements so the test can check the state of them (paused if not playing).

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