浏览器拒绝 javascript play()

Question

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

 sounds.error.play();

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

⚠ 只有在用户批准、网站被用户激活或媒体静音时才允许自动播放。

其次是：

NotAllowedError：当前上下文中的用户代理或平台不允许播放方法，可能是因为用户拒绝了权限。

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

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

满足大多数现代浏览器以便允许播放音频的具体要求是什么？

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

更新：

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

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

原文由 Eaten by a Grue 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

[编辑] Firefox 70 修复了这个问题。该答案的其余部分提供了解释和建议的解决方法。

正如您 想知道 “用户已与网站进行交互” 标准的具体含义：

• 请注意，目前不要求 响应 用户手势触发自动播放（尽管 Mozilla 考虑更改此 设置）。用户必须与页面交互以“激活”它，然后允许自动播放。
• 根据 Firefox 源代码中的评论，

[“激活”由]事件触发，这些事件可能是用户与文档的交互，而不是与浏览器交互的副产品（即滚动视口的按键、键盘快捷键等）。

• 具体来说，在当前的 Firefox 开发版本中，以下事件不会使页面“用户手势激活”（ 代码）：

  • 针对文本输入或可编辑文档的事件（例如 contenteditable ），例如键入/单击文本输入； - 这是影响您的用例的异常；现在已在 Firefox 70 中删除。
  • 与可打印字符、输入或空格不对应的按键；或按住修饰符（例如 CTRL）时按下的任何键）
  • 不是点击的触摸事件（例如滑动、平移、滚动）

一个想法——从一个假的/模糊的文本框开始，在输入第一个字符后显示/聚焦真实的文本框（通过 JS 将第一个字符添加到文本输入中）——以下代码似乎在 Firefox 中工作：

 $(document).one('keypress', function(ev) {
    // copy the first character typed over to the text input
    let char = String.fromCharCode(ev.which);
    $('.play').val(char).focus();
});

$('.play').on('keypress', function() {
    if($(this).val().length === 3) { // assuming you want to validate when a certain number of characters is typed
        sounds[$(this).data('sound')].play();
    }
})

如果用户通过单击文本输入开始，这将无济于事，但可以为这种情况实施后备无声反馈。

原文由 Nickolay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

• 音频被静音或音量设置为 0；
• 用户与站点进行了交互（通过单击、点击、按键等）
• 如果该站点已列入白名单；如果浏览器确定用户频繁使用媒体，这可能会自动发生，或者通过首选项或其他用户界面功能手动发生
• 如果自动播放功能策略用于向 <iframe> 及其文档授予自动播放支持。

---

这是 使用 AJAX 的 arrayBuffer 所需 的类似解决方案

这是一个 演示

原文由 Luis Febro 发布，翻译遵循 CC BY-SA 4.0 许可协议