25 + 5 Clock: Need help regarding Tests 27/29

Hey guys, been stuck on this for awhile and kinda going nuts.

CodePen: https://codepen.io/Xancti/pen/zYBqZQB?editors=1111

A little context on the two tests:
#27 - When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5

#29 - The audio element with id of “beep” must stop playing and be rewound to the beginning when the element with the id of “reset” is clicked.

My issue is the following: As part of my function restart(), and at line 99 - audio.current.pause()…

(a) if, I do leave line 99 commented out, I can pass Test #27 but fail Test #29
(b) If it’s not commented out, instead, I fail Test #27 but pass Test #29

I’ve checked various posts on the FCC forums specifically related to the 25 + 5 Clock and audio issues; tried implementing a shorter and suggested audio file (which is the current one) and also tried using the regular ref={(audio) => {audioBeep => audio}} in a separate fork.

I think what absolutely boggles me the most is that the audio.current.pause() seems to make it so that the audio file plays on occasion i.e. sometimes, but not all the time?

Checked stackoverflow for audio.current.pause() making html5 audio play occasionally but found nothing relatable apart from trying out different browsers? Didn’t have any different results on Mozilla // Firefox.

Any help would be super appreciated because I am desperate | beaten | stumped.

Welcome to the forums.

I have a slightly different structure than you do, but my reset function calls

      document.getElementById('beep').pause();
      document.getElementById('beep').load();

to stop and requeue the beep. Similarly, I have my tick() function call the play() method at the appropriate times. Those are my only three calls to any of the audio methods. Our audio tags are the same (except the source). I did not attempt to use the document.getElementById('beep').currentTime property, even though the documentation suggests you can achieve the same results with load() and currentTime.

Also, you have at lines 30 and 46

      audio.currentTime = 0;

but line 99 is

    audio.current.currentTime = 0;

I’m not sure which is correct for your definition of audio, but I feel it’s the second one and I would guess that they should probably all be the same.

My other suggestion would be to try load() instead of using currentTime.

Good luck. The hardest tests to pass are the last ones when everything is >99% correct…

Hey Jeremy, thanks for the response, welcome and well wishes!

I’ve changed both lines 30/46, and changed my reset to a .pause() and then .load().

Unfortunately, it’s still not working.

Thinking maybe I should try a variant whereby I have a singular timer state (as opposed to the two I have now) cause I’m out of ideas on the audio end of things.

That would be my next suggestion too. I didn’t fully trace your program’s logic, but since it looked right at first glance my guess would be something deeper like too many timer states not playing together nicely.

I had a very similar problem with the drum machine audio a while back. It took forever to correct and I can’t remember what the issue was right now, but my code for playing audio is the same in both projects. I do remember spending a lot of time playing with the app and running the tests while watching the dev console to try to find the problem.

Hey Jeremy!

Glad to say I finally figured out the issue.

Started troubleshooting by tracking the number of times the audio file was played on the example we were given, and found that it counted 8 times vs. the 7 times that it played on mine.

On further tracking, it was the very last play that was skipped by the test.

So far, the only solution that works (out of the few others I’ve tried), is to set the audio to play at duration === 1, as opposed to 0.

Note: The above solution works for both variants of code, whereby there’s two timers and one singular time (yes, I also did end up rewriting it).

I suspect maybe there’s a slight delay to the audio cues and when the test stops, it cuts off that last audio and we end up failing the tests.

I understand it’s not quite the same as playing it at exactly 0, but very much rather move on to learning Svelte now!

Just wanted to keep you posted, and again, thanks for the help :slight_smile:

P.S. So damn relieved I’m done with this.

That’s good news. I think this problem and my old problem with the drum machine are related and have to do with the fact that playing and loading media are asynchronous and that those functions are returning promises that are not being handled and the multiple play/pause cycles of the testing occur fast enough to get them out of order. I still get

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

in my console (Chrome) while running either project through the tests, but both pass the tests and run and I only see the message if I’m watching the console, so I haven’t taken the time to fix it.

As an aside, my audio is about 3 seconds and passes the tests, but does throw that DOMException on the last run similar to where you were having problems.

There are plenty of examples in the forum and other places for that error. I have tried to fix it before with methods suggested in those results with no luck, but I think I’ll have another go at it in the near future.