vue实现Siri

Vue 实现 Siri 风格语音交互

在 Vue 中实现类似 Siri 的语音交互功能，可以通过 Web Speech API 或第三方语音识别库实现。以下是具体实现方法：

安装必要依赖

npm install vue-speech --save

基础语音识别实现

// 在组件中引入
import { useSpeechRecognition } from 'vue-speech'

export default {
  setup() {
    const { isListening, result, start, stop } = useSpeechRecognition()

    return {
      isListening,
      result,
      startListening: start,
      stopListening: stop
    }
  }
}

语音合成实现

const speak = (text) => {
  const utterance = new SpeechSynthesisUtterance(text)
  speechSynthesis.speak(utterance)
}

完整 Siri 风格组件实现

模板部分

<template>
  <div class="siri-container">
    <button @click="toggleListening">
      {{ isListening ? '停止' : '开始' }}语音
    </button>
    <div class="response">{{ response }}</div>
  </div>
</template>

脚本部分

export default {
  data() {
    return {
      isListening: false,
      response: '',
      commands: {
        '你好': '你好，我是你的语音助手',
        '时间': `现在是${new Date().toLocaleTimeString()}`,
        '日期': `今天是${new Date().toLocaleDateString()}`
      }
    }
  },
  methods: {
    toggleListening() {
      if (this.isListening) {
        this.stopListening()
      } else {
        this.startListening()
      }
    },
    startListening() {
      this.isListening = true
      // 实际项目中这里调用语音识别API
    },
    stopListening() {
      this.isListening = false
      this.processCommand()
    },
    processCommand() {
      const command = this.result.toLowerCase()
      this.response = this.commands[command] || 
        '抱歉，我不理解这个指令'
      this.speak(this.response)
    },
    speak(text) {
      // 语音合成实现
    }
  }
}

样式优化

添加 Siri 风格样式

.siri-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  background: rgba(255,255,255,0.9);
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}

button {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

.response {
  margin-top: 15px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 10px;
  min-height: 50px;
}

高级功能扩展

实现语音唤醒词

// 监听特定唤醒词
watch(result, (newVal) => {
  if (newVal.toLowerCase().includes('hey siri')) {
    this.activateAssistant()
  }
})

添加动画效果

// 使用Vue过渡效果
<transition name="fade">
  <div v-if="isListening" class="listening-animation"></div>
</transition>

持久化命令配置

// 将命令存储在Vuex或Pinia中
const store = useCommandStore()
store.addCommand('天气', this.fetchWeather)

以上实现方案结合了语音识别、语音合成和Vue响应式特性，可以构建出类似Siri的基础交互体验。实际项目中可能需要接入更专业的语音服务API以获得更好的识别效果。