解决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!

目录
相关文章
|
5月前
|
Go
cypress里浏览器里的相关操作有哪些?
cypress里浏览器里的相关操作有哪些?
|
Web App开发 移动开发 JavaScript
JS - 微信浏览器(H5)语音录音插件(Recorder H5)
JS - 微信浏览器(H5)语音录音插件(Recorder H5)
1811 0
|
Web App开发 JavaScript iOS开发
Xcode9用Safari调试模拟器JS代码显示“无可检查的应用程序”的原因
Xcode9用Safari调试模拟器JS代码显示“无可检查的应用程序”的原因
1084 0
|
前端开发 JavaScript 测试技术
前端常见兼容问题系列8: 安卓机器中通过JS设置焦点无法拉起软键盘
有时候,为了优化用户体验,做交互设计的同学可能会希望让输入框自动获得焦点并弹出软键盘,这样用户不用点击输入框就可以直接输入。的确,这对用户来说很方便。但真正用HTML5页面去实现的时候,却遇到了问题。 首先我做了这样一个demo。 ``` Title #input1{
3928 0
|
Web App开发 存储 开发框架
深入理解浏览器内核 - 火狐浏览器常用插件
深入理解浏览器内核 - 火狐浏览器常用插件
141 0
|
移动开发 JavaScript Android开发
通过howler.js实现在Android下的微信浏览器自动播放音频
通过howler.js实现在Android下的微信浏览器自动播放音频
507 0
通过howler.js实现在Android下的微信浏览器自动播放音频
|
JavaScript
js控制浏览器是否全屏
js控制浏览器是否全屏
249 0
|
数据采集 编解码 移动开发
Puppeteer + Nodejs 通用全屏网页截图方案(二)常用参数实现
学习如何对网页截图程序设计基本参数功能。
|
数据采集 Web App开发 JavaScript
PhantomJS、Puppeteer、SlimerJS网页截屏
PhantomJS、Puppeteer、SlimerJS网页截屏
101 0
|
Web App开发 前端开发 JavaScript
水平滑动,记录当前状态、利用浏览器原生播放器播放视频和vue-video-player视频播放插件、基于museUI的音频播放和vue-player插件实现音频播放
一、水平滑动,记录当前状态 当水平内容在一屏展示不全的时候,需要使用属性,white-space:no-wrap,来强制内容在同一行,同时使用overflow-x:scroll来让元素在水平方向可以滑动。
2625 0