Web Speech API - Speech Synthesis has delay on chrome and firefox - javascript

maybe some of you experienced the same:
When using Speech Synthesis via Javascript via:
const utterance = new SpeechSynthesisUtterance(text);
utterance.addEventListener('start', () => {
console.log("Starting speak!");
});
window.speechSynthesis.speak(utterance);
"Starting speak" is triggered like 1-4 seconds before voice is really speaking.
It's working fine on safari on macOS but not on firefox neither chrome.

Related

navigator.mediaDevices.getUserMedia API rejecting with error "NotReadableError: Concurrent mic process limit."

During an active media flow(voice) navigator.mediaDevices.getUserMedia works fine when connected to internal mic, as soon as I switch to Bluetooth device and rerun the same API to fetch the latest media stream, I get the error "NotReadableError: Concurrent mic process limit."
I browsed throw many forums, as suggested by many that this error generally occurs in Firefox, Mac OS when multi tabs are trying to access mic or/and camera.
I made sure that only single tab is opened in Firefox browser, still see the same error.
Any leads on this shall be appreciated.
Below is the code snippet
constraints = {
"audio": {"deviceId": deviceId },
"video": false
}
let temp;
navigator.mediaDevices.getUserMedia(constraints).then(function(stream){
temp = stream;
}).catch(function(err) {
console.log(err.name + ": " + err.message);
});
Return below error message
NotReadableError: Concurrent mic process limit.
NOTES: Works fine in Chrome and Edge
Browser : Firefox 70.0.1 (64-bit)
OS : MacOS Mojave
NotReadableError: Concurrent mic process limit.
This means you cannot open more than one microphone at a time, per process, in Firefox right now. This limitation is a known bug that Mozilla is working on fixing.
In practice, this means you cannot open more than one microphone from your site (same-origin tabs typically share the same process). Make sure to call track.stop() when you're done with a mic.
Comes up during device switching
Few sites actually need to use two mics at once. But sites still run into this bug when switching from one microphone to another, because they generally open the new microphone before closing the old one.
Workaround
Call track.stop() on your existing microphone track, before attempting to obtain a track from a different microphone.
This strategy is similar to mobile where only one camera can be opened at once. The best approach is a fallback strategy: only stop the old track if necessary (that way there's no impact on other browsers):
async function getUserMedia(constraints, oldTrack) {
try {
return await navigator.mediaDevices.getUserMedia(constraints);
} catch (e) {
if (e.name != "NotReadableError") throw e;
oldTrack.stop();
return await navigator.mediaDevices.getUserMedia(constraints);
}
}
Done all that, but still get the same mic as before
When switching devices, use deviceId: {exact: deviceId}. I.e.
const constraints = {
audio: {deviceId: {exact: deviceId}},
};
This tells the browser you want this specific device or failure, and avoids a recent regression in Firefox.
While fallbacks to other devices are normally good, they're not when the user is trying to pick a specific device.

Azure Bot Framework with Cognitive Speech not working

I'm following this link where we can use the Speech recognition in the bot framework.
The default code is working with Option 2,
// // Option 2: Native browser speech (not supported by all browsers, no speech recognition priming support)
//
// Note that Chrome automatically blocks speech if the HTML file is loaded from disk. You can run a server locally
// or launch Chrome (close all the existing Chrome browsers) with the following option:
// chrome.exe --allow-file-access-from-files <sampleHtmlFile>
//
const speechOptions = {
speechRecognizer: new BotChat.Speech.BrowserSpeechRecognizer(),
speechSynthesizer: new BotChat.Speech.BrowserSpeechSynthesizer()
};
But when I tried to use cognitive services it's not working, meaning the mic is not going to listening mode.
This is the change I made,
// // Option 3: Cognitive Services speech recognition using API key (cross browser, speech priming support)
const speechOptions = {
speechRecognizer: new CognitiveServices.SpeechRecognizer({ subscriptionKey: 'YOUR_COGNITIVE_SPEECH_API_KEY' }),
speechSynthesizer: new CognitiveServices.SpeechSynthesizer({
gender: CognitiveServices.SynthesisGender.Female,
subscriptionKey: 'YOUR_COGNITIVE_SPEECH_API_KEY',
voiceName: 'Microsoft Server Speech Text to Speech Voice (en-US, JessaRUS)'
})
};
Apart from the commenting and uncommenting i didn't do any thing. But still the code is working only with Option 2
Pls help me solve this
After some deep digging from my colleague, we found the issue.
The original code is using the javascript from https://cdn.botframework.com/botframework-webchat/latest/CognitiveServices.js
<div id="BotChatGoesHere"></div>
<!-- If you do not want to use Cognitive Services library, comment out the following line -->
<script src="https://cdn.botframework.com/botframework-webchat/latest/CognitiveServices.js"></script>
If we open that JS file, you can find a line like below where it's using bing speech url
Storage.Local.GetOrAdd("Host","wss://speech.platform.bing.com")}
Since bing speech is depricted we have to update this line into our own subsciption
Storage.Local.GetOrAdd("Host","wss://<region>.stt.speech.microsoft.com")}
Once we updated it's working fine now

