play() failed because the user didn‘t interact with the document first.

最新推荐文章于 2024-01-31 15:27:00 发布
原创 最新推荐文章于 2024-01-31 15:27:00 发布 · 3.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文探讨了DOMException:play()失败的问题，通常是因为用户未先与文档互动导致。文章提供了Stack Overflow上的解答链接。
audio自动、循环播放，调节音量DOMException: play() failed because the user didn‘t interact with the document firs
拿回忆下酒
06-30 1846
最近想做一个，打开页面自动播放背景音乐的效果，寻思使用audio播放不就好了。 答案肯定是不好使！！！，好使也不用我在这里总结了。 报错提示 Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document ...
DOMException: play() failed because the user didn‘t interact wit
02-02
DOMException: play() failed because the user didn‘t interact with the document first.
调用audio标签的play方法报错：the error you provided does not contain a stack trace
weixin_42397018的博客
05-03 7719
问题描述 在react中使用audio标签实现音频播放，src改变的时候让音频重新播放，src由state控制。 产生的问题： 1.如果两次音频的src一致，不会重新渲染页面，因此也就不会再次播放音频。 2.直接使用audio的play方法会产生如下报错 解决方法 把音频地址直接赋值给src属性，这样既能解决state中音频的src无变化音频不播放的问题。也能解决使用play方法的报错问题。...
play() failed because the user didn't interact with the document first
wed2100304的专栏
11-18 3万+
vue使用js调用音频文件报错，错误信息如下： play() failed because the user didn't interact with the document first 翻译：play方法调用失败，因为用户没有先操作文档【用户没有先去跟网页做交互再执行音频播放】 用户再跟网页有了交互后，该报错不会再出现 如果必须再网页加载完就播放音频，详情请看 ...
报错:NotAllowedError: play() failed because the user didn't interact with the document first.
最新发布
12-18
在 Vue2 后台添加提示音时出现 `NotAllowedError: play() failed because the user didn't interact with the document first.` 错误，通常是因为浏览器的自动播放策略限制，为了避免页面产生随机噪音，浏览器要求...
出现报错play() failed because the user didn't interact with the document first.
08-24
当浏览器抛出 `play() failed because the user didn't interact with the document first` 错误时，这是由于浏览器的自动播放策略限制所致。现代浏览器（尤其是基于 Chromium 的浏览器）要求用户必须与页面进行交互...
play() failed because the user didn't interact with the document first.
08-23
play() failed because the user didn't interact with the document first是一个错误信息，意思是用户没有先与文档进行交互。这个错误通常发生在最新版的Chrome浏览器（以及其他基于Chromium内核的浏览器）中，这些...
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document...
weixin_33887443的博客
12-03 7606
最近在开发一个网站时，有个需要是 如果有新预警信息要在网页中播放提示音。页面打开会请求是否有新信息，有则播放提示音。在Chrome的最新浏览器中，播放会报错，控制台显示Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.搜索发现Chrom...
play() failed because the user didn’t interact with the document first 视频无法被play
weixin_44234050的博客
03-25 2万+
js
play() failed because the user didn‘t interact with the document first. 报错解决
weixin_44544388的博客
04-20 3574
报错内容 <audio id="audioVoice" :key="Math.random()" :autoplay="false" > <source :src="countdownAudio" type="audio/mpeg"> </audio> 尝试加载后立即播放音频，有报错： 问题原因 引用： It´s because Google updated its Autoplay Pol..
Uncaught (in promise) DOMException: play() failed because the user didn‘t interact with the document
sjslln的博客
09-04 3万+
audio.html:43 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
报错 play() failed because the user didn‘t interact with the document first
qq_45976132的博客
05-18 5万+
Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. https://goo.gl/xX8pDD 报这个错是因为 在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放 在我项目中的原因是因为我把播放声音的按钮设置为t
自动播放音频 audioDom.play() 报错 - play() failed because the user didn‘t interact with the document first.
工作中遇到问题记录
01-31 7218
`audioDom.play()` 自动播放音频时报错：`Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.`
audio报错DOMException: play() failed because the user didn‘t interact with the document first
weixin_43452622的博客
04-03 3万+
封装一个包含自动播放，循环播放、暂停功能的Aduio组件
DOMException: play() failed because the user didn‘t interact with the document first
热门推荐
指尖下的精灵
07-30 6万+
报错原因是chrome新特性，内容大致意思是开发者不能利用手中权限去给用户造成噪音干扰，首次加载页面需要用户和audio/video进行交互 需求如下 实时刷新告警列表，保证用户获取到最新告警消息，当有新的告警消息时，响警报铃 解决方案 当用户首次进入页面时给提示用户启用告警铃声 let audioPlay = document.getElementById('myaudio') audioPlay.play() setTimeout(() => { audioPlay.pause() .
DOMException: play() failed because the user didn‘t interact with the document first - video篇
阿莹yes的博客
05-06 2529
报错原因是chrome新特性，内容大致意思是开发者不能利用手中权限去给用户造成噪音干扰，首次加载页面需要用户和audio/video进行交互 解决办法 1.视频 要静音播放 muted // video标签上加这个属性 当用户首次进入页面时给提示用户启用告警铃声 let audioPlay = document.getElementById('myaudio') audioPlay.play() setTimeout(() => { audioPlay.pause() audio.
failed because the user didn't interact with the document first.
02-27
当你看到错误提示“failed because the user didn't interact with the document first”，这通常是由于浏览器的安全策略所引起的。现代浏览器为了提升用户体验和安全性，对某些特定的操作施加了一些限制。其中一项重要的规则是：**只有在用户的明确交互之后（例如点击），才能执行诸如播放音频/视频、打开新窗口等敏感操作**。 这种机制防止了网页未经允许自动运行可能打扰用户的内容，并减少了潜在的安全风险。如果你遇到了这样的报错信息，那意味着尝试执行的动作并没有发生在用户主动互动之后，因此被阻止了。 ### 解决办法 为了让这些受限功能正常工作，确保你的代码是在用户的真实交互事件中触发的，最常见的方式包括： 1. **基于用户交互事件触发** - 将那些需要权限的操作放在按钮点击或者其他形式的人工干预后的回调函数内； 2. **延迟加载或初始化** - 对于非立即必要的媒体资源或其他组件，考虑采用懒加载技术，在首次访问时并不立即加载全部数据； 3. **告知用户并引导他们采取行动** - 如果确实有必要马上启动某些功能，则可以在界面上给出清晰指示让用户自行激活对应的功能模块。 ### 示例说明 假设你想在一个网站上提供背景音乐播放服务，如果直接在页面加载完成后就开始播放音乐会违反上述规定导致失败。正确的做法应该是在用户按下某个按键或者进行了其他某种形式的有效输入后再开始播放音乐文件。 ```javascript // 错误的做法 —— 页面一加载即尝试播放音效，可能会因缺乏用户交互而无法成功 const audioElement = new Audio('background-music.mp3'); audioElement.play(); // 正确的做法 —— 等待用户的第一次有效点击再播放声音 document.querySelector('#playButton').addEventListener('click', () => { const audioElement = new Audio('background-music.mp3'); audioElement.play(); }); ``` 总之，理解并遵守浏览器关于用户交互的规定有助于构建既安全又友好的Web应用程序。同时也要注意检查是否有最新的API变更影响到了现有逻辑流程的设计思路。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值