Vue是一款流行的Web應用程序框架，它可以輕松地與其他JavaScript庫和工具相集成。在本文中，我們將介紹如何使用Vue和Web Speech API獲取語音。

首先，我們需要引入Web Speech API。這可以通過在HTML文件中添加以下代碼來完成：

<script>
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
</script>

在Vue組件中，我們可以使用methods屬性來定義可調用的JavaScript函數。我們將使用此方法來開始和停止SpeechRecognition，以及獲取語音結果。以下是Vue組件示例代碼：

<template>
<div>
<button @click="startSpeech">Start</button>
<button @click="stopSpeech">Stop</button>
<p>{{ speechResult }}</p>
</div>
</template>
<script>
export default {
data() {
return {
recognition: null,
speechResult: ''
}
},
methods: {
startSpeech() {
this.recognition = new window.SpeechRecognition();
this.recognition.start();
this.recognition.addEventListener('result', e => {
let speechText = e.results[0][0].transcript.trim(); //獲取語音結果
this.speechResult = speechText;
});
},
stopSpeech() {
this.recognition.stop();
}
},
}
</script>

在上述代碼中，startSpeech方法創建了SpeechRecognition對象并開始語音識別。每當SpeechRecognition監聽到語音事件時，它會觸發result事件。我們可以通過獲取事件對象的results屬性來獲取轉錄的語音文本。

最后，我們可以通過在Vue組件的模板中使用插值語法{{ speechResult }}來顯示獲取的語音結果。