Simple Speech Synthesis js crashes Chrome to Aw Snap screen

I'm using a simple implementation of the Web Speech API, specifically Speech Synthesis.
It crashes chrome after saying the speech.
The page is being hosted in Google Drive.
Why does it crash chrome to the Aw Snap page? And how can I prevent / stop it?
Here is the URL: https://googledrive.com/host/0BwJVaMrY8QdcT0pIdGRmcjB5NkE/index.html
Here is the javascript:
function speak(whatToSay){
if('speechSynthesis' in window){
var speech = new SpeechSynthesisUtterance(whatToSay);
window.speechSynthesis.speak(speech);
}
}
speak('Hello, World!');
I'm having the same issue, so have reported the bug using the url you posted.
You can track it here: https://code.google.com/p/chromium/issues/detail?id=360370

WebSocket supported in Android Stock Browser or not?

using https://github.com/einaros/ws
Server:
var WebSocketServer=require('ws').Server,wss=new WebSocketServer({port:8004});
wss.on('connection',function(s) {
s.on('message',function(_){console.log('received: '+_);});
});
Client:
var s=new WebSocket('ws://mysite.com:8004');
//android default browser dies here <---------------?
s.onopen=function(){
$('body').css({'background':'green'});
s.send('hi');
};
I have to ask why android default browser does not open the connection?
I visit www.websocket.org/echo.html on the default android browser and it says This browser supports websocket. so what is the problem?
This simple code works on iphone safari, windows chrome, android mobile chrome no problem.
On android default browser I can also console.dir(window.WebSocket); and it shows the WebSocket Object no differently than other browsers.
If someone knows why, please tell.
Thanks
UPDATE
if (!window.WebSocket && window.MozWebSocket) {
window.WebSocket = window.MozWebSocket;
alert('MozWebSocket');
}
else if (!window.WebSocket) {
alert("WebSocket not supported by this browser");
}
else{
alert('wtf!? '+window.WebSocket);
}
This gives me a console log of:
wtf!? function WebSocket(){[native code]}
The Android stock browser does not, in fact, support WebSocket.
Some work was apparently done in preparation for adding support, so the API in the browser is there, i.e. you can create a WebSocket object. It's just that this doesn't actually do anything behind the scenes.
This results in a simple feature support check, which just attempts to create the socket object, showing WebSocket support. Check the readyState for a created WebSocket object instead, and you'll see that this never changes from "0".
Starting with Android 4.4, there is no stock browser anymore. The Web view component has been switched to Chrome for Android - and this does support WebSocket.

Synthesize speech from text in web app

How can one synthesize speech in a web app?
Is there a way using the HTML5 Web Speech API?
For example, if I wanted to synthesize the sentence 'A quick brown fox jumps over the lazy dog', how could I do that without playing a pre-recorded file of someone reading exactly that sentence
As it is right now, the SpeechSynthesis features which are part of the Web Speech API Specification have not been implemented in any browser yet.
However, you can have a look at this Chrome extension.
EDIT:
It seems that the lastest Chrome Canary build might include the feature, however it only specifies that the feature has been started (http://www.chromestatus.com/features) and I was unable to find any more substantive information about it.
EDIT2:
As mentionned in the comments by #cdf, it seems that you can now play around with that feature by launching chrome with the --enable-speech-synthesis flag. Please see this post.
EDIT3:
This appears to be in Webkit now, but not on iOS at the moment. Not even in Chrome on iOS. Demo #BrandonAaskov
That code works both on Chrome and on Safari (taken from my app ttsreader):
if (!('speechSynthesis' in window)) {
// Synthesis not supported.
alert('Speech Synthesis is not supported by your browser. Switch to Chrome or Safari');
}
var msg = new SpeechSynthesisUtterance('hello world');
msg.volume = 1; // 0 to 1
msg.rate = 0.9; // 0.1 to 10
msg.pitch = 1; //0 to 2
msg.lang = "en-GB";
msg.text = "I will speak this out";
speechSynthesis.speak(msg);

Categories

Resources