I’ve completed the 25+5 challenge in React and all tests pass, but when I run them locally, Chrome throws this error:
The same code running in codesandbox doesn’t throw anything, all fine.
I’d like to know if this is something that’s
- caused by my Chrome version
- caught behind the scenes by codesandbox, but still an error
- caused by the test suite but nothing to worry about
codesandbox is here, but as mentioned, nothing to see there: https://codesandbox.io/s/elegant-shtern-bomex
It’s some chrome weirdness with the
audio methods. If you google it, you can find a bunch of stuff about playing videos and play and pause firing when they shouldn’t and that it’s down to the async nature of playing and pausing, but I’ve tried several different ways with callbacks and await/async to fix this and haven’t fixed it yet.
Bottom line: the tests pass, the app works and doesn’t crash, and I can close the console and ignore it most of the time. But I would really like to see the solution to make it go away.
I get the error running locally (node on debian) and on codepen, in chrome. I just checked in firefox and no error.
As I understand it, what’s happening is that
audio.play() is called, and it returns a promise, and then
audio.pause() is called before the promise is resolved. Which might happen because the test suite runs everything so fast. I’m not handling any promises in my code, I just plainly call
audio.play() and it … well… works.
I think I’ll have to dive deeper into promises first before I can solve this.
That’s it. I can only get the error if sounds are started/stopped fast enough. And the fix, if it exists, is definitely something with async. But like I said, I’ve tried callbacks, promises, and async/await on the calls and could not prevent the error. The only thing I haven’t tried is to use a sound start/stop function in the top level component, handle the async there, and trigger that instead of
But the motivation just goes away when the error doesn’t exist in firefox and I can call it a bug in chrome.