jjzjj

javascript - 浏览器拒绝 javascript play()

coder 2024-07-15 原文

我有一个带有用于扫描产品的输入字段的页面。当扫描条形码或在字段中输入 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

最佳答案

当涉及到自动播放多媒体时，所有现代浏览器(尤其是 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

关于javascript - 浏览器拒绝 javascript play()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57504122/

javascriptplaysectionstrongblockquotegoogle-chromefirefoxaudio

有关javascript - 浏览器拒绝 javascript play()的更多相关文章

  1. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作

  2. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru

  3. ruby - rbenv 安装权限被拒绝 - 2

    大家好，我正在尝试设置一个开发环境，并且我一直在关注以下教程:Linktotutorial我做得不是很好，除了最基本的版本控制内容外，我对终端命令没有任何实际经验。我点击了第一个链接并尝试运行source~/.bash_profile我得到了错误；mkdir:/usr/local/rbenv/shims:权限被拒绝mkdir:/usr/local/rbenv/versions:权限被拒绝现在每次我加载终端时都会出现错误。bash_profile的内容；exportPATH=/usr/local/rbenv/bin:$PATHexportRBENV_ROOT=/usr/local/rbe

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - 强制浏览器下载文件而不是打开文件 - 2

    我要下载http://foobar.com/song.mp3作为song.mp3，而不是让Chrome在其native中打开它浏览器中的播放器。我怎样才能做到这一点？ 最佳答案 您只需要确保发送这些header:Content-Disposition:attachment;filename=song.mp3;Content-Type:application/octet-streamContent-Transfer-Encoding:binarysend_file方法为您完成:get'/:file'do|file|file=File.

  6. ruby - 404 未找到，但可以从网络浏览器正常访问 - 2

    我在这方面尝试了很多URL，在我遇到这个特定的之前，它们似乎都很好:require'rubygems'require'nokogiri'require'open-uri'doc=Nokogiri::HTML(open("http://www.moxyst.com/fashion/men-clothing/underwear.html"))putsdoc这是结果:/Users/macbookair/.rvm/rubies/ruby-2.0.0-p481/lib/ruby/2.0.0/open-uri.rb:353:in`open_http':404NotFound(OpenURI::HT

  7. ruby - rbenv:权限被拒绝 - 2

    我正在关注Ryan的RailsCast第339集。我已经安装了rbenv并且可以运行ruby-v。我退出了我的session，当我试图返回时(通过root的sudeployer，我得到了这个错误/home/deployer/.rbenv/bin/rbenv:line20:cd:/root:Permissiondenied这是rbenv文件:#!/usr/bin/envbashset-e[-n"$RBENV_DEBUG"]&&set-xresolve_link(){$(type-pgreadlinkreadlink|head-1)"$1"}abs_dirname(){localcwd="

  8. ruby - 如何在 watir 测试套件结束时关闭浏览器？ - 2

    使用ruby​​的watir测试网络应用程序时，浏览器最后会保持打开状态。网上的一些建议是，要进行真正的单元测试，您应该在每次测试时(在拆卸调用中)打开和关闭浏览器，但这很慢而且毫无意义。或者他们做这样的事情:defself.suites=superdefs.afterClass#Closebrowserenddefs.run(*args)superafterClassendsend但这会导致摘要输出不再显示(诸如“100次测试、100次断言、0次失败、0次错误”之类的内容仍应显示)。我怎样才能让ruby​​或watir在我的测试结束时关闭浏览器？ 最佳答案

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