javascript - 浏览器拒绝 javascript play()

Question

我有一个带有用于扫描产品的输入字段的页面。当扫描条形码或在字段中输入 SKU 时，会发出 ajax 请求，应用程序会根据使用 HTMLMediaElement.play() 的响应播放成功或错误的声音。 .

sounds.error.play();

前一段时间工作正常，但现在出现此错误:

⚠ Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted.

其次是:

NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

由于此页面仅用于扫描 SKU，因此当页面加载时，该输入字段以编程方式聚焦，以便最终用户更轻松地完成操作。我尝试删除此焦点，以便用户必须单击输入字段，但这似乎不能满足允许播放音频的任何要求

经过更多的试验后，我发现通过一些额外的用户交互，声音将会播放。例如，如果我创建一个复选框来“启用”声音并且用户单击它，这似乎就足够了。或者，如果用户在输入元素外部单击，然后再次返回输入元素，这也有效。

要满足大多数现代浏览器才能播放音频的具体要求是什么？

我意识到不同的浏览器和配置的答案可能不同，但我找不到任何关于当前版本的 Firefox 或 Chrome 的权威信息。我正在寻找一种解决方法，这样应用程序就不需要因额外的点击或其他类型的交互而变得复杂，而且由于我现在知道这项新政策，所以我希望修改尽可能不引人注目。

更新:

这是我用来演示该问题的基本示例。我刚才尝试了三种不同的浏览器，它们的行为都有些不同。尤其是 Firefox 的行为如上所述 - 在我专注于输入字段、模糊、然后再次单击以再次聚焦之前不会播放声音:

http://so.dev.zuma-design.com/input-sounds.html

Answer 1

当涉及到自动播放多媒体时，所有现代浏览器(尤其是 chrome)都存在一些权限阻塞。

这是来自 MDN 的自动播放可用性部分显示何时允许媒体自动执行:

• The audio is muted or its volume is set to 0;
• The user has interacted with the site (by clicking, tapping, pressing keys, etc.)
• If the site has been whitelisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features
• If the autoplay feature policy is used to grant autoplay support to an <iframe> and its document.

---

这是一个类似的解决方案，可满足您对 arrayBuffer using AJAX 的需求。

这是一个DEMO