浏览器拒绝 javascript play()

Question

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

sounds.error.play();

这在前一段时间工作正常，但现在我收到此错误：

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

接着是：

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

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

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

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

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

更新：

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

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

Answer 1

在 Safari 中允许在 video 标签中自动播放，您需要向它们添加 playsinline 属性。像这样：

<video autoplay="" muted="" playsinline=""></video>

Answer 2

我也遇到了同样的问题，而且我很容易就解决了这个问题：

只需在播放按钮上更改事件监听器

onClick={togglePlay} 到 onClickCapture={togglePlay}

React 中使用钩子的示例：

const Player = ({ audio }) => {
const [playing, setPlaying] = useState(false);

const togglePlaying = () => setPlaying((prev) => !prev);

useEffect(() => {
    if (audioRef && audioRef.current) {
        if (playing) {
            audioRef.current.play();
        } else {
            audioRef.current.pause();
        }
    }
  }, [playing]);

  return (

 <audio
            
            autoPlay=""
            src={audio}
            ref={audioRef}
            onTimeUpdate={(e) => setCurrentTime(e.target.currentTime)}
            onCanPlay={(e) => setDur(e.target.duration)}
            onEnded={songEnded}
        />
            <PlayerStart onClickCapture={togglePlaying}>
                    {playing ? <PauseIcon /> : <PlayIcon />}
            </PlayerStart>
    )
}

Answer 3

[编辑] Firefox 70 fixes this issue。该答案的其余部分提供了解释和建议的解决方法。

正如您 wondered 所说，“用户已与网站互动” 标准具体意味着什么：

• 请注意，当前不需要触发自动播放以响应用户手势（尽管 Mozilla considers changing this）。用户必须与页面交互才能“激活”它，之后才允许自动播放。

• 根据comment in Firefox source code，

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

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

  • 针对文本输入或可编辑文档的事件（例如contenteditable），例如键入/单击文本输入； - 这是影响您的用例的例外情况；现已在 Firefox 70 中移除。
  • Key presses that don't correspond to printable characters, enter or space; or any keys pressed while holding modifiers, such as 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();
    }
})

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

Answer 4

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

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

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

---

这是与arrayBuffer using AJAX 类似的解决方案

这是DEMO