浏览器拒绝javascript play() [英] Browser denying javascript play()

问题描述

我有一个带有输入字段的页面，用于扫描产品.当扫描条形码或在字段中键入SKU时，会发出ajax请求，并且应用程序会根据响应使用

I have a page with an input field for scanning products. When a barcode is scanned or a SKU is typed into the field, an ajax request is made and the application plays either a success or an error sound depending on the response using HTMLMediaElement.play().

sounds.error.play();

前一阵子工作正常，但现在我收到此错误:

This was working fine a while ago but now I get this error:

⚠仅当获得用户批准，网站被用户激活或媒体被静音时，才允许自动播放.

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

其次:

NotAllowedError:用户代理或平台在当前上下文中不允许使用play方法，这可能是因为用户拒绝了权限.

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，因此在页面加载时，该输入字段将以编程方式集中显示，从而使最终用户更轻松地进行操作.我尝试删除此焦点，以便用户必须单击输入字段，但这似乎无法满足允许播放音频的任何要求

Since this page only exists for the purpose of scanning SKUs, when the page loads, that input field is programmatically focused so as to make things easier on the end user. I tried removing this focus so that the user must click into the input field, but that doesn't appear to satisfy whatever the requirements are to allow playing of audio

经过更多的实验，我发现在进行一些额外的用户交互之后，声音会播放.例如，如果我创建一个复选框以启用"声音，然后用户单击它，这似乎就足够了.或者，如果用户在输入元素之外单击，然后再次回到输入元素，那也可以.

After a bit more experimenting I found that with some additional amount of user interaction, the sound will play. For instance if I create a checkbox to "enable" the sound and the user clicks it, that appears to be enough. Or if the user clicks outside of the input element and then back into to it again that also works.

满足大多数现代浏览器以允许播放音频的要求到底是什么?

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

I realize the answer may be different for different browsers and configurations, but I was unable to find anything authoritative for current versions of either Firefox or Chrome. I'm looking for a workaround so that the application does not need to be complicated with extra clicks or other kinds of interactions, and since I am now aware of this new policy, I'd like the revisions to be as unobtrusive as possible.

更新:

这是我努力演示此问题的基本示例.我刚才尝试了三种不同的浏览器，它们的行为都有所不同.Firefox的行为如上所述特别重要-在我专注于输入字段，模糊然后单击再次聚焦之前，不会播放声音:

Here is a basic example I worked up to demonstrate the issue. I tried three different browsers just now and they all behaved a bit differently. Firefox in particular behaves as described above — does not play the sound until I focus on the input field, blur, then click to focus again:

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

推荐答案

Firefox 70 已解决此问题 .该答案的其余部分提供了解释和建议的解决方法.

[edit] Firefox 70 fixes this issue. The rest of this answer provides an explanation and the proposed workaround.

当您想知道关于用户与该网站" 条件表示:

• 请注意，当前不需要响应用户手势来触发自动播放(尽管Mozilla

• 根据Firefox源代码中的注释代码，

• Note that there's currently no requirement for the autoplay to be triggered in response to a user gesture (though Mozilla considers changing this). The user must interact with the page to "activate" it, after which autoplay is allowed.

• According to a comment in Firefox source code,

[激活"是由]事件触发的，这些事件很可能是用户与文档的交互，而不是与浏览器交互的副产品(即，按下按键以滚动查看端口，键盘快捷键等).

["activation" is triggered by] events which are likely to be user interaction with the document, rather than the byproduct of interaction with the browser (i.e. a keypress to scroll the view port, keyboard shortcuts, etc).

具体地说，在当前的Firefox开发版本中，以下事件不会使页面用户手势激活"(

针对文本输入或可编辑文档(例如 contenteditable )的事件，例如键入/单击文本输入； -这是影响您用例的例外；现在已在Firefox 70中删除.

与可打印字符不对应的按键，请输入或空间；或在按住修饰符(例如CTRL)的同时按下的任何键

触摸非点击事件(例如，滑动，平移，滚动)

• Events targeted at a text input or an editable document (e.g. contenteditable), e.g. typing/clicking on a text input; - this was the exception that affected your use-case; now removed in Firefox 70.
• Key presses that don't correspond to printable characters, enter or space; or any keys pressed while holding modifiers, such as CTRL)
• Touch events that are not taps (e.g. swiping, panning, scrolling)

一个想法-从伪造/模糊的文本框开始，然后在键入第一个字符(将第一个字符添加到通过JS输入的文本中)之后显示/集中显示真实的文本框-以下代码似乎在Firefox中有效:

An idea - start with a fake/blurred textbox, and show/focus the real textbox after the first character is typed (adding the first character to the text input via JS) - the following code appears to work in 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();
    }
})

如果用户通过单击文本输入开始操作，这将无济于事，但是在这种情况下，可以实施后备非听觉反馈.

This won't help if the user starts by clicking the text input, but a fallback non-audible feedback could be implemented for this case.

这篇关于浏览器拒绝javascript play()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！