小程序实现语音转文字

语音转文字功能

在小程序后台安装微信同声传译插件

在项目pages.json配置

• 点击插件查看详情获取AppIDwx069ba97219f66XXX
• 获取最新版本号更新记录

0.3.5	发布时间:	2021-08-19 19:20:00
更新日志:	（无）

"plugins": {
        "WechatSI": {
            "version": "0.3.5",
            "provider": "wx069ba97219f66XXX"
        }
    }

代码实现

• 引入插件

  let plugin = requirePlugin("WechatSI")

  let manager = plugin.getRecordRecognitionManager();

<!-- 语音弹窗 -->
        <view class="voice" v-if="showRecord">
            <view class="recordBox">
                <view class="startRecord" v-if="showStartRecord">
                    <view class="time-record">
                        <text ref="hour">00:{{getTime(timer)}}</text>
                    </view>
                    <view class="time-record-tips">
                        <text>最短1秒,最长30秒</text>
                    </view>
                    <view class="icon_start" @touchstart="touchStart" @touchend="touchEnd">
                        <image src="../../static/img/record/icon-big-luying.png" mode=""></image>
                    </view>
                    <view class="txt">
                        {{voiceText}}
                    </view>
                </view>
                <view class="stopRecord" v-if="showStopRecord">
                    <view class="recordTxt-wrap">
                        <view class="recordTxt">
                            <text>{{voiceState}}</text>
                        </view>
                    </view>
​
                    <view class="stopRecord-wrap">
                        <view class="icon_cancel" @click="cancelRecordHandle">
                            <view class="icon">
                                <image src="../../static/img/record/icon-quxiao-changgui.png" mode=""></image>
                            </view>
                            <view class="txt">取消</view>
                        </view>
                        <view class="icon_stop" @click="confirmRecordHandle">
                            <image src="../../static/img/record/icon-check.png" mode=""></image>
                        </view>
                        <view class="icon_reset" @click="resetRecordHandle">
                            <view class="icon">
                                <image src="../../static/img/record/icon-chongxinluru-changgui.png" mode=""></image>
                            </view>
                            <view class="txt">重新录入</view>
                        </view>
                    </view>
​
                </view>
            </view>
        </view>
​
<script>
   //引入插件
    let plugin = requirePlugin("WechatSI")
    let manager = plugin.getRecordRecognitionManager();
    const dayjs = require("dayjs");
    export default {
        data() {
            return {
                //录音
                showRecord: false,
                voiceState: "",
                voiceText: "长按录音",
                timerId: null,
                timer: 0,
                showStartRecord: true,
                showStopRecord: false,
        },
        onLoad() {
            this.initRecord();
        },
        methods: {
            //录音
            goRecordPage() {
                this.showRecord = true
                this.showStartRecord = true
                this.showStopRecord = false
                this.voiceState = ""
            },
            //显示录音时间
            getDayjsTime() {
                this.timerId = setInterval(() => {
                    this.timer++
                }, 1000)
            },
            getTime(time) {
                if (time < 10) {
                    time = `0${time}`
                }
                return time
            },
            touchStart() {
                this.voiceText = "松开结束"
                this.getDayjsTime()
                //最多录音30秒
                manager.start({
                    duration: 30000,
                    lang: "zh_CN"
                });
            },
            touchEnd() {
                clearInterval(this.timerId)
                this.timer = 0
                this.voiceText = "长按录音",
                    this.showStartRecord = false,
                    this.showStopRecord = true,
                    //停止录音
                    manager.stop();
            },
            //回调
            initRecord: function() {
                manager.onStart = function(res) {
                    this.voiceState = "onStart:" + res.msg + "正在录音"
                };
                //有新的识别内容返回，则会调用此事件  
                manager.onRecognize = (res) => {
                    this.voiceState = res.result;
                }
​
                // 识别结束事件  
                manager.onStop = (res) => {
                    this.touchEnd()
                    this.voiceState = res.result;
                }
​
                // 识别错误事件  
                manager.onError = (res) => {
                    this.voiceState = res.msg;
​
                }
            },
            //重新录入
            resetRecordHandle() {
                this.voiceState = ""
                this.showStartRecord = true
                this.showStopRecord = false
            },
            //取消
            cancelRecordHandle() {
                this.voiceState = ""
                this.showRecord = false
            },
             //确认录音结果
            confirmRecordHandle() {
                this.showRecord = false
                this.formInline.description = this.voiceState
            },
        }
    };
</script>