I have been attempting to use the SpeechRecognition API(https://wicg.github.io/speech-api/#examples-recognition) in a recent project.
I am currently using the browser Microsoft edge and according to https://caniuse.com/#feat=speech-recognition it is only partially supported on there.
From the looks of it, it seems that the "text to speech" feature is supported (SpeechSynthesis) on Edge but not the Speech Recognition feature. As no matter what prefix I use for the SpeechRecognition (Speech to text) API in EDGE it always does not recognise it and says it "is not defined"
Anyone have any clarity on this situation, or know how to get the Speech Recognition to work with edge in JavaScript?
Cheers
UPDATE: As of 1/18/2022 the Speech Recognition part of the JavaScript Web Speech API seems to be working in Edge Chromium. Microsoft seems to be experimenting with it in Edge. It is automatically adding punctuation and there seems to be no way to disable auto punctuation. I'm not sure about all the languages it supports. But it seems to be working so far in English, Spanish, German, French, Chinese Simplified and Japanese. I'm leaving the information below for history.
As of 6/4/2020 Edge Chromium does not really support the Speech Recognition part of the Web Speech API. Microsoft seems to be working on it for Edge Chromium. It will probably never work for Edge Legacy (non-Chromium).
developer.microsoft.com says incorrectly that it is "Supported" but also says, "Working draft or equivalent". (UPDATE: As of 2/18/2021 it now says: "NOT SUPPORTED")
developer.mozilla.org compatibility table also incorrectly says that it is supported in Edge.
caniuse correctly shows that it is not supported in Edge Chromium even though it acts like it is but the proper events are not fired.
The only other browsers besides Chrome and Chromium that I have seen the Speech Recognition part of the Web Speech API work with is Brave and Yandex. Yandex probably connects to a server in Russia to process the speech recognition. It does not do a good job. At least in English. At the moment Brave is returning a "Network" error. According to this github Brave discussion Brave would have to pay Google in order to get the speech to text service.
Here is some quick code that can be used to test if Speech Recognition works in a browser and display all the errors and events in the body. It only works with https protocol. It does not seem to work with codepen or jsfiddle.
var msg = document.body;
var cr = "<br />";
var event_list = ["onaudioend", "onaudiostart", "onend", "onerror", "onnomatch", "onresult", "onsoundend", "onsoundstart", "onspeechend", "onspeechstart", "onstart"];
var sr = window.SpeechRecognition || window.webkitSpeechRecognition || false;
if (sr) {
var recognition = new sr();
event_list.forEach(function(e) {
recognition[e] = function() {
console.log(event);
var txt = event.type + ": ";
if (event.results) txt += event.results[0][0].transcript;
if (event.error) txt += event.error; // "not-allowed" usually is because of not using secure https protocol
if (event.type == "end")
recognition.start(); // Start Recognition again
msg.innerHTML += txt + cr;
};
});
recognition.start();
}
else {
msg.innerHTML += "This browser does not support SpeechRecognition or webkitSpeechRecognition." + cr;
}
Related
So I have an Electron app that uses the web speech API (SpeechRecognition) to take the user's voice, however, it's not working. The code:
if ("webkitSpeechRecognition" in window) {
let SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
let recognition = new SpeechRecognition();
recognition.onstart = () => {
console.log("We are listening. Try speaking into the microphone.");
};
recognition.onspeechend = () => {
recognition.stop();
};
recognition.onresult = (event) => {
let transcript = event.results[0][0].transcript;
console.log(transcript);
};
recognition.start();
} else {
alert("Browser not supported.")
}
It says We are listening... in the console, but no matter what you say, it doesn't give an output. On the other hand, running the exact same thing in Google Chrome works and whatever I say gets console logged out with the console.log(transcript); part. I did some more research and it turns out that Google has recently stopped support for the Web Speech API in shell-based Chromium windows (Tmk, everything that is not Google Chrome or MS Edge), so that seems to be the reason it is not working on my Electron app.
See: electron-speech library's end Artyom.js issue another stackOverflow question regarding this
So is there any way I can get it to work in Electron?
I ended up doing an implementation that uses the media devices API to get the user's speech through their microphone and then sends it to a Python server using WebSockets which uses the audio stream with the SpeechRecognition pip package and returns the transcribed text to the client (Electron app).
This is what I implemented, it is way too long for a thing as simple as this, but if someone has a better suggestion, please do let me know by writing an answer.
I'm testing the native speech synthesizer in firefox, it works fine, only the pause () function fails, but in chrome, I have more errors, it only plays a short part of the text, only the first 200 characters, and it doesn't play everything else, I tried the library external meSpeak.js and if it plays everything but it takes a long time to load text of 1842 characters with which I did the test, I am using ubuntu system with chrome version 81.0.4044.92
url for testing https://mdn.github.io/web-speech-api/speak-easy-synthesis/
any solution for chrome ?? Thanks
I believe this is an issue with the speech synthesizer chosen. If you choose a local voice - one for which the audio can be generated simply by running in-browser / in-OS code on your local computer - then there should be no character limit, unless the voice you chose has such a limit, which doesn't seem likely
For example, on Windows, the two local voices I have are Microsoft David Desktop and Microsoft Zira Desktop. If I select these voices, the whole text gets played, regardless of length.
In contrast, other voices such as those from Google (eg Google US English) are not local; they may need to make a network request to parse the text into audio. Google's speech API seems to have a 200 character or so limit on how much text can be translated at once.
If the character limit is a problem, select a voice which is local, rather than one from Google.
Here's a snippet that'll list your available voices, as well as which are local or not:
const populateVoiceList = () => {
console.log('Logging available voices');
for (const voice of speechSynthesis.getVoices()) {
console.log(voice.name, 'local: ' + voice.localService);
}
};
populateVoiceList();
speechSynthesis.onvoiceschanged = populateVoiceList;
We are trying to build an parameterized entry webpage for our app in which about 50% of users will have our app installed, 50% not.
Originally, we had been using a specialized URL scheme that our app had registered; ie,
myapp://dothing?specialParameters=5
However, we have difficulty detecting cases where users either don't have our app installed, or have an earlier version of our app that doesn't support URL schemes. In Chrome, or the Android Browser, the user is navigated to a browser-generated Error page since it couldn't locate the server.
In iOS Safari, and Android Firefox, we can resolve this through the use of a setTimeout before navigation;
function timeoutFn() {
var timeout = setTimeout(function() {
window.location = //iOS Appstore location;
}, 1000);
window.addEventListener("pagehide", function(evt) {
clearTimeout(timeout);
});
window.location = "myApp://dothing?specialParameters=5";
}
My solution for Chrome/Android Browser is to use Google's recommended system of Intents, described here:
https://developers.google.com/chrome/mobile/docs/intents
I've tested this out, and it actually seems to work well - however, Firefox does not know how to handle links beginning with "intent://". We can still use the above JavaScript function for Firefox, but I'm very reluctant to start writing user-agent-sniffing code for it, especially since I'd think it likely any other web browsers on Android will similarly lack Intent support.
So, back to the title question: Chrome, and the Android browser, are capable of opening apps through "intent://" links - is there any way, using JavaScript or similar methods, to use feature detection to find this support?
This is what we are currently using, however, it's far from ideal ...
function isItentsSupported() {
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (isChrome) {
var version = parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10);
return version >= 25;
} else {
return false;
}
}
Chrome version number based on Google documentation
I'm recently trying some awesome features of HTML5 and WebRTC, and am building a site to allow multiple people video chat.
Everything works just fine on my PC and the Media Capture of HTML5 works like a charm. But when I set up a video source on my PC, and try to connect to it via my android/iphone/ipad, it just did not work. I checked the logs, it suggests that the creation of RTCIceCandidate failed for some unknown reason:
// To be processed as either Client or Server
case "CANDIDATE":
trace("************important*********", "we get in");
var candidate = new RTCIceCandidate({candidate: msg.candidate});
trace("************important*********", JSON.stringify(candidate));
break;
turns out the second log never shows up.
Anyone has any idea? Is is because such features are not available on mobile devices for now? Or should I do something specially for mobile devices?
oh and this is the callback of IceCandidatem which is never called:
// This function sends candidates to the remote peer, via the node server
var onIceCandidate = function(event) {
if (event.candidate) {
trace("openChannel","Sending ICE candidate to remote peer : " + event.candidate.candidate);
var msgCANDIDATE = {};
msgCANDIDATE.msg_type = 'CANDIDATE';
msgCANDIDATE.candidate = event.candidate.candidate;
msgCANDIDATE.peer = server;
msgCANDIDATE.me = weAreActingAs;
//trace("openChannel","candidate peer : " + JSON.stringify(event));
socket.send(JSON.stringify(msgCANDIDATE));
} else {
trace("onIceCandidate","End of candidates");
}
}
The server is in nodejs.
Thanks so much guys! Need your hands!
You should be able to test device support here: http://www.simpl.info/getusermedia/
I'm no expert on webrtc but according to the following site there should be supported for IOS and Android: http://updates.html5rocks.com/2012/12/WebRTC-hits-Firefox-Android-and-iOS but you'll need to use the ericsson browser
In one of the comments it does say that ericsson browser uses the depreciated ROAP signaling and can't be used in peer communication with (for example) Chrome. One comment states that blackbarry native browser now supports getUserMedia so maybe Android and iOS will follow. No native support at the moment though. And ericsson browser implementation seems to be based on depreciated standards.
IE10 has some wonderful enhancements in the HTML5 compliance area but remains a bear to develop JavaScript HTML5 when running on the WP8 as there is no way to debug the app except console messages.
Is there a remote debugging experience available for IE10 running on WP8 like the WebKit phone browsers have(see my video at http://www.youtube.com/watch?v=GNAjzFpNEj4 for example). When this is in place with a USB cable to desktop Safari debugging Javascript apps on IOS is easy as breakpoints can be set and variables examined in the remote debugger . I am hoping the same capabilities are in IE10 and would appreciate any information on where to enable these very much needed capabilities.
The bad news, that there is no new debug capabilities in comparison to WP7/IE9. Please take a look on How do I debug Internet Explorer on Windows Phone 7? since we are in exactly the same situation on WP8.
What I personally use on daily basis
Debug your app in IE10 Desktop as much as possible
Weinre remote debugger. Demo video. You can use the following app based on Weinre to simplify its usage (no local setup needed) - IeMobileDebugger src or link to Store
Supports
Html traversing
Html node styles, properties, metrics
Reading console output
Executing js on device side from console (including intellisense)
Dynamic script injection - ability to debug live sites
Not supported
js breakpoints
For javascript line by line debugging use aardwolf. Demo with VS integration.
To redirect console trace to Visual Studio output and be able to use console.log("some message") for tracing
index.html:
<script type="text/javascript">
window.console = {
log: function (str) { window.external.Notify(str); }
};
// output errors to console log
window.onerror = function (e) {
console.log("window.onerror ::" + JSON.stringify(e));
};
console.log("Installed console !");
</script>
MainPage.xaml.cs
private void Browser_Loaded(object sender, RoutedEventArgs e)
{
Browser.IsScriptEnabled = true;
// Add your URL here
Browser.Navigate(new Uri(MainUri, UriKind.Relative));
Browser.ScriptNotify += (s, arg) =>
{
Debug.WriteLine(arg.Value);
};
}
FWIW: Windows Phone 8.1 finally supports remote debugging. See http://blogs.msdn.com/b/visualstudioalm/archive/2014/04/04/diagnosing-mobile-website-issues-on-windows-phone-8-1-with-visual-studio.aspx
While not a full solution, Lauri Piispanen's consolelog.js, a nodejs-based remote JS console logger could help you.