程序员经验分享-hwhale

HTML5 音频标签无法为 Chrome 和 Safari 中第一个未聚焦的选项卡播放声音？

2024-07-03

每当浏览器中的选项卡可用时，无论焦点如何，我都想在我的应用程序中播放声音。我正在使用 HTML 5 音频标签来播放声音。但 chrome 和 safari 会推迟音频播放，直到用户导航或聚焦到选项卡为止。播放声音的整个音频请求在选项卡焦点时播放。当您一次听到很多声音播放时，它会变得太吵。是否可以在没有浏览器延迟特性的情况下从未聚焦的选项卡播放声音？建议我任何可用于处理这种情况的替代解决方案。提前致谢。


这是自 Chrome 46 以来的预期行为。为了优化浏览器性能并节省电量，Google 已禁用后台选项卡上的自动播放。然而从 Chrome 47 开始，人们可以通过以下方式覆盖它：enablingChrome 标志

chrome://flags/#disable-gesture-requirement-for-media-playback

UPDATE：自 Chrome 60 起，Chrome 标志不再可用（谢谢 @gordie）

没有解决方法可以允许声音在“背景”选项卡中播放。解决方案是在页面聚焦之前不播放任何声音。为此，您可以使用window.onfocus事件处理程序，或者最好是可见性 API (更多信息 http://www.html5rocks.com/en/tutorials/pagevisibility/intro/).

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

Googlechrome

Audio

html5audio

HTML5 音频标签无法为 Chrome 和 Safari 中第一个未聚焦的选项卡播放声音？ 的相关文章

  • Cckeditor 字符限制与 charcount 插件

    我怎么能够prevent用户输入新字符在最大字符之后已达到限制 Ckeditor charcount 插件只是向我显示剩余的字符 我希望它停在 0 处 但它会减去整数 这是我的 html 代码

  • 使用 GruntJs 缩小脚本

    我有几个 js 文件 我似乎可以让 GruntJs 正确地连接 缩小它们 如果我单独做每一个 它们就会工作得很好 如果我单独组合然后尝试缩小组合文件 它也不起作用 Here is the error 有想法该怎么解决这个吗 或者也许是什么原

  • 两行标题的填充

    这有点难以解释 如果有人知道更好的标题 请继续更改它 我想在标题后面画一个黑框 我正在使用 h 标签内的跨度来执行此操作 它需要向左和向右一点填充 我的布局是响应式的 因此标题可能会分成两行 div class headline black

  • html5 datalist 仅选择预定义选项

    我正在使用 HTML5datalist允许通过自动完成和过滤功能从大列表中进行选择 但我只想允许从预定义的选项中进行选择 查看小提琴演示http jsfiddle net tharas rrkdu8pk http jsfiddle net

  • Firefox 和 Chrome 中的字体看起来不同

    我正在使用 Google Web Font 的 PT sans font family PT Sans Arial serif 但在 Chrome 和 Firefox 中看起来有所不同 我需要添加什么才能使其在所有浏览器中看起来都相同吗 对

  • Chrome 与 Firefox 后台缓存

    我有一个 drupal 网站 其视图链接到详细信息页面 视图具有分页功能 问题是这样的 在 FireFox 中 当您从视图的第 8 页转到详细信息页面时 然后单击后退按钮 您最终会看到page 8的视图 好的 在 Chrome 中 当您从视

  • redux fetch body 不能在无 cors 模式下使用

    我有一个调用函数的操作 dispatch Api url my url method POST data data 这里我将数组作为数据传递 import fetch from isomorphic fetch export default

  • Windows 8 - 低延迟音频

    我正在考虑为即将推出的 Windows 8 开发一个应用程序 该应用程序需要低延迟音频录制和播放 我正在尝试找出操作系统是否支持这一点 而不是其他平台 http code google com p android issues detail

  • BeautifulSoup 3.1 解析器太容易崩溃

    我在使用 BeautifulSoup 解析一些不可靠的 HTML 时遇到了麻烦 事实证明 新版本中使用的 HTMLParser 的容忍度低于以前使用的 SGMLParser BeautifulSoup 有某种调试模式吗 我正在尝试找出如何阻

  • 使用 SVG 的部分边框/描边

    我正在使用 svg d3 创建由 矩形 元素组成的图表 为每个矩形添加部分边框 描边 仅在矩形顶部 的最佳方法是什么 Thanks 我不认为 SVG 支持仅描边矩形或路径的一部分 描边不像 CSS 边框 您还有其他一些选择 所有这些都需要一

  • angularjs表单重置错误

    我正在尝试使用 angularjs 制作一个带有验证的表单 到目前为止我做得很好 但是 当我提交重置按钮时 除了从验证部分收到的错误消息之外 所有字段都会重置 当我重置表单时 如何删除所有字段和错误消息 这就是我按下重置按钮时的情况 这是我

  • Webpack - devtool：CSS 的源映射和 JS 的 eval-source-map？

    如果我使用 devtool source map 它与 CSS 配合得很好 但是 我的 JavaScript 变量名并不有趣 所以 如果我使用 devtool eval source maps 生活很美好 调试 JS 但我的 CSS 然后指

  • 有没有可靠的方法在 IE11 中使用 ctx.drawImage() ？

    我有一个脚本 可以根据数据查询创建动态 SVG 图形 我需要将它们粘贴到 PDF 中 为此我使用 jsPDF 不幸的是 jsPDF 自己的 addSVG 似乎不起作用 所以我花了一些时间尝试使用画布将 SVG 转换为 PNG 我似乎可以将

  • 删除CKEditor图像插件中的htmlPreview

    我在 CKEditor 的图像插件中隐藏预览元素时遇到问题 我需要一个非常简单的图像对话框 其中只有图像源的输入字段和带有图像上传按钮的表单 因此 我使用这些自定义配置设置删除了不必要的元素 CKEDITOR on dialogDefini

  • sails-mongo 适配器，标准化错误消息

    我正在使用 sails mongo 适配器尝试 sailsJs 和 mongodb 将验证添加到模型后 当验证失败时 我会收到以下响应 Users js 模型 module exports schema true attributes na

  • 使用 RaphaelJS 确定图像何时加载到 svg 中

    我正在尝试弄清楚如何确定 svg 图像何时加载到浏览器中 我正在使用 Raphael JS 并且我已经尝试过 var image paper image path 0 0 10 10 image node addEventListener

  • 使用相同的 URL 哈希刷新 BackboneJS？ [复制]

    这个问题在这里已经有答案了 我当前的主干应用程序有一个 url localhost users 有没有办法访问localhost users当位于 URL 时localhost users所以它会刷新页面 目前 当我在localhost u

  • 如何获取对象类型

    在我的 Google Apps 脚本应用程序中 我看到以下错误 脚本已完成 但返回值不是受支持的返回类型 如何找出我返回的值的类型 我试过 typeof obj 但我得到的只是它是一个对象 仅当缓存为空并且从电子表格加载数据时才会发生此错误

  • 使页脚正确粘贴到页面底部[重复]

    这个问题在这里已经有答案了 我试图让我的页脚 只是一个带有一行文本的div 位于屏幕底部 如果内容没有一直到达底部 或者位于内容的底部 如果内容需要滚动条 如果内容不需要滚动条 它可以完美工作 但是当内容太长时 页脚仍然位于同一位置 位于内

  • 覆盖引导样式不起作用

    我有这种简单的情况 我有一种没有定义的风格display属性值 我最近在我的项目中添加了 bootstrap 没有出现重大问题 只有一个 In label bootstrap style is defined a display inlin

随机推荐

热门标签