音频未按预期播放答案

【问题标题】：Audio doesn't play as expected音频未按预期播放
【发布时间】：2021-05-15 19:09:50
【问题描述】：

我写了一个通知函数，当条件满足时应该发出警报声，并在确认后停止。但音频不播放，只显示确认框。这是我的代码：

    function notify() {
    const alarm = new Audio('link to remote alarm audio');
    alarm.loop = true;
    alarm.play();
    if (confirm('Pause Audio?')) {
        alarm.pause();
    }
}

更新：错误消息 ->“DOMException: play() 失败，因为用户没有先与文档交互”

【问题讨论】：

打开浏览器控制台并检查错误。如果音频来自另一个域，您可能会遇到某种 CORS 错误。
您好，感谢您的回复。我已启用 CORS，控制台上没有错误
如果不可能，发布 tge 音频 url，任何其他 url 也失败
音频文件大小约为 1.5MB。会不会是问题？
尝试将alarm.play() 替换为alarm.autoplay = true 并暂时删除if 确认。它应该在加载时播放。还要检查您的浏览器是否阻止音频再现，大多数浏览器都会阻止自动播放的音频。最明显但可能的情况是，检查您的浏览器是否正在复制任何音频。

标签： javascript

【解决方案1】：

经过一番小研究，我发现用户需要interact with document。根据您的用例，如果用户之前曾与文档进行过交互，那么它将可以正常工作，而不会出现任何错误。
（如果您单击文档的正文，在提示出现之前，您会看到音频播放）。

function notify() {
  const alarm = new Audio('https://freesound.org/data/previews/34/34025_302129-lq.mp3');
  alarm.loop = true;
  alarm.play();
  if (confirm('Pause Audio?')) {
    alarm.pause();
  }
}

notify();

function confirm(msg){   //For Testing Purposes
  return prompt(msg);
}

【讨论】：

感谢您的回复，但仍然无法播放音频。也尝试了您的示例，但仍然不起作用。当我手动打开链接时播放没有任何问题
@MM2021 我已经更新了我的答案。请检查。
谢谢，但它是一个通知机器人，应该通知用户返回页面，因此用户在音频播放之前没有交互。此外，最好在 if 语句之前添加一个超时，以使音频有足够的时间播放。我也发布了我的解决方案。看看
@MM2021 是的。此代码在 Firefox 上运行良好，但不适用于 chrome。问题是，您不能要求每个用户都使用该代码运行 chrome。
没错。但这是一个仅供个人使用的本地机器人项目。 AFAIK 如果不更改 Chrome 设置，就无法绕过此 Google 政策。

【解决方案2】：

尝试在alarm.play()之前设置调用alarm.load()

【讨论】：

谢谢，但如果没有用户首先在 Chrome 上进行交互，仍然无法播放。检查我的答案。查看此链接 -> developers.google.com/web/updates/2017/09/…

【解决方案3】：

我做了一些研究，发现playing audio without user interact is again Google rules。因此在内部切换到 Chrome 之后添加了 1 秒超时，以便为音频文件提供足够的时间来加载。

使用此代码运行 chrome -> chrome.exe --autoplay-policy=no-user-gesture-required

function notify() {
    const alarm = new Audio('https://audio-link');
    alarm.loop = true;
    alarm.play();
    setTimeout(() => {
        if (confirm('Do you see that?')) {
            alarm.pause();
        }
    }, 1000);
}

【讨论】：