feat: 语音输入框的条件编译
This commit is contained in:
@@ -2,7 +2,11 @@
|
|||||||
<view class="input-area-wrapper">
|
<view class="input-area-wrapper">
|
||||||
<view v-if="!visibleWaveBtn" class="area-input">
|
<view v-if="!visibleWaveBtn" class="area-input">
|
||||||
<!-- 语音/键盘切换 -->
|
<!-- 语音/键盘切换 -->
|
||||||
<view class="input-container-voice" @click="toggleVoiceMode">
|
<view
|
||||||
|
v-if="isSpeechRecognitionSupported"
|
||||||
|
class="input-container-voice"
|
||||||
|
@click="toggleVoiceMode"
|
||||||
|
>
|
||||||
<image
|
<image
|
||||||
class="voice-icon"
|
class="voice-icon"
|
||||||
v-if="!isVoiceMode"
|
v-if="!isVoiceMode"
|
||||||
@@ -16,7 +20,10 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 输入框/语音按钮容器 -->
|
<!-- 输入框/语音按钮容器 -->
|
||||||
<view class="input-button-container">
|
<view
|
||||||
|
class="input-button-container"
|
||||||
|
:class="{ 'input-button-container--no-voice': !isSpeechRecognitionSupported }"
|
||||||
|
>
|
||||||
<textarea
|
<textarea
|
||||||
ref="textareaRef"
|
ref="textareaRef"
|
||||||
v-if="!isVoiceMode"
|
v-if="!isVoiceMode"
|
||||||
@@ -77,8 +84,15 @@ import { ref, computed, watch, nextTick, onMounted, defineExpose, onUnmounted }
|
|||||||
import RecordingWaveBtn from "@/components/Speech/RecordingWaveBtn.vue";
|
import RecordingWaveBtn from "@/components/Speech/RecordingWaveBtn.vue";
|
||||||
import { getCurrentConfig } from "@/constant/base";
|
import { getCurrentConfig } from "@/constant/base";
|
||||||
|
|
||||||
|
let manager = null;
|
||||||
|
const isSpeechRecognitionSupported = ref(false);
|
||||||
|
|
||||||
|
// WechatSI 是微信小程序插件,App 原生基座没有 requirePlugin。
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
const plugin = requirePlugin("WechatSI");
|
const plugin = requirePlugin("WechatSI");
|
||||||
const manager = plugin.getRecordRecognitionManager();
|
manager = plugin.getRecordRecognitionManager();
|
||||||
|
isSpeechRecognitionSupported.value = !!manager;
|
||||||
|
// #endif
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: String,
|
modelValue: String,
|
||||||
@@ -151,11 +165,13 @@ watch(inputMessage, (val) => {
|
|||||||
|
|
||||||
// 切换语音/文本模式
|
// 切换语音/文本模式
|
||||||
const toggleVoiceMode = () => {
|
const toggleVoiceMode = () => {
|
||||||
|
if (!isSpeechRecognitionSupported.value) return;
|
||||||
isVoiceMode.value = !isVoiceMode.value;
|
isVoiceMode.value = !isVoiceMode.value;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 处理语音按钮长按开始
|
// 处理语音按钮长按开始
|
||||||
const handleVoiceTouchStart = () => {
|
const handleVoiceTouchStart = () => {
|
||||||
|
if (!manager) return;
|
||||||
try {
|
try {
|
||||||
manager.start({ lang: "zh_CN" });
|
manager.start({ lang: "zh_CN" });
|
||||||
isRecording.value = true;
|
isRecording.value = true;
|
||||||
@@ -177,6 +193,11 @@ const handleVoiceTouchStart = () => {
|
|||||||
|
|
||||||
// 处理语音按钮长按结束
|
// 处理语音按钮长按结束
|
||||||
const handleVoiceTouchEnd = () => {
|
const handleVoiceTouchEnd = () => {
|
||||||
|
if (!manager) {
|
||||||
|
resetUI();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// 如果本地状态不是录音中,也确保 UI 恢复
|
// 如果本地状态不是录音中,也确保 UI 恢复
|
||||||
if (!isRecording.value) {
|
if (!isRecording.value) {
|
||||||
if (recordingWaveBtnRef.value) {
|
if (recordingWaveBtnRef.value) {
|
||||||
@@ -202,6 +223,8 @@ const handleVoiceTouchEnd = () => {
|
|||||||
|
|
||||||
// 处理发送原语音
|
// 处理发送原语音
|
||||||
const initRecord = () => {
|
const initRecord = () => {
|
||||||
|
if (!manager) return;
|
||||||
|
|
||||||
manager.onRecognize = (res) => {
|
manager.onRecognize = (res) => {
|
||||||
let text = res.result || "";
|
let text = res.result || "";
|
||||||
inputMessage.value = text;
|
inputMessage.value = text;
|
||||||
@@ -247,6 +270,7 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
|
if (manager) {
|
||||||
try {
|
try {
|
||||||
manager.stop && manager.stop();
|
manager.stop && manager.stop();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@@ -255,6 +279,7 @@ onUnmounted(() => {
|
|||||||
manager.onRecognize = null;
|
manager.onRecognize = null;
|
||||||
manager.onStop = null;
|
manager.onStop = null;
|
||||||
manager.onError = null;
|
manager.onError = null;
|
||||||
|
}
|
||||||
resetUI();
|
resetUI();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -24,6 +24,10 @@
|
|||||||
.input-button-container {
|
.input-button-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
&--no-voice {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hold-to-talk-button {
|
.hold-to-talk-button {
|
||||||
|
|||||||
Reference in New Issue
Block a user