小程序语音

项目中要用到语音识别文字这个功能,找遍微信小程序的整个开发文档,发现并没有开发该功能的相关API,想实现这一功能,只能通过第三方,大概的原理就是先录音,然后将录音传给服务器进行识别转化文字,再传回,这样的方式大大影响了用户的体验效果。

本人并没有尝试过,度娘上好多例子,也查看了微信小程序开发社区,大家也都遇到这样的问题,于是微信给大家提供了微信同声传译插件

首先,想使用这一插件,必须先在小程序管理后台先添加上。

第一步:添加插件

小程序管理后台 --> 设置 --> 第三方服务 --> 插件管理中查找插件名称「微信同声传译」

(目前最新版本:0.2.2,appid:wx069ba97219f66d99),并申请使用 

第二步:引入插件代码后修改配置文件 JSON(app.json)

"plugins": {

    "WechatSI": {

      "version": "0.2.2",

      "provider": "wx069ba97219f66d99"

    }

  }

第三步:在 index.js 引入插件,获取全局唯一的语音识别管理器 recordRecoManager

//index.js  ( page外 )

var plugin = requirePlugin("WechatSI")

let manager = plugin.getRecordRecognitionManager()

第四步:在语音输入

希望做到的效果就是按住某个按钮 ,开始识别语音,松开按钮就结束识别

wxml代码如下:

<view  catchtouchstart="streamRecord"  catchtouchend="endStreamRecord"> 语音识别按钮 </view>

js代码如下:

Page({

 data: {},

 streamRecord: function(){

   manager.start({

     lang: 'zh_CN',

   })

 },

 endStreamRecord: function(){

   manager.stop()

 }

})

第五步:绑定录音回调事件

wxml代码如下:

<view> 语音识别内容:{{currentText}} </view>

js代码如下:

Page({

 data: {

   currentText: '',

 },

 onLoad: function(){

   this.initRecord()

 },

 initRecord: function(){

   //有新的识别内容返回,则会调用此事件

   manager.onRecognize = (res) => {

     let text = res.result

     this.setData({

       currentText: text,

     })

   }

   // 识别结束事件

   manager.onStop = (res) => {

     let text = res.result

     if(text == '') {

       // 用户没有说话,可以做一下提示处理...

       return

     }

     this.setData({

       currentText: text,

     })

     // 得到完整识别内容就可以去翻译了

     this.translateTextAction()

   }

 },

 translateTextAction: function(){ },

})

第六步:文本翻译

wxml代码如下:

<view> 翻译结果:{{translateText}} </view>

js代码如下:

Page({

 data: {

   currentText: '',

   translateText: '',

 },

 translateTextAction: function(){

   let lfrom =  'zh_CN'

   let lto = 'en_US'

   plugin.translate({

     lfrom: lfrom,

     lto: lto,

     content: this.data.currentText,

     tts: true, // 需要合成语音

     success: (resTrans)=>{

       // 翻译可以得到 翻译文本,翻译文本的合成语音,合成语音的过期时间

       let text = resTrans.result

       this.setData({

         translateText: text,

       })

       // 得到合成语音让它自动播放出来

       wx.playBackgroundAudio({

         dataUrl: resTrans.filename,

         title: '',

       })

     },

   })

 },

})

第七步:语音合成

plugin.translate得到的语音文件是有过期时间,可以download到本地使用。

如果像面对面翻译一样需要存比较多历史记录的话,也可以选择过期之后调用plugin.textToSpeech接口再去重新合成一次。

plugin.textToSpeech({

   lang: 'zh_CN',

   content: '我想重新进行语音合成',

   success: resTrans => {

     // 可以重新得到语音合成文件和过期时间

   },

})

微信同声传译小程序插件 —— 机器翻译、智能语音 | 微信开放社区

拓展

先上效果图,一个语音识别按钮,要实现四个版块,并存四个语音转文字的值

wxml代码:

js代码如下:

作者:肉肉要次肉 链接:https://www.jianshu.com/p/1da74d703b48 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。