1.小程序后台添加微信同声传译插件
效果图:
2.wxml文件代码
<viewclass="yuyinWrap"><textareaclass='yuyinCon'placeholder='请输入内容'value='{{content}}'bindinput='conInput'></textarea><viewclass=''><buttonclass="yuyinBtnstart"bindtap='wordYun'>开始</button><buttonclass="yuyinBtn"bindtap='end'>结束</button></view></view>
3.wxss文件代码
.yuyinWrap{position:relative;margin-top:300rpx;}.yuyinCon{border:1pxsolid#ccc;margin:0auto;padding:10rpx10rpx70rpx;}.yuyinBtn{width:30%;height:70rpx;position:absolute;right:112rpx;bottom:12rpx;border:1pxsolid#eee;background:#fff;color:#606267;line-height:62rpx;}.start{left:-112rpx;}
4.js代码
const app = getApp();//引入插件:微信同声传译const plugin = requirePlugin('WechatSI');Page({/*** 页面的初始数据*/data: {content: '',//内容src:'', //},onReady(e) {//创建内部 audio 上下文 InnerAudioContext 对象。this.innerAudioContext = wx.createInnerAudioContext();this.innerAudioContext.onError(function (res) {console.log(res);wx.showToast({title: '语音播放失败',icon: 'none',})}) },// 手动输入内容conInput: function (e) {this.setData({content: e.detail.value,})},// 文字转语音wordYun:function (e) {var that = this;var content = this.data.content;plugin.textToSpeech({lang: "en_US",tts: true,content: content,success: function (res) {console.log(res);console.log("succ tts", res.filename);that.setData({src: res.filename})that.yuyinPlay();},fail: function (res) {console.log("fail tts", res)}})},//播放语音yuyinPlay: function (e) {if (this.data.src == '') {console.log(暂无语音);return;}this.innerAudioContext.src = this.data.src //设置音频地址this.innerAudioContext.play(); //播放音频},// 结束语音end: function (e) {this.innerAudioContext.pause();//暂停音频},})
已经实现!