如何将IBM Speech to Text(STT)接入IBM Watson Assistant(WA)实现语音提问

核心思路 #

Watson Assistant Plus的原生web聊天组件不直接内置麦克风语音输入，但可以通过自定义前端页面，整合IBM Speech to Text的JavaScript SDK，将语音转文字后发送给Watson Assistant，同时在聊天窗口添加麦克风交互按钮。

具体实现步骤 #

1. 准备服务凭证 #

• 从IBM Cloud控制台获取Watson Assistant的API密钥和服务URL
• 获取IBM Speech to Text的API密钥和服务URL

2. 搭建自定义聊天前端 #

基于Watson Assistant的web聊天SDK扩展，核心操作如下：

• 在页面输入区域旁添加麦克风按钮：

  <div class="chat-input-area">
    <input type="text" id="chatInput" placeholder="输入消息...">
    <button id="micBtn">🎤</button>
  </div>
  

• 引入Speech to Text的JavaScript SDK：

  <script src="https://unpkg.com/ibm-watson/speech-to-text/v1.js"></script>
  <script src="https://unpkg.com/ibm-watson/auth@latest/dist/umd/IamAuthenticator.min.js"></script>
  

• 初始化Speech to Text客户端：

  const speechToText = new SpeechToTextV1({
    authenticator: new IamAuthenticator({ apikey: '你的STT API密钥' }),
    serviceUrl: '你的STT服务URL'
  });
  

3. 实现麦克风录音与转文字逻辑 #

• 为麦克风按钮绑定点击事件，控制录音启停：

  let recordingStream = null;
  const micBtn = document.getElementById('micBtn');
  
  micBtn.addEventListener('click', () => {
    if (recordingStream) {
      // 停止录音并重置状态
      recordingStream.stop();
      recordingStream = null;
      micBtn.textContent = '🎤';
    } else {
      // 开始录音
      recordingStream = speechToText.recognizeUsingWebSocket({
        contentType: 'audio/wav',
        interimResults: false, // 如需实时显示转录文本可设为true
        onEvent: (event) => {
          if (event.type === 'RECOGNITION_RESULT') {
            const transcript = event.results[0].alternatives[0].transcript.trim();
            if (transcript) {
              // 将转写文本发送给Watson Assistant
              sendToWatsonAssistant(transcript);
            }
          }
        },
        onError: (err) => {
          console.error('STT服务错误:', err);
          micBtn.textContent = '🎤';
          recordingStream = null;
        }
      });
      micBtn.textContent = '🔴';
    }
  });
  

4. 对接Watson Assistant发送消息 #

• 初始化Watson Assistant web聊天客户端并实现消息发送：

  // 先初始化Watson Assistant web聊天
  window.watsonChat = window.watsonAssistantChat.createInstance({
    integrationID: '你的集成ID',
    region: '服务区域',
    serviceInstanceID: '你的服务实例ID',
    // 其他配置项
  });
  
  function sendToWatsonAssistant(text) {
    // 通过web聊天SDK发送转写后的文本
    window.watsonChat.sendMessage({ input: { text: text } });
    // 也可直接调用WA API发送，需自行处理会话管理
  }
  

5. 样式适配 #

• 调整麦克风按钮样式，使其嵌入聊天输入区域：

  .chat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
  }
  #micBtn {
    border: none;
    background: #0066cc;
    color: white;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    cursor: pointer;
    font-size: 16px;
  }
  #micBtn:hover {
    background: #0052a3;
  }
  

注意事项 #

• 前端页面需运行在HTTPS环境（localhost除外），否则浏览器会拒绝麦克风访问权限
• 可添加录音状态提示（如加载动画、转录文本预览）提升用户体验
• 需处理异常场景：麦克风权限被拒绝、STT服务连接失败、转录结果为空等

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