如何在Microsoft Bot Framework的webchat.js中为PVA机器人启用麦克风

一、启用Web Chat语音输入功能 #

Web Chat原生支持语音输入，需通过初始化配置开启，同时确保页面满足权限要求：

1. 初始化时配置语音参数 #

在加载Web Chat的代码中，传入语音相关配置并绑定Direct Line令牌（从PVA后台获取）：

// 替换为你的PVA Direct Line令牌
const directLineToken = 'YOUR_PVA_DIRECT_LINE_TOKEN';

// 适配不同浏览器的语音识别对象
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

// 配置语音选项
const speechOptions = {
  speechRecognition: new SpeechRecognition(),
  speechSynthesis: window.speechSynthesis,
  locale: 'zh-CN' // 匹配语音识别的语言环境
};

// 渲染Web Chat组件
window.WebChat.renderWebChat({
  directLine: window.WebChat.createDirectLine({ token: directLineToken }),
  speechOptions: speechOptions
}, document.getElementById('webchat'));

2. 处理浏览器权限 #

确保页面使用HTTPS（本地开发可使用localhost），浏览器会自动弹出麦克风权限请求，需引导用户点击允许。

二、替换发送按钮为麦克风启用状态图标 #

通过两种方式实现图标替换，避免跨域问题推荐使用Base64编码图标：

方法1：自定义CSS覆盖样式 #

/* 移除默认发送按钮图标 */
.webchat__send-box__button {
  background-image: none !important;
}

/* 设置麦克风启用图标（替换为你的图标Base64编码） */
.webchat__send-box__button::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('data:image/png;base64,你的麦克风图标Base64编码');
  background-size: contain;
  background-repeat: no-repeat;
}

方法2：通过Web Chat的styleOptions配置 #

在渲染Web Chat时直接传入图标配置：

window.WebChat.renderWebChat({
  directLine: window.WebChat.createDirectLine({ token: directLineToken }),
  speechOptions: speechOptions,
  styleOptions: {
    // 替换为麦克风图标的Base64编码
    sendButtonIcon: 'data:image/png;base64,你的麦克风图标Base64编码'
  }
}, document.getElementById('webchat'));

三、验证PVA后台配置 #

登录Power Virtual Agents管理后台，确认：

• 机器人设置中「语音」选项已开启
• 已绑定Azure Speech Services资源（确保语音功能正常调用）

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