【H5-chrome】chrome自动播放音频的问题

gwcgwcjava gwcgwcjava 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.6k累计阅读 2.6k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄17年
关注
原创 最新推荐文章于 2026-08-04 07:42:20 发布 2.6k 阅读 AI 写同款· GEO 优化 ›
Krpano中使用音频的方法 需求：制作一个瀑布流，想添加一个自动播放的音乐，使用audio这个标签，出现的问题就是： 1、Chrome提示：DOMException: play() failed because the user didn’t interact with the document first. 2、Safari 提示：NotAllowedError: The request is not allowed by the user agent or the platform in the current contex.. 阅读详情

在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。（Google的某些做法还真是令开发者不爽）。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。

 

设置方式：

打开希望自动播放音频的网址

然后在网址的前面点击

 

找到声音设置：

改成允许就可以自动播放

收录于
浏览器

当前文章被收录于：

浏览器
1 篇文章 0 人学习
订阅专栏 查看详情
chrome

当前文章被收录于：

chrome
1 篇文章 0 人学习
订阅专栏 查看详情
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
uniapp音频播放全攻略：从基础播放到循环列表实现（附H5端兼容方案） 本文全面解析Uniapp音频播放开发，从基础播放控制到高级功能如循环列表、进度控制实现，详细介绍了uni.createInnerAudioContext()API的使用方法。特别针对H5端兼容性问题提供解决方案，帮助开发者构建跨平台音频应用，提升用户体验。 阅读详情

相关推荐

别再只玩积木了！用乐高EV3和官方软件，手把手教你做个能巡线的小车（附完整代码）

本文详细介绍了如何利用乐高EV3套件和官方软件制作智能巡线机器人，从硬件组装到软件编程全面覆盖。通过传感器原理讲解、控制算法调试等工程化细节，帮助读者掌握机器人开发的核心理念，特别适合STEAM教育和硬件编程爱好者实践。

weixin_30776273的博客 454

chromium audio 实现分析

分享chromium audio实现以及在Android平台的对接.

typename 记录点滴 5891

物联网开发131 - Micropython ESP32 C3连接TB6600驱动42BYGH39步进电机

如何使用合宙ESP32 C3连接TB6600驱动42BYGH39步进电机，实现控制步进电机正反转和旋转指定角度等

zhusongziye的博客 2378

实现Google Chrome音频标签audio、属性autoplay自动播放

1、打开chrome浏览器，在地址栏中输入：“chrome://flags”。 2、在页面内搜索栏中写入：“Autoplay policy”，并将默认为“Default”，选择修改为 “No user gesture is required” 。 3、点击“Relaunch Now”即可。 ...

逆风也微笑的博客 2763

EB Tresos激活失败？3种实用解决方案帮你搞定（含离线激活步骤）

本文针对EB Tresos软件激活失败问题，提供了三种实用的解决方案。详细分析了激活失败的常见根源，并系统阐述了在线环境下的排查步骤、无网环境下的离线激活全流程，以及高级许可证环境修复方法，帮助汽车电子工程师快速恢复开发环境。

milk8的博客 609

使用 MATLAB/Simulink + Deep Learning Toolbox，构建一个基于LSTM的电网负荷预测模

本文介绍了一个基于Simulink和深度学习的智能电网负荷预测与调度建模方法。通过LSTM神经网络构建负荷预测模型，将历史负荷、天气、日期等特征作为输入，预测未来24小时负荷。然后将训练好的模型集成到Simulink仿真系统中，结合发电单元模型和经济调度逻辑，实现预测驱动的电力调度优化。实验结果表明，该方法预测误差在2.5%-4.0%之间，相比传统调度方式可降低15%-25%的运行成本。文章详细展示了从数据准备、特征工程、模型训练到系统集成的完整流程，为智能电网中AI技术的应用提供了实用参考。

amy_mhd的博客 172

html谷歌浏览器实现自动播报语音,vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上...

