我正在使用JavaScript和vue创建一个简单的SpeechRecognition
。
它正在运行,但是我想在单击按钮时停止录制。
我已经尝试使用.stop
或.abort
,但是它不起作用。
我的模板
<a v-show='StatusSpeech' href="javascript:;" v-on:click="Speech($event, DataJournals.id, index, StatusSpeech)" class="btn btn-sm btn-primary">Speech</a>
<a v-show='!StatusSpeech' href="javascript:;" v-on:click="Speech($event, DataJournals.id, index, StatusSpeech)" class="btn btn-sm btn-danger">Stop</a>
我的变量
export default {
data() {
return {
StatusSpeech: true,
}
}
这是我的代码:
Speech: function (event, id, index, StatusSpeech) {
window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
let finalTranscript = '';
let recognition = new window.SpeechRecognition();
recognition.lang = 'en-US';
recognition.interimResults = true;
recognition.maxAlternatives = 10;
recognition.continuous = true;
recognition.onresult = (event) => {
let interimTranscript = '';
for (let i = event.resultIndex, len = event.results.length; i < len; i++) {
let transcript = event.results[i][0].transcript;
if (event.results[i].isFinal) {
finalTranscript += transcript;
} else {
interimTranscript += transcript;
}
}
console.log(finalTranscript)
console.log(interimTranscript)
this.DataJournal[index].Description = finalTranscript + interimTranscript;
}
if (StatusSpeech) {
recognition.start();
console.log('Speech recognition started')
this.StatusSpeech = false
}else{
recognition.abort();
console.log('Speech recognition stoped')
this.StatusSpeech = true
}
}