小程序中使用微信同声传译插件实现语音识别、语音合成、文本翻译功能----语音合成(二)

官方文档链接:https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx069ba97219f66d99\&token=370941954\&lang=zh_CN#-

要使用插件需要先在小程序管理后台设置->第三方设置->插件管理 中添加插件,目前该插件仅认证后的小程序。

语音合成功能

语音合成支持的语言有 zh_CN(中国大陆),en_US(英文)。

textToSpeech(obj)

参数说明:

1、lang:文本语言 zh_CN(中国大陆)en_US(英文),String类型,必填项;

2、content:需要被翻译的文本内容,后台限制1000字节大小,String类型,必填项;

3、success:调用成功时触发的回调,Function类型;

回调结果说明:

retcode:retcode == 0 时语音合成成功,Int类型;

origin: 原始文本,String类型;

filename:语音合成返回的语音地址,可自行下载使用,String类型;

expired_time:语音合成链接超时时间戳 如1525930552,超时后无法播放,可使用时间为3小时,Int类型。

4、fail:调用失败时触发的回调,Function类型。

回调结果说明

retcode:错误码,Int类型;

msg:错误信息,String类型。

错误码说明

-20001 语音合成语言格式出错

-20002 输入的待合成格式不正确

-20003 语音合成内部错误

-20005 网络错误

-40001 接口调用频率达到限制,请联系插件开发者

使用

1、注册插件

在app.json中注册插件

"plugins": {

"WechatSI": {

"version": "0.3.5",

"provider": "wx069ba97219f66d99"

}

},

2、在页面中引入插件

//引入插件:微信同声传译

const plugin = requirePlugin('WechatSI')

3、在上述1、2步骤完成后实现语音合成

// 文字转语音

playTextToVoice(){

//创建内部 audio 上下文 InnerAudioContext 对象。

this.innerAudioContext = wx.createInnerAudioContext();

const that = this;

plugin.textToSpeech({

// 调用插件的方法

lang: 'zh_CN',

// lang: 'en_US',

content: '欢迎进入语音合成',

success: function (res) {

that.playAudio(res.filename);

}

});

},

// 播报语音

playAudio(e) {

this.innerAudioContext.src = e; //设置音频地址

this.innerAudioContext.play(); //播放音频

},

4、如果在页面隐藏或卸载时不再播放合成的语音可将其关闭或销毁播放实例

onHide() {

this.innerAudioContext.stop();

this.innerAudioContext.destroy();

},

案例实现代码:

javascript 复制代码
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI')

Page({
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 播报
    this.playTextToVoice()
  },

  // 文字转语音
  playTextToVoice(){
    //创建内部 audio 上下文 InnerAudioContext 对象。
    this.innerAudioContext = wx.createInnerAudioContext();
    const that = this;
    plugin.textToSpeech({
      // 调用插件的方法
      lang: 'zh_CN',
      // lang: 'en_US',
      content: '欢迎进入语音合成',
      success: function (res) {
        that.playAudio(res.filename);
      }
    });
  },
  // 播报语音
  playAudio(e) {
    this.innerAudioContext.src = e; //设置音频地址
    this.innerAudioContext.play(); //播放音频
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    this.innerAudioContext && this.innerAudioContext.stop();
    this.innerAudioContext && this.innerAudioContext.destroy();
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.innerAudioContext && this.innerAudioContext.stop();
    this.innerAudioContext && this.innerAudioContext.destroy();
  },
})

具体案例代码亦可参考:https://gitee.com/mei-ruohan/mini-program-collection/tree/master/pages/texttvoice

相关推荐
IT_陈寒25 分钟前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿27 分钟前
react 实现插槽slot功能
前端
stoneship1 小时前
Web项目减少资源加载失败白屏问题
前端
DaMu1 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员1 小时前
一文读懂Font文件
前端
Asort1 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer1 小时前
什么是 React 中的远程组件?
前端·react.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑1 小时前
「AI」网站模版,效果如何?
前端·后端·产品