I am using flutter to build a speech recognition app that works on ios and android but it's not working on the web. So I decided to add an app.js file to the web folder so I can use it in my dart file. Am able to get other functions in this file to work but whenever I call the function that's supposed to make the speech recognition for web work it doesn't work and I get some error message in the console.
Here is the code in the app.js file:
let container = document.createElement('div');
let paragraph = document.createElement('p');
container.appendChild(paragraph);
document.body.appendChild(container);
window.SpeechRecognition = webkitSpeechRecognition || window.SpeechRecognition;
const synth = window.speechSynthesis;
recognition = new SpeechRecognition();
recognition.interimResults = true;
function speak(action) {
const utterThis = new SpeechSynthesisUtterance(action);
synth.speak(utterThis);
};
function dictate() {
recognition.start();
recognition.onresult = (event) => {
console.log(event);
const speechToText = event.results[0][0].transcript;
console.log(speechToText);
paragraph.textContent = speechToText;
if (event.results[0].isFinal) {
paragraph = document.createElement('p');
container.appendChild(paragraph);
speak('You are welcomed');
}
};
};
window.logger = (flutter_value) => {
console.log({ js_context: this, flutter_value });
}
In my main.dart file I used the import 'dart:js' as js; so that I can call the function like this
void _incrementCounter() {
setState(() {
js.context
.callMethod('dictate');
});
}
When I call other function like this it works fine but when I call the dictate function it doesn't work and I get this message in the console:
404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
js_primitives.dart:32 ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
js_primitives.dart:32 The following DomException object was thrown while handling a gesture:
js_primitives.dart:32 InvalidStateError: Failed to execute 'start' on 'SpeechRecognition': recognition has already
js_primitives.dart:32 started.
js_primitives.dart:32
js_primitives.dart:32 When the exception was thrown, this was the stack:
js_primitives.dart:32 app.js 28:17 dictate
js_primitives.dart:32 package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/lib/js/dart2js/js_dart2js.dart 258:53 callMethod
js_primitives.dart:32 package:flutter_js/main.dart 50:12 <fn>
js_primitives.dart:32 package:flutter/src/widgets/framework.dart 1148:30 setState
js_primitives.dart:32 package:flutter_js/main.dart 48:5 [_incrementCounter]
js_primitives.dart:32 package:flutter/src/material/ink_well.dart 706:14 [_handleTap]
js_primitives.dart:32 package:flutter/src/material/ink_well.dart 789:36 <fn>
js_primitives.dart:32 package:flutter/src/gestures/recognizer.dart 182:24 invokeCallback
js_primitives.dart:32 package:flutter/src/gestures/tap.dart 486:47 handleTapUp
js_primitives.dart:32 package:flutter/src/gestures/tap.dart 264:5 [_checkUp]
js_primitives.dart:32 package:flutter/src/gestures/tap.dart 236:7 acceptGesture
js_primitives.dart:32 package:flutter/src/gestures/arena.dart 156:12 sweep
js_primitives.dart:32 package:flutter/src/gestures/binding.dart 222:20 handleEvent
js_primitives.dart:32 package:flutter/src/gestures/binding.dart 198:14 dispatchEvent
js_primitives.dart:32 package:flutter/src/gestures/binding.dart 156:7 [_handlePointerEvent]
js_primitives.dart:32 package:flutter/src/gestures/binding.dart 102:7 [_flushPointerEventQueue]
js_primitives.dart:32 package:flutter/src/gestures/binding.dart 86:32 [_handlePointerDataPacket]
js_primitives.dart:32 package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/pointer_binding.dart 83:15 [_onPointerData]
js_primitives.dart:32 package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/pointer_binding.dart 334:7 <fn>
js_primitives.dart:32 package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/pointer_binding.dart 183:16
Is there something am getting wrong or what alternatives do I have to get the speech recognition working for the flutter web. Thanks in advance!
Whatever this question asked for (2 years ago), it is not true now.
I just added speech-to-text functionality to my app, using speech_to_text package and it works in Chrome without any special efforts.