需求有新订单的时候，页面自动语音提示和弹出提示框；问题chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，使用js直接调用.play() 方法的话，chrome都会抛出如下错误：Uncaught (in pr...

weixin_30499315的博客 2369

ZYNQ PS-PL数据交互方式总结

一，中断 二，IO方式：MIO EMIO GPIO 三，BRAM或FIFO或EMIF （1）通过BRAM实现PL/PS之间交互 PS 的配置如下图所示。使能 M_AXI_GP0 口，将 FCLK_CLK0 设为 100MHz，使能 PL 至 PS 的中断。 AXI BRAM Controller IP 核连接 PS 的 M_AXI_GP0 口和 BRAM，完成 AXI 接口至 BRAM 接口的转换。 添加BRAM，将BRAM设置为双口RAM，将PORTA与AXI B...

wangjie36的博客 1万+

最新谷歌浏览器的自动播放音频的设置

谷歌也是够恶心，为什么要弃了之前的那种设置，那个设置我刚写好。 现在又变成了另外一种设置 而且这种设置是还是跟火狐一模一样的设置。 进入正题 第一步 打开谷歌点击右边菜单，选择帮助----进入关于Google Chrome 第二步 第三步 往下滑找到声音 点击 声音右边的小图标 第四步 转载于:https://www.cnblogs.com/wjlfl...

weixin_30387663的博客 4490

Raspberry Pi Pico SDK开发-Timer-定时

RP2040 由 Raspberry Pi 设计，具有双核 Arm Cortex-M0+ 处理器和 264KB 内部 RAM，并支持高达 16MB 的片外闪存。 广泛的灵活 I/O 选项包括 I2C、SPI 和独特的可编程 I/O (PIO)。 本实例将演示如何使用Timer的定时功能。

视觉与物联智能 2042

YOLO26-seg分割优化：卷积魔改 | 动态蛇形卷积（Dynamic Snake Convolution），实现暴力涨点 | ICCV2023

​​​​​​摘要：本研究对Ultralytics YOLO26进行了全面分析，重点阐述了其关键架构改进及其在实时边缘目标检测中的性能基准测试。YOLO26于2025年9月发布，是YOLO系列最新、最先进的成员，专为在边缘及低功耗设备上实现高效、精确且易于部署的目标而构建。本文依次详述了YOLO26的架构创新，包括：移除了分布焦点损失（DFL）；采用端到端的无NMS推理；集成了渐进损失（ProgLoss）与小目标感知标签分配（STAL）；以及引入了用于稳定收敛的MuSGD优化器。

①答疑群聊服务；②YOLO大模型知识问答系统；③计算机视觉论文生成智能体； 219

vue自定义文字转播放语音 兼容谷歌

网上看了几种方法都不兼容谷歌 例如：SpeechSynthesisUtterance 方法 这里是调用 百度接口 http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=播放文字内容 接口参数说明： lan=zh：语言是中文，如果改为lan=en，则语言是英文。 ie=UTF-8：文字格式。 spd=2：语速，可以是1-9的数字，数字越大，语速越快。 text=**：这个就是你要转换的文字。 html / template

Yoga99的博客 660

手把手教你用ESP32-C3打造智能聊天机器人-立创实战派

本文将详细介绍如何利用立创ESP32-C3开发板，烧录小智AI程序，快速实现一个功能强大的聊天机器人。

举世誉之而不加劝，举世非之而不加沮，定乎内外之分，辩乎荣辱之境，斯已矣。 5544

React-H5-Audio-Player常见问题解答：跨浏览器兼容与错误处理

React-H5-Audio-Player是一款功能强大的React音频播放器组件，它在不同浏览器上提供一致的UI/UX体验，并在桌面和移动设备上都能显示时间指示器。本文将解答使用该播放器时常见的跨浏览器兼容性问题及错误处理方法，帮助开发者快速解决使用过程中遇到的难题。 ## 支持的浏览器与兼容性概述 📊 React-H5-Audio-Player支持主流现代浏览器，包括Chrome、Fir

gitblog_00946的博客 488

VC中sqlite的使用

在VC中对sqlite的使用，实现数据库大批数据的快速插入，读取数据库中的数据在ListCtrl中显示

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目，保存在这里方便以后使用直接下载

audio不能自动播放的解决方案

背景 实现H5改造客户端版本的英语听说答题功能，这里涉及到很多页面线程的使用，如果自动播放题目，每隔几秒播放内容，循环播放几次等等，在客户端环境里天生蕴藏着多线程操作和media的库，而改成H5页面的方式，只能好好研究H5的音频播放控制的api。 audio尝试 由于项目所给的时间非常紧，还没有做好充分调研就开始磨刀霍霍，上来分析如果包装题目数据，让页面播放题目的音频更加的合理，根据题目的音频数量...

wo240的专栏 4万+

汉书HE8，好用的汇编代码编写工具

汉书HE8，好用的汇编代码编写工具早期编写汇编代码所用功能强大

H5页面在浏览器、微信中自动播放音频 Audio

最简单的写法 <audio id="audio" src="path/to/audio.mp3" autoplay></audio> 但是目前部分浏览器为了用户体验，禁止了audio的autoplay的属性，包括不限于chrome、safari、微信内置浏览器。 对于微信浏览器，可以添加一个document事件WeixinJSBridgeReady来在事件触发后执行a...

keechi的专栏 4657

H5音频不能自动播放的问题

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_34366546的博客 1913

H5关于浏览器无法自动播放视频的解决方案

H5标签用来播放视频/音频 原本通过autoplay属性可以实现视频在浏览器的自动播放 不过现在Chrome浏览器版本更新之后,视频/音频无法播放了 原因是因为新版Chrome浏览器禁止用户在触发网页之前播放音频,视频包含音频,躺枪.其目的在于防止开发者滥用自动播放功能骚扰用户,影响体验. 所以,一下提供两种简单的解决方案 一: 通过添加controls属性,通过控件来实现手动播放,注意不是自动播放,需要手动触发. <audio controls></audio> 二: 通过添加m

MojaveGhost1057的博客 3386

html谷歌浏览器实现自动播报语音,vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法...

一、vue中解决chrome浏览器自动播放音频需求有新订单的时候，页面自动语音提示和弹出提示框；问题chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，使用js直接调用.play() 方法的话，chrome都...

weixin_39580042的博客 1254

H5中Video引入问题

引入视频代码块 <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 </video> h5中嵌入视频自动播放...

zuo_zuo_blog的博客 605

视频播放--自动播放

关于自动播放 autoPlay 布尔属性；指定后，视频会马上自动开始播放，不会停下来等着数据载入结束。 IOS 无音频源的 video 元素 允许自动播放 禁音的 video 元素允许自动播放 如果 video 元素在没有用户手势下有了音频源或者变成非禁音，会暂停播放 video 元素屏幕可见才开始播放 video元素不可见后停止播放 Android 安卓的 chrome 53 后放宽了自...

weixin_34162401的博客 5410

页面自动播放策略autoplay失效-浏览器自动播放政策限制

Uncaught: （in promise）DOMExcepion: play() failed because the user didn't interact with the document first.音频自动播放失效

weixin_44208883的博客 3503

html5视频自动播放兼容谷歌浏览器,chrome浏览器不支持audio和video标签的autoplay自动播放解决方案...

音频audio和视频video无法自动播放这个在IOS上面一直是个惯例。桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能，紧接着在2018年4月份发布的Chrome 66开始也正式关掉了声音自动播放，也就是说在Safari、Chrome、opera浏览器中音频audio和视频video自动播放功能都将失效。解决方案一在chrome 浏览器中输入：chrome://f...

weixin_35427210的博客 4745

手机 html自动播放视频格式,Video 在网页和移动端无法自动播放问题？?

标签介绍 标签定义视频，比如电影片段或其他视频流。支持三种视频格式：MP4、WebM、Ogg。是 H5 的新标签，使用如下：//autoplay表示视频自动播放，controls表示显示视频控制器，loop表示循环播放您的浏览器不支持 video 标签。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。Element谷歌IE火狐safariopera4.09.03.54.010.5提示和...

weixin_42118056的博客 2310

微信H5视频自动播放失败？从踩坑到完美解决方案

本文完整记录了在微信H5页面中实现视频自动播放的解决方案。主要解决了微信浏览器中视频黑屏、无法自动播放等问题，特别针对小米/荣耀等安卓机型的特殊兼容性问题。提供了完整的Video标签配置方案、微信环境自动播放逻辑、重试机制以及多场景触发播放的方法。通过设置关键属性如x5-video-player-type="h5"、监听WeixinJSBridgeReady事件、实现播放重试机制等技巧，最终实现了跨机型的稳定视频自动播放效果。适用于需要在微信H5中实现背景视频或主视觉视频自动播放的场景。

qq_51463650的博客 271

谷歌H5音乐自动播放

Chrome等浏览器基于安全的策略，于早几年就已经停止自动播放。

weixin_42017221的博客 501
上一篇： 【jeecg-boot】jeecg-boot实时数据推送-websocket的使用
下一篇： 【jeecg-boot】安装node-sass提示没有vendor目录的解决办法
点赞 0
评论 0
书签 书签 2
gwcgwcjava
gwcgwcjava
博客等级 码龄17年 70粉丝 106原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值