如何为已发布的Dialogflow CX Web代理启用麦克风功能？

问题概述 #

将Dialogflow CX代理嵌入网页后，期望支持语音转文字输入，但在Google Chrome浏览器中部署后麦克风选项消失，而Dialogflow模拟器中麦克风功能正常可用。嵌入代码如下：

<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
<df-messenger
  location=""
  project-id=""
  agent-id=""
  language-code="en">
  <df-messenger-chat-bubble
   chat-title="">
  </df-messenger-chat-bubble>
</df-messenger>
<style>
  df-messenger {
    z-index: 999;
    position: fixed;
    bottom: 16px;
    right: 16px;
  }
</style>

排查与解决方案 #

1. 确认网页运行环境为HTTPS #

Chrome浏览器仅允许HTTPS协议（或localhost开发环境）的网站请求麦克风权限，HTTP环境下会直接禁用语音输入功能，导致麦克风按钮不显示。生产环境必须配置有效的HTTPS证书。

2. 显式启用语音输入属性 #

在<df-messenger>标签中添加enable-voice-input="true"属性，强制开启语音输入功能。嵌入版df-messenger不会默认启用该功能，需手动配置：

<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
<df-messenger
  location=""
  project-id=""
  agent-id=""
  language-code="en"
  enable-voice-input="true">
  <df-messenger-chat-bubble
   chat-title="">
  </df-messenger-chat-bubble>
</df-messenger>
<style>
  df-messenger {
    z-index: 999;
    position: fixed;
    bottom: 16px;
    right: 16px;
  }
</style>

3. 检查Chrome麦克风权限 #

点击Chrome地址栏左侧的锁形图标，进入权限设置面板，确认麦克风权限已设置为允许。若之前拒绝过权限，需重新授权。

4. 验证df-messenger版本 #

尝试更换为最新版本的df-messenger脚本链接，旧版本可能存在语音功能兼容性问题。可参考Dialogflow官方文档获取最新嵌入脚本地址。

5. 检查浏览器版本 #

确保使用的Chrome浏览器为较新版本，旧版本对Web Speech API的支持不完善，可能导致语音功能无法正常加载。

内容的提问来源于stack exchange，提问作者osbwh