为什么我的 Javascript 音频在刷新页面后不起作用?

2023-12-22

我的 javascript 中有一个音频对象并调用了 play 函数。当我第一次进入该页面或通过其他页面的链接进入该页面时,它工作正常,但是当我在带有音频的页面上并且只想刷新页面时,我会收到音频错误,

Uncaught (in promise) DOMException

我读过一篇关于某人的帖子,其音频仅在刷新几次后才有效(与我的问题相反)。我已经读到了这个错误。但我想做的就是刷新页面,让一切像第一次一样工作。

console.log("playing test sound");
let test_sound = new Audio('/static/audio/to-the-point.mp3');
test_sound.play();

当我第一次进入该页面时,这是有效的,但当我刷新它时,就会出现该错误,并且无论我刷新多少次,音频都不起作用......有什么想法吗?

编辑:经过更多的尝试,音频在刷新时出现错误的时间非常不一致。有时,刷新没问题,但有时却会出现错误。一旦收到错误,后续刷新也会收到该错误。也许是我的 chrome 浏览器或 mac 电脑的问题?


根据我自己的研究和 @Kokodoko 的帮助,您似乎必须在允许音频之前与您的网页进行交互。这就是为什么当我来自另一个页面时它对我有用,但当我刷新时它却失败了。

解决方案:让用户进行交互。 不幸的是,没有真正的解决方法可以让音频在用户交互之前播放。在音频开始之前强制用户以某种方式进行交互是让音频正常工作的唯一方法

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

为什么我的 Javascript 音频在刷新页面后不起作用? 的相关文章

  • 在 ExpressJS 中通过管道传送远程文件

    我想读取远程图像并显示它 我可以保存文件 但无法正确显示代码 理想情况下 我只想直接传递文件而不进行处理 不确定是否需要 tmp 文件步骤 此代码不显示任何内容 没有错误 我也尝试了 res pipe response var url ht
  • Javascript Firefox - 如果 @import 存在于样式表中,则无法查询 cssRules - bug 或预期行为?

    如果 import 存在于 css 样式表中 我无法查询 cssRules 是否符合网络标准 或者知道 Firefox 的限制 注意 我正在从同一域导入 css 文件 var style rules document styleSheets
  • 在 HTML SELECT 标记中禁用键盘

    我想禁用 HTML SELECT 标记的键盘 以便用户只能使用鼠标来选择选项 我试过了event cancelBubble true on the onkeydown onkeyup and onkeypress没有运气的事件 有任何想法吗
  • 如何使用 JqGrid 子网格进行内联编辑?

    我知道如何使用主网格进行内联编辑 但是有没有办法对子网格进行内联编辑 这是我的 JS 文件 function var lastsel list jqGrid url example php postData q 1 datatype jso
  • 了解执行模型和事件循环

    我读过很多关于JavaScript单线程执行模型 事件循环和事件队列的文章 但有一件事尚不清楚 我创建了一个小提琴来说明我的问题 http jsfiddle net yzpmf67f http jsfiddle net yzpmf67f
  • npm 脚本:node-sass 不监视部分 sass 文件

    我有这个项目结构 src assets css sass main scss variables scss 我正在尝试编写一个 npm 脚本 该脚本将监视我的所有 scss 文件 包括部分文件 中的更改 然后仅编译我的 main scss
  • 表单未使用 AJAX 提交

    再次更新 如果有人关心的话 我之前发布的解决方案由于某种原因停止工作 我在 ajax 请求中包含了 beforeSend 并将验证表单的 js 部分粘贴到其中 现在就像一个魅力 form on submit function e e pre
  • IE 9 的子元素不透明,我无法使用 captify 阻止它

    好的 我正在使用一段名为 Captify 的 javascript 它为您的图像添加了一个带有文本的小弹出窗口 适用于所有接受 IE9 的浏览器 IE9 会淡化弹出 div 中的所有内容 我已阅读其子元素问题 但无法修复它 由于在网上任何地
  • JavaScript 中的 Promise.all:如何获取所有 Promise 的解析值?

    我编写了以下node js文件 var csv require csv parser var fs require fs var Promise require bluebird var filename devices csv var d
  • 向 FTP 服务器执行跨域 XMLHTTPREQUEST 的语法是什么?

    我有一个 webDav CORS 插件 可以使用它在 webDav 服务器上 POST PUT GET REMOVE ALLDOCS 文件 我现在想对 FTP 做同样的事情 但我正在努力获取xmlhttprequest 工作语法 我只是收到
  • 如何最好地实现多个重叠元素的翻转和推出事件?

    Problem 我正在开发一个网站 其中有一个 拨号盘 显示代表伞式公司不同部门的多个选项卡 目前我已经用 HTML CSS 准备好了一切 每个选项卡的定位 内圈处于较高位置z index因为选项卡在滚动时需要向外动画 我可以实现这部分 选
  • 避免 AngularJS 部分视图在 IE 中缓存

    我正在开发一个 ASP NET MVC 应用程序 它也有一些 angularJS 我有一个主页 其中有不同的选项卡 当您单击它们时 它们会加载角度部分视图 主页是这样的 div class widget div div class widg
  • 将服务连接到现有的流星帐户

    我正在设置一个流星应用程序 其中涉及使用用户名和密码进行注册 然后希望将该帐户与 Facebook 和 Twitter 连接起来 我只需使用帐户包即可轻松启动并运行第一部分 但是当我有一个登录用户调用 Meteor loginWithFac
  • 设计 Javascript 前端 <-> C++ 后端通信

    在我最近的将来 我将不得不制作一个具有 C 后端和 Web 前端的系统 要求 目前 我对此了解不多 我认为前端将触发数据传输 而不是后端 所以不需要类似 Comet 的东西 由于在该领域的经验可能很少 我非常感谢您对我所做的设计决策的评论
  • 反转二进制网络

    如何反转二元方程 以便找到哪些输入将产生给定的输出 Example Inputs i0 through i8 Outputs o0 through o8 Operators XOR AND 二元方程 1 i0 1 i1 0 i2 1 i3
  • JavaScript - 这个这个

    String prototype foo String prototype foo bar function How can you reference the grandparent string console log this par
  • 将 javascript 变量发送到服务器端 ASP .NET

    我需要在回发时将 JavaScript 数据传递到服务器端 Exvar jsVariableToPass new Object jsVariableToPass key1 value1 jsVariableToPass key2 value
  • 如何在变量名中使用变量

    所以我正在使用这样的 json 变量 opponentInvData item1 它包含项目 1 到 6 我需要动态访问不同的项目并将它们设置为空 itemNum 是我需要访问的特定项目 我正在尝试使用 eval 函数 var itemNu
  • 如何在 Javascript 中将字符串数组转换为特定的树结构

    我从后端获取文件路径列表 它代表文件夹结构 如下所示 paths path to file1 doc path to file2 doc foo bar doc 路径的长度是任意的 为了使用文件树组件 角度2树组件 https github
  • 禁用 Materialise Carousel 上的触摸

    看起来以前没有人问过这个问题 因为我几乎在互联网上寻找一个非常简单的答案 如何禁用在物化轮播上向左 向右滑动的功能 在 Materialize js 添加 编辑 var allowCarouselDrag true value functi

随机推荐