微信同聲傳譯由微信智聆語音團隊、微信翻譯團隊與公衆平臺聯合推出的同傳開放接口,首期開放語音轉文字、文本翻譯、語音合成接口,爲開發者賦能。
官方的開發文檔: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();