uniapp中实现语音识别(app+小程序)

news2024/11/16 9:54:52

一.app版本需要先去百度智能云申请
在这里插入图片描述

注意填写完，需要打包成自定义基座或者安装rpk包，本地是无效的

封装recording-popup.vue组件

<template>
	<up-popup round="16" closeable :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>
				<image
					src="https://observe-oss.oss-cn-shanghai.aliyuncs.com/wisdom-bay-vue/home/home-icon-close-gray-20.075vw%402x.png"
					@click="close" />
			</view>
			<view class="voice-box">
				<image
					src="https://observe-oss.oss-cn-shanghai.aliyuncs.com/wisdom-bay-vue/home/home-release-recording-blue-90px%402x.png"
					class="voice-icon" @click="startRecord" />
			</view>
		</view>
	</up-popup>
</template>
<script setup>
	import {
		onBeforeUnmount,
		onMounted,
		ref,
		watch
	} from "vue";
	const recordShow = ref(false)
	const tips = ref('点击开始录音')
	const emits = defineEmits(['micInput'])

	const startRecord = async () => {
		// #ifdef H5
		uni.showToast({
			title: '浏览器暂不支持该功能，请前往APP体验',
			icon: 'none',
			duration: 2000
		})
		// #endif

		// #ifdef APP-PLUS
		let options = {
			engine: 'baidu',
			timeout: 10 * 1000, //超时时间
			punctuation: true, //是否需要标点符号
			continue: true, //语音识别是否采用持续模式
			userInterface: true, //安卓手机为true时会影响@touchend触摸结束事件，暂未发现好的解决方法
		};
		plus.speech.startRecognize(options, (s) => {
			emits('micInput', s)
		}, (errMsg) => {
			console.log('语音识别失败：' + JSON.stringify(errMsg));
		});
		// #endif
	}
	
	const onEnd = () => {
		close()
	}

	const open = () => {
		// #ifdef H5
		uni.showToast({
			title: '浏览器暂不支持该功能，请前往APP体验',
			icon: 'none',
			duration: 2000
		})
		// #endif
		// #ifdef APP-PLUS
		const info = uni.getAppAuthorizeSetting();
		if(info.microphoneAuthorized !== 'authorized') {
			plus.nativeUI.toast('请打开麦克风权限，再重启应用');
			return false;
		}
		plus.speech.addEventListener('end', onEnd, false);
		// #endif
	}
	const close = () => {
		recordShow.value = false
		// #ifdef APP-PLUS
		plus.speech.stopRecognize();
		// #endif
	}

	onBeforeUnmount(() => {
		// #ifdef APP-PLUS
		plus.speech.stopRecognize();
		// #endif
	})

	defineExpose({
		recordShow
	})
</script>
<style scoped lang="scss">
	.tag-popup-box {
		height: 19.655vw;
		background: #FFFFFF;
		width: 100%;
		padding: 1.5vw 1.5vw 0;
		box-sizing: border-box;
		border-radius: 1.2vw 1.2vw 0vw 0vw;

		.voice-box {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 2.251vw;

			.voice-icon {
				width: 6.752vw;
				height: 6.752vw;
			}
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 2.251vw;

			&>text {
				font-size: 1.125vw;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 1.65vw;
			}

			&>image {
				width: 1.65vw;
				height: 1.65vw;
			}
		}

		.content {
			width: 100%;
			height: 3.601vw;
			background: rgba(153, 153, 153, 0.08);
			border-radius: 0.45vw;
			padding: 0 0.975vw;
			box-sizing: border-box;
		}

		.confirm-btn {
			margin-top: 5.176vw;
			width: 100%;
			height: 3vw;
			text-align: center;
			background: #07B780;
			border-radius: 0.3vw;
			font-size: 1.05vw;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 3vw;
		}
	}
</style>

使用recording-popup

<recording-popup ref="recordingPopupRef" @mic-input="micInput" />

const recordingPopupRef = ref('')
const text = ref('')
		
const openRecord = () => {
	  recordingPopupRef.value.recordShow = true
},
const micInput = (str) => {
   //如果你知道输入框的cursor，就可以像我这样写，要是不知道就写成text.value += str了
	if (cursor === 0) {
			text.value += str
	} else {
			text.value = text.value.slice(0, cursor) + str + text.value.slice(cursor);
	}
}

二.小程序版本,进入微信小程序后台-->进入设置-->第三方设置-->添加插件->搜索同声传译-->完成添加。
在这里插入图片描述
在manifest.json文件中增加插件版本等信息

 "mp-weixin" : {
   "plugins" : {
            "WechatSI" : {
                "version" : "0.3.5",
                "provider" : ""
            }
        },
 }

封装recording-popup.vue组件

<template>
  <view>
    <u-popup
      round="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>
          <image
            src=""
            @click="close"
          />
        </view>
        <view class="voice-box" @touchstart="startRecord" @touchend="stopRecord" @touchcancel="stopRecord">
          <image
            src=""
            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 = true
  manager.value.onStart = (e:any) => {
    console.log('on-start')
    console.log(e)
    start = true
    tips.value = '正在识别...'
  }
  manager.value.onStop = (e:any) => {
    console.log('on-stop')
    console.log(e)
    start = false
    if (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 = false
    tips.value = '识别失败，请重试'
  }
}
const close = () => {
  recordShow.value = false
  emits('update:show', recordShow.value)
}


const  checkPermission = async () => {
  const sRes = await uni.getSetting()
  if (sRes.authSetting['scope.record']) return
  try {
    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>

使用recording-popup

<recording-popup :show="recordShow" @mic-input="micInput" />

const recordShow = ref<boolean>(false)
const text = ref('')

const open = () => {
recordShow.value = true
}
const micInput = (str) => {
   //如果你知道输入框的cursor，就可以像我这样写，要是不知道就写成text.value += str了
	if (cursor === 0) {
			text.value += str
	} else {
			text.value = text.value.slice(0, cursor) + str + text.value.slice(cursor);
	}
}