微信小程序将语音输入转化成文字_微信小程序语音输入并实时转文字

微信同声传译

微信同声传译插件是微信自研的语音输入，文本翻译等功能的插件封装，用于提供给第三方小程序调用。
官网地址：微信小程序同声转译

1.先在 app.json 里面进行配置

在与 pages tabbar 同一级的目录下进行配置：

"plugins": {
	"WechatSI": {
		"version": "0.3.4",
		"provider": "wx069ba97219f66d99"
	}
}
1
2
3
4
5
6

2.查看用户是否授权录音

// 用户是否授权录音
async handleRecord(){
	let scoped = await getSetting("scope.record");
	let scopedRecord = await scoped.authSetting('scpoe.record');
	if(scopedRecord === undefined){
		await authorize("scpoe.record")
	}
	if(scopedRecord === false){
		await openSetting();
	}
	if(scopedRecord === true){
		// 跳转到录音转换界面
		wx:navigateTo({
			url: "/pages/record/index"
		})
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.录音

/* index.js */
// 同声传译
var plugin = requirePlugin("WechatSI");
let manager = plugin.getRecordRecognitionManager();
data: {
        recordText: "",
        isTouch: false,
        isLoading: false
},
// 标志位
lock: false;
// 初始化 这个插件
initTran(){
	let that = this;
    // 有新的识别内容返回，则会调用此事件
    manager.onRecognize = function(res) {
                console.log(res.result);
                // 标志位
                that.lock = false;
                let text = res.result;
                that.setData({
                    recordText: text,
                    isLoading: false
                })
     }
     // 识别结束事件
        manager.onStop = function(res) {
                console.log(res.result)
                    // 标志位
                that.lock = false;
                wx.vibrateShort({
                    success: () => {},
                    fail: () => {},
                    complete: () => {},
                })
                let text = res.result;
                that.setData({
                        recordText: text,
                        isLoading: false
                    })
                    // 如果用户没有说话就提示一下
                if (res.result === "") {
                    wx.showToast({
                        title: '您没有说话',
                        icon: 'none'
                    });
                    return;
                }
            }
},
// 按钮的长按事件
async streamRecord(){
	// 标志位
	this.lock = true;
	if(this.lock){
		// 开始识别
		manager.start({ lang: ""zh_CN });
		// 微信震动
		wx.vibrateShort({
			success(){},
			fail(){},
		})
		let isTouch = true;
            this.setData({
                isTouch
         })
	}
},
// 松开了
endStreamRecord() {
        if (this.lock) {
            // 关闭语音
            manager.stop();
            let isTouch = false;
            this.setData({
                isTouch,
                isLoading: true
            })
        }
 },
// 页面加载的生命周期函数
onLoad(){
	this.initTran();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

下面是 .wxml 文件

<view class="text" wx:if="{{isLoading === true}}">正在玩命识别中...</view>
<view class="text" wx:else>{{isTouch === true ? "我正在听..." : recordText}}</view>

<view class="touch" bindlongpress="streamRecord"  catchtouchend="endStreamRecord">
    <view class="touchText">请按住后说话</view>
</view>
1
2
3
4
5
6

录音界面的截图