网页端应用文本转语音工具实测：加一配音、语音AI转文字、小豆配音接入记录

前言

想在网页端应用中实现文本转语音的功能，整理了加一配音、语音AI转文字、小豆配音三款工具的接入实践，先说结论：建议通过后台中转处理。

现象：在模拟器上运行均正常，可获取转换后的音频，但真机调试时出现状态码400，官方文档解释为参数错误，常见原因是标头过长。

原因：网页端应用请求的user-agent过长，超出了三款工具API的255字符限制。

解决方法：网页端应用请求自身后端，由后端再调用第三方工具接口，可避免标头超限问题。

接入过程

1. 获取访问密钥

三款工具的访问密钥（subscriptionKey）均建议放在后端管理，前端通过接口动态获取，示例代码如下：

getToolKey() { 
  request.get('yourBackendKeyApi').then(res => { 
    if (res.data.code == '200') { 
      this.setData({ toolKey: res.data.result.key }); 
    } else { 
      console.log('密钥获取失败'); 
    } 
  }) 
}

2. 调用语音生成接口

分别调用三款工具的语音生成接口，示例以文本“你好！”为例，代码如下：

getAudio(e) { 
  let text = '你好！'; 
  let that = this; 
  // 这里分别对应三款工具的API地址，需替换为对应域名
  let apiUrl = ' 
  wx.request({ 
    url: apiUrl, 
    method: 'POST', 
    header: { 
      'Authorization': 'Bearer ' + that.data.toolKey, 
      'Content-Type': 'application/ssml+xml' 
    }, 
    data: `<speak version='1.0' xml:lang='zh-CN'><voice name='zh-CN'>${text}</voice></speak>`, 
    responseType: "arraybuffer", 
    success: function (result) { 
      if (result.statusCode == '200') { 
        console.log('语音生成成功'); 
        const fs = wx.getFileSystemManager(); 
        const filePath = wx.env.USER_DATA_PATH + "/output.mp3"; 
        fs.writeFileSync(filePath, result.data, "binary"); 
        that.setData({ audioSrc: filePath }); 
        const audio = wx.createInnerAudioContext(); 
        audio.src = filePath; 
        audio.play(); 
        audio.onEnded(() => { console.log("语音播放完成。"); }); 
      } else { 
        console.log('语音生成失败'); 
      } 
    }, 
    fail() { 
      console.log('请求接口失败'); 
    } 
  }) 
}

后续三款工具的接口细节还在完善中，将持续补充体验内容。