微信同声传译由微信智聆语音团队、微信翻译团队与公众平台联合推出的同传开放接口,首期开放语音转文字、文本翻译、语音合成接口,为开发者赋能。
官方的开发文档:https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx069ba97219f66d99&token=251348119&lang=zh_CN
演示
极智搜题语音识别
我小程序语音识别加入了短暂震动与长按波纹动画效果
欢迎体验
极智搜题小程序
页面按钮
<!-- 语音 -->
<view class="main_voice text-center">
<view class="voice_ico shadow" bindtouchstart="touchStart" bindtouchend="touchEnd">
<text class="cuIcon-voicefill "></text>
<view class="pulse {{recordState == true ? 'p1' : ''}}"></view>
<view class="pulse {{recordState == true ? 'p2' : ''}}"></view>
</view>
<view class="tips">
<text wx:if="{{recordState == false}}">按住说话</text>
<text wx:else>{{tips}}</text>
</view>
</view>
页面样式
/* =====语音控件====== */
.tips {
text-align: center;
position: absolute;
bottom: 200rpx;
left: 0;
right: 0;
margin: 0 auto;
color: rgba(0, 0, 0, 0.6);
font-size: 1.2rem;
}
.main_voice {
position: relative;
bottom: -330rpx;
}
.voice_ico {
width: 150rpx;
height: 150rpx;
background: linear-gradient(-45deg, #33cbd7, #4cf4ca);
border-radius: 50%;
font-size: 3rem;
color: #fff;
line-height: 150rpx;
left: 0;
right: 0;
margin: 0 auto;
}
.voice_ico .pulse {
position: absolute;
width: 130px;
height: 130px;
left: 0;
right: 0;
margin: auto;
border: 2px solid #39f;
border-radius: 50%;
opacity: 0;
top: -30px;
z-index: -1;
}
.p1 {
animation: warn 2s ease-out infinite;
}
.p2 {
animation: warn2 2s ease-out infinite;
}
@keyframes warn {
0% {
transform: scale(0.3);
opacity: 0.0;
}
25% {
transform: scale(0.3);
opacity: 0.1;
}
50% {
transform: scale(0.5);
opacity: 0.3;
}
75% {
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 0.0;
}
}
@keyframes warn2 {
0% {
transform: scale(0.3);
opacity: 0.0;
}
25% {
transform: scale(0.3);
opacity: 0.1;
}
50% {
transform: scale(0.3);
opacity: 0.3;
}
75% {
transform: scale(0.5);
opacity: 0.5;
}
100% {
transform: scale(0.8);
opacity: 0.0;
}
}
插件引入
先在微信小程序后台👉设置 👉第三方设置 👉插件中查找添加微信同声传译插件
在app.json
中添加插件信息
"plugins": {
"WechatSI": {
"version": "0.3.3",
"provider": "wx069ba97219f66d99"
}
在pages的js中加入插件初始化代码
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();
// 设置采集声音参数
const options = {
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'aac'
}
设置录音状态,按下为true
,松开false
,默认状态为false
Page({
data: {
content: '', //输出内容
recordState: false, //录音状态
}
})
//======================================语音识别【【=============================================//
//语音 --按住说话
touchStart: function(e) {
wx.vibrateShort() //按键震动效果(15ms)
manager.start(options)
this.setData({
recordState: true, //录音状态为真
tips: '松开结束',
})
},
//语音 --松开结束
touchEnd: function(e) {
// 语音结束识别
manager.stop();
this.setData({
recordState: false,
})
},
//识别语音 -- 初始化
initRecord: function() {
const that = this;
// 有新的识别内容返回,则会调用此事件
manager.onRecognize = function(res) {
console.log(res)
}
// 正常开始录音识别时会调用此事件
manager.onStart = function(res) {
console.log("成功开始录音识别", res)
}
// 识别错误事件
manager.onError = function(res) {
console.error("error msg:", res.retcode, res.msg)
}
//识别结束事件
manager.onStop = function(res) {
console.log('..............结束录音')
console.log('录音总时长 -->' + res.duration + 'ms');
console.log('语音内容 --> ' + res.result);
if (res.result == '') {
wx.showModal({
title: '提示',
content: '听不清楚,请重新说一遍!',
showCancel: false,
success: function(res) {}
})
return;
}
that.setData({
content: that.data.content + (res.result).replace('。', '') //去掉自动添加的句号
})
}
},
//======================================语音识别】】=============================================//
最后onload()
中加入初始化代码即可
//识别语音
this.initRecord();