小程序开发之语音合成

Posted 2022-01-30 栏观科技

 如今，越来越多的人成为视频博主，文字合成语音是很多博主的强需求。今天结合“工具百宝箱”这款微信小程序，介绍一下如何开发文字转语音的功能。

 文字合成语音在学术界被称为tts(text to speech)，国内的云服务器厂商提供了接口供调用。每个腾讯云用户可以免费领取为期两个月800万字符的语音包供学习调研用，故本文以腾讯云为例进行介绍。

服务端开发

 服务端调用腾讯云tts接口需要使用appId和appKey做鉴权，需要先前往腾讯云api中心 创建密钥，按照页面提示进行操作即可。

 调用接口需要一系列复杂的签名操作，腾讯云为了方便用户，提供了多种编程语言的sdk，可以前往tts文档 ，在页面下方找到你想要的sdk，以nodejs为例，只需在package.json引入即可。

"dependencies": 
    "tencentcloud-sdk-nodejs": "4.0.157"
  

 合成语音的几个重要参数分别是：语速、音色、文字内容、音量大小，腾讯云的api explore 提供了可视化的工具来指导开发者构造请求参数，开发者只需要参考这里面的调用方法在服务端使用sdk进行调用即可。

router.get("/text-to-voice", async (req, res) => 
    let ret = 
        success: true
    
    try 
        if (req.query.textValue) 
            ret = await contentCheck(req.query.textValue);
            if (ret.success) 
                let param = 
                    "Text": req.query.textValue,
                    "SessionId": req.query.session,
                    "VoiceType": req.query.voiceType ? parseInt(req.query.voiceType) : 2,
                    "ModelType": 1,
                    "Speed": req.query.voiceSpeed ? parseInt(req.query.voiceSpeed) : 0,
                    "Volume": req.query.volume ? parseInt(req.query.volume) : 0
                
                let tmp = await ttsClient.TextToVoice(param)
                fs.writeFileSync("/www/voice/" + (req.query.oriSession ? req.query.session : md5(req.query.session + req.query.randomSand)) + ".wav", Buffer.from(tmp.Audio, "base64"))
            
         else 
            ret.success = false;
            ret.frontMessage = globalVariable.frontMessage.paramError
        
     catch (error) 
        ret.success = false;
        ret.frontMessage = globalVariable.frontMessage.busy;
        console.log(error)
    

    res.json(ret)
)

 上面代码是“工具百宝箱”小程序后端核心代码，它会将tts接口返回的base64数据进行解码然后写入一个文件，这个文件目录在nginx上已经配置好了，可以直接访问。

location ~ (/images/|/voice/) 
    root /www;
  

小程序开发

 小程序的内容比较简单，提供必要的交互供用户进行选择。生成语音之后，用户可以进行试听。通过小程序内部audio 播放合成的语音文件即可。因为微信小程序的限制，下载语音只能通过浏览器打开语音文件。这里做了一个弹窗提示用户，并将语音文件地址复制到剪切板。

  playVoice: function (evt) 
    if (!this.data.audio) 
      this.data.audio = wx.createInnerAudioContext();
      this.data.audio.src = this.data.voiceUrl;
      this.data.audio.onEnded(() => 
        this.setData(
          playing: false
        )
      );
    

    this.data.audio.play();
    this.setData(
      playing: true
    )