如何为Dialogflow CX网页Demo的聊天组件添加语音输入功能

1 原生组件配置修正 #

你当前的代码有两处错误导致没有语音入口：

• DOCTYPE声明拼写错误，写为了DOCKTYPE
• 自行添加的request.inputAudio = "audio"不符合官方属性规范，无法生效

修正后的完整代码如下：

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>PocJbsEngineering</title>
    <script src="https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1"></script>
    <df-messenger 
        df-cx="true" 
        location="us-east1" 
        chat-title="JBS" 
        agent-id="bfb3f030-9d41-4160-b13c-90de6f3b8c1d"
        language-code="pt-br"
        enable-audio-input="true"
        enable-speech-synthesis="true"
    ></df-messenger>
</head>
<body>
</body>
</html>

2 Dialogflow CX控制台配套配置 #

完成代码修改后，还需要在智能体后台开启语音相关配置：

• 进入对应智能体的Agent Settings页面，切换到Speech标签页
• 开启Enable speech recognition开关，选择匹配葡萄牙语（巴西）的语音识别模型
• 若需要智能体输出语音回复，同步开启Enable speech synthesis，选择对应的语音合成音色
• 保存设置后等待1-2分钟配置生效

3 运行注意事项 #

• 网页必须运行在HTTPS环境下，本地开发可使用localhost测试，否则浏览器会禁止麦克风权限调用
• 用户首次使用语音输入时，需要授权页面访问麦克风权限，授权后输入框旁才会显示麦克风按钮

4 自定义扩展方案（原生组件不满足需求时可选） #

如果需要更灵活的语音交互逻辑，可以自行对接Dialogflow CX API实现：

• 调用浏览器MediaRecorder接口录制用户语音，编码为LINEAR16或OGG_OPUS格式
• 调用Dialogflow CX的detectIntent接口，将输入参数指定为audioInput，传入编码后的音频内容
• 自行处理语音识别结果、智能体回复的展示逻辑

内容的提问来源于stack exchange，提问作者Vinicius Rodrigues da Silva