smart-ask-answer-web/src/views/smart-ask-answer/assistant/component/voice/index_2.vue

<template>
  <div class="voice-recorder">
    <button
        @mousedown="startRecording"
        @mouseup="stopRecording"
        @touchstart="startRecording"
        @touchend="stopRecording"
        :disabled="isRecording"
    >
      {{ isRecording ? '录音中...' : '按住说话' }}
    </button>

    <div class="volume-indicator" :style="{ width: volume + '%' }"></div>

    <div v-if="transcript" class="transcript">
      <h3>识别结果：</h3>
      <p>{{ transcript }}</p>
    </div>

    <div v-if="error" class="error">{{ error }}</div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'VoiceRecorder',
  setup() {
    const isRecording = ref(false);
    const volume = ref(0);
    const transcript = ref('');
    const error = ref('');
    let mediaStream = null;
    let audioContext = null;
    let analyser = null;
    let microphone = null;
    let scriptProcessor = null;
    let recognition = null;

    const startRecording = async () => {
      try {
        // 重置状态
        transcript.value = '';
        error.value = '';
        isRecording.value = true;
        volume.value = 0;

        // 获取麦克风权限
        mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });

        // 设置音频分析
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
        analyser = audioContext.createAnalyser();
        microphone = audioContext.createMediaStreamSource(mediaStream);
        scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);

        analyser.smoothingTimeConstant = 0.8;
        analyser.fftSize = 1024;

        microphone.connect(analyser);
        analyser.connect(scriptProcessor);
        scriptProcessor.connect(audioContext.destination);

        // 音量分析
        scriptProcessor.onaudioprocess = () => {
          const array = new Uint8Array(analyser.frequencyBinCount);
          analyser.getByteFrequencyData(array);
          let values = 0;

          const length = array.length;
          for (let i = 0; i < length; i++) {
            values += array[i];
          }

          const average = values / length;
          volume.value = Math.min(100, Math.max(0, average * 0.5));
        };

        // 语音识别
        if ('webkitSpeechRecognition' in window) {
          recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
          recognition.continuous = true;
          recognition.interimResults = true;

          recognition.onresult = (event) => {
            let interimTranscript = '';
            let finalTranscript = '';

            for (let i = event.resultIndex; i < event.results.length; i++) {
              const transcript = event.results[i][0].transcript;
              if (event.results[i].isFinal) {
                finalTranscript += transcript;
              } else {
                interimTranscript += transcript;
              }
            }

            transcript.value = finalTranscript || interimTranscript;
          };

          recognition.onerror = (event) => {
            console.log(event)
            error.value = `识别错误: ${event.error}`;
          };

          recognition.start();
        } else {
          error.value = '您的浏览器不支持语音识别';
        }
      } catch (err) {
        error.value = `错误: ${err.message}`;
        isRecording.value = false;
      }
    };

    const stopRecording = () => {
      isRecording.value = false;
      volume.value = 0;

      // 停止音频分析
      if (scriptProcessor) {
        scriptProcessor.disconnect();
        scriptProcessor = null;
      }

      if (microphone) {
        microphone.disconnect();
        microphone = null;
      }

      if (analyser) {
        analyser.disconnect();
        analyser = null;
      }

      // 停止媒体流
      if (mediaStream) {
        mediaStream.getTracks().forEach(track => track.stop());
        mediaStream = null;
      }

      // 停止语音识别
      if (recognition) {
        recognition.stop();
        recognition = null;
      }

      // 关闭音频上下文
      if (audioContext && audioContext.state !== 'closed') {
        audioContext.close();
        audioContext = null;
      }
    };

    return {
      isRecording,
      volume,
      transcript,
      error,
      startRecording,
      stopRecording
    };
  }
};
</script>

<style scoped>
.voice-recorder {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

button {
  padding: 12px 24px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background-color: #45a049;
}

.volume-indicator {
  height: 10px;
  background-color: #4CAF50;
  margin: 15px 0;
  transition: width 0.1s;
  border-radius: 5px;
}

.transcript {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
  text-align: left;
}

.error {
  color: #f44336;
  margin-top: 15px;
}
</style>