Pomodoro Clock Example Project

[gunderodd]

Issue Description

The example for the Pomodoro Clock project does not make an audible beep when I use Chrome, and fails either 1 or 2 tests (Tests 1 and/or 2 of the #Audio section) in Chrome. I can hear the beep and the tests pass on Edge and Firefox.

Browser Information

• Browser Name, Version: Chrome 80 (But not on Edge or Firefox)
• Operating System: Windows 10
• Mobile, Desktop, or Tablet: Desktop (Though I replicated the problem on Chrome on my Android device)

Your Code / Link to Your Pen

The Pomodoro Example project from FCC

https://codepen.io/freeCodeCamp/full/XpKrrW

[parkers116]

I have the same issue. But I think it is not the bug of this project.
This issue cause due to the upgraded security of Chrome 80.
All HTTP request in audio tag would be automatically converted to HTTPS
If the server of request URL doesn't have HTTPS, it cannot reach.

[gunderodd]

@parkers116 that is very interesting. I don't know much about it, myself, so I did some research, and found this:

Chrome 80 also sees some changes in the way that the browser handles HTTPS requests. The problem is many pages using HTTPS still load some of the content they contain using insecure HTTP. This is called mixed content and it’s a particular problem for images, audio, and video, Google has said. It’s all very well loading a page securely, but if it loads an insecure image that compromises your browser, you may as well not have bothered with HTTPS at all.

The company moved towards blocking all mixed content by default in Chrome 79, but it’s doing it in stages. In Chrome 80, mixed audio and video resources will be upgraded automatically to HTTPS. If they can’t load using that protocol, the browser will block them. Mixed images will still load, but they will prompt a “Not Secure” icon in the omnibox (that’s the address bar, to you and me).

[moT01]

For more visibility, please open issues on the main repo for these. Thanks and happy coding 🎉