FreeCodeCamp Pomodoro Clock番茄钟项目蜂鸣音效无法播放问题求助

• 音频资源地址错误：你当前<audio>标签的src属性填写的是YouTube的网页播放页地址，本质是HTML文档，不是浏览器<audio>标签支持的mp3、wav、ogg等音频格式资源，无法正常加载音频内容，自然无法播放。
• 浏览器自动播放策略限制：主流浏览器默认禁止非用户交互触发的音频播放，定时器自动触发的audio.play()调用如果没有提前经过用户点击交互授权，会被浏览器直接拦截，控制台会抛出对应权限错误。
• 音频操作时机错误：你在JS代码顶部直接执行audio.currentTime = 1.8，此时音频资源还未完成加载，会触发DOMException异常，也会干扰后续播放逻辑。

1. 替换为合法的音频直链，建议使用项目要求的官方蜂鸣音频资源，替换原有audio标签：

<audio id="beep" preload="auto" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav" />

2. 调整音频时间设置的时机，等音频元数据加载完成后再修改currentTime，替换JS顶部的音频初始化代码：

const audio = document.getElementById('beep');
audio.addEventListener('loadedmetadata', () => {
  audio.currentTime = 1.8;
});

3. 适配浏览器自动播放策略，在用户第一次点击播放按钮时提前获取播放权限，在handlePlayPause方法的启动分支（else代码块）最开始添加如下代码：

// 利用用户点击交互触发授权
audio.muted = true;
audio.play().then(() => audio.pause()).catch(() => {});
audio.muted = false;

完成以上修改后即可正常播放蜂鸣提示音，出现其他异常时可以打开浏览器开发者控制台查看对应错误信息快速定位问题。

内容的提问来源于stack exchange，提问作者Kevin Orara