mpvue微信小程序使用微信同声传译-文字转语音

• 背景：项目首页推出老年人关怀模式，不仅加大了字体，而且在点击时需要语音播报出所点击的模块名称。

• 解决方案：微信同声传译，官网文档地址

• mpvue项目中具体使用：

1. 在app.json中引入插件

{
    ...
    "plugins": {
      ...
      "WechatSI": {
        "version": "0.0.7",
        "provider": "wx069ba97219f66d99"
          }
    }
  }

2.在工具类js utils/index.js里面封装文字转语音的方法

    // 微信同声传译
    const WechatSI = requirePlugin("WechatSI")
    function playTalk(url = '') {
      if (!url) {
        return
      }
      console.log('语音文件路径：', url)
      play(url)
    }
    function play(tempFilePath = '') {
      const innerAudioContext = wx.createInnerAudioContext()
      innerAudioContext.autoplay = true
      innerAudioContext.src = tempFilePath
      innerAudioContext.onPlay(() => {
        console.log('开始播放')
      })
      innerAudioContext.onError((res) => {
        console.log(res.errMsg)
        console.log(res.errCode)
      })
    }
    export function getTalkUrl(content = '') {
      WechatSI.textToSpeech({
        lang: 'zh_CN',
        content: content,
        success: (res) => {
          console.log('同声传译res', res)
          if (res.retcode == 0 ) {
            playTalk(res.filename)
          }
        },
        fail: (err) => {
          console.log('fail', err)
        }
      })
    }

3.引入和调用

• import { getTalkUrl } from '../../utils/index'
• 在vue文件里面调用：

   ...
   methods: {
      handleItem(content) {
         console.log('content', content)
         if (content) {
           getTalkUrl(content)
         }
       }
   }
   ...

4.登录微信公众平台，添加微信同声传译插件

5.在开发管理->开发设置->服务器域名 里面新增request合法域名：https://ae.qq.weixin.com