能否使用Chrome DevTools捕获WebSocket协议传输的音频文件?
问题基本情况
- 核心疑问:是否可以通过Chrome DevTools捕获Azure认知服务文本转语音(TTS)经WebSocket协议传输的播放音频。结论是完全可以实现,当前看不到音频内容是面板默认展示逻辑导致的
- 已完成的基础排查:音频开始播放后,可在Chrome DevTools Network面板定位到对应WebSocket连接,连接地址示例为
wss://eastus.tts.speech.microsoft.com/cognitiveservices/websocket/v1?Authorization=RandomCharacterConnectionId=IDGoesHere,但逐栏检查Headers、Messages内容后,无法直接获取可独立播放的音频文件
落地解决方法
- 调整Messages栏目展示规则:Azure TTS服务的WebSocket通道会把音频数据拆成多段二进制帧传输,当Messages栏目开启默认自动解析开关时,非结构化的二进制音频帧会被识别为无效内容折叠隐藏。需要关闭自动解析选项,切换到Binary视图,就能看到所有传输的二进制载荷
- 手动提取拼接音频:在Binary视图中定位到属于音频分帧的消息后,右键单条消息选择复制为base64格式,把所有连续的音频帧base64内容拼接后解码,按照TTS输出配置的编码格式(常见为MP3、PCM、OGG)封装成标准音频文件,即可正常播放
- 全量留存网络日志简化提取流程:如果需要完整无遗漏的音频数据,可以在Chrome启动时添加启动参数
--log-net-log=./net-log.json,复现音频播放全流程后,从留存的全量网络日志中批量提取WebSocket通道的所有二进制帧,不用在DevTools面板逐帧筛选 - 低开销调试替代方案:如果调试目标是验证TTS输出效果,可直接在TTS服务的配置界面调整输出格式,直接获取标准封装的音频文件,避免手动拆帧带来的格式不匹配问题
注意:抓取相关传输内容需严格遵守服务提供商的用户协议及数据合规要求
内容的提问来源于stack exchange,提问作者TylerDurden
相关产品推荐
相关产品推荐

