小程序实现语音识别功能

不废话，直接上代码

<template><view><u-popupround="16" :show="recordShow" :close-on-click-overlay="false":safe-area-inset-bottom="false"@close="close"@open="open"><view class="tag-popup-box"><view class="title"><text>{{ tips }}</text><imagesrc=""@click="close"/></view><view class="voice-box" @touchstart="startRecord" @touchend="stopRecord" @touchcancel="stopRecord"><imagesrc=""class="voice-icon"/></view></view></u-popup></view>
</template>
<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
let start = false
const tips = ref<string>('按住开始录音')
const props = defineProps({show: {type: Boolean,default: false}
})
const manager = ref<any>()
const emits = defineEmits(['update:show','startRecord','textChange','micInput'])const startRecord = async () => {if (start) return // 防止还在识别中时又触发录音console.log('touch started')tips.value = '准备中...'try {await checkPermission()} catch (e) {tips.value = '需要授权'return}manager.value.start()emits("startRecord")
}const stopRecord = () => {if (!start) return // 触发极短时间，stop会在还未start的情况下触发console.log('touch ended or canceled')manager.value.stop()
}watch(() => props.show, (value) => {recordShow.value = value
})const recordShow = ref<boolean>(props.show)
const open = () => {manager.value = requirePlugin("WechatSI").getRecordRecognitionManager()// recordShow.value = truemanager.value.onStart = (e:any) => {console.log('on-start')console.log(e)start = truetips.value = '正在识别...'}manager.value.onStop = (e:any) => {console.log('on-stop')console.log(e)start = falseif (e.result){tips.value = '按住开始录音'emits("micInput", e.result)} else {tips.value = '识别失败，请重试'}}manager.value.onRecognize = (e:any) => {console.log('on-recognize')console.log(e)}manager.value.onError = (e:any) => {console.log('on-error')console.log(e)start = falsetips.value = '识别失败，请重试'}
}
const close = () => {recordShow.value = falseemits('update:show', recordShow.value)
}const  checkPermission = async () => {const sRes = await uni.getSetting()if (sRes.authSetting['scope.record']) returntry {const aRes = await uni.authorize({scope: 'scope.record'})} catch (e) {const mRes = await uni.showModal({title: '授权',content: '请打开 录音功能 权限以便进行语音识别',showCancel: true,})if (mRes.cancel) throw new Error('授权失败')const sRes = await uni.openSetting()if (sRes.authSetting['scope.record']) {uni.showModal({title: '授权成功',content: '请继续点击下方按钮 进行语音输入',showCancel: false})throw new Error('授权成功')}throw new Error('授权失败')}
}
</script>
<style scoped lang="scss">
.tag-popup-box{height: 524rpx;background: #FFFFFF;width: 100%;padding: 40rpx 40rpx 0 ;box-sizing: border-box;border-radius: 32rpx 32rpx 0rpx 0rpx;.voice-box{width: 100%;display: flex;justify-content: center;margin-top: 60rpx;.voice-icon{width: 180rpx;height: 180rpx;}}.title{display: flex;justify-content: space-between;align-items: center;margin-bottom: 60rpx;&>text{font-size: 30rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #333333;line-height: 44rpx;}&>image{width: 44rpx;height: 44rpx;}}.content{width: 100%;height: 96rpx;background: rgba(153, 153, 153, 0.08);border-radius: 12rpx;padding: 0 26rpx;box-sizing: border-box;}.confirm-btn{margin-top: 138rpx;width: 100%;height: 80rpx;text-align: center;background: #07B780;border-radius: 8rpx;font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #FFFFFF;line-height: 80rpx;}
}
</style>