解决Puppeteer内置的Chromium无法自动播放音频问题

简介: 解决Puppeteer内置的Chromium无法自动播放音频问题

(S97S)})SC3B`{~Z0I5@Z(R.png

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第23天,点击查看活动详情


背景


以前做的一个基于 Wechaty 的客户端应用,最近更新个功能,涉及到提示语音的播放,由于要实现对附近人员的提醒,要求自动播放音频,可人工操作关闭。但是实际开发中,发现 Chrome 浏览器无法自动播放音频,经过查询,发现是 Chromium 本身做了限制。


版本信息:

  1. wechaty@0.14.1,puppeteer: ^1.2.0;
  2. 音频播放用的是jquery.jplayer.min.js

解决


这里场景比较特殊, 这个客户端就在用户的一台电脑上使用,那么只要想法解决这个客户端的问题就行了。 Wechaty 项目依赖了 Puppeteer ,其中内置了 Chromium ,那么按道理,应该可以通过修改源码配置的方式突破这一无法自动播放音频的限制。

经过查找依赖信息,终于找到了相关的配置,源码路径:node_modules\wechaty\dist\src\puppet-web\bridge.js,默认的浏览器初始化参数如下:


initBrowser() {
    return __awaiter(this, void 0, void 0, function*() {
        config_1.log.verbose('PuppetWebBridge', 'initBrowser()');
        const headless = this.options.head ? false : true;
        const browser = yield puppeteer_1.launch({
            headless,
            args: [
                '--audio-output-channels=0',
                '--disable-default-apps',
                '--disable-extensions',
                '--disable-translate',
                '--disable-gpu',
                '--disable-setuid-sandbox',
                '--disable-sync',
                '--hide-scrollbars',
                '--mute-audio',
                '--no-sandbox',
            ],
        });
        const version = yield browser.version();
        config_1.log.verbose('PUppetWebBridge', 'initBrowser() version: %s', version);
        return browser;
    });
}
按照下图进行配置(删掉参数:--mute-audio,增加参数:--autoplay-policy=no-user-gesture-required):

3724)}KF@OMJZ1M9($]Z_CX.png


即:--autoplay-policy=no-user-gesture-required,在启动参数中加上这个, 就可以自动播放音频了。


Note:其他场景:如果想直接在 GoogleChrome 浏览器上实现音频自动播放,那么可对浏览进行配置(可解决当前电脑 Chrome 浏览器的这一问题):

在浏览器输入: chrome://flags/#autoplay-policy ,将第一个配置项 Autoplay policy ,设置为 no user gesture is required ,重启浏览器生效。😊



If you have any questions or any bugs are found, please feel free to contact me.

Your comments and suggestions are welcome!

目录
相关文章
|
移动开发 前端开发 小程序
7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐
优秀的 React UI 移动端组件库和模版框架,帮我们节省开发时间,提高开发效率,统一设计语言。更棒的是内置的功能复杂,我们自己很难处理的常用组件,比如表格、表单、富文本编辑器、时间日期选择器、实时拖拽组件等,再进一步,还有帮我们把组件的轮子装好的 React admin 后台管理系统。本文推荐 7 款适用于中文使用者习惯的开源 React 移动端 UI 库,特别针对国内使用场景推荐。
5489 0
|
3月前
|
消息中间件 缓存 负载均衡
构建高效可扩展的后端架构:从设计到实现
本文探讨了如何构建高效、可扩展的后端架构,涵盖需求分析、系统设计、实现与优化全过程。内容包括微服务、数据库设计、缓存与消息队列等关键技术,并涉及API设计、自动化测试、CI/CD及性能优化策略,助力打造高性能、易维护的后端系统。
|
7月前
|
机器学习/深度学习 人工智能 数据库
Mureka V6:10语种AI音乐工厂!昆仑万维「声场黑科技」颠覆作曲
昆仑万维推出的Mureka V6 AI音乐创作基座模型,支持10种语言歌词生成和纯音乐创作,通过自研ICL技术实现声场优化,覆盖爵士/电子/流行等多元风格,为音乐爱好者和专业创作者提供高效工具。
370 11
|
Web App开发 监控 JavaScript
一些常用的 Vue 性能分析工具
【10月更文挑战第2天】
697 1
|
11月前
playwright Test 录制视频
playwright Test 录制视频
271 3
|
Web App开发 API 图形学
QtWebEngine性能问题
QtWebEngine性能问题
538 1
|
JavaScript Java 测试技术
基于SpringBoot+Vue的员工管理系统的详细设计和实现
基于SpringBoot+Vue的员工管理系统的详细设计和实现
302 0
|
Dragonfly 安全 数据安全/隐私保护
什么是WPA3?与WPA2有啥区别?
【4月更文挑战第14天】
10509 2
什么是WPA3?与WPA2有啥区别?
|
监控 安全 调度
【虚拟化】系统虚拟化的主要功能和分类
【虚拟化】系统虚拟化的主要功能和分类
847 0
|
Web App开发 JavaScript
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
661 0