认知服务语音SDK JS语音合成示例：SVG视位素渲染遇WebSocket错误1007

可能原因及修复步骤 #

1. 语音SDK配置或请求参数错误 #

• 确认SpeechSynthesizer配置中已启用viseme事件并设置正确的输出格式，错误的格式会导致服务返回异常数据引发编码错误：

  const speechConfig = SpeechSDK.SpeechConfig.fromSubscription(subscriptionKey, region);
  // 必须设置支持viseme事件的输出格式
  speechConfig.setSpeechSynthesisOutputFormat(SpeechSDK.SpeechSynthesisOutputFormat.Audio24Khz48KBitRateMonoMp3);
  const synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig);
  // 绑定viseme事件回调
  synthesizer.visemeReceived = (s, e) => {
    // 处理viseme数据逻辑
  };
  

• 检查订阅密钥和区域是否正确，无效的凭证会导致服务返回非预期的二进制或错误格式数据。

2. Viseme事件处理中的XML/SVG编码问题 #

• 生成SVG时必须确保内容是有效UTF-8编码，转义XML特殊字符（&、<、>、"、'），避免非法字符破坏WebSocket帧的编码：

  function escapeXml(unsafe) {
    return unsafe.replace(/[&<>"']/g, c => {
      const mappings = { '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&apos;' };
      return mappings[c];
    });
  }
  // 使用转义后的内容生成SVG
  const svgString = `<svg><path d="${escapeXml(visemePathData)}"/></svg>`;
  

• 避免将原始音频二进制数据或非UTF-8编码的内容混入XML/SVG字符串中。

3. 浏览器环境或连接干扰 #

• 升级浏览器到最新版本，旧版浏览器可能存在WebSocket UTF-8帧处理的兼容性问题。
• 关闭广告拦截器、代理工具等浏览器扩展，这类工具可能篡改WebSocket传输的数据，导致编码损坏，可尝试在隐身模式下测试。

4. SDK版本缺陷 #

• 确保使用最新版的microsoft-cognitiveservices-speech-sdk，旧版本可能存在WebSocket编码处理的bug：

  npm update microsoft-cognitiveservices-speech-sdk
  

调试技巧 #

• 打开浏览器开发者工具的Network面板，找到对应WebSocket连接，查看Frames标签下的消息内容，确认是否存在非UTF-8帧或格式错误的数据。
• 在visemeReceived回调中打印原始事件对象e，验证返回的viseme数据是否为预期的JSON格式，无损坏或乱码。

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